To navigate ● To steer or manage ● Generally a ship or an airplane ● To choose a path of...
-
Upload
hugo-franklin -
Category
Documents
-
view
216 -
download
1
Transcript of To navigate ● To steer or manage ● Generally a ship or an airplane ● To choose a path of...
![Page 1: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/1.jpg)
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
![Page 2: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/2.jpg)
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
![Page 3: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/3.jpg)
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
![Page 4: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/4.jpg)
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
![Page 5: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/5.jpg)
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
![Page 6: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/6.jpg)
Rare to use only one
● Most websites build on a judicious combination of these three, with one dominant theme
● Hierarchical plus hyperlinks very common
![Page 7: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/7.jpg)
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
![Page 8: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/8.jpg)
Global navigation
● For a small site, possible to show the major links on every page
Global navigation
![Page 9: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/9.jpg)
Global navigation bar can be vertical
Global navigation
![Page 10: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/10.jpg)
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
![Page 11: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/11.jpg)
Showing more levels in the hierarchy
● Drop-downs or pull-outs can show the next level
![Page 12: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/12.jpg)
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
![Page 13: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/13.jpg)
Breadcrumbs show user “This is where you are, how you got here”
Breadcrumbs
![Page 14: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/14.jpg)
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
![Page 15: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/15.jpg)
Many sites have subsites
Subsites
![Page 16: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/16.jpg)
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
![Page 17: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/17.jpg)
Ad hoc links are very common
![Page 18: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/18.jpg)
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
![Page 19: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/19.jpg)
The most familiar example of database navigation: Google
![Page 20: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/20.jpg)
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
![Page 21: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/21.jpg)
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
![Page 22: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/22.jpg)
Graphical navigation bar
![Page 23: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/23.jpg)
Building context for the user with navigation bars
![Page 24: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/24.jpg)
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
![Page 25: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/25.jpg)
Be careful with metaphors: what do these mean?
![Page 26: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/26.jpg)
Intended meanings. Moral: add words, too!
![Page 27: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/27.jpg)
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
![Page 28: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/28.jpg)
So add words!
![Page 29: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/29.jpg)
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
![Page 30: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/30.jpg)
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
![Page 31: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/31.jpg)
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
![Page 32: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/32.jpg)
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
![Page 33: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/33.jpg)
Menus pack in a lot of information; note the dropdown from Software
![Page 34: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/34.jpg)
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
![Page 35: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/35.jpg)
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
![Page 36: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/36.jpg)
Graphical site map example
![Page 37: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/37.jpg)
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)”
![Page 38: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/38.jpg)
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 39: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/39.jpg)
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 40: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/40.jpg)
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
![Page 41: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/41.jpg)
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
![Page 42: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/42.jpg)
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
![Page 43: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032414/56649eef5503460f94bfeb65/html5/thumbnails/43.jpg)
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