Visual Screen Design

Week 4 Navigation

If the user cant find it, it doesnt exist. HFI Button

Emiel.ruis@han.nl @mastermiel

Navigation

What do you do when you arrive somewhere new?

Navigation

Users look for clues, to dive deeper into a page. We call this Information Scent.

Navigation

A user scans a website in search of a scent.

Navigation

Strong Information Scent leads the user to the right content.

Navigation

A weak Information Scent is difficult to pick up by users.

Navigation

Navigation

Users have fixed habits.

Navigation

These habits make patterns visible.

Navigation

Online it is exactly the same.

Navigation

The BBC has tried to let this path literally be worn out. As a path is often followed you see it occur.

Navigation

But habits extend beyond a single site.

Navigation

Look at tabs.

Navigation

Look at tabs.

Navigation

Look at tabs.

Navigation

When a way of navigating is well experienced, and thus serves as an example for others, it is called a Navigation Pattern.

Navigation

These patterns exist for more than just navigation. Patterns exist for all forms of interaction.

Navigation

Patterns are collected in pattern libraries.

Quince: http://quince.infragistics.com
VanWelie: http://www.welie.com/

Navigation

Navigation not only tells you where you can go, but also where you are.

Navigation

Trunktest Steve Krug

Navigation

Imagine being blindfolded and stuffed into the trunk of a car. On running up on a web page imagine a quick peak around the blindfold and through a crack in the trunk. Did you locate all of the required navigation components?

Navigation

Mandatory navigation components

Site ID (What site is this?) Page Name (Where am I?) Sections (Are the sites major sections outlined?) Local Navigation Where am I (is there a "You are here?) How can I search (For large sites only)

Navigation

Navigation

We distinguish different types of navigation. For all these types of navigation patterns exist.

Navigation
Classification Path Navigation (Breadcrumbs) is generally located at the top of the page.

Navigation

Core Navigation is required if a large amount of content to be presented.

Navigation
Document Navigation/ Embedded Links Functional use of hypertext.

Navigation
Drop-down Navigation is used to save space.

Navigation

E-commerce/ Shopping-cart Navigation

Navigation
Feature Navigation are temporary navigation components

Navigation

Global/Main Navigation

Navigation

Global/Main Navigation

Navigation
Homepage Navigation summary with key information navigation rules and explanations.

Navigation
Language and Geographic Navigation

Navigation

Personalized Navigation

Navigation
Progress Chart Navigation in case the user has to perform tasks that take more than two steps.

Navigation

Related Navigation implicates awareness.

Navigation

But navigation is about more than classification and structuring of information. It is about interaction. Especially with RIAs ....

Navigation

This interaction can be visually supported.

Navigation

Lets take a look at drag and drop navigation

Navigation

1. Page load drag invitation - What does the page contain to indicate drag and drop? 2. Mouse hover - What happens when the mouse hovers over the draggable object? 3. Mouse Down - What happens when the mouse is pressed on the draggable object but dragging has not initiated? 4. Drag initiated - "Drag" the object/ cursor/ pointing device to the desired location What happens when drag starts?

Navigation

5. Drag leaves original location What happens when the drag leaves its original location? 6. Drag re-enters original location - What happens when the drag object, having been dragged away from its original location, is dragged back to that location? (E.g., a neutral state can resume, or the original location can be treated as a valid or invalid drop target.) 7. Drag enters valid target - What happens when I drag over a valid drop target? 8. Drag exits valid target - What happens when the drag leaves a valid target? (E.g., that target's highlighting turns off or animates off.) 9. Drag enters specific invalid target - What happens when I drag over an invalid drop target?

Navigation

10. Drag exits specific invalid target - What happens when I drag back to my home area/container/slot? 11. Drag is over no specific target What happens when my drag is over a page region that includes no targets, valid or invalid? 12. Drag hovers over valid target - What happens when the drag pauses over a valid target? (E.g., the target is "springloaded", the drag-and-drop canvas transforms to reveal the contents of that target, and the drag resumes.) 13. Drag hovers over invalid target - What happens when the drag pauses over an invalid target?

Navigation

14. Drag accepted - What happens when the drop is accepted? 15. Drag rejected - What happens when the drop is rejected? 16. Drop on Parent Container - What happens when dropped over the original position/container?

Navigation

What should be considered when designing navigation?

18 Principles of Navigation Design ....

Navigation

#1 Design User-centered.

Involve the user from the first moment in the design process.

Navigation

#2 Provide multiple navigation options.

Navigation

#3 Provide context and explain the rules. Your design should be understandable.

Navigation

#4 Give the user a sense of control and confidence. Credibility!

Navigation

#5 Allow the user to see where it is. prominent titles, you are re indicators, breadcrumbs

Navigation

#6 Allow the user to see the path that has been followed.

Navigation

#7 Allow the user to see where this is going.

Navigation

#8 Be consistent, consistent, and did I mention to be consistent?

(users dont want to think, rethink or remember)

Navigation

#9 Define a standard and stick to it. (Design patterns, Alignment, Contrast Control, Group, Use of color, Identity, etc.).

Navigation

#10 Never surprise or mislead the user.

Stuur de gebruiker nooit de verkeerde kant op. Informeer duidelijk wat ze kunnen verwachten. Dwing ze niet tot onuitvoerbare handelingen.

Navigation

#11 Allow the user undo actions. Assume that users will make mistakes.

Navigation

#12 Provide simple error handling.

Navigation

#13 Follow Web Conventions

Global Navigation Home About - Contact or Contact Us Page-ID Pagename Search Footer - Designpatterns

Navigation

#14 Label and name navigational elements and clearly.

Navigation

#15 Provide feedforward and feedback.

Navigation

#16 Keep 'computing time as short as possible. (4 sec. Rule) Stay Connected!

Navigation

#17 Avoid busy and crowded interfaces

Navigation

#18 Be prepared to defend your navigation design. This goes for all forms of design!

Universal principles of design for navigation Chunking Controle Vijf kapstokken Fouten Accentuering Mapping