Page 1
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
DESIGNING INTERFACE
Designing the User Experience: THE FUNDAMENTALS
Page 2
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
2
“Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper
Page 3
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
TRANSFORM YOUR FLOWSMaking pages out of boxes and arrows
Page 4
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
A task analysis
Information Architecture: Blueprints for the Web, this is a task analysis for a website for Sundance film festival, featuring a schedule planner
Page 5
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Each task could have a page
Page 6
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
First Yahoo 1994
1995: first graphic logo
Remind you of something?
Page 7
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Including the schedule creator tool…
Page 8
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Wizards: Many boxes, many pages
Page 9
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
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.
Page 10
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
WHAT SHOULD BE A WIZARD
Discuss:
Page 11
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
You can group tasks together
Page 12
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Control Panel
Page 13
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
You see them on software in preferences, set occasionally, by experts
Page 14
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
On the web, they are often account settings
Page 15
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
WHAT SHOULD BE A CONTROL PANEL
Discuss
Page 16
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
TOOLBARSBring the settings and the thing modified together
Page 17
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
What if we put the tasks with the thing they were modifying?
Page 18
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
It’s a toolbar
Tools here Item affected here
Page 19
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
ToolbarsTools here Item affected
hereAnd here
And here
Photoshop: toolbars on steroids
Page 20
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
The web uses toolbars more sparingly
Page 21
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
ToolbarsTools here
Item affected here
A simpler design is better for
infrequent use.
Page 22
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
GROUP LIKE ITEMSLocation, palette
Page 23
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
QUIZWhere does the fork go?
23
Page 24
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
An Interface is like a table setting, the tools you need are next to the food you eat. Content is the meal.
Page 25
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
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)
Page 26
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Why is the response so far from the invitation?
Page 27
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
A BAG OF APPLESWHAT TOOLS DO YOU HAVE?WHERE DO THEY GO?
Exercise
27
Page 28
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
ZONE YOUR PAGE
Page 29
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
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.
Page 30
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
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
Page 31
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Zone this page
Page 32
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
HOW TO MAKE A WIREFRAME IN 30 SECONDS
Page 33
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Draw a rectangle
Page 34
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Add global elements
Page 35
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
‣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
Page 36
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Finally, Annotate
Page 37
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
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?
Page 38
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
WIREFRAME A PAGE: 10 MINUTES
Each person from team takes one page
Search
Homepage
Item page
Checkout
38
Page 39
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
INTERFACE INGREDIENTSWhat goes in your wireframes?
Page 40
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
40
HEADER
Page 41
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
41CORE
PRINCIPLES & CONSIDERATIONS
Page 42
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
LayoutObjectsTypeColorLineHierarchyRelationships
Affordances HUDFeedbackModesInputNavigation
42
THE LANGUAGE OF INTERFACE
INTERACTIVE (DOING)
GRAPHICAL (UNDERSTANDING)
Page 43
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
43
INTERACTIVE INTERFACE DESIGN
1. DOING
Page 44
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
44
THE LANGUAGE OF INTERFACE
AFFORDANCES
Page 45
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
45
THE LANGUAGE OF INTERFACE
BUTTONS LOOK PUSHABLE
Page 46
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
46
THE LANGUAGE OF INTERFACE
BUTTONS HAVE MEANING
Page 47
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
47
THE LANGUAGE OF INTERFACE
LINKS LOOK
CLICKABLE
Page 48
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
48
THE LANGUAGE OF INTERFACE
LINKS HAVE HIERARCHY
Page 49
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
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.
Page 50
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
51
HEADS UP DISPLAY
Heads Up Display:
Information user needs
nearby to be effective
Page 51
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
AN EMAIL HUD52
HEADS UP DISPLAY
All HUD, no content
Page 52
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
A SOCIAL HUD
53
HEADS UP DISPLAY
Page 53
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
54
INPUT
Page 54
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Consider ContextSet expectationsUse appropriate inputsGive swift and clear feedbackAsk for lessAB test
55
FORM PRINCIPLES
Page 55
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
56
FORM PRINCIPLES
Page 56
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
57
Page 57
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
58
Page 58
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
59
Page 59
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
60
ACTIVITY: DESIGN YOUR SIGNUP FORM
5 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
Page 60
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
NAVIGATION
Page 61
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Most IA is invisibleA 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
Page 62
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Understanding Navigation 64Messaging 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.
Page 63
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Global navigationWhere you are
– Brand/masthead
Where you can go (site offering)– Top level categories
Safety nets– Where’s my (shopping cart/account/help???)
65
Page 64
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Global Navigation ‘03 vs ‘12 66
Page 65
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Global navigation ‘03 vs ‘12 67
Page 66
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Local NavigationI’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?– Can I narrow my search?
68
Page 67
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Local Navigation 2003 69
Page 68
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Secondary navigation is now temporal
Page 69
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Pagination 71
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
Page 70
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Facets as filters 72
Page 71
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
73
Page 72
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
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 ObjectsUsability News
4.1 2002
Page 73
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
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
Page 74
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Conventions
‣Some things are becoming de rigor
‣Deviate when you’ve got something better
‣Not because you are bored
"Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson
Page 75
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
Now combineFollow expectations based on conventionsDesign a hierarchy based on task importanceErr on the side of simplicity
77
Page 76
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
EXERCISE: COMPETITIVE ANALYSIS OF NAVIGATION
Find:
Global
Local
Inline
Related items
Facets as filters
Social buttons
Page 77
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact [email protected]
79Q&A