DESIGNING INTERFACE
2
“Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper
TRANSFORM YOUR FLOWSMaking pages out of boxes and arrows
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
Each task could have a page
First Yahoo 1994
1995: first graphic logo
Remind you of something?
Including the schedule creator tool…
Wizards: Many boxes,many pages
Use Wizards:
‣ When users want to accomplish a goal that has many steps. Wizards are good at making sure you don’t miss a step.
‣ When the steps must be completed in order. Wizards are linear, so it’s impossible to complete them any other way.
‣ When the task is seldom performed. Wizards can seem slow and plodding, so they are best used in tasks you do only once in a while, like setting up a printer.
‣ The audience is not technically savvy and is likely to be confused by a page with a lot of choices on it. A Web site can have novice users, and a wizard makes complex tasks seem easy.
‣ Bandwidth is low and downloading a single big page could take forever, or the tasks require several server calls, which would also slow the page’s load.
‣ The task has several steps in it, performed only once a visit, such as checkout.
DESIGN A WIZARDTask:
WHAT SHOULD BE A WIZARDDiscuss:
You can group tasks together
Control Panel
You see them on software in preferences, set occasionally, by experts
On the web, they are often account settings
DESIGN A CONTROL PANELTask
WHAT SHOULD BE A CONTROL PANELDiscuss
TOOLBARSBring the settings and the thing modified together
What if we put the tasks with the thing they were modifying?
It’s a toolbar
Tools here Item affected here
Toolbars
Tools here Item affected here
And here
And here
Photoshop: toolbars on steroids
The web uses toolbars more sparingly
ToolbarsTools here
Item affected here
A simpler design is better for
infrequent use.
GROUP LIKE ITEMSLocation, palette
23
DRAW A PLACE SETTING – 30 SECONDS
Fork, spoon, knife
An Interface is like a table setting, the tools you need are next to the food you eat. Content is the meal.
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)
Why is the response so far from the invitation?
27
ARTICLE OF CLOTHING:WHAT TOOLS WHERE?
Task
ZONE YOUR PAGE
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.
‣ 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
Zone this page
ZONE YOUR HOMEPAGE
HOW TO MAKE A WIREFRAME IN 30 SECONDS
Draw a rectangle
Add global elements
‣ 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
FINALLY, ANNOTATE
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?
INTERFACE INGREDIENTSWhat goes in your wireframes?
40
HEADER
41
TODAY’S CLASS
CORE PRINCIPLES & CONSIDERATIONS
42
THE LANGUAGE OF INTERFACE
LayoutObjectsTypeColorLineHierarchyRelationships
INTERACTIVE (DOING)Affordances HUDFeedbackModesInputNavigation
GRAPHICAL (UNDERSTANDING)
43
INTERACTIVE INTERFACE DESIGN
DOING
44
THE LANGUAGE OF INTERFACE
AFFORDANCES
45
THE LANGUAGE OF INTERFACE
BUTTONS LOOK PUSHABLE
46
THE LANGUAGE OF INTERFACE
BUTTONS WITH MEANING
47
THE LANGUAGE OF INTERFACE
LINKS LOOK
CLICKABLE
48
THE LANGUAGE OF INTERFACE
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.
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
Heads Up Display:
Information user needs
nearby to be effective
52
HEADS UP DISPLAY
AN EMAIL HUD
All HUD, no content
53
HEADS UP DISPLAY
A SOCIAL
HUD
54
FEEDBACK
55
USER FEEDBACK
56
INPUT
57
FORM PRINCIPLES
FORM PRINCIPLES
Consider ContextSet expectationsUse appropriate inputsGive sift and clear feedbackAsk for lessAB test
58
FORM PRINCIPLES
59
ACTIVITY: DESIGN YOUR SIGNUP FORM
15 MIN.
1. Individually design a sign-up form for your project.
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?
STRUCTURE OBJECTIVES
INDIVIDUALLY
NAVIGATION
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 understandWe show only a part via navigation
63
The magic number?13 tabs– no one saw them. Six tabs, everyone saw them
64
But not everything is simple
masthead
Global links
Folders
Mail tools
ad
Other properties
upsell
Web search
Related Services
tip
inbox
ads
ad
Related Services
upsell
Mail toolsLog out
inbox Write mailAnd there isn’t even content!
65
Navigation orders complex pages
66
Understanding NavigationMessage and Access
Where Am I?
Wh
at's N
ea
rby?
What's RelatedTo What's Here?
Global Navigation
Lo
ca
l N
avig
atio
n
Content Lives Here,With ContextualNavigation Inline
Or Separate.
67
Global navigationWhere 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
69
Global navigation, Blogs
70
Global navigation ‘03 vs ‘12
71Local 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?
72Local Navigation 2003
Secondary navigation is now temporal
74
Local Navigation
75Contextual navigation
Inline linksRelated itemsDocument management
76Inline links
77Related items
78Pagination
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
79Ad negotiation
80
Print/email/share
81
Facets as filters
82Sort
83
Secondary Navigation
Site MapsIndexesTable of Contents
84
Have you ever seen this page?
85
How about this one?
86
How about this one?
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.html
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
89
ConventionsIf 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
90
Conventions
Some things are becoming de rigorDeviate when you’ve got something betterNot because you are bored
"Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson
91Now combine
Follow expectations based on conventionsDesign a hierarchy based on task importanceErr on the side of simplicity
EXERCISE: COMPETITIVE ANALYSIS OF NAVIGATION
93
Q&AHEADER