Clickable Wireframes

The following example is what I would consider a high-fidelity wireframe. I have used Flash to create a clickable wireframe for an imaginary project called Couchpotatoes. It is a community where couchpotatoes can find other couchpotatoes! Here, I have planned: layout, primary/secondary/tertiary information (position will affect this, also use of colours which I have shown with shades of grey), mouse interactions.

You can see view a bigger version in a new window here.

I have found wireframes are very useful for:
1) planning content;
2) planning organization of ALL content;
3) planning rough layout of content;

Clickable wireframes are even more useful when:
4) planning user-flow (are you guiding the user in the right way? When you have large website with many pages or social network, which bits of information do you want to present when?);
5) testing information architecture/site-map (e.g. it is one step beyond a site map, how are the pages connected – do they make sense?)
6) defining highly detailed user-interaction designs (ESPECIALLY when you have many ajax features);
7) analyzing usability, intuitiveness of mouse interactions (hover, one-click, double-click, drag, etc).

Wireframes should not include – detailed graphical/visual design.
Graphical designs always distract viewers (even the wireframe designer!) from the layout, content, user-interaction details. Using shades of grey is a good option to convey what should attract the eye first and also to influence how the eye moves around the page.

Which tools should you use to create wireframes?
There are many types of wireframes – low/high-fidelity: sketched in pencil, paper-prototypes, tools where you drag standard web elements, etc. Everyone has their own recommendations and of course you may have to conform to your team’s/company’s standard tool, and it depends on what you wish to use the wireframe for. I used Flash here because I’m quite comfortable with it and also because I think I can produce the mouse interactions to a high level of detail. Some people may argue it takes a long time do to do this, however – it will probably save time in the long run when the development team deals with front-end user interactions – if you want to do it well, there is a LOT of detail to cover and also keep same design standards across a large scale website.