Ever walked down a great pyramid? Of course you have.
Back in the good old days, content generally flowed down the website pyramid from the homepage (at the apex) to first-level pages (a few steps down the pyramid), to second-level pages (a few more steps down the pyramid) and so on.
Meanwhile, the more motley and forgotten bits of content like ‘site help’ and ‘terms and conditions’ sulked silently at the bottom of the pyramid – you never visited them, but you knew where they were.
Back then, life was simple(r), sites were static, content was generally ‘controlled’ by the developer and/or client and project documentation (more) closely mirrored the final product.
But with the advent of Web 2.0 and RIAs (rich internet applications), ie, sites that move and dynamically build content in front of you based on your needs, it became harder (and almost impossible) to statically define what we were trying to build.
This left us (as web designers) with a problem – how could you possibly document something that’s so amorphous, fluid and has so many combinations?
Well, the simple is answer is you can’t. The half-answer is that you can try by using ‘patterns’.
While patterns can’t define a total user experience, they can accurately describe what I would call ‘snapshots of interactivity’ or ‘interactive instances’.
In short, patterns are just ‘common design solutions to common user problems’.
Problems might be things like:
• The user needs to find an item in the main navigation.
• The user needs to select an item out of a set of items.
• The user needs direct access to sub-navigation but the amount of screen room for navigation is limited.
And their respective solutions (patterns) are called:
• Navigation trees
• Carousels
• Fly-out menus
The names above may sound horribly obtuse if you’re not actually working in this industry, but the main point to remember is: many people have likely grappled with the navigation and usability issue(s) that you face in the creation of your site or application.
So don’t be overwhelmed by the exponential combinations of content and functionality that Web 2.0 affords.
Instead, use patterns to define the key pieces of interactivity in your documentation.
Remember: there’s no such thing as a perfect prototype (hence the term). Any information design or interaction design document is merely a blueprint for design and development. Don’t fall in love with it – it’s not going to be a long-term relationship.
It’s a lot better to have more time for testing and refining an actual working website, game or application than spending too long hand-wringing over prototypes.
Check out these resources for more information and ‘pattern libraries’ – they’re great references for anyone grappling with how to design and build a graphical user interface:
Common UI patterns
The Yahoo! Design Pattern Library
Current navigation trends and examples