Thursday, December 6, 2007

10 ways to orientate users on site

Below are the 10 ways to orientate users on site. If you lknow more waysplease add them in to following list10 ways to orientate users on your siteImagine you're driving along and due to a road closure you have to followthose conspicuous yellow detour signs. You're now on an unfamiliar road, butbecause of the signs you confidently proceed, comfortable in trusting thearrows to tell you where you need to go.Then there's a roundabout and no sign. Do you turn left? Right? You're lostand have two choices; turn back and find an alternate road you know well orblindly drive around and hope for the best.Websites are very similar, nomatter what their ultimate goal is, your site visitors need to intuitivelyfind their way around. Too often, general website navigation and orientationdisappears or changes on internal pages.In fact, with websites this point is even more pertinent as users can just'evaporate' and leave your site, instead of being forced to drive aroundaimlessly!

1. Page headings
*Every single page* on your website should have a descriptive, unique andconcise main heading. Naturally, the main page heading should match thenavigation item or link it corresponds to.
Headings provide a cue to orient users and inform them about what they canexpect to find on the page. Guidelines for effective headings include:

  • Make sure they're at least two point sizes larger than regulartext
  • Use a different color to make them stand out further (backgroundor text colour)
  • Ensure there's plenty of white space both above and below theheading

2. Breadcrumb trail
Often regarded as an 'advanced' navigation technique. Breadcrumbs haverecently proven in usability studies that they're an accepted (andappreciated) form of navigation. Breadcrumb trails are links (usually placeddirectly above the main page heading) that show where users are inrelationship to the homepage. For example:
Home< user-friendly- resources/ web-usability/ orientate- users.shtml>1 > Subject< user-friendly- resources/ web-usability/ orientate- users.shtml>1 > Category< user-friendly- resources/ web-usability/ orientate- users.shtml>1 > *This Page*

The *benefits* of using breadcrumb trails are that they:

  • Show users where they are in the great scheme of things(particularly important if site visitors enter the site on a page other thanthe homepage)
  • Help users learn the structure and hierarchy of the website
  • Show users how they arrived at their current location
  • Allow users to jump several steps at once
  • A breadcrumb trail should reflect the true hierarchy of the site, not thepath site visitors have chosen to arrive at their destination.

3. Primary navigation
This may be obvious but it's important to re-iterate: Correct employment ofprimary navigation can be one of the most powerful tools to orientate userson your website. These are the golden rules for navigation:

  • Explicitly highlight the selected navigation item using adifferent (and ideally stronger) background color. Only changing the textcolor usually isn't enough.
  • Ensure that the navigation labels exactly match the destinationpage headings.

4. Secondary navigation
Again, this may be obvious but it's important to re-iterate: Just as primarynavigation leads users to site sections, secondary navigation defines thepath to specific pages. The same rules as above apply to good practiceorientation, in particular the highlighting of the selected item.

5. Links
Links should clearly communicate where they'll take site visitors. Link textshould be descriptive so that site visitors shouldn't have to guess wherethe link will take them.
Important rules for presenting links include:
  • Users are more likely to click on a link if they can predict itsdestination so the ubiquitous naming term *'Click here' should be avoided atall costs*!
  • Like all good navigation labeling, link text should match thedestination page heading (if relevant)

6. Page structure
Again, consistency is the key to an effective page structure that willcontribute to users orientating themselves in the site at all times.
When planning a page structure be sure to do the following:

  • Avoid cluttered page designs* - Users are generally familiar witha standard three column layout (navigation to the left, main content areaand right hand column) so they'll try to anticipate where items will appearon their screen as the page loads
  • Maintain key items in the same location* - When screen itemsremain consistent across pages users can learn their page location andimprove task performance.

7. Progress bars
Progress bars show users where they are in the buying or booking processwithin transactional sites. The progress bar should:

  • Be very easy to spot (make it large, use iconography and surroundit by white space)
  • Use easy-to-understand language
  • Highlight users' current location and grey out previous and nextsteps
  • Have the appearance of a process flow (e.g. by using numbers)

8. Page title
The page title is the text situated in the browser title bar. When writingthe page title makes it consistent with the main page heading and ensuresit:

  • Is short and succinct* - Less is more, so the more succinct thepage title the easier it is to glance at and gain an understanding of itsmeaning
  • Places important information first* - It's often only the firstfew words that users pick up from the page title when scanning through it
  • Makes sense out of context* - Users will view the page title inthe navigation history (accessed through the back and forward buttons),taskbar and favorites, so it needs to make sense without the rest of the webpage visible

Advantages of well written page titles include:

  • · Users can orientate themselves as they browse the site
  • · Users will have a concise, meaningful label to refer back to whenadded to their favorites
  • · Search engines place more importance on the page title thananything else and a descriptive page title will usually contain yourkeywords

9. Site map
Site maps are essential for sites with a lot of pages and are extremelyuseful for any website. By providing an overview of the site, site mapsdisplay the overall hierarchy.
Users may go to the site map as a last resort if they haven't foundinformation from browsing or running a search. Therefore the site map mustbe clear, concise and *genuinely reflect the site structure*.

10. Tagline
A tagline is a description of what you do and should be placed directlybelow the logo. It should be:

  • Explanatory and not vague
  • Clear and informative (avoid marketing-speak)
  • 4-8 words in length

Web users tend to spend very little time on each site; they 'flick around'until they find something interesting and relevant to them. Employing aconcise tagline will help users understand your site's purpose and what toexpect when browsing further into the site.

One of the most important things to remember when helping to orientate usersis consistency. That is, consistency between page titles, main headings,link text, breadcrumb items, navigation labels etc. For example, the mainpage heading should match the name of the relevant navigation item just asthe breadcrumb trail items should match the main page headings.Consistency aids site visitors in recognizing the different areas of thesite. It also provides them with effective feedback that they've arrived inthe right place. This is the *key to effective site orientation* .

No comments: