guidelines for designing
TRANSCRIPT
![Page 1: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/1.jpg)
![Page 2: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/2.jpg)
Guidelines for Designing Web Navigation
Greg Elliott & Anthony Tran
![Page 3: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/3.jpg)
Information Overload
• Information Overload (Bush 1975)
![Page 4: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/4.jpg)
![Page 5: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/5.jpg)
Web Navigation
• Why call it ‘navigation?’
• successively displaying screens?
• naturally apply knowledge of wayfaring in physical world to the digital?
![Page 6: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/6.jpg)
Navigation
• Critique:
• Nothing ‘natural’ about digital browsing
• Rooted in mathematical & A.I. metaphors
• Graph Theory, Nodes, Links
![Page 7: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/7.jpg)
Navigation
• “The experience of the web ... can be understood as nodes ... and we navigate from node to node via electronic pathways we call links.”
![Page 8: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/8.jpg)
Hypertext Theory
• Hypertext & Hypercard on Mac (1987)
• Nodes & links
• Traversing nodes via links
![Page 9: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/9.jpg)
Hypertext Theory
• Networks of nodes and links are often referred to as information structure or information architecture
• Derived from mathematics
• Graph theory, the web and the matrix
![Page 10: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/10.jpg)
![Page 11: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/11.jpg)
Hypertext Theory
• "The hierarchy is by far the most prevalent structure. This is true because human beings naturally order their world by establishing categories and subcategories."
![Page 12: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/12.jpg)
Hypertext Theory
• Metaphor is a hold over from A.I.
• Hierarchies are useful in websites for several reasons, not because we naturally ‘order’ the world using hierarchies
![Page 13: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/13.jpg)
![Page 14: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/14.jpg)
Guidelines Excuse?
• "Furthermore, the guidelines assume what can be broadly termed informational Web sites and users with an interest in efficient navigation. These guidelines, therefore, may not apply to sites for game players, art sites, and sites intended for whimsy and fun. "
![Page 15: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/15.jpg)
That’s a big assumption...
How much time do you waste aimlessly browsing the internet?
![Page 16: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/16.jpg)
Assume we want efficiency?
• Efficiency is great for:
• Corporate businesses, Wikipedia, etc.
• Why should we assume ‘most’ of the web should be designed for efficiency?
![Page 17: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/17.jpg)
![Page 18: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/18.jpg)
Designing an Effective Link
![Page 19: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/19.jpg)
Designing an Effective Link
• Underlined text
• Raised buttons
![Page 20: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/20.jpg)
![Page 21: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/21.jpg)
![Page 22: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/22.jpg)
![Page 23: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/23.jpg)
![Page 24: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/24.jpg)
![Page 25: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/25.jpg)
![Page 26: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/26.jpg)
![Page 27: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/27.jpg)
![Page 28: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/28.jpg)
Designing an Effective Link
• Layout & Formatting
• Reduce clutter
• Highlight Links / Pathways
• Non-icon graphics not seen as links
• Still true?
• Example of bad formatting
![Page 29: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/29.jpg)
![Page 30: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/30.jpg)
![Page 31: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/31.jpg)
Communicate to Users
• Make options clear
• Nielson
• Let users know what can be clicked and what can’t be clicked
![Page 32: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/32.jpg)
![Page 33: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/33.jpg)
Designing an Effective Link
• Certain phrases are assumed links:
• Products
• About us
• Home
• Contact
• etc.
![Page 34: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/34.jpg)
Designing an Effective Link
• Vertical list of phrases when boxed are more obvious links
![Page 35: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/35.jpg)
![Page 36: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/36.jpg)
![Page 37: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/37.jpg)
Still Designing Effective Links
• ‘Photographs are not assumed links’
• Still true?
• Flickr?
• Type of image? Size?
![Page 38: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/38.jpg)
![Page 39: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/39.jpg)
Still Designing Effective Links
• Avoid Clutter
![Page 40: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/40.jpg)
Do we really need to see why again?
![Page 41: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/41.jpg)
![Page 42: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/42.jpg)
• Avoid clutter
• “Below the fold” & cues to scroll
Still Designing Effective Links
![Page 43: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/43.jpg)
![Page 44: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/44.jpg)
• Avoid clutter
• “Below the fold” & cues to scroll
• Screen Resolution
• Place higher priority links higher
Still Designing Effective Links
![Page 45: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/45.jpg)
![Page 46: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/46.jpg)
Still Designing Effective Links
• Avoid clutter
• “Below the fold” & cues to scroll
• Screen Resolution
• Place higher priority links higher
• Make many options available to aid choice
![Page 47: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/47.jpg)
![Page 48: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/48.jpg)
![Page 49: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/49.jpg)
![Page 50: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/50.jpg)
Still Designing Effective Links
• Make link destinations clear
• Javascript rollovers
• Text links augmented by descriptions
• Flawed faith in icons
![Page 51: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/51.jpg)
What would these icons mean without words?
![Page 52: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/52.jpg)
![Page 53: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/53.jpg)
Icons
• Icons are most effective at grabbing attention, not communicating ideas
• Only a few icons communicate well due to standard usage
• arrow pointing down = download
![Page 54: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/54.jpg)
Indicating Link Type
• Explanation
• Further Details
• More Information
• Instead of Click here or Amazing
![Page 55: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/55.jpg)
![Page 56: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/56.jpg)
Managing Large Numbers of Links
![Page 57: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/57.jpg)
Breadth vs Depth
• Generally, prefer breadth over depth
• Trade-off between breadth and depth
• Try to group links to ease clutter
![Page 58: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/58.jpg)
100% Breadth, 0% Depth
![Page 59: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/59.jpg)
![Page 60: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/60.jpg)
![Page 61: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/61.jpg)
Breadth vs. Depth
• “Although researchers can determine highly navigable ratios, in practice the depth and breadth of any hierarchy is greatly affected by the constraints the designer faces in dividing the content into meaningful and usable groupings.”
![Page 62: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/62.jpg)
Translation
Every site is different.
We don’t know what to tell you.
![Page 63: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/63.jpg)
Primary & Secondary Links
• Links that define main structure are called primary links
• Secondary links provide multiple pathways
• Trade-off between clutter and secondary links
![Page 64: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/64.jpg)
Branch Convergence
![Page 65: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/65.jpg)
Revealing Underlying Structure
• Homepage should provide cues and structures that reveal structure of site
• Situational Awareness (Whitaker)
• Users need broad view of pathways to navigate (Fumas)
![Page 66: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/66.jpg)
![Page 67: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/67.jpg)
• Provide clear, brief, and highly conspicuous orientation information
• Users need to know:
• Name
• General Purpose
• Sponsors
• Orientation must be conspicuous
• Advertising banners
• Sub site should have:
• Sub site’s identify and purpose
• Relationship to the main site
• Withhold orientation information?
Provide Orientation Information
![Page 68: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/68.jpg)
![Page 69: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/69.jpg)
• Provide orientation information on lower-level pages to support continued exploration.
• Include site name/logo to maintain identity
• Use orientation elements to show differences among sections
• Headers, logos, recurring colors and fonts
Provide Orientation Information
![Page 70: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/70.jpg)
• Employ site maps to show the global structure of a site and to provide direct access to nodes.
• Site maps should show all branches of the hierarchy
• Space limitations may limit # of levels
• Site maps should include “Last page visited” marker.
• Large web sites?
Augmenting Link-to-Link Navigation
![Page 71: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/71.jpg)
• Provide a search facility or an index for direct access to content
• Search facility should be provided
• Exception: very small Web sites.
• Things to consider:
• Size of the site
• Way information is organized
• Information needs of the users
• Search interface
• Configured for both simple and complex searches
• Results listed in most appropriate order and provide enough information
• Indexes generally give better results
• Expensive and difficult to maintain
Augmenting Link-to-Link Navigation
![Page 72: Guidelines for Designing](https://reader033.vdocument.in/reader033/viewer/2022051510/627ea9fa38935d676a325457/html5/thumbnails/72.jpg)
• Provide a link to the home page throughout the site
• Purpose
• User disoriented – familiar location
• New information seeking task
• Home page orientation information
• Logo as link to the home page
• Many sub sites
• Direct link back to sub site’s home page
• Direct link back to main Web site.
Augmenting Link-to-Link Navigation