Wireframe Checklist

Last month I gave the uninitiated a crash-course on wireframes.   In the comments to that post, a former colleague, Kevin Lloyd, said that he was going to use the post as a kind of checklist for reviewing wireframes.  Before that comment it hadn't occurred to me to create a checklist and apply it systematically, but in one of those 'no-duh' moments it struck me that it's something I should have been doing all along.

Really? A checklist?

Really.  A checklist.  It's not going to solve all of your problems. You're still going to have to work and you're still going to miss things from time to time, but adding a degree of consistency to the review process will help you identify gaps and breakdowns in a design more quickly. 

Any good checklist is going to provide you with a comprehensive, if not exhaustive, list of points to address.  This list isn't going to do anything without us, and it can't identify all problems with a design, but by using a checklist you can ensure that you're going to at least think about every major point every time we review a wireframe.

Wireframes are complicated beasts in that they relate information about a number of the more abstract facets of web/software design.  Issues like navigation and way finding will often take advantage of the same design elements on a screen, but you can have one without the other.  Good design is all about gestalt, how the parts come together to form the whole, but if we don't narrow our inspection to one thing at a time it is easy to become overwhelmed.  By using a checklist we get a framework for "reading" the wireframes that helps us address each of the critical conceptual facets, one at a time, in relatively discrete chunks.

The Checklist

• Navigation - How a user moves around the site
  • Primary - Top level sections
  • Secondary - Subsections in the current section
  • Alternate routes - Different ways of getting around (most sites should have at least one)
  • Login/account access/log off (if relevant)
• Flow - How a user gets to the next thing they want to do
  • Primary action
  • Next suggested action
  • Alternative next action
• Orientation and Way finding - How a user knows where they are
  • Page Title
  • Primary/Secondary Navigation State
  • Spatial Context
  • Information Hierarchy
  • Clear branding
  • Clear primary content
  • Immediate recognition of central message
  • Clear secondary content
  • Clear connection between primary/secondary content
• Interaction - How the system invites and responds to user actions
  • Interactive component state
  • Success, Info, and Error messaging
• Layout - How content is arranged on the page
  • Realistic sizing
  • Breathing room
  • Graphic/text balance
• Behavior - How the system acts and makes decisions
  • Search result ranking algorithms (random, popular, etc.)
  • Destination of each link
  • Asynchronous calls/updates
• Content - What the user will see on the page
  • Content summary for each page
  • Specific language for
    • Feedback messages
    • Headlines
    • Primary Navigation Labels

How do I use it?

This checklist can be used at two points in the process.  For designers, before you start sketching, review the checklist and make sure you know how you're going to address each point in your wireframe.  For those reviewing wireframes, use this checklist to make sure all of all of the points are adequately addressed.  Think of this check-list as a launchpad for the design or review process.  It will help you cover bases up front and ensure your UX design speaks to the most important facets of information architecture and interface design.