Navigation Design

Presentation Overview Focus on the User Build the Information Architecture Design the Navigation Presentation of Navigation Home Page and Interior Pages

Focus 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 Architecture

Taking Inventory Determine –Information –Functionality –Communication goals Research the users Write it down –Ex: List of what should be in project

Organization Structure Linear 1.Mammal 2.Reptile 3.Microbe 4.…

Organization Structure Hierarchy 1.Mammals A.Primates I.Human II.Gorilla III.… B.… 2.Reptiles 3.Birds CAS example

Organization Structure Tabular Gators vs. Clams Curling Weasels vs. Llamas Broomball MSU vs. Iowa Basketball MSU vs. UofM Hockey SunSatFriThuWedTueMon

Design the Navigation

Goals in Navigation Design Reduce Disorientation Reduce “cognitive load” Minimize navigation Promote desired message/meaning

Reduce Disorientation Fundamental Navigation Questions –Where am I? –Where have I been? –Where can I go?

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? “Back” button Link and Visited colors Browser History

Where can I go? Logical site structure Clearly display structure/interface

Reduce the “cognitive load” Make the choices available onscreen –WhatisTheMatrixWhatisTheMatrix Use “repetition” in navigation design Follow standard web conventions

Minimize Navigation Minimize “travel steps” –Especially to common locations Minimize “difficulty” in navigation Minimize “amount” of navigation –Try to maintain 80/20 rule –80% content –20% navigation

Promote Desired Message/Meaning Design for target audience Prioritize based on your message

Presentation of Navigation (aka Interface Design)

Planning the Interface Page/Screen Diagrams –Aka “storyboards” or “wireframes” –Focus in on functionality and rough placement, not on graphic design

Planning the Interface User Scenarios –Aka “flowcharts” –Show the paths a typical user may take through a site AboutHomeProductsServicesContactProduct X Link to Amazon.com

Presentation Pointers Visually distinguish navigation from other elements –Spatial location –Color coding –Graphic style Group like elements of navigation Avoid long list of choices –“Seven is the magic number” (7 + or - 2) Be careful with metaphors (or avoid) –Shopping Carts

Navigation Elements Plain text links (tips)tips Graphical Buttons “Form” elements Arrangements of elements –Lists –Toolbars and panels –Pull-down menus –Tabs –Image maps (or sliced images)

Navigation Elements “Breadcrumb trails” Site Maps Site Index Searching Tools (tips)tips Scrolling

The 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 Page Splash Screens –Thought: Splash sets tone of site and welcomes user (ex)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)kidstour

Interior 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)