web site navigation november 2002 the core of a web site building a user friendly web site
TRANSCRIPT
![Page 1: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/4.jpg)
Web Site Navigation
What is it?
Why should you care?
![Page 5: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/7.jpg)
Decisions
• Logic Decision• Analysis Paralysis• Satisfying + Sufficing =
Satisficing
![Page 8: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/8.jpg)
Locus of Attention
One thing at a time
![Page 9: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/9.jpg)
Locus of Attention - Habit
![Page 10: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/10.jpg)
Locus of Attention - Habit
![Page 11: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/11.jpg)
Locus of Attention – Multi Tasking
![Page 12: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/16.jpg)
Organization: Hierarchies
• Hierarchies• Challenges• Schema• Labeling
![Page 17: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/17.jpg)
Hierarchies
• Organizational Charts• Family Trees• Books
![Page 18: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/18.jpg)
Shallow Hierarchy
![Page 19: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/19.jpg)
Deep Hierarchy
![Page 20: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/20.jpg)
Hierarchy Guidelines
• The X number of clicks rule• 7 plus or minus 2• Mindless choices
![Page 21: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/21.jpg)
Organization: Challenges
• Ambiguity• Heterogeneity• Perspective• Internal Politics• Organizational Scheme & Structure
![Page 22: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/22.jpg)
Organization: Schema
Exact– Alpha– Chrono– Geo
Ambiguous
– Topical
– Task oriented
– Audience specific
– Metaphor-driven
![Page 23: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/23.jpg)
Organization: Labeling
• Consistency • Web standards• Professional / Field
standards• Metaphors
![Page 24: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/24.jpg)
Navigation: Types
HierarchicalGlobalLocalRemoteAd Hoc
![Page 25: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/25.jpg)
Hierarchical Navigation
![Page 26: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/26.jpg)
Global Navigation
![Page 27: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/27.jpg)
Local Navigation
![Page 28: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/28.jpg)
Remote Navigation
![Page 29: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/29.jpg)
Ad Hoc Navigation
![Page 30: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/31.jpg)
Browser Features
• Back and Forward Button• History Menu• Bookmarks• Color coded hyperlinks• Destination URL
![Page 32: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/32.jpg)
Search Engines
![Page 33: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/33.jpg)
Drop Down Menus
![Page 34: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/34.jpg)
Navigation Bars
• Top = Good• Bottom = Required• Left = Acceptable• Right = Avoid
![Page 35: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/35.jpg)
Bread Crumb Trail
You are here: Home> Hobbies> Book Collecting> Welcome
![Page 36: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/36.jpg)
Embedded Links
![Page 37: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/37.jpg)
Icons
![Page 38: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/38.jpg)
Frames
Just Say No
![Page 39: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/39.jpg)
Indexes
![Page 40: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/40.jpg)
.PDFs
![Page 41: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/43.jpg)
Use Case
![Page 44: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/44.jpg)
Site Mapping
![Page 45: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/46.jpg)
Innovations in Navigation
• Concept Mapping
• ZUI
![Page 47: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/48.jpg)
Concept Mapping
![Page 49: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/49.jpg)
Concept Mapping (STORM-LK)
![Page 50: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/51.jpg)
Zooming User Interfaces
• PAD++• Developed at University of Maryland• www.cs.umd.edu/pad++
![Page 52: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/52.jpg)
Zooming User Interfaces
![Page 53: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/53.jpg)
Zooming User Interfaces
![Page 54: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/54.jpg)
Zooming User Interfaces
![Page 55: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/56.jpg)
More Resources
• UseIt.com – Jakob Nielsen• WebMonkey.com• W3C.org• HumanFactors.com
![Page 57: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/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 November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/58.jpg)
Thank you!
Questions?
Comments?
![Page 59: Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site](https://reader036.vdocument.in/reader036/viewer/2022081414/5513e0af55034646298b586b/html5/thumbnails/59.jpg)
Contact Information
Modus:web, inc.1940 Eleanor AveSt. Paul, MN 55116612.710.2704www.moduswc.com
Andrea [email protected]