Download - Web Site Navigation
![Page 1: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/1.jpg)
Web Site Navigation
November 2002
The core of a web site
Building a User Friendly Web Site
![Page 2: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/2.jpg)
“Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.”
–Hansel and Gretel
![Page 3: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/3.jpg)
Quick Overview
• What is Web Site Navigation?
• It’s about the End User
• Organizing a Web Site
• Navigation Techniques
• What’s New: Navigation Innovation
• Resources
![Page 4: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/4.jpg)
Web Site Navigation
What is it?
Why should you care?
![Page 5: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/5.jpg)
It’s about the End User
• Web sites are used by people
People are Emotional
People have innate traits
• Web is still evolving but…
• Creativity can interfere with usability
![Page 6: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/6.jpg)
People Are Emotional!
We do not like:
Feeling stupid
Being lost
Getting overwhelmed
And we have limitations …
![Page 7: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/7.jpg)
Decisions
• Logic Decision• Analysis Paralysis• Satisfying + Sufficing =
Satisficing
![Page 8: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/8.jpg)
Locus of Attention
One thing at a time
![Page 9: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/9.jpg)
Locus of Attention - Habit
![Page 10: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/10.jpg)
Locus of Attention - Habit
![Page 11: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/11.jpg)
Locus of Attention – Multi Tasking
![Page 12: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/12.jpg)
Web Usage – The Theory
• Read text• Figure out
organization• Weigh all options• Carefully decide on
link
![Page 13: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/13.jpg)
Web Usage - In reality
• Quickly scan page• Looking for a
halfway decent match
• Click on first match• Use the Back button
![Page 14: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/14.jpg)
The Web is still developing but…
• The web is still growing• No longer a novelty• Users expect web sites that work
![Page 15: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/15.jpg)
Creativity Can Interfere
• Avoid Design Centric Sites• Avoid Latest and Greatest• Remember the End User!
Uncommon Common Sense
![Page 16: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/16.jpg)
Organization: Hierarchies
• Hierarchies• Challenges• Schema• Labeling
![Page 17: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/17.jpg)
Hierarchies
• Organizational Charts• Family Trees• Books
![Page 18: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/18.jpg)
Shallow Hierarchy
![Page 19: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/19.jpg)
Deep Hierarchy
![Page 20: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/20.jpg)
Hierarchy Guidelines
• The X number of clicks rule• 7 plus or minus 2• Mindless choices
![Page 21: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/21.jpg)
Organization: Challenges
• Ambiguity• Heterogeneity• Perspective• Internal Politics• Organizational Scheme & Structure
![Page 22: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/22.jpg)
Organization: Schema
Exact– Alpha– Chrono– Geo
Ambiguous
– Topical
– Task oriented
– Audience specific
– Metaphor-driven
![Page 23: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/23.jpg)
Organization: Labeling
• Consistency • Web standards• Professional / Field
standards• Metaphors
![Page 24: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/24.jpg)
Navigation: Types
HierarchicalGlobalLocalRemoteAd Hoc
![Page 25: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/25.jpg)
Hierarchical Navigation
![Page 26: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/26.jpg)
Global Navigation
![Page 27: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/27.jpg)
Local Navigation
![Page 28: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/28.jpg)
Remote Navigation
![Page 29: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/29.jpg)
Ad Hoc Navigation
![Page 30: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/30.jpg)
Navigation: Tools
• Browser features• Search engines• Drop Down Menus• Navigation bars• Bread crumb trial
• Embedded links• Icons• Frames• Indexes (indices for some
of you)
• .PDFs
![Page 31: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/31.jpg)
Browser Features
• Back and Forward Button• History Menu• Bookmarks• Color coded hyperlinks• Destination URL
![Page 32: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/32.jpg)
Search Engines
![Page 33: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/33.jpg)
Drop Down Menus
![Page 34: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/34.jpg)
Navigation Bars
• Top = Good• Bottom = Required• Left = Acceptable• Right = Avoid
![Page 35: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/35.jpg)
Bread Crumb Trail
You are here: Home> Hobbies> Book Collecting> Welcome
![Page 36: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/36.jpg)
Embedded Links
![Page 37: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/37.jpg)
Icons
![Page 38: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/38.jpg)
Frames
Just Say No
![Page 39: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/39.jpg)
Indexes
![Page 40: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/40.jpg)
.PDFs
![Page 41: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/41.jpg)
Users with Disabilities
The two themes of Accessible Web Design are…
1. Ensuring graceful transformation.
2. Making content understandable & navigable
![Page 42: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/42.jpg)
Where to Start
• Goals• Audience• Use Cases• Mapping/Hierarchies• Usability testing• Graphic designers
At the Beginning …
![Page 43: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/43.jpg)
Use Case
![Page 44: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/44.jpg)
Site Mapping
![Page 45: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/45.jpg)
Usability Testing
The Trunk Test• What site is this?• What page am I on?• What are the major sections of this site?• What are my options on this level?• Where am I in the scheme of things• How can I search?
![Page 46: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/46.jpg)
Innovations in Navigation
• Concept Mapping
• ZUI
![Page 47: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/47.jpg)
Concept Mapping
• Institute for Human and Machine Cognition at the University of Florida
• http://cmap.coginst.uwf.edu/index.html
![Page 48: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/48.jpg)
Concept Mapping
![Page 49: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/49.jpg)
Concept Mapping (STORM-LK)
![Page 50: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/50.jpg)
Concept Mapping – METOC Detail
COMMAND HISTORY of the NASP METOC
The “Aerological” Office at Naval Air Station, Pensacola, is almost as old as naval aviation itself. It was the first weather office established to support naval aviation. The requirement for an Aerological Unit was identified on 8 May 1917 when a request was made to the Commandant of the Pensacola Naval Station to employ a competent civilian to keep records of air conditions and other meteorological phenomena at NAS Pensacola. The necessity for a Meteorological Unit was further recognized when wind directions and velocities aloft to altitudes of approximately 1,500 feet were needed in connection with the dirigible, free balloon, and kite balloon …
METOC Experts who helped build STORM-LK
Commander Dan Soper is Commander of the NASP METOC. He has served as Combat Officer and Weapons Officer in addition to his service in aerography. As Ocean Services Officer at Pearl Harbor and Fleet Oceanographer for the Second Fleet, he was responsible for all oceanographic products. At Pearl he also prepared the "Local Forecaster's Handbook." He also served as Instructor in Environmental Support for the Atlantic Tactical and Navy Doctrine School, as Executive Officer at the Naval Ice Center, and as amember of the Staff of the OCeanographer of the Navy. His diverse experience amounts to nearly 14,500 hours at weather forecasting and oceanography-related tasks.
…
![Page 51: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/51.jpg)
Zooming User Interfaces
• PAD++• Developed at University of Maryland• www.cs.umd.edu/pad++
![Page 52: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/52.jpg)
Zooming User Interfaces
![Page 53: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/53.jpg)
Zooming User Interfaces
![Page 54: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/54.jpg)
Zooming User Interfaces
![Page 55: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/55.jpg)
Resources
• Don’t Make Me Think! – Steve Krug
• Information Architecture for the World Wide Web - Louis Rosenfeld and Peter Moreville
• Designing Web Usability – Jakob Nielsen
• The Human Interface – Jef Raskin
![Page 56: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/56.jpg)
More Resources
• UseIt.com – Jakob Nielsen• WebMonkey.com• W3C.org• HumanFactors.com
![Page 57: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/57.jpg)
Conclusion –
Don’t Make Them Think!
People want to know:
Where am I?
Where have I been?
Where can I go?
![Page 58: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/58.jpg)
Thank you!
Questions?
Comments?
![Page 59: Web Site Navigation](https://reader035.vdocument.in/reader035/viewer/2022062717/56812ab3550346895d8e77dd/html5/thumbnails/59.jpg)
Contact Information
Modus:web, inc.1940 Eleanor AveSt. Paul, MN 55116612.710.2704www.moduswc.com
Andrea [email protected]