Visual Usability of a New Website

Working out the interaction design for a task is one part common sense and one part logic when it comes to figuring out the widgets to use and the flow to arrange them in. The rest is all visual design. The very placement, grouping, relative arrangement, and design of your interactive components can go a long way toward making a task flow nicely or stop in its tracks.

This form example lacks visual design and organization, which makes it harder to follow.
This form example lacks visual design and organization, which makes it harder to follow.
This example has a better design organization, slightly better visual design, and helper text that
This example has a better design organization, slightly better visual design, and helper text that make this form much easier to use.

Giving rollover feedback

One sure way to let people know that things are interactive is to make them change their appearance or trigger some action when the cursor comes into contact with them. When the cursor comes into contact with something onscreen, it’s called a rollover. A number of things can occur when the mouse pointer rolls over an interactive component. If the element has a link, the cursor itself changes from an arrow to a pointing finger. That’s a simple, built-in way to provide visual feedback so you can let people know that an element is interactive. However, you can provide additional feedback upon rollover — feedback that can even coach someone in how to use the navigation. Here are some ways to do that:

  • Change the appearance of the graphic.

    Often designers don’t bother with providing a clicked state. Remember, each state is a unique graphic that you have to produce — and that the browser has to load.

  • Expand or animate the element.

    A rollover changes appearance when a user rolls over or clicks it.
    A rollover changes appearance when a user rolls over or clicks it.

Designing website buttons that look clickable

If you simply rely on rollover feedback (say, the cursor changing into a hand-with-pointing-finger upon rollover), you’re making the user scrub the cursor all over the screen looking for interactive stuff. Therefore it’s important to make interactive elements look clickable to begin with.

In general, you can make graphical interface elements look more clickable in one of three ways:

  • Label buttons with action phrases. It’s a design best practice to put short, to-the-point labels on buttons and lead the user with no-nonsense action verbs such as Print or View map. Passive labels like Virtual tour or nebulous marketing-speak labels like Magical journey are less effective.

  • Add dimension. Make button elements physically stand out on the page by giving them a three-dimensional quality.

Taking clues from everyday life

The visual design and texture of your interactive components help people know how to interact with them. Objects that you interact with on a daily basis, such as buttons, drawers, and dials, are great inspirations for the design of interactive elements on your web page. People are already well trained to use these everyday objects; everybody knows how to push buttons, pull drawer handles, and turn dials.

Take a look at both the dial interface and the drawer scheme on Apple’s QuickTime player. Figuring out how to use these little widgets to control the volume and access a menu of options is easy. For the volume, you click and drag the dial to turn the audio up or down. For the drawer of options, you grab the handle-like area and drag downward.

image3.jpg

Grouping and nesting elements on a website

The relative location and clustering of interactive components is as strong a clue to their interactive nature as any other visual treatment. For example, just grouping a series of similar-looking interface elements together in one graphical unit can give them a clickable appearance — even if the individual graphics themselves don’t look clickable.

If you group and contain a series of plain text elements that have the same font treatment, you create a strong graphical element that stands out from the other things on the page and imply interactivity. Seeing like-designed elements together in a group accomplishes two things:

  • A group implies interactivity. A set of text or graphical elements grouped together creates one visual unit that draws people’s attention.

  • A group implies a similar function. By visually associating a set of links, you imply that they all perform similar functions and have the same relative priority in the site.

You can also imply a relationship within grouped items by nesting certain elements under others.

Put simple text links inside a container to set it apart from the page design and imply interactivi
Put simple text links inside a container to set it apart from the page design and imply interactivity.
By nesting elements under others, you can imply a hierarchical relationship between them.
By nesting elements under others, you can imply a hierarchical relationship between them.

Providing “You are here” feedback

When users browse through sites, they like to have a sense of where they are in the scheme of things and, if they are working through tasks, how long before they will be done. To help answer these questions, your interface can provide “you are here” feedback as follows:

  • Highlight selected navigation options. When a user clicks a navigation item, even if they selected something within a drop-down menu, it’s best to keep that section highlighted to let them know which section they are in.

  • Show progress. If someone is working through a multistep task, it’s a good idea to show a progress meter letting them know where they are and how much more they need to do.

    This website places its global navigation vertically down the left side, but it’s still clear
    Credit: © Kawasaki Motors Corp., U.S.A.
    This website places its global navigation vertically down the left side, but it’s still clear to see which section you’re in.
    Numbered steps help the user keep track of where they are in a process. [Credit: © Evite]
    Credit: © Evite
    Numbered steps help the user keep track of where they are in a process.
blog comments powered by Disqus
Advertisement

Inside Dummies.com