Less look,
More feel@royscholten
Frontend United Gent, 2016
UX design processHowWhatWhy
A process model for
UX design
Customerpersonas, mental models,
Markettrends, competitors
Productelevator pitch, high-levelfeature set
Conceptvisual, cust. journeys,
scenarios
Experiencedesign principles, metrics
Contentkey messages, content
strategy
Visualsketching, style tiles
Interactionwireframes, flows, prototypes
Contentcontent model, sitemap
Designdetailed designs,
components
Contentproducing it
Codebackend, frontend…
Design makes strategy concrete
Iterate towardsthe best possible solution
Why,What,How ☜ you are here
https://articles.uie.com/three_hund_million_button/
http://limi.net/checkboxes-that-kill
Micro interactions
Dan Saffer
Trigger
Something that initiates a microinteraction
Make it recognizable as such
Make it do the same thing each time
If it looks like a button, it should act like a button
The more used, the more visible
Rules
Define what can and cannot be done
Don't start from zero
Reduce controls to a minimum
Reduce options, have smart defaults
Use the rules to prevent errors
Feedback
Understand what people need to know & when
Feedback is for understanding the rules. Which rules should provide feedback?
What is the context? Should the feedback be altered by it?
Link feedback to the control and/or the resulting behaviour
Loop
http://layervault.tumblr.com/post/42361566927/progressive-reduction
Loops & modes
Use modes when there is an infrequent action that would clutter the microinteraction
Give a mode its own screen
Use loops to extend the life of a microinteraction
Use long loops to give microinteractions memory or for progressive disclosure/reduction
Create your own checklist
So you can do a design intake: what's there, what's missing?
Improve the how:
• micro-interactions• create checklists
Most decisions have already been made
Why & What have already been decided on
Why,What ☜ how to get to here?
How
Moving from How to
What
Share that checklist with project manager and designer!Show don't tell: what is missing?
Suggest multiple ways to fill the gaps
Quick & dirty: 4 hrs / Quality: 16 hrs
Enable the team to make considered trade-offs
Start from the content model
Different content types
Their relations
Ways they can be displayed
Easier to understand, resulting in better feedback
Easy to share. People can use it on their own device
Forces the use of real content
Forces you to make those links really work
Prototypes can be tested
Prototypes can be tested
Prototyping is your secret superpower!
From how to what:
• Identify the gaps• Match components• Prototype risky things
& we care about this
Why?
User experience is the result of all the small interactions combinedSmall tweaks to reduce complexity, smoothen the flow do pay off.
The UI == The app
Frontend provides the user interface. Make it as user friendly as possible.
Thank youSee you at the code sprint tomorrow?
Start where you areUse what you gotDo what you can