First do no harm
While tests show that users generally don't use site's custom
navigation elements (relying instead upon the browser's back
button), a well-designed navigation scheme does impact significantly on
a site's usability, particularly for frequent visitors to your site.
|
EX LIBRIS CANDY REVIEW
|
|
Locators & Links
Last time we thought about the Candy Review site, we had approved a layout for the site's pages and even began building the front door page in HTML.
Now it's time to test whether the navigation scheme we had in mind is truly workable by building the site into a functional prototype and performing an informal usability audit.
|
|
Navigational elements can function in two ways — very often
simultaneously — as links and locators. The less
obvious function of the two — "locator" — is perhaps
the more important.
A user may always use their browser's back button to navigate back
through your site, ignoring the navigational elements as "links,"
but navigational elements that also map the progress across or down through
the site's architecture are much more prominent as "locators."
A straightforward and clear use of navigational elements
can locate users who arrive at your site somewhere other than
your front page. Without any navigational elements, users who
have come to your site this way may not know that the page they're
viewing is part of a larger architecture or series of pages
and are likely to use the back
button to go back to where they came from. Worse still, inconsistently
implemented navigational elements can confuse your users.
Always Be Consistent
On the Web, you're designing access and links are your points
of access — think carefully about how you treat links and
linking.
While you might put a great deal of effort into how your links
or icons look, from the standpoint of navigation, consistency
in appearance is one thing, consistency in behavior is another.
If green (or upper left hand corner or circle or rollover or
whatever combination of appearance, location, and behavior)
means "link" on your site make
sure that you never subvert that — that means don't make a link
another color than green, but that also means don't use green
if it's not a link. Similarly, if links are always to the left of the
content and titles at the top — don't mix and match.
While internal consistency is important, being consistent with
Web-wide standards is doubly so. Jakob Nielsen, the best known Web usability specialist, has formulated a "Law of Web User Experience":
Users spend most of their time on other sites — anything that is a convention and used on the majority of other sites will be burned into the user's brain and you can only deviate from it on pain of major usability problems.
Consider for instance underlined text —
have you ever tried to click on underlined text on a Web site
only to find that it's not a link? Or, have you ever been to a
site where links aren't underlined and you weren't immediately
aware of what was clickable? Over the years, it's been a
Web-wide convention that linked
text is underlined, therefore underlined text means a link and
text without underlining may not immediately be recognized as links.
It is certainly possible to design a usable Web site that breaks
Web-wide convention, but it is important to weigh any break from convention
against the goals, audience, usage scenarios, et al you outlined in your site plan.
Designing your site for your audience with your goals will likely present its own unique usability issues and, in an ideal world, you'd be able to assess your site's usability by conducting a usability study. In the real world, only the biggest Web sites with the biggest budgets actually conduct formal usability studies. You can capitalize on the research and findings of others, including Nielsen who writes a bi-weekly column offering findings on and recommendations for improving Web usability.
Top Tens
Top Ten Mistakes in Web Design
- Using Frames
- Gratuitous Use of Bleeding-Edge Technology
- Scrolling Text, Marquees, and Constantly Running Animations
- Complex URLs
- Orphan Pages
- Long Scrolling Pages
- Lack of Navigation Support
- Non-Standard Link Colors
- Outdated Information
- Overly Long Download Times
— Jakob Nielsen, May 1996
The Top Ten New Mistakes of Web Design
- Breaking or Slowing Down the Back Button
- Opening New Browser Windows
- Non-Standard Use of GUI Widgets
- Lack of Biographies
- Lack of Archives
- Moving Pages to New URLs
- Headlines That Make No Sense Out of Context
- Jumping at the Latest Internet Buzzword
- Slow Server Response Times
- Anything That Looks Like Advertising
— Jakob Nielsen, May 30, 1999
Ten Good Deeds in Web Design
- Place your name and logo on every page and make the logo a link to the home page (except on the home page itself, where the logo should not be a link: never have a link that points right back to the current page).
- Provide search if the site has more than 100 pages.
- Write straightforward and simple headlines and page titles that clearly explain what the page is about and that will make sense when read out-of-context in a search engine results listing.
- Structure the page to facilitate scanning and help users ignore large chunks of the page in a single glance: for example, use grouping and subheadings to break a long list into several smaller units.
- Instead of cramming everything about a product or topic into a single, infinite page, use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic. The goal is to allow users to avoid wasting time on those subtopics that don't concern them.
- Use product photos, but avoid cluttered and bloated product family pages with lots of photos. Instead have a small photo on each of the individual product pages and link the photo to one or more bigger ones that show as much detail as users need. This varies depending on type of product. Some products may even need zoomable or rotatable photos, but reserve all such advanced features for the secondary pages. The primary product page must be fast and should be limited to a thumbnail shot.
- Use relevance-enhanced image reduction when preparing small photos and images: instead of simply resizing the original image to a tiny and unreadable thumbnail, zoom in on the most relevant detail and use a combination of cropping and resizing.
- Use link titles to provide users with a preview of where each link will take them, before they have clicked on it.
- Ensure that all important pages are accessible for users with disabilities, especially blind users.
- Do the same as everybody else: if most big websites do something in a certain way, then follow along since users will expect things to work the same on your site. Remember Jakob's Law of the Web User Experience: users spend most of their time on other sites, so that's where they form their expectations for how the Web works.
— Jakob Nielsen, October 3, 1999
