05a fundamentals of ux workshop: interface design

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] DESIGNING INTERFACE Designing the User Experience: THE FUNDAMENTALS

Upload: christina-wodtke

Post on 17-Jan-2015

393 views

Category:

Design


2 download

DESCRIPTION

Covering usable interfaces including forms and navigation design.

TRANSCRIPT

Page 1: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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: 05a Fundamentals of UX Workshop: Interface Design

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