05a Fundamentals of UX Workshop: Interface Design

Designing the User Experience: THE FUNDAMENTALS
DESIGNING
INTERFACE
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 cwodtke@eleganthack.com

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

Making pages out of boxes and arrows
TRANSFORM YOUR FLOWS

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

Each task could have a page

Remind you of something?
1995: first graphic logo
To have this workshop at your business or conference , contact cwodtke@eleganthack.com First Yahoo 1994

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.

WHAT SHOULD BE A WIZARD
Discuss:

You can group tasks together

Control Panel

on software
in
preferences,
set
occasionally,
by experts

On the web, they are often account settings

WHAT SHOULD BE A CONTROL PANEL
Discuss

Bring the settings and the thing modified together
TOOLBARS

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

It’s a toolbar
Tools here
Item affected here

And here
ToToloso hlebraers
Item affected here And here
Photoshop: toolbars on steroids

The web uses toolbars more sparingly

ToToools herle bars
Item affected here
A simpler design is
better for infrequent
use.

Location, palette
GROUP LIKE ITEMS

Where does the fork go?
QUIZ
2
3

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?

A BAG OF APPLES
WHAT TOOLS DO YOU HAVE?
WHERE DO THEY GO?
Exercise
2
7

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

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?

Each person from team takes one page
WIREFRAME A PAGE: 10 MINUTES
Search
Homepage
Item page
Checkout
3
8

What goes in your wireframes?
INTERFACE INGREDIENTS

4
0
HEADER

4
CORE PRINCIPLES 1
&
CONSIDERATIONS

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

4
3
INTERACTIVE INTERFACE DESIGN
1. DOING

4
4
AFFORDANCES

4
5
BUTTONS LOOK PUSHABLE

4
6
BUTTONS HAVE MEANING

4
7
LINKS
LOOK
CLICKABLE

4
8
LINKS HAVE
HIERARCHY

4
9
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.

5
1
HEADS UP DISPLAY
Heads Up
Display:
Information
user needs
nearby to be
effective

AN EMAIL HUD
5
2
HEADS UP DISPLAY
All HUD, no content

A
SOCIAL
HUD
5
3
HEADS UP DISPLAY

5
4
INPUT

Consider Context
Set expectations
Use appropriate inputs
Give swift and clear feedback
Ask for less
AB test
5
5
FORM PRINCIPLES

5
6
FORM PRINCIPLES

5
7

5
8

5
9

STRUCTURE OBJECTIVES
6
0
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?
INDIVIDUALLY

NAVIGATION

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

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

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???)
6
5

Global Navigation ‘03 vs ‘12 6
6

Global navigation ‘03 vs ‘12 6
7

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?
– Can I narrow my search?
6
8

Local Navigation 2003 6
9

Secondary
navigation is now
temporal

Pagination 7
1
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

Facets as filters 7
2

Print/e
mail/sh
are
7
3

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

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

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

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

EXERCISE: COMPETITIVE ANALYSIS
OF NAVIGATION
Find:
Global
Local
Inline
Related items
Facets as filters
Social buttons

7
Q&A 9

05a Fundamentals of UX Workshop: Interface Design

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Destacado

Destacado (20)

Similar a 05a Fundamentals of UX Workshop: Interface Design

Similar a 05a Fundamentals of UX Workshop: Interface Design (20)

Más de Christina Wodtke

Más de Christina Wodtke (20)

Último

Último (20)

05a Fundamentals of UX Workshop: Interface Design