Transcript Why is Navigation Important?

Standard Navigation Elements
- for CIBC Sites
Michele Poole – [email protected]
June Hill – [email protected]
Dianne Howie – [email protected]
Clifford Hui – [email protected]
User Experience & Creative Design Team
Internet Channel, Retail Markets
CIBC
Table of Contents
Introduction to Navigation
• What is Navigation?
• Why is Navigation Important?
• Benefits of Standard Navigation
CIBC.com Navigation
• Navigation Definitions
• Samples
• Components
• Overall Considerations
• Summary
Introduction to Navigation
What is Navigation?
“Navigation isn’t just a feature of a Web site, it is the Web
site in the same way that the building, the shelves and
the cash registers are Sears. Without it, there’s no
there there.”
Navigation Components:
(i) menus / navigation bars
(ii) breadcrumb navigation
(iii) search
(iv) site map
“Don’t Make Me Think” , Steve Krug p. 59
Why is Navigation Important?
You cannot sell a product if your customers cannot find it.
•
People often become lost within large web sites
•
In fact, 58% of users will make two or more navigational errors
while searching for information (Forsythe, et al., 1996) and 66.8%
of users have stated that one of the greatest problems about the
Web is "not being able to find the information that I am
looking for"
GUV (1998) http://psychology.wichita.edu/optimalweb/structure.htm
Why is Navigation Important?
•There is no sense of direction, there is no left or right and no
up or down on the web
•If we talk about moving down on the web, we are referring to
up and down a hierarchical information structure
“… on a Web site, instead of relying on a physical sense of where
[content] is we have to remember where it is in the conceptual
hierarchy and retrace our steps.
This is one of the reason why bookmarks..are so important and
why the Back button accounts for somewhere between 30-40%
of all Web clicks.”
“Don’t Make Me Think”
Steve Krug p. 58
Why is Navigation Important?
“The purposes of navigation:
i.
It orients you….indicates where you are in the site
ii.
It tells us what’s here … Navigation reveals content!
iii. It tells us how to use the site.. . It tells you implicitly where to
begin and what your options are
iv. It gives us confidence in the people who built it…Every
moment we are in a Web site, we’re keeping a mental running
tally: “Do these guys know what they’re doing?”
Why is Navigation Important?
i.
It orients you….indicates where you are in the site
•There is no physical sense of where we are on web sites,
except for navigation which provides a conceptual anchor in
the web of information
•Navigation indicates where you are in the site using a variety
of devices such as a change in the colour the navigation link,
off setting a link in a list to indicate indentation through to the
use of breadcrumb navigation
Why is Navigation Important?
ii.
It tells us what’s here … Navigation reveals content!
•Navigation is the means of accessing web site content
•The goal should always be to reduce the complexity of the site as
much as possible
•When creating a Web site that lends itself to a hierarchical style of
organization (i.e., pyramid structure with most important information
on the top), it is beneficial to "flatten" the hierarchy…. The more
clicks users must take to find information, increases the likelihood of
error
•Optimal navigation balances the breadth or number of categories
on the top level with the depth or the number of pages the user
must drill down to access content
“Research-based Web Guidelines” http://usability.gov/guidelines/content.html#five
Why is Navigation Important?
iii. It tells us how to use the site.. . It tells you implicitly where to
begin and what your options are
•Navigation systems are one element of web site usability
•Placement or position of elements communicate their relative
importance or the sequence in which we are meant to digest them
•In English, we're accustomed to reading and writing from left to
right and from top to bottom. The way we approach the screen is
the same
•Items to the left and top of centre tend to be noticed first, and
are usually considered more important than other items
•The famous left-hand navigation panel is popular because of its
natural, comfortable location
Why is Navigation Important?
iv. It gives us confidence in the people who built it…Every
moment we are in a Web site, we’re keeping a mental
running tally: “Do these guys know what they’re doing?”
•Designing for usability means understanding users and how
they approach tasks. Good navigation reflects this
consideration when designing
Benefits of Standard Navigation
• Providing Standard navigation across all CIBC sites means that all
sites will have the navigation in the same place and the navigation will
behave in a consistent manner
• The result is that CIBC sites will be easy to learn for users as users
will understand the familiar navigation pattern
• If the user makes a mistake on familiar navigation system, the effort
needed for problem solving to get back on track is much shorter
• Standard navigation creates a sense of comfort and control which
translates into a positive user experience
CIBC.com Navigation
Navigation Definitions
• Homepage – Homepage is the first page of a web site
• Micro site – A micro site a self contained mini site that links from the
main site. An example is Business Services. There is enough content to
warrant its own mini web site.
• Information Architecture/Site Map- The information architecture of
site map is the underlying content organization or structure that the
navigation system is based on.
• Global navigation- Global navigation is navigation that is found on all
pages of a web site and in the case of CIBC these elements are also
present of the micro site like Business Services
• Local navigation- Local navigation is navigation that is specific to a
part of a site, but does not appear on all pages like the global
navigation.
• Sub level page- Pages that are linked to from the homepage as the
homepage represents the top of a hierarchical structure
Homepage Sample
Micro site sample
Site Map
1
4
5
6
7
2
Micro Site Home Page
3
8
Sub Level Page
10
1. CIBC Logo
•A web convention has evolved
whereby the logo links the user to
the homepage from other pages in
the site
•“The upper-left corner is usually the
best placement for languages that
read from left to right”
•“Don’t include an active link to the
homepage on the homepage”
“Homepage Usability” Jakob Nielsen p. 10, 19
2. Title and Global Header
• The Title identifies the page
and confirms the selection
from the navigation
• From “CIBC HOME”, the user
can view the other navigation
menus
• With the “FRANCAIS” link,
Francophone users can use
CIBC in their native tongue
• “SITE INDEX” provides an
overview and provides users
with access to all the site
information at a glance
3. Search
• Search provides a shortcut to
content
• By providing a link to Advanced
search options we cater to a more
experienced Internet user without
confusing the novice
• ABM and Branch locator links give
shortcuts to frequent customer
queries
• “Give users an input box … wide
enough for user to see and edit
standard queries”
• “Provide simple search on the
homepage, with a link to
advanced search or search tips”
• “Search on the homepage should
search the entire site by default”
“Homepage Usability” Jakob Nielsen p. 10, 19
4. Micro site Specific
• The unity of the interface is
important because it has the
potential to link concepts and
objects together that belong
together
• For instance, care should be
made to group links that belong
together, as well as separate
those that do not belong
• Micro site specific navigation can
also be referred to as local
navigation
Location of Internal Links
(navigation within the application or site)
• The shade of each section
represents the number of times
each section was selected
• The darker sections indicate
where users expected the
internal site links
Examining User Expectations of the Location of Web Objects
(http://www.internettg.org/newsletter/dec00/article_bernard.html)
5, 6. Left Navigation
• Online Banking Sign In is a
specialized global navigation
element
• Users generally look to the top
and left of the page for
navigation
• Placing objects in locations
where users expect to find them
enhances the effectiveness of
the site
http://webreview.com/2001/09_28/stra
tegists/index01.shtml
Location of External Links
(navigation to external sites, resources, related info, tools)
• The shade of each section
represents the number of times
each section was selected
• The darker sections indicate
where users expected the
external site links
7. Footer
• This bottom navigation
enables rapid navigation for
experienced Internet users
• The footer enables users to
navigate without scrolling
back up the page
• “People learn very fast to
use navigation if they can
find it. Quality is easy to
spot; people gravitate to it.”
http://www.webword.com/reports/sitema
p.html
8. Breadcrumb Trail
• Breadcrumbs show you a path
from the homepage to where
you are
• “Put them at the top”
• “Use > between levels … it
visually suggests forward motion
down through the levels”
“Don’t Make Me Think” Steve Krug p. 78
9. Local Navigation
• Local navigation is navigation
specific to a subsection of a site
or to a microsite
• For instance, care should be
made to group links that belong
together, as well as separate
those that do not belong
10. Right Navigation
• Users expect links to other sites
to be on the right
• In favour of right-side menus is
the fact that the vertical scrollbar is usually on the right, so it's
more convenient for the user less mouse-travel - if the
navigation menu is nearby.
• Objects on the right serve the
same purpose as banner
advertisements to outside
content
• Research shows a greater clickthrough for ads placed to the
right side of the page.
http://www.webreference.com/dev/banners/
Overall Considerations
Browser characteristics
• If a user uses a low resolution or a narrow browser window, the first
thing to disappear is the content on the right side of the screen. If
the navigation is on the right side of the screen the user will have to
scroll horizontally to navigate the site.
• Placing internal links in the navigation panel on the left ensures it
will always be visible and accessible to the user.
Conclusions
“As life becomes more complicated, the time has come for a bank
that is making things simpler and smarter – a bank that realizes
there’s more to life than banking
“We will be accountable, reliable and straightforward, and
continually look at every facet of our business with a critical eye
“We will make things clearer, simpler and smarter for our
customers. They deserve a better bank. We owe them no less”
Smart. Simple. Solutions.
Appendix - Resources
• CIBC Online Style Guide
• CIBC HTML / CSS Guide
• CIBC Brand Book
• User Experience and Creative Design Team