You Don't Know C.R.A.P. about UX/UI

You Don’t Know

C.R.A.P. about UX &

UI

Who am I?

Philadelphia (‘burbs) born and raised.

B.S. in Systems & Information Engineering from UVA – 2005

Masters of Information from UC-Berkeley – 2007

First UI Design Project: Touch Screen Treadmill Interface

Current Position: Lead Interaction Designer at The Cadient Group

Who are you?

Lets Play a Game!

What is User Experience?

All aspect’s of user’s interaction with the company, its services and its products. Not only in relationship to software.

Meet the needs of the customer.

Make the products enjoyable.

Go beyond what the customer says they want.User

Experience

MarketingBrandingQuality of Service

*Nielsen-Norman Group

Gulf of Evaluation

We want a small gulf!

The common goal of all products

The user: Starts with a goal Translates to an intention Translates to a sequence of actions

The amount of effort a person must exert to interpret a display: Perceive Interpret Evaluate

*Norman, D. The Gulf of Evaluation

Small Gulf of Evaluation

I am not the user…your teammates are not the

users. And, the customer is not always the user.

User Centered Design

1. Needs Assessment

1. Personas

2. Goals

3. Task Analysis

4. User Scenarios

5. Comparative Analysis

2. Design

1. Initial Sketches, Interaction Diagrams

2. Low-Fidelity Prototyping

3. High-Fidelity Prototyping

4. Build

3. Evaluate

1. Low-Fidelity Usability Testing

2. Heuristic Evaluation

3. Formal Usability Tests

Repeat, Repeat, Repeat

The user is always right

…but they never know what they need.

Personas

When to use: The end-users’ goals are unclear, the team isn’t sure how to prioritize features

Why: Identify your most important

customers Identify user goals and

objectives. Capture use cases for the

product Develop an idea for the

market Have a common “person” to

point to

Tool to Try: Usersbox.com

Personas:

Who are the students? What matters from students’ point of

view? What are their goals?

What about the teacher?

What matters for the business?

Task Analysis

When to use: At the beginning of every design cycle.

How to use: Break a goal into specific tasks. These tasks may be referred to as

requirements Assign a priority to these

requirements based on user research and business needs. Low, Medium, High or N/A

Task AnalysisLets Try an Example

Are we ready to sketch?

Prototype & TestRepeat, repeat, repeat

Lo-Fidelity Prototyping a.k.a wireframes

When to use: To signal the flow of interaction, To separate the content from layout & display, When the designer is not the developer

Value: Save on development time, realize design problems early before making big investments.

Heavyweight Tools: Visio, Fireworks, OmniGraffle

Mediumweight Tools: Balsamiq (Cross Platform) SimpleDiagrams (Mac), Mockingbird (Web)

Lightweight Tools: Marker & Paper or Whiteboard,

Visual Design in UI Design

Contrast: If they’re not the same, make them different

Repetition: Repeat colors, shapes, fonts & sizes. Reuse patterns.

Alignment: Line things up. Make it clean.

Proximity: Group LIKE things. Put similar information close together. Organize & De-Clutter

User Scenarios & Interaction Diagrams

Design Exercise

Re-organize a flier

Point out C.R.A.P. in Google Search

Click icon to add picture

Metaphors and UI Patterns

Map to some facet of the real world task

Direct engagement & manipulation

Lots of resources out there: UI-Patterns.com Yahoo! Design Pattern Library Book: Designing Interfaces by

Jenifer Tidwell Site:

http://designinginterfaces.com/firstedition/

Example Metaphor

Why we test:

VCR Buttons to Control a Printer Tabs of Arbitrary Groups

Samples from Interface Hall of Shame

Usability Testing

Test if a page becomes more usable because of the layout.

What does the layout communicate?

Guidelines: Test the interface, not the user Give clear scenarios and tasks to

accomplish

Quick & Dirty: Not much time, Grab a co-worker

Formal: Determine time requirements for task completion, compare two designs on measurable aspects Requires Experiment Design

Discount Usability Testing

Usability Heuristics

Visibility of system status

Match between system and the real world

User control and freedom

Consistency and standards

Error prevention

Recognition rather than recall

Flexibility and efficiency of use

Aesthetic and minimalist design

Help users recognize, diagnose, and recover from errors

Help and documentation

How

Use on Lo or Hi-Fidelity Prototypes, or built products

Use a small set of 3-5 evaluators Check for compliance with

usability principles

*Jakob Nielsen

What’s wrong with this website?

Is this familiar?

Training is Not an Excuse for Poor Design

Resources

Books

The Design of Everyday Things by Donald Norman

Usability Engineering by Jakob Nielsen

The Inmates are Running the Asylum by Alan Cooper

GUI Bloopers by Jeff Johnson

PhillyCHI

Websites

DesigningInterfaces.com

Use-it.com

UI-Patterns.com

UXMag.com

AListApart.com

Local Groups