Navigating a site
When using web sites we encounter a large number of types of navigation methods. These include:
- Lists
- Breadcrumbs
- Tabs
- Drop downs
- Multi level tabs (usually horizontal tabs with a submenu)
- Hierarchical, and
- Pagination
This is not all the list as Ben Hunt shows on his pages about navigation models.
Problem: Identify two examples for each type of navigation and explain (in one or two sentences) why you believe they are that type of navigation model.
For example:
Could be a tabbed menu, or a horizontal top bar. This is because the menu contains a list of items across the page. The items are highlighted when the mouse rolls over. The current “area” is highlighted by an underline.
is most probably a list of contents. This is because there is a list of items that may be accessed by clicking on the links. Visited and active links are also highlighted.
Both these navigation types were displayed on the site “465 Berea Street” [visited: 07/03/2006]
What sites have you found and what navigation types?
Here is a site that I don’t know which pigeon hole to put it in. Is it list or hierachical.
http://www.samsungmobile.com
Look at Belgium and Middle East
Posted March 7, 2006, 1:46 pmhttp://www.amazon.com has an example of paging. Once you do a search if the results are too many to display on one page it will put it on multiple pages.
When google does a search it displays the same way using paging http://www.google.com.
The telstra and optus pages use more than one type of navigation each. They both use lists, breadcrumbs, search, drop down, and tabs.
Posted March 7, 2006, 1:53 pmhttp://www.telstra.com http://www.optus.com
Menu Types
Drop down menu
http://www.mlb.com
Tabs
http://www.mlb.com
http://www.campmishawaka.com
Pagination
http://www.google.com.au
http://www.whirlpool.net.au/
Breadcrumbs
http://www.ebay.com.au
http://www.projectseven.com/products/menusystems/pmm/user_guide/add_ons/bread_crumb/create_bc.htm
Lists
http://www.ple.com.au
Hierarchel
http://www.auspcmarket.com.au/
Multi-level tabs
http://www.mlb.com
http://www.central.wa.edu.au/
Posted March 7, 2006, 1:56 pmhttp://www.reburnworks.com
This page has a tabbed menu across the top and a list of categories down the left hand side.
http://morbc.com/phpBB2/viewforum.php?f=8
This page uses breadcrums to navigate.
http://www.apple.com
The Apple site uses multi layer tabs.
http://www.google.com
Google uses pagination when searching.
http://pages.ebay.com/sitemap.html
An example of an hierarchial site map.
http://www.brothercake.com/dropdown/
Posted March 7, 2006, 1:57 pmJavascipt dropdown menues.
Tabs
http://www.yourtv.com.au.. top.
http://www.yahoo7.com.au.. top.
Dropdown
http://www.perthairport.net.au.. top.
http://www.intel.com.. top.
Lists
http://www.w3.org.. left side.
http://www.amazon.com.. left side.
Hierarchical
http://www.electronics.ebay.com.. centre.
http://en.wikipedia.org/wiki/Wikipedia:Browse.. centre.
Pagination
http://search.ebay.com.au//search/search.dll?from=R40&satitle=hard+drive.. bottom.
http://discussions.apple.com/forum.jspa?forumID=800.. above and below the board list.
Multi level tabs
http://www.edublogs.org.. admin login section, top.
http://www.apple.com.. top.
Bread crumbs
Posted March 7, 2006, 2:05 pmhttp://www.amazon.com/exec/obidos/ASIN/B000AP89JE/ref=ref=amb_bl_162129501//002-5308489-2212842.. bottom.
http://www.mozilla.com/firefox/system-requirements.html.. top.
http://www.usask.ca/education/coursework/skaalid/index.htm
Posted March 7, 2006, 2:08 pmuses a heirarchical navigation
http://diveintomark.org/
http://www.alistapart.com/stories/taminglists/
These sites uses rollover buttons
http://www.kalsey.com/tools/csstabs/
http://www.w3.org/Consortium/technology
These sites use TABS with SUb-menus
http://www.imint.com/info/products12.htm
http://css-discuss.incutio.com/?page=ListMenus
These sites use LISTS
http://www.mcmscontrols.com/r.a.d.controls/Menu/Examples/Programming/BreadCrumb/DefaultCS.aspx
http://www.alienmenus.com/products.php?th=0&me=0&le=1&b=3
These sites use DROP DOWN MENUS
http://www.doitlive.com/demo/default.asp?V_DOC_ID=815
This site uses BREAD CRUMBS
http://www.imint.com/demos/itree/demo4400.htm
http://www.imint.com/demos/islide/demo3500.htm
Thes sites use tree menus
http://www.google.com.au/search?hl=en&q=pagination&meta=
http://search.yahoo.com/search?p=pagination&fr=FP-tab-web-t&toggle=1&cop=&ei=UTF-8
PAGINATION
Posted March 7, 2006, 2:08 pmExamples of differant navigation styles on the web:
Drop downs: http://www.mess.be/ http://www.telstra.com
Both of these websites have a drop down menu style.
Tabs: http://www.hotmail.com http://www.australiapost.com
These websites have a simple single tab option.
Lists: http://recipefinder.ninemsn.com.au/ http://www.letsshop.com.au
Simple one click tabs that list down.
Hierarchical: http://www.westonsolutions.com www.
These websites have a more complex ‘drop- across’ style menu.
Pagination: http://search.ninemsn.com.au/results http://www.mess.be
At the bottom of these sites is a page selector option.
Multi level tabs: http://www.domain.com.au http://www.bizwiz.com/1stbusinessday/
Both of these sites have plenty of selection tabs in front and above each other.
Breadcrumbs: http://www.royweston.com.au
Posted March 7, 2006, 2:28 pmThis syle menu drop rolls across but inline
Tabs:
darkskysong’s anime ~ view image
yahoo7.com.au ~ view image
List:
animewallpapers.com ~ view image
Drop down:
~ view image
yahoo! mail ~ view image
Hierarchical:
uwa archaeology ~ view image
elfwood ~ view image
Pagination:
neopets.com ~ view image
animewallpapers.com ~ view image
Mutli-level Tabs:
livejournal.com ~ view image
ustralian archaeological association ~ view image
Breadcrumbs:
Posted March 7, 2006, 4:21 pmSURL Usability News ~ view image
livejournal.com ~ view image