This document discusses various interface design patterns and principles for navigation. It begins by explaining how interface design dresses up existing behaviors and notes that navigation allows some aspects of information architecture to be visible. It then covers different types of navigation including global navigation, local navigation, contextual navigation, pagination, sorting, and secondary navigation elements like site maps. The document emphasizes following conventions when they are widely adopted but exploring alternatives when usability testing suggests improvements. It concludes with an exercise asking readers to analyze the navigation of competitor websites.

1. DESIGNING
INTERFACE

2. 2
“Like putting an Armani suit on
Attila the Hun, interface design
only tells how to dress up an
existing behavior.” – Alan Cooper

3. Making pages out of boxes and arrows
TRANSFORM YOUR FLOWS

4. A task analysis
From Information Architecture: Blueprints for the Web, this is a task analysis for a
website for Sundance film festival, featuring a schedule planner

5. Each task could have a page

6. Remind you of something?
1995: first graphic logo
First Yahoo 1994

7. Including the schedule creator tool…

8. Wizards: Many boxes,
many pages

9. Use Wizards:
‣
When users want to accomplish a goal that has
‣
The audience is not technically savvy and is likely to
many steps. Wizards are good at making sure you
don‟t miss a step.
‣
be confused by a page with a lot of choices on it. A
Web site can have novice users, and a wizard
When the steps must be completed in order.
makes complex tasks seem easy.
Wizards are linear, so it‟s impossible to complete
‣
Bandwidth is low and downloading a single big page
them any other way.
‣
could take forever, or the tasks require several
When the task is seldom performed. Wizards can
server calls, which would also slow the page‟s load.
seem slow and plodding, so they are best used in
tasks you do only once in a while, like setting up a
printer.
‣
The task has several steps in it, performed only
once a visit, such as checkout.

10. Discuss:
WHAT SHOULD BE A WIZARD
Task:
DESIGN A WIZARD

11. You can group tasks together

12. Control Panel

13. You see them
on software in
preferences,
set
occasionally,
by experts

14. On the web, they are often account settings

15. Discuss
WHAT SHOULD BE A CONTROL PANEL
Task
DESIGN A CONTROL PANEL

16. Bring the settings and the thing modified together
TOOLBARS

17. What if we put the tasks with the thing they were modifying?

18. It‟s a toolbar
Tools here
Item affected here

19. And here
Toolbars
Tools here
Item affected here
Photoshop: toolbars on steroids
And here

20. The web uses toolbars more sparingly

21. Toolbars
Tools here
Item affected here
A simpler design is
better for infrequent
use.

22. Location, palette
GROUP LIKE ITEMS

23. 23
Fork, spoon, knife
DRAW A PLACE SETTING – 30 SECONDS

24. An Interface is like a table setting, the tools you need are next
to the food you eat. Content is the meal.

25. Two videos sites.
The “meal” is the video, and the tools
to consume (or play with) it are
arrayed around the main meal.
(P.S. There are toolbars too)

26. Why is the response so far from
the invitation?

27. 27
Task
ARTICLE OF CLOTHING:
WHAT TOOLS WHERE?

28. ZONE YOUR PAGE

29. When designing the page,
group items by similarity and
similarity of task (navigation
items together, editing items
together)
Give them visual importance
based on user number, usage
frequency and importance to
business.

30. Create “zones” for
functionality groups.
‣ You can group them
by putting white space
around them, or use
lines
‣ Remember to keep
tools close to the thing
your working on
‣

31. Zone this page

32. ZONE YOUR HOMEPAGE

33. HOW TO MAKE A WIREFRAME IN 30
SECONDS

34. Draw a rectangle

35. Add global elements

36. Next, add the key zones
‣ Start with a list of
elements, perhaps
written on post its.
Group them, then find
them homes on your
page.
‣ The fill in the actual
elements
‣

37. FINALLY, ANNOTATE

38. Consider
‣
Where does the content come from? If you have a list of related articles, specify how they‟re
related. Are they the most viewed? Most viewed from that section?
‣
What is the nature of the content? Does it vary greatly in length, size, language, and type?
‣
Is the element required or optional? What happens if the element doesn‟t appear on that page?
Does the layout change?
‣
Is the element conditional? Does it vary based on other factors? For example, do administrators
see additional links? What happens if an article doesn‟t have an associated image? What if it does?
‣
What’s the default or expected state? Ideally, what‟s supposed to happen on the page.
‣
What are the alternate or error states? How does the design change when things don‟t go right?

39. What goes in your wireframes?
INTERFACE INGREDIENTS

40. HEADER
40

41. TODAY’S CLASS
CORE PRINCIPLES
&
CONSIDERATIONS
41

42. THE LANGUAGE OF INTERFACE
42
GRAPHICAL
(UNDERSTANDING)
INTERACTIVE
(DOING)
Layout
Objects
Type
Color
Line
Hierarchy
Relationships
Affordances
HUD
Feedback
Modes
Input
Navigation

43. INTERACTIVE INTERFACE DESIGN
DOING
43

44. THE LANGUAGE OF INTERFACE
AFFORDANCES
44

45. THE LANGUAGE OF INTERFACE
BUTTONS LOOK
PUSHABLE
45

46. THE LANGUAGE OF INTERFACE
BUTTONS WITH
MEANING
46

47. THE LANGUAGE OF INTERFACE
47
LINKS LOOK
CLICKABLE

48. THE LANGUAGE OF INTERFACE
48
LINKS HAVE
HIERARCHY

