Killing Bad Layout Conventions

Andy Rutledge exposes the flaws of an established design conventions—the 3 column layout. The layout is typically identified by a wide center column with 2 flanking narrow sidebar, and it can be found on some of the largest and most popular sites, including Amazon.com and Apple.com. Rutledge points out the limitations and inefficiencies of this layout:

  • Symmetry is usually detrimental to content hierarchy
  • Symmetry diminishes viewer interest
  • Having 2 sidebars, one on either side, defeats the purpose of sidebar content
  • It requires that site visitors first learn (and perhaps relearn from page to page) where to look for a particular sort of ancillary information or links
  • Often results in far too much ancillary information on the page
  • The particular sort of visual noise generated by the 2 bracketing sidebars diminishes, rather than enhances, user/reader focus on the main content

Rutledge challenges designers to really think about their given problems and design for them; to challenge what has become conventional. The point is clear for any project. Context helps to give shape to solutions. Solutions should emerge by directly addressing the context of the problem, the nature of information use relative to the problem, and the information seeking behaviors of users relative to that problem. If contexts such as these are the focus of design discussions, rather than finding conventions or technologies to implement as a solution, we will be less likely to churn out cookie cutter projects, but will serve user needs more effectively.

http://www.andyrutledge.com/bad-layout-conventions.php

Crowdsourcing The Library of Congress

The Library of Congress has maded 2 of its collections of historical photographs available on Flickr. The goal is to get users to tag and comment on the photos, as well as help provide identifying information.

It's very interesting to see such a large and old institution embracing open social collaboration like this. When I was in school, the idea of user supplied freetagging was pretty seen as an edge-case activity even for things like private databases. This openness and the use of a site as simple flickr for the task of implies that crowdsourcing on the web is really beginning to become an accepted mainstream activity. Exciting stuff. I applaud the willingness of the LOC to experiment with social software.

More info is available at the Library of Congress website.

http://www.loc.gov/rr/print/flickr_pilot.html

Innovate or Die Winner, The Aquaduct

The winners of Specialized's Innovate or Die Pedal-Powered Machine competition have been selected. The Aquaduct Mobile Filtration Vehicle was invented by five students from California: Adam Mac, Brian Mason, John Lai, Paul Silberschatz, and Eleanor Morgan.

The Aquaduct transports, filters, and stores water for the developing world. A peristaltic pump attached to the pedal crank draws water from a large tank, through a carbon filter, to a smaller clean tank. The clean tank is removable and closed for contamination-free home storage and use. A clutch engages and disengages the drive belt from the pedal crank, enabling the rider to filter the water while traveling or while stationary.

This movie gave me the chills, thinking about how design can be used to improve living conditions, and in this case, truly revolutionize how peoples basic needs are met. Simply brilliant and inspiring.

http://www.innovate-or-die.com/

Shneiderman's Eight Golden Rules of Interface Design

Ben Shneiderman's Eight Golden Rules of Interface Design are user interface design rules described in Designing the User Interface: Strategies for Effective Human-Computer Interaction. Shneiderman proposed this collection of principles that are derived heuristically from experience and applicable in most interactive systems after being properly refined, extended, and interpreted.

To improve the usability of an application it is important to have a well designed interface and these "Eight Golden Rules of Interface Design" are claimed to be a guide to good interaction design.

Strive for consistency
Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout.
Enable frequent users to use shortcuts
As the frequency of use increases, so do the user's desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations, function keys, hidden commands, and macro facilities are very helpful to an expert user.
Offer informative feedback
For every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.
Design dialog to yield closure
Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions.
Offer simple error handling
As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple, comprehensible mechanisms for handling the error.
Permit easy reversal of actions
This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions.
Support internal locus of control
Experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions. Design the system to make users the initiators of actions rather than the responders.
Reduce short-term memory load
The limitation of human information processing in short-term memory requires that displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions.

Wikipedia contributors, "Shneiderman's rules for design," Wikipedia, The Free Encyclopedia, http://en.wikipedia.org/w/index.php?title=Plagiarism&oldid=5139350 (accessed January 17, 2008).

http://www.amazon.com/gp/product/0321197860?ie=UTF8&tag=urlgreyhot-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0321197860

Design Pattern Libraries and UI Guidelines

If you’re looking for conventional, reliable, and tested user interface patterns for common interface problems, look no further.

Pattern Libraries

  1. Welie Interaction Design Pattern Library
  2. Yahoo! Design Pattern Library
  3. UI Patterns
  4. Peter Morville’s Search Patterns Collection on Flickr
  5. The Design Of Sites Book
  6. See also: Tom Erickson’s Interaction Design Patterns page which provides a listing of further design pattern resources.

User Interface Guidelines

  1. Apple Human Interface Guidelines
  2. Usability.gov Research-Based Web Design and Usability Guidelines
  3. Windows Vista UX Guidelines

23 Actionable Lessons from Eye-Tracking Studies

Christina Laun summarizes the top lessons to take away from eyetracking studies.

  1. Text attracts attention before graphics.
  2. Initial eye movement focuses on the upper left corner of the page.
  3. Users initially look at the top left and upper portion of the page before moving down and to the right.
  4. Readers ignore banners.
  5. Fancy formatting and fonts are ignored.
  6. Show numbers as numerals.
  7. Type size influences viewing behavior.
  8. Users only look at a sub headline if it interests them.
  9. People generally scan lower portions of the page.
  10. Shorter paragraphs perform better than long ones.
  11. One-column formats perform better in eye-fixation than multi-column formats.
  12. Ads in the top and left portions of a page will receive the most eye fixation.
  13. Ads placed next to the best content are seen more often.
  14. Text ads were viewed mostly intently of all types tested.
  15. Bigger images get more attention.
  16. Clean, clear faces in images attract more eye fixation.
  17. Headings draw the eye.
  18. Users spend a lot of time looking at buttons and menus.
  19. Lists hold reader attention longer.
  20. Large blocks of text are avoided.
  21. Formatting can draw attention.
  22. White space is good.
  23. Navigation tools work better when placed at the top of the page.

Read the full article on the Virtual Hosting Blog, where you'll find descriptions of each of these points.

How Direct Marketing and User Experience Are the Same

Usability blogger, John S. Rhodes writes in Apogee that Direct Marketing and UX are the same, or at least share common goals and methodologies. This quote sums up these parallel ways of thinking and working:

There is a serious emphasis on testing and measurement. Metrics are the law. Success is based on tangible results: number of phone calls, number of and type of brochures requested, number of email address captured, number of comments made, number of web page views and so on.

In this way, usability and UX share commonality with direct marketing. We've known for years that we cannot take action on behalf of users without first having data. Educated opinions are useful, e.g., heuristic analysis, but nothing is as powerful and useful as data from research in the lab or the wild.

I would wholeheartedly agree that we could share lessons learned between these 2 fields. In the past year I stumbled on and have taken an interest in direct marketing, mostly due to finding Dan Kennedy serendipitously and reading a book of his. I held the same belief when reading a Kennedy book--we're interested in the same things, with different needs or problems in mind. I'll be keeping an eye out for more on this theme and am sure to blog what I find here.

A Notebook...

This is a notebook where things are copied, pasted, or dashed off. It's a place to stuff notes, drawings, and grabbed screenshots. Consider it an inbox, unfiled.