Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design...
26
Navigation Design Navigation Design
-
Upload
merilyn-barnett -
Category
Documents
-
view
229 -
download
0
Transcript of Navigation Design. Presentation Overview Focus on the User Build the Information Architecture Design...
Navigation DesignNavigation Design
Presentation OverviewPresentation Overview
Focus on the UserBuild the Information ArchitectureDesign the NavigationPresentation of NavigationHome Page and Interior Pages
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
Build the Information ArchitectureBuild the Information Architecture
Taking InventoryTaking Inventory
Determine– Information
– Functionality
– Communication goals
Research the usersWrite it down– Ex: List of what should be in project
Organization StructureOrganization Structure
Linear1. Mammal
2. Reptile
3. Microbe
4. …
Organization StructureOrganization Structure
Hierarchy1. Mammals
A. PrimatesI. Human
II. Gorilla
III. …
B. …
2. Reptiles
3. Birds
CAS example
Organization StructureOrganization Structure
Tabular
Gators vs. Clams
Curling
Weasels vs. Llamas
Broomball
MSU vs. Iowa
Basketball
MSU vs. UofM
MSU vs. UofM
Hockey
SunSatFriThuWedTueMon
Design the NavigationDesign the Navigation
Goals in Navigation DesignGoals in Navigation Design
Reduce DisorientationReduce “cognitive load”Minimize navigationPromote desired message/meaning
Reduce DisorientationReduce Disorientation
Fundamental Navigation Questions –Where am I?
–Where have I been?
–Where can I go?
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
Where have I been?Where have I been?
“Back” buttonLink and Visited colorsBrowser History
Where can I go?Where can I go?
Logical site structureClearly display structure/interface
Reduce the “cognitive load”Reduce the “cognitive load”
Make the choices available onscreen–WhatisTheMatrix
Use “repetition” in navigation designFollow standard web conventions
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
Promote Desired Message/MeaningPromote Desired Message/Meaning
Design for target audiencePrioritize based on your message
Presentation of NavigationPresentation of Navigation
(aka Interface Design)
Planning the InterfacePlanning the Interface
Page/Screen Diagrams– Aka “storyboards” or “wireframes”– Focus in on functionality and rough
placement, not on graphic design
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
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
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)
Navigation ElementsNavigation Elements
“Breadcrumb trails”Site MapsSite IndexSearching Tools (tips)
Scrolling
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
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)
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)
