Replied to a tweet by @Tania_UXDs (Twitter)
@BorisAnthony has some prior art: http://boris.libra.re/library/?i=color
Maybe this should be a session at the upcoming IndieWebCamp pop up on personal libraries

Annotation Colors Using Hypothes.is: Problems and Solutions

I frequently see the feature request from Hypothes.is users to have the tool add the ability to choose different colors for highlights.

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.

Mudstels: the new rage in car colors

A new category of colors perhaps? Cars for the last couple of years have been coming out with a muddy, grungy sort of color palette. In contrast to the more colorful, Easeter-y pastel colors, I’ve been calling this new palette of colors mudstels. They’re usually in shades of blue, green, grey, and tan. There are a few rusty oranges out there, but I’ve yet to see any red, purple, or yellows in the series.

One might call these new mudstel colors a tone, but instead of adding grey to the primary colors and variations thereof, it’s almost as if they’re mixing in a muddy brownish gray. They seem low value and medium chroma to me. Perhaps I should delve into some color theory to better categorize these?

In any case, I’m seeing a lot of them on the road over the past couple of years. Some seem reminiscent of the sorts of industrial colors one would have seen in public schools in the 1940s and 1950s on 20 gauge steel furnishings.

As I look at some of the websites being created for the EDU522 class, it’s exciting to see what people are creating and how they’re expressing themselves. As hinted at in the Who Am I module, I do think it may be useful for some to think about the readability and accessibility of their sites. Even simple things like the color of a background against text can make it unpleasant or difficult to read. For ideas on readability, I recommend Kevin Marks’ WIRED article How the Web Became Unreadable.1

Be creative and have fun, but remember the multiple audiences and communities who may not consume your content the same way you do.

References

1.
Marks K. How the Web Became Unreadable | Backchannel. WIRED. https://www.wired.com/2016/10/how-the-web-became-unreadable/. Published October 19, 2016. Accessed August 1, 2018.