Post on 12-May-2015
UX Design 101- Dustin Kirk
Neustar
Part 1: Tell A Story
Part 2: Keep It Simple
Part 3: Make It Look Great
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
Part 1: Tell A Story
Part 2: Keep It Simple
Part 3: Make It Look Great
Part 1: Tell A Story
Part 2: Keep It Simple
Part 3: Make It Look Great
Performance Load
Hick’s Law
Menu
Flexibility-Usability Tradeoff
Form Follows Function
3:00
FormFunction
Ockham’s Razor
Part 1: Tell A Story
Part 2: Keep It Simple
Part 3: Make It Look Great
Part 1: Tell A Story
Part 2: Keep It Simple
Part 3: Make It Look Great
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
Color
Gradients
Shadows
Borders
Corners
Spacing
More Details…
Animations
Accent Colors
Icons
Transparency
Margins
Padding
Size
Placement
TimingWording Imagery
Textures
Sound
PatternsFocus
Part 1: Tell A Story
Part 2: Keep It Simple
Part 3: Make It Look Great
Part 1: Tell A Story
Part 2: Keep It Simple
Part 3: Make It Look Great
UX Design 101- Dustin Kirk
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 your opinion,” said Alice
“Nobody asked opinion,” said Alice
“Nobody asked your 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
UX Design 101- Dustin Kirk
Neustar