Date post: | 03-Jan-2016 |
Category: |
Documents |
Upload: | hugo-franklin |
View: | 214 times |
Download: | 1 times |
To navigate
● To steer or manage● Generally a ship or an airplane
● To choose a path of travel over the Web.● Navigation: choose a path through a website's
information space● Key aspect of usability
● Goal is to help users to– Know where they are– Give conficence when choosing where to go next
Navigation Design
● Site-level navigation: making it easy for the user to get around the site
● Page-level navigation: making it easy for the user to find things on a page
● A navigational system is a visual representation of an organizational structure
Navigation: connections
● Good navigation builds on good content organization– Choose a navigation system that reflects the content’s
organizational structure– Based on users interviews
● Visual design and navigation design are interrelated– Choose visual navigation elements that build context
for a user
Strategies to create navigation system
● Choose appropriate navigation system– To reflect content organization
● Choose visual navigation system – To build context for the user
● Take advantage of built-in services provided by Web borusers
Three types of navigation systems
● Hierarchical– Derived from hierarchical organizational structure– Top down view
● Ad hoc– Hyperlinks
● Database– Search engines– Bottom down view
● The most common is hierarchical, with many ad hoc links added
Rare to use only one
● Most websites build on a judicious combination of these three, with one dominant theme
● Hierarchical plus hyperlinks very common
A pure hierarchy is rare
We add links to facilitate moving around the hierarchy without going all the way to the top; note extra links at bottom level
Global navigation
● For a small site, possible to show the major links on every page
Global navigation
Global navigation bar can be vertical
Global navigation
First, Second, and Third level pages
● A navigation bar is necessary if the primary links are not already displayed as part of the page layout
● Provide a link back to the home page in secondary pages
● Small sites may be served efficently by a global navigation system
● A secondary navigation bar to third-level pages, is useful for a more complex system
Showing more levels in the hierarchy
● Drop-downs or pull-outs can show the next level
Breadcrumbs
● Record of user's trail through the site– You are here, and this is where you came from
● Consistency in placement of navigation bar across pages on the site is very important
Breadcrumbs show user “This is where you are, how you got here”
Breadcrumbs
Subsites
● Required for sites with great complexity● Subsite
– Collection of pages within website that can share a common navigational system
● Perhaps different from the rest of the website
● Links in local navigation give access to subsite● Top-level navigation whitin subsite should afford
global navigation
Many sites have subsites
Subsites
Ad-hoc navigational system
● Hierarchical system can't accommodate all relationships among content items on a site
● Insert ad-hoc links once content is in place– These afford connections required by content
relationship– More editorial than architectural
● Added, perhaps after testing● Convert words or phraces to hyperlinks● Make them into bullets, or place them at beginning or end
of paragraph
Ad hoc links are very common
Batabase-driven navigational system
● Implements database organizational structure– Bottom-down approach
● Often used as a facility ancilliary to the main navigational system
● Rarely used as the only navigational system– Even search-engine sites have additional navigation to
supplement a purely database-driven system
The most familiar example of database navigation: Google
Building context
● Helping users understand where they are and where they are going while visiting a website
● Navigational elements helps build context– Visual organizations of text and graphics that display
user's options and current position in a site– Bars– Menus
Navigation bars
● Collection of links group together on a page– Text based– Graphical
● Have ability to display context clearly● But, take longer to download● Problem for limited bandwidth connections
– Every image should have named ALT attribute● Hihger maintenance cost
– Choice depend on intended audience, access to tools, and expected fluidity of site
Graphical navigation bar
Building context for the user with navigation bars
Graphical navigations
● Icons or metaphores as links in navigation bar– Always include text to explain them
● Extremly difficult to represent concepts pictorially that are universally understood
Be careful with metaphors: what do these mean?
Intended meanings. Moral: add words, too!
Graphical navigations
● Skilled designers created the icons● Test users where from the same company
– Had very similar user profiles● It is this hard to creat effective icons for a
homogeneous group, – Imagine how hard is it to creat them for a larger group
● Best to include accompanying text explaining the icon
So add words!
Effective Labels
● Look at the results of your card-sorting interviews– Best resource– Participants named the piles– Patters or trends in those names will be usefull in
creating navigation labels● Labeling systems on the Web
– There are standard meanings for certain lables
Some standard meanings
Label and meaning ● Home: the main entry point of a Web site, generally
containing the top-level links to the site● Search: find related pages by supplying a word or a
phrase● About Us: information about the company that
created the site● Shop: browse for merchandise● Check Out: supply shipping and billing information,
complete transaction
Consitent navigation
● Use labels consistently throughout the site● Consistency is key
– Choosing navigation labels– Placing navigation bars on each page
● Conventions for placing navigation elements are emerging– “home” -- upper left corner or bottom center– Internal site links on the left side
Menus
● Prensent links as– Drop-down list– Scrollable list
● As navigation elements, menus helps reduce number of clicks required to reach a page
● Con help pack large number of options into a single page
Menus pack in a lot of information; note the dropdown from Software
Menus
● Big advantage by reducing the number of clicks● Two disadvantges:
– Not all options are visible at one time– The user must act before seeing the menu
● Not all users know to do that
● Provide efficient navigation alternative● Take great care in selecting lables for menu items
Site maps
● Textual– Takes work – For a big site, must be selective
● Graphical– Cool—for a small site.
● A site map is no substitute for good navigation
Graphical site map example
Frames
● A frame is an area of the browser window that stays visible as the user moves from page to page
● A simple way to provide global navigation● But hogs screen real estate: you can’t do anything
else with that space● May not print● Hard (impossible?) to bookmark● Used much less often than formerly● See Jakob Nielsen, “Why Frames “Suck (Most of
the Time)”
Built-in browser services
● History of pages visited● Back button● Forward button● Color coding of links
– Unvisited– Visited– Active
● Don’t mess with the convention that blue is an unvisited link.
Page-level navigation aids
● Remember proximity, alignment, consistency: make the layout obvious
● Make size of text field box appropriate to the amount of data– How many forms have some box which is
MUCH too small for necessary input? ● What were those people thinking?
● Users do not like text field boxes that forces them to scroll horizontally
Page-level navigation aids
● Mark required fields clearly, – with * or Required
● Make button placement consistent: – before or after its associated labels
● Do not force the user to figure out correct button label association
● This waste user's time● Increases input errors
Make input-error reports clear
● Best practice is to present form to user again with– All input correctly in place– Message explicitly identifying the problem
● Perhaps change the color of the offending box● Show as many errors as possible on one page;
– don’t make user correct one error per attempt ● Consider using “Go to the next error”
– A link to the field causing the problem with and explanation and a link to the next error
Make input-error reports clear
● Don’t make user re-enter correct data● Sounds obvious, huh?
– Then why are so many forms terrible?● Sales are lost at this point,
– in big quantities
Summary
● Effective navigation is a combination of – good content organization and – good visual organization
● The main navigational system is hierarchical, with a lot of hyperlinks added
● Learn from all the bad sites you’ve suffered