![Page 1: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/1.jpg)
Navigation DesignNavigation Design
![Page 2: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/2.jpg)
Presentation OverviewPresentation Overview
Focus on the UserBuild the Information ArchitectureDesign the NavigationPresentation of NavigationHome Page and Interior Pages
![Page 3: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/3.jpg)
Focus on UserFocus on User
Know your users– Demographics (age, gender, culture)– Skill level– Equipment and Bandwidth
Design in “mind set” of user– Why are they visiting/using your product?– What do they care about?– Consider the user's experience of "moving through" the
site– Tools
• User Interview/Focus groups early in design• User testing as design progresses
Balancing competing goals– User vs. personal vs. client
![Page 4: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/4.jpg)
Build the Information ArchitectureBuild the Information Architecture
![Page 5: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/5.jpg)
Taking InventoryTaking Inventory
Determine– Information
– Functionality
– Communication goals
Research the usersWrite it down– Ex: List of what should be in project
![Page 6: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/6.jpg)
Organization StructureOrganization Structure
Linear1. Mammal
2. Reptile
3. Microbe
4. …
![Page 7: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/7.jpg)
Organization StructureOrganization Structure
Hierarchy1. Mammals
A. PrimatesI. Human
II. Gorilla
III. …
B. …
2. Reptiles
3. Birds
CAS example
![Page 8: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/8.jpg)
Organization StructureOrganization Structure
Tabular
Gators vs. Clams
Curling
Weasels vs. Llamas
Broomball
MSU vs. Iowa
Basketball
MSU vs. UofM
MSU vs. UofM
Hockey
SunSatFriThuWedTueMon
![Page 9: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/9.jpg)
Design the NavigationDesign the Navigation
![Page 10: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/10.jpg)
Goals in Navigation DesignGoals in Navigation Design
Reduce DisorientationReduce “cognitive load”Minimize navigationPromote desired message/meaning
![Page 11: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/11.jpg)
Reduce DisorientationReduce Disorientation
Fundamental Navigation Questions –Where am I?
–Where have I been?
–Where can I go?
![Page 12: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/12.jpg)
Where am I?Where am I?
Relative to the Web?– Site is part of web
– Differentiate without alienating
Relative to your site?– Clear Navigation
– Clear Headlines and Titles
![Page 13: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/13.jpg)
Where have I been?Where have I been?
“Back” buttonLink and Visited colorsBrowser History
![Page 14: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/14.jpg)
Where can I go?Where can I go?
Logical site structureClearly display structure/interface
![Page 15: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/15.jpg)
Reduce the “cognitive load”Reduce the “cognitive load”
Make the choices available onscreen–WhatisTheMatrix
Use “repetition” in navigation designFollow standard web conventions
![Page 16: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/16.jpg)
Minimize NavigationMinimize Navigation
Minimize “travel steps”– Especially to common locations
Minimize “difficulty” in navigationMinimize “amount” of navigation– Try to maintain 80/20 rule
– 80% content
– 20% navigation
![Page 17: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/17.jpg)
Promote Desired Message/MeaningPromote Desired Message/Meaning
Design for target audiencePrioritize based on your message
![Page 18: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/18.jpg)
Presentation of NavigationPresentation of Navigation
(aka Interface Design)
![Page 19: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/19.jpg)
Planning the InterfacePlanning the Interface
Page/Screen Diagrams– Aka “storyboards” or “wireframes”– Focus in on functionality and rough
placement, not on graphic design
![Page 20: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/20.jpg)
Planning the InterfacePlanning the Interface
User Scenarios– Aka “flowcharts”– Show the paths a typical user may take
through a site
About
Home
Products Services Contact
Product XProduct X
Product XLink to Amazon.com
![Page 21: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/21.jpg)
Presentation PointersPresentation Pointers
Visually distinguish navigation from other elements– Spatial location– Color coding–Graphic style
Group like elements of navigationAvoid long list of choices– “Seven is the magic number” (7 + or - 2)
Be careful with metaphors (or avoid)– Shopping Carts
![Page 22: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/22.jpg)
Navigation ElementsNavigation Elements
Plain text links (tips)
Graphical Buttons“Form” elementsArrangements of elements– Lists– Toolbars and panels– Pull-down menus– Tabs– Image maps (or sliced images)
![Page 23: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/23.jpg)
Navigation ElementsNavigation Elements
“Breadcrumb trails”Site MapsSite IndexSearching Tools (tips)
Scrolling
![Page 24: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/24.jpg)
The Home PageThe Home Page
Must answer questions– “Where am I?”
– “What does this site do?”
Should introduce– Navigation scheme
– Site Structure
– Branding (name and logo)
– Summary of most important news or promotions
![Page 25: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/25.jpg)
The Home PageThe Home Page
Splash Screens– Thought:
• Splash sets tone of site and welcomes user (ex)
– Reality:• Annoying impediment to actual content• Wasted bandwidth (=time)• Most users click off as fast as they can
– “Splash Screens Must Die” Jakob Nielsen Any useful purpose?– Splash as filter (ie. warning on adult sites)– Splash for choice? (ie. high/low bandwidth)– Splash while loading? (something to watch)– Instructions? (kidstour)
![Page 26: Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page](https://reader035.vdocument.in/reader035/viewer/2022081501/5697bfe01a28abf838cb3101/html5/thumbnails/26.jpg)
Interior PagesInterior Pages
Focus on content– Not welcome and overview to site
Should include– Site branding (logo and name)
– Unique page title and header
– Primary navigation• “Home” button
• Link to main areas (breadth)
• Link to children/siblings (depth)