Embed Size (px)
Citation preview
UnderstandingUser Experience
VisualsWhat 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 ourbuttons look?
SURFACE
How should our buttons look?
Surface
How many buttonsappear 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 allpossible buttons?
How should our buttons look?
How many buttons appear on this screen?
Skeleton
Surface
STRUCTURE1
2 3
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?
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
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?
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
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?
STRUCTURE1
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
SurfaceFixes 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 BingChoosing 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
VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
SkeletonFixing 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 GroupRegardless 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
VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
StructureDecide which features are presented with which services.
Interested customers further learn about your offerings and capabilities.
ExpediaRemoving one field from their registration process increasedprofits by $12 million. Reference: http://www.conversionvoodoo.com/blog/2011/11/expedia-deletes-one-field-from-their-registration-process-increases-profit-12m/
1
2 3SURFACE
SKELETON
STRUCTURE 1
2 3
VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
ScopePrioritize and truly align business goals with user goals, avoiding unnecessary investments.
Offer potential customers features they actually need.
Standish GroupNearly 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
VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
StrategyUnderstand 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.
InstagramStarted 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
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
Skeleton
Scope
Strategy
Surface
1
2 3 Structure ?
![Understanding the MVVM pattern Laurent Bugnion Senior User Experience Integrator IdentityMine http://[blog|www].galasoft.ch](https://img.pdfslide.us/doc/110x75/56649c755503460f94928a3d/understanding-the-mvvm-pattern-laurent-bugnion-senior-user-experience-integrator.jpg)
