mishrelic

Things that matters!

UIEtips: 7 Critical Considerations for Designing Effective Applications, Part II November 28, 2007

Filed under: Gallimaufry — mishrelic @ 4:05 am

By Jared M. Spool

Originally published: Nov 27, 2007

(Editor’s note: In Part I, Jared talked about the first three considerations: designing for satisfactory detail, designing recognition and appropriate feedback, and designing for the user’s previous experiences. You can read part I here.)

Design for Flexibility
Things don’t always go as planned. We hope our users will get things
right the first time through, but it doesn’t always work that way.

Sometimes it’s not that the user has made a mistake, but that they
just didn’t get the result they wanted. Our traveler wanted to check
out different flights, so she needed a way to broaden the search.

Designs have to be flexible. Users want a way to experiment. Over at
Kayak.com, the criteria for the flight are all in the left margin.
Want to limit the selection to flights arriving before 6pm? Two
clicks and it’s done. Want to see only non-stop flights? One click
and there you are.

We’ve discovered users rarely hit the back button unless they have a
reason to go to a previous point. Designers can eliminate that
desire to go back by giving users control mechanisms on the current
screen. At a minimum, a prominent ‘undo’ function allows the
application to reset itself without the ugly browser error messages.

Flexibility shows itself in other ways, too. In one design
iteration, Amazon experimented with Ajax pop-ups when the user
hovered over a book title. The pop-ups, which gave users more
information about the book, popped up almost instantly as the user
waved their mouse.

Unfortunately, making the pop-up disappear was more difficult.
Amazon only supplied a very tiny Close Window control on the opposite
end of the window. The control was both hard to find and hard to hit.

Designing for flexibility means giving users an easy way to reverse
what they’ve done, whether that’s changing the parameters of a
product search or closing a window they’ve opened.

after entering our account name (and filling in 10 other fields on the same form), did the site inform us the account name must containa minimum of nine characters.

There was no hint of this before we submitted the form. The designers felt the need to keep the length requirement a secret from the users.

Design Defensively

Imagine asking a store clerk about a pair of tan slacks in your size
and hearing this response:

“I’m sorry, but the item you specified is not available. Please try
again, selecting a different size or color.”

After two or three repetitions, you’d probably pull back and slug
them.

Yet, sites do this all the time. They tell us we’ve neglected to
include a number in our password or we’ve added an extra space in
our credit card number. They inform us we’ve left a mandatory field
blank or created a configuration that can’t be fulfilled due to
conflicting requirements.

At a recent visit to Cisco.com, we were asked to create an account
so we could peruse the products in the company store. (Don’t get us
started why we needed an account just to look at the products!) Only
after entering our account name (and filling in 10 other fields on
the same form), did the site inform us the account name must contain
a minimum of nine characters.

There was no hint of this before we submitted the form. The
designers felt the need to keep the length requirement a secret from
the users.

Contrast this with Blinksale.com, a site to help sole proprietors and small businesses with their invoicing. As you type in a potential Blinksale ID, an Ajax-produced message tells you immediately if the ID has the right number of letters and is available for your use.

The Blinksale designers have designed defensively, preventing the error from happening in the first place. We recommend teams go through all the error messages in their system and ask, “How could we create a design that eliminates the necessity to issue each message?”
Design for Minimalism
Just because you can design a widget doesn’t mean you should design that widget. Over at WatchThisNext.com, the DVD recommendation service has movie viewers specify their feelings about a given movie by dragging the movie’s image into one of three boxes: Loved It, Haven’t Seen It, or Loathed It. Once the user starts dragging movies to the appropriate boxes, the site starts recommending new movies for the viewer.

All this dragging and dropping takes time, energy, and a certain amount of coordination. It turns out it’s completely unnecessary. The designers at Netflix provide the same functionality, without the mouse flailing. A simple method of clicking on one of five stars or pressing a lozenge marked “Not interested” indicates the same information without the thrashing about.