49. ON SUBTLETY
When you don‟t want to interrupt an action, be subtle (think of footnotes). If they are
reading, don‟t bother them.
When you need to prompt an action, subtlety will send you to the poor house.
Tell your users what to do. Clarity is relaxing, not annoying.
49

50. 50
A QUICK BUTTON
COMPETITIVE
ANALYSIS / CRITIQUE
GO TO 3-4 WEBSITES
AND FIND 2 BUTTON /
LINK INTERACTIONS
YOU REALLY LIKE. 2
THAT YOU DISLIKE.

51. HEADS UP DISPLAY
51
Heads Up
Display:
Information
user needs
nearby to be
effective

52. HEADS UP DISPLAY
AN EMAIL HUD
All HUD, no content
52

53. HEADS UP DISPLAY
53
A
SOCIAL
HUD

54. 54
FEEDBACK

55. USER FEEDBACK
55

56. INPUT
56

57. FORM PRINCIPLES
FORM PRINCIPLES
Consider Context
Set expectations
Use appropriate inputs
Give sift and clear feedback
Ask for less
AB test
57

58. FORM PRINCIPLES
58

59. ACTIVITY: DESIGN YOUR SIGNUP FORM
STRUCTURE
59
OBJECTIVES
1. Individually design a sign-up form for
your project.
INDIVIDUALLY
15 MIN.
2. Think about the following element:
1. Name (first/last?)
2. Username/nickname?
3. Password (enter twice?)
4. Terms of Service (link/display?)
5. Sign up with Facebook/Twitter?
6. Optional demographics?
7. Over 13?

60. NAVIGATION

61. 61
Navigation: IA made visible
“Like putting an Armani suit on
Attila the Hun, interface design
only tells how to dress up an
existing behavior.” – Alan Cooper

62. Most IA is invisible
A lot of work no one sees
‣Synonym rings
‣Controlled vocabulary
If it was seen, it would be too
much to understand
We show only a part via
navigation
62

63. The magic number?
13 tabs– no one saw
them. Six tabs, everyone
saw them
63

64. But not everything is simple
Global links
Web search
Related
Services
inbox
masthead
Log out
Mail tools
Folders
And there
isn‟t even
content!
tip
inbox
ads
Other
properties
64
upsell
Write mail
upsell
ad
Mail tools
Related
Services
ad

65. Navigation orders complex pages
65

66. 66
Understanding Navigation
Message and Access
Where Am I?
Content Lives Here,
With Contextual
Navigation Inline
Or Separate.
What's Nearby?
Local Navigation
Global Navigation
What's Related
To What's Here?

67. 67
Global navigation
Where you are
‣ Brand/masthead
Where you can go (site offering)
‣ Top
level categories
Safety nets
‣ Where‟s
my (shopping cart/account/help???)

68. Global Navigation „03 vs „12
68

69. Global navigation, Blogs
69

70. Global navigation „03 vs „12
70

71. Local Navigation
I‟ve started down the path…
Now what?
‣ What are the categories of items?
‣ What are the siblings of what I see?
‣ What are the subcategories?
71

72. Local Navigation 2003
72

73. Secondary
navigation is now
temporal

74. Local Navigation
74

75. Contextual navigation
Inline links
Related items
Document management
75

76. Inline links
76

77. Related items
77

78. Pagination
Useful to reduce page
download speed and
cognitive overload.
Annoying for printing.
Impossible to predict what
you‟ll get
Users would rather scroll
than click
78

79. Ad negotiation
79

80. 80
Print/email/shar
e

81. 81
Facets as filters

82. Sort
82

83. Secondary Navigation
Site Maps
Indexes
Table of Contents
83

84. Have you ever seen this page?
84

85. How about this one?
85

86. How about this one?
86

87. You can make it helpful
“After testing several
different sitemap designs on
users, I decided to try
putting one on every page of
my small Columbian web
site. I then decided to track
how often it was used for
navigation. It turns out the
sitemap is used for over
65% of all navigation done
on the site.”
-- Usability Report by Peter Van Dijck
of poorbuthappy.com (Guide to
Columbia)
http://www.webword.com/reports/sitemap.ht
ml
87

88. Conventions
It is certainly probable, then,
that placing these objects in
expected locations would give
an e-commerce site a
competitive edge over those
that do not…
-- Examining User Expectations for the Location
of Common E-Commerce Web Objects
Usability News
4.1 2002
88

89. Conventions
If 90% or more of the big sites do things in a single
way, then this is the de-facto standard and you have to
comply. Only deviate from a design standard if your
alternative design has at least 100% higher measured
usability.
If 60-90% of the big sites do things in a single way,
then this is a strong convention and you should comply
unless your alternative design has at least 50% higher
measured usability.
If less than 60% of the big sites do things in a single way,
then there are no dominant conventions yet and you are
free to design in an alternative way.
-- Jakob Nielsen, November 14, 1999 Alertbox column
"Identifying De-Facto Standards for E-Commerce Web Sites“ ©
2003 Heidi P. Adkisson
89

90. Conventions
Some things are
becoming de rigor
Deviate when you‟ve got
something better
Not because you are
bored
90
"Identifying De-Facto Standards for E-Commerce Web Sites“ ©
2003 Heidi P. Adkisson

91. Now combine
Follow expectations based on conventions
Design a hierarchy based on task importance
Err on the side of simplicity
91

92. EXERCISE: COMPETITIVE ANALYSIS OF
NAVIGATION

93. HEADER
Q&A
93