StrikeAwe

User Interface and Information Graphic Design

Posted Aug. 8, 2008 by Gabriel Hurley

I just wrapped up reading a fantastic paper (nearly 50 pages) on the problems of User Interface Design, particularly the problems inherent in conveying information graphically. Magic Ink: Information Software and the Graphical Interface, the entire piece is available here: http://worrydream.com/MagicInk/

I decided, for my own benefit in remembering, to write out a summary of what I felt were key points and I thought others might find them interesting or useful as well. The article offers its own summary at the end, and I encourage reading the whole thing if you're interested because it's much more in-depth and has lots of great examples and graphics, but for everyone else:

• UI design is a problem of graphic design foremost. For an informational website it is not about interactivity, it is about conveying the information a user needs as effectively as possible and with as little interaction as possible.
• The information the user needs isn't what you think it is. Ask yourself, why does someone really want this information? For example, in my contact management app, the point is not to store information, it's to quickly see connections between contacts. Design your UI to support that.
• Take notice of the width of an eyespan in a vertical column.
• Offering related information to help users clarify the often nebulous ideas in their heads is extremely valuable. Shaping ideas and opinions can obviously be used for good or evil.
• Limit information presented to the user to what is relevant in the context. If more information is necessary, allow the user to move to another context.
• Sources of context:
• • Environment (date, time, location, physical information like weather which can be inferred from the first three, local information based on location data)
  • User input
  • Direction to landing pages from specific links
  • HTTP Referrer (find out if they came from a search and what they searched for)
• In an informational site, navigation is an impediment to the goal of the site: conveying information and making the user think about it. Navigation should be designed to be minimally intrusive, and as obvious as possible.
• Navigation should be minimized--limited to only the necessary changes in context that help prevent the user getting lost or confused.
• If possible, try to infer what people are looking for without them having to tell you anything, supply any input, or navigate your site in any way.
• Try avoiding interactivity. Do not create hidden mechanisms behind the scenes when you don't need to. Hidden mechanisms require people to understand something about how your site works. Making them mentally model your site in order to understand it gets in the way of them actually taking information away from it.
• The more navigation there is the more opportunities there are for someone to "get stuck" somewhere.
• • Navigation implies the site is in a particular state, and that state can change or be manipulated. "Stateful things can be broken."
• Consider an online shop:
• • They can have dropdown menus to narrow down options, or they can have visual representations of things like color, style, etc. and sliders for price range, size, etc.
• Designing in a way that predicts an initial starting point for the user based on context and history and then allows the user to correct or refine that prediction is far more user-friendly than making the user construct an entirely new context and state every time they visit the site or use the software.
• Allowing user configuration should be done in a way where the user corrects information presented in-place, rather than having to instruct the software.
• • This type of system, designed to present configuration in concise sentences, allows for extensibility and very understandable language even in very complex cases. Written sentences are over 5000 years old. All the bugs have been worked out.
• Avoid any type of "hidden mode" which acts by mysterious means or is not immediately apparent to the user.

And a pair of excellent quotes:

• "Twenty-five years from now, no one will be clicking on drop-down menus, but everyone will still be pointing at maps and correcting each others' sentences. It's fundamental. Good information software reflects how humans, not computers, deal with information."
• "The emerging "interactive web" embraces a ludicrously mixed metaphor of machines on pages, a monstrous hybrid of virtual mechanical affordances printed on virtual paper. Information is trapped behind interactive mechanisms and presented in static layouts-it is the worst of both worlds."