Tag: user interface

The first occurrence of the issue is probably documented here: https://github.com/hypothesis/vision/issues/123, by the head of the company.

I suspect it may take a while before such a color feature might be built in, if ever. (Here I’ll note that I don’t work for or speak for the company or any of the other open source developers on the project, but I am one what one would consider a “heavy user”.) If they have the time (I know they’re very busy), perhaps they may chime in with a potential roadmap or other ideas.

Color highlights are a difficult user interface problem

While I’m thinking about it, in an academic context for students, colors may be slightly better indicators of different users’ annotations of a particular text as a means of differentiating one annotator from another more subtly, particularly on texts that are extensively marked up.

Just this difference points out what a mixed bag of functionality colored highlights brings from a usability, design, and user interface perspective. While colored highlights is a seemingly “simple” sounding feature in the analog world where a single document is only annotated by one user, mapping it into a digital shared context is a difficult engineering problem to navigate and solve for. What if your color meanings aren’t the same as those of another?, for example.

While colors can be useful for individuals, do they have the same place in a social annotation product?

I already find it difficult to annotate heavily annotated pages that all use the same color, much less a rainbow of others’ colors. (If this is also you, I’ll note that there’s a handy “eye” icon in the annotation drawer that will allow you to turn them on/off.)

Potential Color Highlight Hacks

While the value of colors may be useful in some contexts, you could potentially use a few other features, functionality, and methods to creatively achieve a similar feature in Hypothes.is for yourself today. Below are a few potential creative “hacks” that some might try.

Use the tagging functionality

You could use the tagging system to create specific tags to stand in for your desired colors: As an example, in some systems I might use the following color designators:

• Yellow—general highlights and highlights which don’t fit under another category below
• Orange—Vocabulary word; interesting and/or rare word
• Green—Reference to read
• Blue—Interesting Quote
• Gray—Typography Problem
• Red—Example to work through

Instead of colors in Hypothesis, for example, one could use the tags “words” or “vocabulary”, “reference” or “citation“, “typo“, “quotes“, or “examples” to stand in for these particular “colors” respectively. I sometimes practice some of these which you can find by clicking on the links, though you may note that in practice I use other tags for them.

In some sense, this is what the software would be doing, particularly with regard to search for these after-the-fact. If you wanted a list of all your “citations” for example, you’d have to search for the color for that and be able to find them all, presuming this search functionality existed with such a color feature. This isn’t really much different than simply tagging all those particular highlights with words like “citation” or “reference” in the first place.

Use the Group Functionality

You could created different “groups” (private or public) to stand in for the colors you wish you had, thus a “yellow group” could be used for one “color” of highlight and a “green group” for another. ( See Annotating with Groups for more details.)

Switching between groups for annotating isn’t going to be drastically different than a user interface for switching colors of highlighter. The one drawback (or perhaps it’s a feature?) here is that you will only be able to see one “color” at a time.

Roll your own solution with open source

As ever, with some work, you could self-host the open source software and modify your copy to add this functionality in for yourself.

Some clever hacks in your browser with CSS might also give you your preferred output. I know some users have done custom work to the Hypothes.is UI in the past: eg. https://tomcritchlow.com/2019/02/12/annotations/, see his gist at the bottom of the post.

Another custom solution which may give you ideas can also be found at https://web.hypothes.is/blog/do-it-yourself-anchoring-and-the-evolution-of-the-hypothesis-toolkit/.

Perhaps adding custom classes on the tags or usernames might allow people the ability to target highlights on a page so that one could define custom CSS rules for each highlight using either usernames of tags as well? Of course, just like the “eye icon” described above, I’m sure there are times that people will appreciate the ability to turn these colors on and off. I personally don’t want the clean interface dressed up in Josephs Amazing Technicolor Annotation Dreamcoat.

Other solutions and problems?

Are there ideas or potential solutions for color highlights I’ve missed? How about design problems that might be encountered in implementing color-coded highlights in the older single document/single user model being transferred to a multi-user space with infinite scale? Is color the best and most accessible solution? Are there better things that could be done with color in the product?

Feel free to comment below with your ideas or links to examples.

Interested in other Hypothes.is hacks, tips, and ideas? Try browsing my Hypothes.is archive.