Class 06

March 24, 2009 — Jamie

class 06 – assignment 4: image slicing assignment due, navigation, web critiques

This week we’ll talk about navigation– Navigation design is very important because all web sites need navigation, and if you can design successful navigation, your site will make for a good user-experience. Navigation design is one of the main distinctions between print and web design. Good web designers must know how to design successful navigational interfaces for the web.

So how do you start when thinking about designing a navigational system?

There are three basic questions a well-designed navigational system must answer.
Navigation should answer these questions:

1) Where am I? (Present)
2) Where else can I go? (Future)
3) Where have I been? (Past)

A good way to remember these 3 important questions is to think about the importance of answering where the user is in the  Present, Future, and Past.

Also of importance are the additional questions below:

What’s here?
How do I go forward?
How do I get back?

In addition to answering the basic questions outlined above, a well-designed navigational system must also serve the goals of the site. Examples of specific navigation challenges based on the goals of the site could be things like:

How do I place an order?
How do I search the site?
How do I contact customer service?
How do donate money to this organization?

The more versatile the navigation, the more successful it will be because it will serve a variety of users.

As a designer you must ask yourself:  What does the user who visits the site want?

Examples of what a user may want:
To find information
To publish something
To purchase something
To interact with someone
To read what someone else thinks about something

As a designer you must ask yourself:  What does owner (client)  of the site want? (And of course, you should ask a lot of questions so you understand what your client wants for the site.

Examples of what a client (site owner) may want:
To share information
To make money
To get feedback
To teach something

It’s important to explore these questions before starting to design the navigation for your site.

Navigation design “rules”
Helping the user do what they want

The following are general rules to follow when designing navigation in a web site. They are only rules, and as the saying goes, rules are made to be broken– just have a good reason to break them!

  • Consistency
      People are very habitual, and it’s therefore very important to keep navigational elements the same throughout a web site. This is generally referred to as “persistent navigation,” keeping your navigation consistent from page to page. Navigation located at the footer of a web page is common and can act as persistent navigation for a site.
      You want people to concentrate on your content, and they won’t if they have to figure out a different navigation system on every page. This is true for:

    • Placement on the page. Keep similar functions in the same place on the page. E.g. if you have a “home page” link on all your pages, put that link in the same place on every page.
    • Visual design. Use consistent names, icons, or other visual cues for navigation throughout the site. E.g. the icon for the “home page” link should be the same everywhere.

    • Note: Some people incorrectly create navigation systems that drop the current page link from the navigation bar. This may seem “efficient” since there is no reason to have a link to the page you are already on. But this approach violates the principle of consistency, since the links in the navigation bar would be in a different place on every page. It also violates the rule below for indicating the current page, because a better approach is to highlight the current page in the navigation bar (while making the link inactive).

  • 7 +/- 2 rule
    • In general, people have a hard time keeping track of more than 7 items (plus or minus 2) at a time. This means that 7 is a good number of  navigational links but you can have anywhere between 5-9 navigational links on a page, people may get confused or have a hard time understanding the navigation. On the other hand, you often want to provide more than 7 links, which leads to:
  • Group Navigation
    If you have a lot of links on a page, try organizing them into related sets of 7+-2. For example, a food site could group links to fruits, vegetables, herbs, fish, poultry, and red meats together, while grouping links to nutrition info, health tips, recipes, meal planning, and cutlery in a different location on the page. Some ways to group navigational elements are:

    • Proximity. Place similar navigational elements together on the page, separated from other groups.
    • Style. Give each group of navigational elements its own visual design.

Exercise
Below are 10 links for an auto site. How would you organize them for clear and useful navigation?

contact, cars, customer service, dealers, about us, trucks, jobs, investor info, financial services, suvs

  • Keep it simple
    Don’t make people work hard to get where they want to go. The harder it is, the less people will use the navigation. Some things to avoid:

    • Excessive scrolling. Don’t make users scroll all over the page to get to links. Keep in mind the typical size of your audience’s screen. If the user needs to scroll, make them scroll only in one direction–vertical or horizontal.
    • Excessive hierarchy. Keep the number of levels of hierarchy to a minimum. Try to make any page on the site available within 2 clicks at a maximum.
  • Where are we?

    • Always identify the name or function of the current page. This can be done by highlighting the navigation to indicate the current page. The name of the page should also be incorporated into the design layout. In a typical page, the user should be able to see where they are by the navigation bar and by a page heading.

    If the site is complex, it’s important to indicate where the current page is in relation to the rest of the site. If possible, combine your navigation with a visual layout so as to indicate the current location. This is called the trail of bread crumbs or breadcrumbing. E.g. you could have a navigation bar that shows the path to the page such as: “home>products>vacuum cleaners”, where both “home” and “products” are active links to their respective pages in the heirarchy. Not only does this indicate to the user where they are, but it allows them to skip to any level of the hierarchy, eliminating the need to see the intermediate pages.

    Next versus numbered pages. When the user can navigate to additional pages you generally  want to use numbered pages versus a “next” button. Or both as is often the case on such sites as the New York Times.

    Avoid “Hub and spokes.” When you can’t see the all the navigation or categories again without going back to the main page, this is often referred to as “Hub and spokes” The user must return to the “hub” to find other choices. As a designer you want to avoid this and develop a more consistent navigation scheme.

  • Multiple Navigation
    There is no single way that users will navigate through the site. People have different goals, search methodologies, attentiveness, previous knowledge, and ways of looking at the content of the site. Even gender can affect navigation.

    • Provide ways for people to traverse across the hierarchy to short-circuit the formal organization. For example, if there is a contact page on a site, it’s useful to have a link to it on every page. This way, the user can navigate across directly to the contact page, OR navigate up to home and then down to the contact page.
    • Sequential vs. directed. Think of users as if they are finding their way within the content. This way-finding sometimes involves users who want to be lead through the information, and this involves a sequential organization (e.g. start here, go here next). Other times, the user will be looking for specific content, and they need a logical and categorical system that enables them to find what they need. Try to provide navigation that satifies both, or provide multiple navigation systems
    • Search vs. grazing. Sometimes people will be searching for specific information, other times they will graze and meander on the site until the find something interesting. Your navigation should accommodate both techniques, and again, sometimes more than one navigation system is needed.
    • Draw people to the content with different techniques: pull quotes, side bars, contextual links, short summaries or outlines. Use links to turn these into alternate navigation systems.
  • Hide versus show sub-nav
    • Use sub-headings as part of the primary navigation
    • Rollovers or dropdown menus to reveal sub-navigation

    • Depending on the amount of content and number of sub-pages underneath the main sections of the web site, the navigation design should reveal the sub-navigation in some way.

Different types of navigational graphics and indicators
We’ll take a look at some of the graphics and indicators a designer can use to create navigation. Some of the options are:

HTML
CSS Rollover
Dropdown Menu
Breadcrumbing
Imagemap

Other Issues that impact the way you design navigation

  • Site goals: The goals of the site will greatly affect design of the site and the navigational system. An e-commerce site will have a different type of navigation than a site for a non-profit institution.
  • Information Architecture: You wouldn’t build a house without plans, you cannot build a website without them either. And until you have the plan (commonly referred to as the “sitemap”) you cannot begin designing your site. The sitemap functions as the “blueprint” for the structure of your site.
  • Design comps: Developing a “look and feel” requires creating a design comp for how your site is going to look. Creating the look and feel first will be important and will influence the design of your navigation.
  • Accessibility issues: Every website should have a plan on how to be accessible to as many people as possible. These accessibility issues with also impact the design of your site and your navigation.
  • Usability issues: After you have designed the navigation you’ll need to test it to see how successfully it meets the goals of the site and whether the site and the navigation what is commonly called “user friendly.”

Required Reading:
Where am I? http://www.alistapart.com/articles/whereami
Designing Web Graphics 4 by Lynda Weinman: Navigation

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Developing Visual Hierarchy

In order to begin the design of your site you’ll need to understand the goals of the site. The goals of the site will determine what parts of the site are most important. Visual hierarchy is  the need to make certain aspects of your site more prominent. Visual hierarchy can be established using color, shape, size, transparency, typography and composition.

Let’s take a look at several website to start thinking about the goals for a site and how this translates in the visual hierarchy.

Site Critiques

One of the best ways to learn more about web design is to look at as much web work as you possibly can. By analyzing other’s work you begin to understand more fully what makes a web site effective and well-designed. Different types of web sites have different goals. What make a good web site?

What makes a good site?

  • Information design – Goals, audience, requirements, and organization of content
  • Interaction design – Functionality, navigation, style of interaction
  • Media design – Visual layout, integration of text, audio, graphics, animation, video
  • Game design – Narrative, perspectives, paths, game play, goals, themes, characters
  • Business design – Economic and organizational benefits and operations
  • Technical design – Capabilities, integration, technologies, performance, security

General Sites to study:


Seven Criteria for discussion. These are the seven general criteria we will talk about in this class. It’s not enough to determine a web site “good” or “bad.” What is it about the site that makes it more effective or less effective? Below are seven different criteria to look at when you are evaluating the design of a web site.

  • Look & feel / Attitude of site
    Does the design or “look and feel” of the site represent the attitude of the company/client?
  • Use of color
    Does the use of color effectively communicate the attitude and “look and feel?” Using red and black for the color palette for a web site communicates something different than using a light blue and white color palette.
  • Composition / layout
    Does the layout of the site effectively accommodate the content? Is there room for text and images? Is the navigation in an easily accessible location?
  • Typography
    Is the type on the site readable? Is there a good mix of font size and font weight to communicate hierarchy for the content?
  • Content
    Is the content well-written? Is there HTML content on the site. (You want to avoid creating web pages where text is inserted as image files.)
  • User experience
    Is the site easy to navigate? Is it east to find content on the site?
  • Navigation
    Is the navigation well-organized. Is the navigation consistent from page to page?

Other Web sites to critique:

http://www.interbrand.com/
http://www.kleinfelder.com/
http://www.o2communications.com/index.html
http://www.design-works.com/

I would like you to take a look at all of the web sites below. The sites are Product Design sites so you should look at them as part of your research for your final project.

Design-related Web sites to critique:

  • Cooper Interaction Design
    Conceptual product design and user interface design. Breakthrough design from the initial concept to the details of the user interaction.
    www.cooper.com
  • Product Development and Management Association
    Cross-industry gathering of people interested in and devoted to the study and practice of product development.
    www.pdma.org
  • Continuum
    Strategy group focusing on design and engineering.
    www.dcontinuum.com
  • Speck Product Design
    Product design and development firm creating innovative solutions for the mobile electronics, consumer electronics, medical, and furniture industries.
    www.speckdesign.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Assignment:

Using the Seven Criteria for discussion outlined above, I’d like you to post comments for all four of the Design-related Web sites above. What makes it well-designed or what makes it less effective as a web site? Please post your comments to the Discussion > Web Critiques: Design Web sites section on the smconline.org site by noon on Tuesday, March 31.

copyright © 2006-2009, jamie cavanaugh

Advertisement
Posted in Uncategorized. Comments Off
«

»
Follow

Get every new post delivered to your Inbox.