As we begin to think about, sketch and specify multiple interface states, it quickly becomes apparent that error handling is one potential candidate which is rich in state complexity. Looking around for an example of how to document errors I found a very interesting sample of such an error wireframing technique. Minoru Uchida has agreed to showcase and share it here.

The technique is quite simple. Similarly as in the previously described In Page Events example, coloured lines are used to denote user actions. If however there is a conditional error, a red arrow is used to guide the reader to a new page section with the error message in red. The nice thing about this technique is that the page can be further divided horizontally and only a few elements which change are duplicated. The remaining elements such as the header and footer are shared across the full page.

Credits: Minoru Uchida & Mark Hines

Ben pointed me to an interesting set of HTML wireframes which use Polypage. Polypage expands HTML wireframes or mock-ups and allows for the creation of page states. Furthermore, the various states are independent of each other and can be toggled on a small top menu to affect the page view. Say for example you want to show your wireframes to your client in the “logged out” and “first time visit” states. Polypage allows you to click through all your wireframes to demonstrate such a case. Later on when you decide to demonstrate the “logged in” state, all you do is toggle it in the top menu and continue your presentation.

The technique was initially developed at Clearleft, and Richard Rutter explains how to use it better. Here are two more sets of wireframes using this technique which contain more page states to explore.

As a side note, here is also an interesting debate as to whether these things are wireframes or prototypes.

Credits: Ben Sauer

There is a fuzzy line between what constitutes a paper prototype and a wireframe sketch loaded with sticky notes. Although Danny originally tagged them as prototypes (which is perfectly valid in my opinion), I would like to expand the possibility that such design representations may have uses beyond paper prototyping. Instead, sticky paper can also be used in the conceptualization stage in which wireframe generation and sketching fall into. Could this then be called a stickyframe?

Stickyframing, or the idea of using sticky notes combined with sketching can bring great value for a design process. The strength of such a combination is the decreased effort for changes or modifications provided by stickies, while at the same time having the immediacy and flexibility of ideation that sketching allows. Sometimes during paper sketching we’ll draw out an interface element and then we’ll want to reposition it. At other times, we’ll want to redraw an element while the remaining interface parts are perfectly fine. In both of these situations, we’re often forced to redraw the whole page view as we generate more design knowledge. Stickies of course help combat such inefficiencies.

On the same note, an emergent thought comes to mind which further could extend stickyframes – digital photography. Just the same way as Danny Hope took pictures of the various page views and posted them on flickr, the same could be done in a design setting. Photography could not only allow for the various interface states to be frozen as a future reference. More so, photographing sticky wireframes could allow for a reuse of various elements (or their states) across different pages. It’s just a thought, as the fight for increased document agility continues on.

Credits: Danny Hope

Ben explains it best:

We do a fair but of multivariate testing work, where users get served different combinations of elements to see what works best.

The problem with wireframing this is that you can end up with a lot of repetition. Sure, you get a very impressive, thick wireframe doc – as you’ll have hundreds of wireframes each with small or large variations between them. But they tend not to get read :)

We use a small representation of page on the top left to help explain the type of page we’re describing. Then each element lives inside a call out, which then contains relevant information. This also makes updates much faster, as any element change can be applied to one page rather than 3 or 4.

Credits: Ben Still

Events such as mouse clicks, mouse overs, key presses, and focuses according to John Resig are the “glue which holds all user interaction”. Traditionally IA’s have documented these interactions with numbered annotations referenced on the side margin. However finding and reading such text based annotations can be a relatively slower process compared to the immediacy of contextualized visual symbols. Here I found a nice example on documenting an event within the page, which challenges the numbered annotation technique. Simply put, it’s just a red arrow within the page suggesting a cause and effect. Perhaps it’s not completely clear whether it is a mouse click or mouse over, but still it makes me wonder what if a new visual language emerged for more diverse in page interactions.
Credits: Vivi Zhang

When an interface element changes position or size over time during an animation, the path it takes can vary. Onion skinning can help indicate the various paths of an animation.

Credits: Michel Vuijlsteke

Often we need to represent interfaces which scroll and/or are masked. These interface elements only display a limited area at one time from within a larger one. Here is one idea on how to tackle this. In this example, the masked area has been isolated from the page view, with a boundary drawn around it. Elements which are outside of the boundary represent the invisible or masked elements at that particular time.
Credits: Juhan Sonin

Sometimes multiple elements change at once as a result of one user interaction. This is especially so during draggable interactions. Here is an interesting way of solving that visually by means of a matrix. On the left y axis all of the elements are listed, whereas on the top x axis the various state conditions are displayed.
Credits: Bill Scott