Hello there!

Thanks for stopping by. I'm Tom Critchlow a strategy consultant in Brooklyn, NY.

Shoot me a note on twitter: @tomcritchlow

Scroll right for latest posts:
Tom Critchlow

Exploring the UX of web-annotations

Looking at Hypothesis, Genius and Google Docs

February 12, 2019

In my post experiments in networked writing I explored some ideas about how to put the network back in networked writing. In particular, I have a theory that the comments are actually the interesting unit of the blog, not the post.

The idea that blogs exist within the network is crucial to understanding the medium (the medium is the message - could one say the blogosphere is the blog?).

This has been bubbling in my mind for a long time with no satisfactory way forward but it came up again because of the Augmenting Human Intellect project which is going on right now. It looks like a lot of fun and is very interesting - it’s basically a crowd-swarm of in-line commenting on Douglas Engelbart’s famous paper Augmenting Human Intellect.

You can read the background on the project here.

And you can see the paper and annotations live here.

Great! Except… it all runs on top of Hypothesis. I know very little about them but it really seems like they’re trying very hard to build a robust, long-term utility for the web which is awesome. Except their UI leaves a lot to be desired. Especially on mobile.

So it felt like a good time to take a quick peek at a few common design patterns and think about some ways forward.

Hypothesis

The Hypothesis annotation layer is typically displayed by default. You can see some common mobile screens here:

And you can play around with it yourself on this demo page I set up.

Some observations:

Genius

Genius is basically “the other” annotation layer for the web and is sometimes even used by “real” newsrooms. Likely because of the polished UI. Some common mobile screens:

And you can play around with it yourself on this demo page I set up.

Some observations:

Google Docs

While Google docs certainly doesn’t feel very web-native and in some ways is pretty web-hostile they have a very robust workflow around commenting. I’d venture to say their commenting UX is best in class. I use it all day every day, on mobile and desktop. Some screens:

Obviously, they have a lot of advantage by being a native app but some observations:

Ultimately, I’m betting on Hypothesis as the winner - I’d love to see them become more widely used. From what I can see their business is better structured to be a long-term stable and sustainable part of the open web. Hopefully they can adopt some of the UX patterns from Genius and Gdocs to make things smoother!

Twitter as the annotation layer for the web

There’s one “what if…” though.

Quartz has been dabbling in annotations ever since they launched. This is a screenshot of in-line annotations from 2013:

They walked that back a while ago but after their acquisition recently they have a commenting flow for members that allows you to share any URL with an “annotation” that you can share via Twitter. It creates a commenting layer of sorts for the web. See it in action by clicking the link here:

Medium also has a similar Tweet-based annotation flow that looks like this. Highlighting text shows the in-line tweet CTA:

And a custom image is generated showing the highlighted text which makes the whole flow feel very polished:

So, what if Twitter built an annotation / commenting platform that provided some of the same functionality to create in-line annotations and comments all anchored around Twitter with the conversation weaving back and forth between publisher site’s content and Twitter stream.

Seems like a long shot but it’s fun to dream. Still feels like Hypothesis is going to win here eventually. I’m rooting for them!

What am I missing about annotations for the web? I’m sure there’s a rich history here that I’m missing…

Update: I just installed hypothesis by default on this page too to test out some new UI and to expose by default some commentary that’s happening there too.

Update 2: The current hypothesis installed on this page is the gist below. Strongly considering putting it across all my blog posts. Provides the hypothesis functionality with a cleaner UX and hidden by default:

Update 3: Fascinating discussion around a new “link to specific word” web-spec here: https://news.ycombinator.com/item?id=19168442 (the usual disclaimers about HN being a garbage fire hold)

Update 4: Interesting usage of annotations as a way to make certain audiences feel included: https://twitter.com/frankshyong/status/1097986781503516672

Update 5: I realize now that I forgot to explain in this essay why annotations are important and interesting. To fall in love with marginalia and notes-on-texts check out Austin Kleon’s reading with a pencil post


⇜ PREVIOUS
This blog is written by Tom Critchlow, an independent strategy consultant living and working in Brooklyn, NY. If you like what you read please leave a comment below in disqus or sign up for my Tinyletter.