Visually referencing web-page elements

Think of instructions for setting up something on the computer, like an internet connection or an eBay account.

There are a number of different ways these instructions could be presented. You can have a fully textual description, giving the person instructions on where to go and what to do.

An improvement on this is to include pictures so people can more easily see what they should be looking at.

Even better is to explicitly, visually reference elements of the pictures from the description. So, for example, if there are a number of things a person needs to change on a dialog, visually highlighting each of these items on the picture and number them, so they can be referenced from the text. Or draw an arrow from the text to the item.

What would be even better is if the instructions could directly guide you through the process, and bring up the actual dialogs, rather than showing pictures of them, and highlight the actual items on that dialog. A sophisticated system could detect your state of progress and automatically open up the next dialog/page/etc - as a kind of worlflow.

Essentially, this is about being direct - showing rather than telling. You don’t have to see the instructions in one context and then switch to a different context to the actual web-page/program and then implement what they say. That context-switching requires you to reorient yourself and map what you saw in that description into what you’re seeing in the actual thing.

To do this on the web, you’d need the following sorts of things. A way of directly referencing elements within pages, such as input fields. Ways of visually highlighting these, such as putting a red drop-shadowed border around them. And a way to draw an arrow between a bit of text or an image and one of these items.

---

I recently saw this post on the 37Signals blog Signal vs. Noise, on the idea of showing things as directly as possible - referencing a page element with a visual annotation. I can't say it was actually the inspiration for the ideas in this post, but it reminded me to write about it.

The post is about how they used direct visual reference on a particular page - or rather, the design process that led them to do this. Rather than describing how you could use the links in the link bar at the top of the page to populate a blank site, and saying what those links were, they just drew a bit arrow to those links saying "Use these links to fill your page".