Wireframe checklist

June 19, 2011

In your sketches, wireframes, and (visual) designs, there may be one screen or complex multi-step interactions. Throughout the interaction use this check-list to verify your designs are good.

Did you…?

1. Manage user’s expectations

At every step of the interaction, on every screen, in the flow what assumptions are you making about what the user does/knows or has seen?

Don’t assume:
– the user reads      copywriting
– the user will notice visual elements    visual design
– the user will notice the new visual/UI element your popping up (inline), no matter how in-your-face it is       layout, contrast, line of fire
– the user soaks up the information on the page from top to bottom
– the user knows what to do (next)    call-to-action
– the user understands what you’ve written     avoid jargon
– the user will stick around     persuade
– the user knows the rules or what to do   explain/offer help

The user is focused at one task, when for example filling in a form he/she is in “input mode”. Berry picking and looking for that clue to complete his goal/task. Minimise interuptions and avoid distractions, unless there are designed well enough to guide the user  prevent the user from completing his goal.

Don’t:
– make the user feel cheated
– be vague or ambiguous

But do:
– build a good story, from top to bottom. Still expect the user to scan headers and images that look relevant
– guide and persuade the user
– be clear, transparent
– (give the big picture, reverse pyramid, explain the 1-2-3 process )
– include emotion in any product, show the benefit and experience

2. Cater for all personas and scenarios

Don’t forget the novices (complete beginners) and first-time users! Could your grandma use it (if she’s part of the target group) or the trickiest persona with the least web skills?
Be the user, role-play him. “How did I come here? Where am I now? What can I do here? Where can I go now? Does this intice/interest me or do I want to leave now?”

3. Replace lorem ipsum with real copy
Does stuff still make sense? Product names, prices, long German words.

Label the images, brainstorm what will be shown there concretely.

You usually don’t have to worry too much about the text length, but evaluate the visual design about things like min/average/max text length and word wrapping)

4. Worst-case design
What are the edge cases? What happens if there is zero content, very little or very much content or text? Things can go wrong on rainy days all kinds of rare exception scenarios exist, from the user or the system’s (zero results, time-out, back-end server down) point of view. What about the stress cases? If users don’t know anything about your product or are in a hurry, they still need to use the system quickly.

Other things to check

  • Minimise noise.
    Hide elements which are not relevant to most users. For example don’t place on the login screen long texts about the process to get retrieve a forgotten password. Instead hide it behind a link or help button.
    Progressively show (disclose) elements as soon as a user has indicated he wants to use that, but don’t create large unpleasant surprises. For example if a login and password field is present, and clicking on either will collapse open a new panel with 10 more fields to fill in, that’s a rather unpleasant surprise.
  • Communicate exceptions. Don’t require a click from the user when everything is ok. In general less clicks are better, but you have to find a good  signal-to-noise ratio.
States
  • Empty state
  •  Partial state
  •  Error state (Kan later, error popups)
  •  Full state
  • Loading state (kan later, gewoon loader)
  • Disabled state

Related checklist categories

Visual design

Navigation  (structure/organisation, labeling, IA order of items, layout)

Flow! – a wireframe is only as good as the quality of the flow it belongs to e.g. http://www.jcvtcs.com/-services/design-workflow.html

Content

Copywriting

Form and error handling+feedback

SEO

Compatibility  (non-functional requirements incl. mobile)

Accessibility

Performance

Fold

Resolution (fixed, elastic, fluid, liquid)

Advertising (more page views)

Similar articles
http://www.viget.com/advance/wireframe-checklist/
http://www.viget.com/advance/ux-101-the-wireframe1/
http://www.webdesignerdepot.com/2009/07/using-wireframes-to-streamline-your-development-process/
http://www.gracesmith.co.uk/get-wireframing-the-all-in-one-guide/

Heuristics  (=extended checklists)
http://www.stcsig.org/usability/resources/toolkit/toolkit.html

Related

http://www.jcvtcs.com/-services/design-attribute.html

Maybe
http://workflowfreelance.com/479720/wireframe-checklist.php   (with related articles  browser!)
http://www.scribd.com/doc/54315969/79/Creating-your-linked-wireframes#outer_page_76
http://www.princeton.edu/communications/services/docs/IAguide2.pdf

Short checklists

http://ixdchecklist.com/

 

TO DO: Reduce this list and sort in order of most common issue


Interaction design discussion forums

June 13, 2011

Get feedback, free expert opinion and answers to your UX related queries

Last updated: 2 Aug 2011

http://discussions.ixda.org/  TIP   (previous forum archived at http://www.ixda.org/discuss.php
http://ux.stackexchange.com/   (Dutch moderator) +
http://www.conceptfeedback.com  (get expert feedback on your designs/wireframes) – search what experts (elite members) say by Googling: <keyword terms here>” concept elite OR titan site:www.conceptfeedback.com   TIP
SIGIA-L Mailing List http://www.info-arch.org/lists/sigia-l/ OR @ http://mail.asis.org/mailman/private/
CHI-WEB http://listserv.acm.org/scripts/wa.exe?A0=CHI-WEB (seems quiet)
High five babble @ http://www.babblelist.com/ – more about web dev than des  (subscribed via Yahoo groups)
Ask Eric Q&A – http://www.humanfactors.com/downloads/askericanswers.asp
http://hfiuxcentral.ning.com/forum
http://groups.google.com/group/nl.internet.www.ontwerp/topics (Dutch)
http://stackoverflow.com/questions/tagged/usability (programmer oriented but great answer/voting system)
http://www.sitepoint.com/forums/accessibility-usability-191/
http://www.quora.com/Interaction-Design?q=Interaction+design   (frequented by Dan Saffer)
http://www.cre8asiteforums.com/forums/index.php   (focus on internet marketing, SEO and site planning, but also usability, persuasive design)

More sites @ http://iainstitute.org/ and http://www.uxpond.com/sites.html

Many more @ LinkedIn groups   TIP