Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Understanding

User Experience
Visuals
What does it look like?
It’s not just what it looks like and
feels like. Design is how it works.
- Steven Jobs
Aesthetics, Functionality, Context
How should our

buttons look?
SURFACE
How should our buttons look?
Surface
How many buttons

appear on this screen?
How should our buttons look?
Surface
SKELETON
How should our buttons look?
How many buttons appear on this screen?
Skeleton
Surface
How do we organize all

possible but...
How should our buttons look?
How many buttons appear on this screen?
Skeleton
Surface
STRUCTURE
1
2 3
How should our buttons look?
How many buttons appear on this screen?
How do we organize all possible buttons?
Skeleton
Sur...
How should our buttons look?
How many buttons appear on this screen?
How do we organize all possible buttons?
Skeleton
Sur...
How should our buttons look?
How many buttons appear on this screen?
How do we organize all possible buttons?
What buttons...
How should our buttons look?
How many buttons appear on this screen?
How do we organize all possible buttons?
What buttons...
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Example
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Options Menu
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Which tab is currently selected?
SURFACE
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Does this button affect all tabs, or just this one?
SKELETON
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Which tab would you choose to enable subtitles?
STRUCTURE
1
2 3
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Should Framerate Smoothing even be an option?
SCOPE
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Is a menu the best way for users to adjust settings?
STRATEGY
Why invest in a layer?
VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Surface
Fixes basic usability issues such
as text...
VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Skeleton
Fixing the overall layout of a page
will...
VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Structure
Decide which features are
presented wit...
VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Scope
Prioritize and truly align business
goals w...
VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Strategy
Understand how this product fits
in the l...
How should our buttons look?
How many buttons appear on this screen?
How do we organize all possible buttons?
What buttons...
Skeleton
Scope
Strategy
Surface
1
2 3
Structure
?
Upcoming SlideShare
Loading in …5
×

Understanding user experience

106 views

Published on

"Design isn't what it looks like or feels like. Design is how it works."

This model, adapted from Jesse James Garrett, explains how User Experience is not Visual Design. Let's look at an example and then understand what the business benefits are of investing at each layer of this model.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Understanding user experience

  1. 1. Understanding
 User Experience
  2. 2. Visuals What does it look like?
  3. 3. It’s not just what it looks like and feels like. Design is how it works. - Steven Jobs
  4. 4. Aesthetics, Functionality, Context
  5. 5. How should our
 buttons look?
  6. 6. SURFACE
  7. 7. How should our buttons look? Surface How many buttons
 appear on this screen?
  8. 8. How should our buttons look? Surface SKELETON
  9. 9. How should our buttons look? How many buttons appear on this screen? Skeleton Surface How do we organize all
 possible buttons?
  10. 10. How should our buttons look? How many buttons appear on this screen? Skeleton Surface STRUCTURE 1 2 3
  11. 11. How should our buttons look? How many buttons appear on this screen? How do we organize all possible buttons? Skeleton Surface 1 2 3 Structure What buttons do users need?
  12. 12. How should our buttons look? How many buttons appear on this screen? How do we organize all possible buttons? Skeleton Surface 1 2 3 Structure SCOPE
  13. 13. How should our buttons look? How many buttons appear on this screen? How do we organize all possible buttons? What buttons do users need? Skeleton Scope Surface 1 2 3 Structure Do users need buttons at all?
  14. 14. How should our buttons look? How many buttons appear on this screen? How do we organize all possible buttons? What buttons do users need? Do users need buttons at all? Skeleton Scope Strategy Surface 1 2 3 Structure
  15. 15. SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 Example
  16. 16. SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 Options Menu
  17. 17. SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 Which tab is currently selected? SURFACE
  18. 18. SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 Does this button affect all tabs, or just this one? SKELETON
  19. 19. SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 Which tab would you choose to enable subtitles? STRUCTURE 1 2 3
  20. 20. SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 Should Framerate Smoothing even be an option? SCOPE
  21. 21. SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 Is a menu the best way for users to adjust settings? STRATEGY
  22. 22. Why invest in a layer?
  23. 23. VALUEOUTCOMES CASE STUDY SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 Surface Fixes basic usability issues such as text that’s hard to read due to font size, color, or placement. Users already familiar with the product becomes more efficient. Microsoft Bing Choosing a specific color blue over other lighter hues amounted to an additional $80 million in annual revenue.
 Reference: https://www.cnet.com/news/behind-bings-blue-links/ SURFACE
  24. 24. VALUEOUTCOMES CASE STUDY SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 Skeleton Fixing the overall layout of a page will allow for better discoverability of content and features. Users already invested are exposed to new offerings or features. Neilson Norman Group Regardless of screen size, the average difference in how users treat info above vs. below-the-fold is 84%.
 Reference: https://www.nngroup.com/articles/page-fold-manifesto/ SURFACE SKELETON
  25. 25. VALUEOUTCOMES CASE STUDY SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 Structure Decide which features are presented with which services. Interested customers further learn about your offerings and capabilities. Expedia Removing one field from their registration process increased
 profits by $12 million.
 Reference: http://www.conversionvoodoo.com/blog/2011/11/expedia-deletes-one-field-from-their-registration-process-increases-profit-12m/ 1 2 3 SURFACE SKELETON STRUCTURE 1 2 3
  26. 26. VALUEOUTCOMES CASE STUDY SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 Scope Prioritize and truly align business goals with user goals, avoiding unnecessary investments. Offer potential customers features they actually need. Standish Group Nearly 80% of software costs occur during the maintenance phase. 60% of the maintenance phase is due to rework because the user requirements were not clear in the beginning.
 Reference: http://info.humanfactors.com/acton/attachment/4167/4167:f-003b/1/%7B%7BEnv.MsgId%7D%7D/Bdc4167:f-003b/%7B%7BEnv.SrcId%7D%7D/ %7B%7BEnv.RecId%7D%7D/ SURFACE SKELETON STRUCTURE SCOPE 1 2 3
  27. 27. VALUEOUTCOMES CASE STUDY SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3 Strategy Understand how this product fits in the larger journey a user is taking with your organization. Gain prospective customers by considering the rationals of your users. Instagram Started as a check-in app, similar to four square, in 2009.
 Cut everything except Photo, Comment, and Like in 2010.
 Sold to Facebook for $1 billion in 2012.
 Reference: http://www.theatlantic.com/technology/archive/2014/07/instagram-used-to-be-called-brbn/373815/ SURFACE SKELETON STRUCTURE SCOPE STRATEGY 1 2 3
  28. 28. How should our buttons look? How many buttons appear on this screen? How do we organize all possible buttons? What buttons do users need? Do users need buttons at all? Skeleton Scope Strategy Surface 1 2 3 Structure
  29. 29. Skeleton Scope Strategy Surface 1 2 3 Structure ?

×