UX design 101

UX Design 101- Dustin Kirk

Neustar

Part 1: Tell A Story

Part 2: Keep It Simple

Part 3: Make It Look Great

Tell A Story

Know Your Audience

Develop User Personas

John Doe35 Years OldMaleReads PoetryEnjoys long walks at the beach.

Consider Mental Models

Tell A Story

Construct The Story

Business ProfessionalArtisticNon-ProfitNews / JournalEtc…

Choose The Theme

Business RequirementsTechnical ConstraintsMarketingCustomer ServiceSales

Gather Requirements

What is the beginning state?What are the user goals?What’s needed for success?

Define The Plot

BoringCasualExcitementTechnicalEtc…

Set The Tone

Telling A Story

Storyboard

13a

2

Map The Flows

3b

Progressive Disclosure

1 3

2a

2b

2c

Wireframe

1

Sandwich Principal

good goodbad

Performance Load

Hick’s Law

Menu

Flexibility-Usability Tradeoff

Form Follows Function

3:00

FormFunction

Ockham’s Razor

Make It Look Great

Aesthetics

Aesthetic Usability Effect

Legibility

HeaderSub Header

Sub Sub Header

HeaderSub HeaderSub Sub Header

Lorem ipsum dolor sit amet consectetuer

adipiscing nonummy nibh euismod tincidunt

laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum

Color Tips

Analogous Colors (side by side)

Complementary Colors (across)

Triadic Colors (equilateral triangle)

Quadratic Colors (corners of a box)

Make It Look Great

Consistency

White Space

Design Patterns

Calendar Home Link Input Feedback

Styles

Make It Look Great

Details, Details, Details

Gradients

Shadows

Borders

Corners

Spacing

More Details…

Animations

Accent Colors

Icons

Transparency

Margins

Padding

Size

Placement

TimingWording Imagery

Textures

Sound

PatternsFocus


Neustar

Bonus!

Fit’s Law

Affordance

Push Push Pull

Expectation Effect

Pygmalion effect

Rosenthal effect

Placebo effect

Halo effect

Hawthorne effect

Demand characteristics

Five Hat Racks

Alphabetical

Time

Location

Continuum

Category

A, B, C, D…

1990, 1991, 1992…

(on a map)

Height, Weight, Distance…

Plant / Animal

Hierarchy

Trees Nests Stairs

Recognition Over Recall

Name Five US Supreme Court Justices…

Clarence ThomasJohn RobertsSonia SotomayerStephen ColbertJohn StewartSandra Day O’ConnorDavid SouterOprah Winfrey

“Nobody asked your opinion,” said Alice.

“Nobody asked YOUR opinion,” said Alice

“Nobody asked your opinion,” said Alice


“Nobody asked opinion,” said Alice


Highlighting

Bold, Italics, Underlining

Typeface

Color

Inversing

Blinking

Outline

Von Restorf EffectGrocery List

MilkButterCheeseSugarPenguinPolar BearOrangesCoffeeLettuceFlourLemon

1. Strive for consistency.

2. Enable frequent users to use shortcuts.

3. Offer informative feedback.

4. Design dialog to yield closure.

5. Offer simple error handling.

6. Permit easy reversal of actions.

7. Support internal locus of control.

8. Reduce short-term memory load.

Ben ShneidermanEight Golden Rules

1. Visibility of system status

2. Match between system and real world

3. User control and freedom (undo/redo)

4. Consistency and standards

5. Error Prevention

6. Recognition rather than recall

7. Flexibility and efficiency of use (shortcuts for experts)

8. Aesthetic and minimalist design

9. Help users recognize, diagnose, and recover from errors

10. Help and documentation

Jakob NielsenTen Usability Heuristics

Universal Principles of DesignLidwell, Holden, Butler

Books

Don’t Make Me ThinkKrug


Neustar

UX design 101

Documents

Transcript of UX design 101