Scott Berkun writes about discoverability — what parts of the user interface should be discoverable and why. Once you have chosen what needs to be discoverable, he lists four ways to draw attention:
- Real estate: You get a certain amount of pixels to use however you want. Larger targets are likely to be located first, and easier to be found again. Big targets are easier targets.
- Order: You can place things in specific orders, from left to right, and top to bottom, that might form patterns people can learn to follow, depending on their language (some are left to right, some are right to left, etc.).
- Form: You can use color, font, shape, shadow, composition, and other graphic design constructions to help make use of the real estate you have.
- Expectation & Flow: Depending on how you use the above, you can put things into forms or patterns that are in some way familiar to people. The most obvious examples are printed newspapers, and how columns, line breaks, and headings are used. This might be achieved by emulating another design from another website, or from something in the real world.
- Consistency: If you use the screen in consistent ways, you can teach people to look for certain kinds of commands in certain places. By being predictable, you can score some extra discoverability points. This can often be assisted by using available conventions, and trying to make use of knowledge your users already have.
It’s always interesting to read a good summary of ui design principles and in general I agree with this essay. I would like to add a couple of points to the list above.
- animated transition: sometimes things are less important in one stage of the user experience and become more important later. An option in a list might become a headline. A dominant image may later be represented as a thumbnail or an icon. By showing an animated transition, the user can be led to understand the meaning of an icon, how to get back to where they came from, or where to go next.
- motion: some things are important for a moment in time. A meeting is scheduled, an e-mail has arrived, or the user has changed some data that has an effect on another part of the display. Humans have evolved to be very good at noticing motion. Most commonly, desktop apps have used a blinking icon. Recently I’ve seen bobbing icons, as in Mac OS X’s task bar and the subtotal panel on Laszlo’s auction site demo.
If you have a little time and high bandwidth, you can check out a video of the Laszlo auction demo, which demonstrates the use of animated transitions as well as the little bobbing motion about 3 minutes into it.
I read Scott’s article thanks to a post from Usable Digital Media.
