How to annotate a website (without a screenshot and a red circle)

"Annotate a website" sounds technical. In practice it means: point at a thing on a page and say something about it. Humans have been doing this since cave walls.

Method 1: Screenshot and scribble

Take a screenshot, draw a red circle, type "this??", send it.

Good: everyone knows how. Bad: the screenshot is from one screen size, one moment in time, and one version. By the time it's read, the page has changed, the circle points at nothing, and "this??" has three possible meanings.

It's the fax machine of feedback. It works, and that's the nicest thing anyone says about it.

Method 2: A browser extension

There are extensions that let you highlight and sticky-note any web page.

Good: notes sit on the real page. Bad: everyone you want feedback from has to install the same extension. Getting a client to install a Chrome extension is a project in itself, with its own feedback round.

Good for personal research. Rough for anything involving other people.

Method 3: Share the page somewhere built for comments

Put the page on a review tool, send one link, and people click on the page to leave a comment right where they mean it. No installs, no accounts for reviewers.

This is what Kenso does. Upload an HTML file, a folder, paste code, or paste a link to a live page. Reviewers open it in their browser, click the button they hate, and say so. You see every comment on the spot it's about, and when you upload a new version, the comments come along.

What a good annotation looks like

Whatever tool you use, a comment people can act on has:

• A location. On the element itself, not "near the top."
• A problem, not just a feeling. "This text is hard to read on mobile" beats "hmm."
• A device or screen size, if it matters. Half of all "it's broken" comments are "it's broken on my phone."
• One thing per comment. A comment with six points gets one of them fixed.

We wrote more on that in how to give design feedback people can act on.

Annotating a live site vs. a work in progress

• Live site: paste the URL into a review tool that takes links. You'll annotate a snapshot, which is good, because the live site might change while you're still typing.
• Work in progress: upload the files. Nobody needs to deploy anything to get feedback on it.

Quick recap: screenshots are fine for one-off notes. For anything with more than one reviewer, put the page where people can comment directly on it.