Ghost in the Pixel

From IHT:

There’s a name for this: user interface design, or UI for short. Its goal is to ensure that all of us can use digital devices simply and intuitively, regardless of how techno- savvy we are. As we’re spending more and more time with digital products, UI is becoming one of the most important areas of design, but it’s also one of the trickiest to judge.

http://www.iht.com/articles/2007/02/25/features/DESIGN26.php?page=1

This posting is meant to serve as a practical follow-up to the more reflective, academic article I recently published on boxesandarrows about designing for a rich user experience.

This is a “crib sheet” summarizes the main points of that article, with links to resources to help the dedicated UI designer who strives to craft a richer quality of engagement with digital media (web, mobile, desktop apps). Of course, richness transcends the digital, towards immersive games, environments, and performances; yet this set of tips is focused on pixel-based encounters for brevity. More later on non-digital rich encounters…

High-Level Issues

+ Re-perceive the design as a talk or presentation to an audience, persuading them this product is best for meeting their goals, as demonstrated in the navigation, functionality, content, and style.

+ Consider how to enhance that communication at the level of structure, behavior, and/or style by using a) good visual and interaction design and b) emerging technologies like Flash, CSS, AJAX, etc.

+ Make sure such enhancements improve the user’s efficiency, confidence, desire or other stated goals and not for the sake of technical hype or coolness.

Detail Design Tips

+ Use in-place editing of labels, names, and other data, whether inside a form or table grid

+ Present immediate feedback and error validation with in-place visual cues, rather than a dialog box or separately loaded page

+ Use desktop-inspired interactions like drag-and-drop, floating palettes, keyboarding shortcuts, as the web and desktop become blurred

+ Use collapsible panels and panes of information; through usability ascertain the default states

+ Apply visual embellishments to emphasize key pieces of information and functionality, like tabs or buttons or messages, or to add stylistic flair inmoderation

+ Remember to sustain the underlying grid layout and visual balance of elements

References
+ Designing Visual Interfaces by Mullet/Sano
+ Designing Interfaces by Jenifer Tidwell
+ Tufte’s books, particularly Envisioning Information
+ About Face 2.0 by Alan Cooper
+ Designing for Interactionby Dan Saffer
+ Thoughts on Interaction Design by Jon Kolko

Simply saying “it doesn’t feel right” isn’t sufficient feedback when reviewing a design with a manager or prototyper or engineer (much less so for other peer designers). It’s just a recipe for communication breakdown, with misinterpretation and ambiguity creating problems of what was really meant.

Gotta be specific–is it the spacing, the layout, the color, the type, the behavior, etc. Get it down to the specific design signals/variables that is the source of the problem or difficulty–then a productive conversation and more importantly, action, can follow that helps everyone get on the same page and towards resolution.

Else, team breakdowns can result, all over a simple misunderstanding that causes people to try to fix other things that cause breakages to occur in the design, etc.