10 Qualities of Successful Navigation

1
10 Qualities of Successful Navigation

• WEB 1301 - Week 2

2
10 Qualities of Successful Navigation

• Tools such as Dreamweaver and FrontPage
  facilitate the rapid development of websites,
  however they wont prevent poor design.
• To review, the core questions that must be
  answered at all times by an interface are
• Where Am I?
• Where Can I Go?
• How Will I Get There?
• How Can I Get Back to Where I Once Was?

3
1. Should Be Easily Learned

• If users have to expend energy learning a
  complicated interface, they wont have much left
  to go through your content.
• People will spend time dealing with the learning
  curve of software tools, but the same cannot be
  said about the web.
• Take the time to make your interface simple and
  obvious - you only get one chance to make a first
  impression.
• http//www.metadesign.com/main.htm

4
2. Should Remain Consistent

• Also called Persistent Navigation.
• The ability to predict where navigationals will
  be found is an important feature for Users who
  must make navigational decisions.
• Users will put up with quirks in your navigation
  as long as its consistent. If your navigation
  shifts or changes, Users can begin to feel lost.
• Disappearing Navigational When designers remove
  the link to the current page from the navigation.

5
2. Should Remain Consistent cont.

• Users confronted with 4 buttons instead of 5, or
  if 7 options suddenly become 12, they will become
  wary and unwilling to trust your navigation -
  loss of control is bad news!
• Solution is to highlight the button to the
  current section and perhaps remove the link so
  that its not clickable.
• Keep structures in one place - if your main nav
  is across the top and sub is down the side, leave
  them there. Ex http//www.amazon.com

6
2. Should Remain Consistent cont.

• Problems can arise as you start getting into
  Maintenance Cycles.
• If you receive content that doesnt fit anywhere
  neatly within your site structure, consider
• Creating or modifying a site area to accommodate
  it.
• Maybe a mini-site focusing on the new content
  might be a better solution than trying to jam the
  new content into the old structure. Ex.
  http//www.sony.com

7
3. Navigation Should Provide Feedback

• We are conditioned to look for reactions to
  things, cause and effect.
• If you press a button, a doorbell rings
• If you turn a knob, the radio station changes
• Feedback is often the only way we know if weve
  been successful.
• Essential navigation feedback includes
• Controls that are responsive
• Controls that provide information about location

8
3. Navigation Should Provide Feedback cont.

• Rollovers, sometimes called Mouseovers, are an
  excellent way of providing responsive feedback.
• Example uses of rollovers include
• Revealing instructions
• Invoke an animation
• Simply lighting up to identify itself as a button

9
3. Navigation Should Provide Feedback cont.

• By simply darkening or lightening a button, you
  can indicate to a user You Are Here.
  Ex http//www.extend.com
• Other ways of providing feedback can be an arrow
  or some other bullet beside the current section.
• Text Menus can indicate current location by
  changing the colour or style of the font and/or
  not providing a link (unless you need it).

10
4. Navigation Should Appear in Context

• To make decisions about movement, Users need to
  see possible routes.
• Navigation should always be where its needed.
• Vague Back buttons arent always good - what if
  your User jumped into the middle of your site
  from a Search Engine instead of the Homepage?
• Back is a relative term which isnt useful in
  this case - the User wouldnt know where Back
  is.

11
4. Navigation Should Appear in Context cont.

• With proper context and explanation, Back
  buttons can work.
• A Back to such-and-such page is more helpful.
• Go to such-and-such page doesnt rely on a
  start.
• Also consider if the User needs to go back to the
  last page.
• At the end of a long article, do you need to
  return to the top of the page?
• When a User fills out a form or downloads
  software, do they need to go back to the last
  page? Where will they end up instead?

12
5. Navigation Should Provide Alternatives

• Incorporating low-end site versions, site maps
  and/or search boxes can match User behaviour.
• Warning Too many is just as bad or worse than
  too few!!
• Consider accessibility - is it worth locking your
  nav away from people without plug-ins or Java?
• If you are going to use plug-ins, provide
  detection alternatives. Ex
  http//www.bigasscampus.com

13
6. Navigation Should Require an Economy of Action
and Time

• The Are We There Yet? syndrome.
• Site structures that suffer from layer upon layer
  of subcategories will aggravate the User.
• Prolonged log-in processes.
• Time consuming, invasive shopping carts.
• Multi-page forms that dont indicate how many
  more pages are involved in the process.
• Site maps, indices, content lists, pull-downs,
  search tools, or recursive menu systems are vital
  to wide / deep web sites with lots of content.
• Ex http//www.genxsportsinc.com (beta)

14
7. Navigation Should Provide Clear Visual
Messages

• Interface design isnt just about beautifying -
  its about visual guidance.
• If a navigation is hidden, difficult to find,
  looks too much like text or other images, it can
  be visually confusing and your User may have
  problems getting around.
• Visual hierarchies can provide Users guidance.
• Movement, colour, position, size and other
  factors help Users judge items, make choices.

15
7. Navigation Should Provide Clear Visual
Messages cont.

• Visual vocabulary for the web is still in its
  infancy.
• Books have conventions like Chapters, Tables of
  Contents and page numbers to help orient us.
• In travel and tourism we have universal signs for
  restrooms, restaurants, and gas stations.
• This kind of language-free iconography is limited
  on the web, but it is growing
• The mail envelope
• Emoticons such as -( and -)

16
8. Navigation Should Offer Clear Labels

• Navigation labels are an important part of
  navigation - like the ingredient labels that
  prevent you from swallowing something you
  shouldnt.
• When selecting labels, use terminology your Users
  will understand, not hieroglyphics or office
  shorthand.
• Terse one word labels can sometimes leave too
  much to interpretation.

17
8. Navigation Should Offer Clear Labels cont.

• Ambiguity or confusion can all too often exist
  without labels.
• Consider the iconographical ? Does it mean
• Search
• Read an FAQ
• Submit questions
• Help screen
• It can be any of these things. Dont make your
  User try to interpret it (unless it exists within
  a context).

18
8. Navigation Should Offer Clear Labels cont.

• Another common mistake is using long
  organization-speak or company jargon in your
  navigation.
• Your organization may understand what Department
  of Targeted and Interstitial Marketing is, but
  most Users would be more comfortable with Ad
  Sales.
• These kinds of self-aggrandizing titles and
  departmental-speak create serious User barriers.
  (Besides, try putting it on a button!)

19
9. Navigation Should Be Appropriate to the Sites
Purpose

• The metaphors you use for your navigation system
  should be appropriate to your goals.
• The metaphors for an virus update site should be
  very different from that of an entertainment
  site.
• Exploratory, mysterious icons are fine for
  entertainment, but would be aggravating for a
  user who is looking for the latest driver update
  for his / or her new graphic card.

20
10. Navigation Should Support Users Goals and
Behaviours.

• Navigation should ALWAYS support your Users
  goals.
• Always ask yourself
• What will people want to do?
• How might they behave?
• Using User Profiling is very useful.
• Next week well touch on Focus Groups and User
  Testing