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

Why,What,How ☜ you are here

Improve the

How

https://articles.uie.com/three_hund_million_button/

http://limi.net/checkboxes-that-kill

Micro interactions

Dan Saffer

Trigger

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

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

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

Loop

http://layervault.tumblr.com/post/42361566927/progressive-reduction

Mode

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

yes,

But

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

Responsive!

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