45
The hitchhiker’s guide To UXing without a UXer

The hitchhiker's guide to UXing without a UXer - Chrissy Welsh - Codemotion Milan 2016

Embed Size (px)

Citation preview

The hitchhiker’s guideTo UXing without a UXer

Chrissy WelshCreative Lead & Director

Why do this talk?

The ELEPHANT in the room!

“I want to build great things... I start out with good intentions but it always turns out rubbish... what happened?”

A B

Great Experience

Easy Interfaces

Happy Users

What will you learn?

• How important it is to have one vision • How to think like a user• Why you should wireframe and how to do it• How to make a throwaway prototype• How to evaluate your work• & Finally when to scrap it and start again

The Vision

The Vision - Do you have one?

Print this out...

“What one thing do you want it to do well?”

The User - Who are they?

• Really think & write out who will use your app/website

• Write out their age, education job etc.

• Name them - for example Arthur Dent

The User - What are they doing?

• Where are they going?

• What are they trying to achieve?

Why, crazy lady, are you making me name imaginary people?

Example “I just want to buy what I want and get out”

James Dent32 years oldProduct Manager

Key GoalsKnows what he wants to buyDoesn't want to browse

BehaviorsGets bored quicklyWants quality products

We MustClearly show key featuresShow only relevant offers

We must neverProvide fluffy product descriptionsOverwhelm with choice

What does it look like in real life?

This?

...or this?

Wireframes

Why wireframe?

• Fast layouts • Easy to see if you have everything you need• Fast to iterate on• Cheaper than changing code

Why wireframe?

Having one idea is great

Iterating on an idea is better

Trying multiple ideas gives you the best solution

What does it look like... really?

What does it turn into?

What if I want to use software?

Some Tools - listed

• Pen & Paper - Super Fast • Balsamiq Mockups - Fast if you’re scared of paper • Axure - Less fast but High Fidelity • Photoshop - Use if a client is going to look at it • Illustrator - If you dont like Photoshop • InvisionApp - Link those bad boys!

Prototypes

Prototypes - also for mobile!

Real Examples

What if I want to use software?

Other ways to gather data?

...another cool way

“Greatness doesn't take shortcuts”

What if I can’t evaluate it fairly?

Find a friend!

Here’s what it looks like

And when it doesn’t go as expected?

Keep it or bin it?

The end?

• How important it is to have one vision • How to think like a user• Why you should wireframe and how to do it• How to make a throwaway prototype• How to evaluate your work• & Finally when to scrap it and start again

What we have covered

Chrissy Welsh (@chrissywelsh) Question Time