Designing A Great User Experience

99
Designing A Great User Experience Presented by Steve Hickey — fresh tilled soil fresh tilled soil Designing A Great User Experience

description

 

Transcript of Designing A Great User Experience

Page 1: Designing A Great User Experience

Designing A Great User Experience

Presented by Steve Hickey — fresh tilled soil

fresh tilled soil

Designing AGreat User Experience

Page 2: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

About Your Instructor

Hi, I’m Steve Hickey.

I design and develop for Fresh Tilled Soil.

I write, speak and teach.

You can find me on Twitter @stevehickeydsgn

Page 3: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

01What is User Experience Design?UI vs UX and select principles of user experience design

Page 4: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

UI VS. UX Design

User Interface Design is:A component of User Experience Design. It’s the look and the feel, the form.

User Experience Design is:The bigger picture. How well does the site/app function? Is it pleasant to use? Can a user accomplish their goals with ease?

Page 5: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

UI VS. UX Design

How do I feel while using the product?

Page 6: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

UI VS. UX Design

All of the pieces of building a product affect the UX.

Excellent user interface design is part of what creates a great user experience. But you can have a great UI with a terrible experience.

Page 7: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Select Principles

Let’s talk about some of the things that a great user experience designer must keep in mind when building a truly amazing product for the web.

This list is not exhaustive, but the provided sources have a lot more info.

Page 8: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Robustness Principle

Be conservative in what you do, be liberal in what you accept from others.

alistapart.com/article/your-website-has-two-faces

Page 9: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Robustness Principle

In other words, there are certain constraints that must be embraced to balance human needs with computer needs for a robust web application.

• It must accept input in a human-friendly fashion.

• It must accept the burden of translating info to a computer-friendly format.

• It must be clear about what human input is reasonable.

• It must provide feedback on this input.

alistapart.com/article/your-website-has-two-faces

Page 10: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Robustness Principle

Err towards making it easier for the user.

alistapart.com/article/your-website-has-two-faces

Page 11: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Robustness Principle

Phone Number:Submit

Page 12: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Robustness Principle

Phone Number:1 (508) 833-8469 Submit

Page 13: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Robustness Principle

Phone Number:1 (508) 833-8469 Submit

Error: must be entered in this format: 555-867-5309

Page 14: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Robustness Principle

Phone Number:example: 508-833-8469 Submit

Page 15: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Robustness Principle

Phone Number:

example: 508-833-8469

Submit

Page 16: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Robustness Principle

Phone Number:__ __ __ - __ __ __ - __ __ __ __ Submit

Page 17: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Pareto Principle

For many events, roughly 80% of the effects come from 20% of the causes.

measuringusability.com/blog/pareto-ux.php

Page 18: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Pareto Principle

In other words, focusing on the top 20% of your bugs and design problems can fix 80% of the problems encountered by your users.

Or, 80% of your users will only use 20% of your features/options.

measuringusability.com/blog/pareto-ux.php

Page 19: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Pareto Principle

Country:Afghanistan Submit

Page 20: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Pareto Principle

Country:United States of America SubmitAfghanistan

AlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua And BarbudaArgentinaArmeniaAruba

Page 21: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Pareto Principle

Country:United States of America SubmitUnited States of America

CanadaUnited KingdomAustralia------------------------------AfghanistanAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguilla

Page 22: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Fitts’s Law

The time required to rapidly move to a target area is a function of the distance to

the target and the size of the target.

codinghorror.com/blog/2006/08/fitts-law-and-infinite-width.html

Page 23: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Fitts’s Law

In other words, the farther away a touch/click target is from where the user starts, the larger it needs to be in order for it to be quickly and

accurately reached.

Two ways to make frequently used items easier to click/tap:1: Put them near the edge of the screen.2. Make them larger than other items.

codinghorror.com/blog/2006/08/fitts-law-and-infinite-width.html

Page 24: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Fitts’s Law

Page 25: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Fitts’s Law

Page 26: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Principle of Least Astonishment

When two elements of an interface conflict or are ambiguous, the behavior should be

that which will least surprise the user.

wikipedia.org/wiki/Principle_of_least_astonishment

Page 27: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Principle of Least Astonishment

In other words, the best result of an action is whatever the user is most likely to expect, not the result that comes through in depth knowledge.

This will change from system to system. Mac OSX users could expect something different than Microsoft Windows users. Android and iOS have

different design patterns for different interactions as well.

wikipedia.org/wiki/Principle_of_least_astonishment

Page 28: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Principle of Least Astonishment

Page 29: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

The Principle of Least Astonishment

Page 30: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Dieter Rams: Principle 10

Good design is as little design as possible.

vitsoe.com/us/about/good-design

Page 31: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Dieter Rams: Principle 10

He also stated this as “less, but better.” Many would refer to it as simplicity.

vitsoe.com/us/about/good-design

Page 32: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Dieter Rams: Principle 10

Page 33: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Dieter Rams: Principle 10

Page 34: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Joshua Porter: Principle 6

One primary action per screen.

bokardo.com/principles-of-user-interface-design/

Page 35: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Joshua Porter: Principle 6

Screens or states with more than one primary action become confusing. It’s better for any screen to have one primary reason for existing.

bokardo.com/principles-of-user-interface-design/

Page 36: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Joshua Porter: Principle 6

Page 37: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Joshua Porter: Principle 6

Page 38: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Joshua Porter: Principle 17

Great design is invisible.

bokardo.com/principles-of-user-interface-design/

Page 39: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Joshua Porter: Principle 17

An interface shouldn’t distract a user from what they are trying to accomplish, which is the reason the interface exists in the first place. Turn

the special effects down a notch.

bokardo.com/principles-of-user-interface-design/

Page 40: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Joshua Porter: Principle 17

Page 41: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Joshua Porter: Principle 17

Page 42: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

BJ Fogg’s Behavior Model

Three factors drive behavior: motivation, ability and triggers.

ability

motivatio

n

HighLow

Low

High Target behavior

Triggers fail here.

Triggers succeed here.

behaviormodel.org/

Page 43: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

BJ Fogg’s Behavior Model

The amount of motivation and ability required vary based on how much of the other is present. These must be combined with an effective trigger for a

target behavior to happen.

All three are required to persuade a user to do something.

behaviormodel.org/

Page 44: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

BJ Fogg’s Behavior Model

Motivation happens on three spectrums:

Sensation: Pleasure <> PainAnticipation: Hope <> Fear

Social Cohesion: Acceptance <> Rejection

behaviormodel.org/

Page 45: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

BJ Fogg’s Behavior Model

You can increase ability in two ways:

Train Your User: Harder to do but sometimes necessary.Make The Target Behavior Easier: Usually the right thing to do.

behaviormodel.org/

Page 46: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

BJ Fogg’s Behavior Model

In other words, make it simpler.

Think of simplicity as a function of your scarcest resource at the moment in which you want to accomplish something. Time and money fit this model.

behaviormodel.org/

Page 47: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Resources

You can read a lot more at these sites:

Joshua Porter: bokardo.com/principles-of-user-interface-design/Dieter Rams: vitsoe.com/us/about/good-design

Jeremy Keith: principles.adactio.com/BJ Fogg: behaviormodel.org/

Page 48: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

02Methods of Effective UX DesignThe habits of highly effective UX designers

Page 49: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Methods

Every UX designer’s process is different, but the way successful ones approach their process include some useful commonalities.

Page 50: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

1. Be Prolific

Your best idea is never your first. Don’t tell me it is, I don’t believe you. Come up with 5 ideas. Come up with 10. Come up with 20!

Page 51: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

1. Be Prolific

The point is to get the obvious out of your system. Once you’ve gotten past that you can really start to be creative and innovative.

Page 52: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

1. Be Prolific

teehanlax.com/story/medium/

Page 53: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

1. Be Prolific

teehanlax.com/story/medium/

Page 54: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

1. Be Prolific

teehanlax.com/story/medium/

Page 55: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

1. Be Prolific

teehanlax.com/story/medium/

Page 56: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

1. Be Prolific

teehanlax.com/story/medium/

Page 57: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

1. Be Prolific

teehanlax.com/story/medium/

Page 58: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

2. Collaborate

Nobody works well in a vacuum. When you don’t seek outside opinions you can get trapped and focus on things that may not be as important.

Page 59: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

2. Collaborate

Other opinions will break you out of mental traps and improve your work.

Page 60: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

2. Collaborate

designstaff.org/articles/product-design-sprint-day-2-diverge-2012-10-26.html

Page 61: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

3. Iterate

The best way to test your assumptions is to make something. You’ll get a lot of stuff wrong, but there’s no better way to learn about your problems

and move beyond them.

Page 62: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

3. Iterate

Fail early and often and you’ll set yourself up better for eventual success.

Page 63: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

3. Iterate

azarask.in/blog/post/iterative_design_isnt_design_by/

Page 64: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

4. Be Flexible

As you work you’ll realize that previous assumptions needs to be changed. You shouldn’t think of deliverables as a checklist, they are a web of

connected items.

Page 65: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

4. Be Flexible

Each change has the potential to affect every other deliverable.

Page 66: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

03Artifacts of a UX Design ProcessThe things we build

Page 67: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Definition Statement

1. What is the product’s experience? 2. What is the product meant to do? 3. What is the product’s audience?

iosworkshops.com/

Page 68: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Definition Statement

This should be short. A couple of sentences, a brief paragraph at most.

It is the guiding principle of what you’re building.

Page 69: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

User Types & User Personas

User types rely on existing data and informed assumptions to decide what distinct types of users you have and what they will want to accomplish.

They aren’t complicated, they’re just a quick way of remembering the differences in your primary users and their objectives.

Page 70: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

User Types & User Personas

User personas are much more involved, requiring research and interviews with actual potential users, and typically take weeks or months to compile.

Findings are compiled into categories, then assigned traits, habits, names and photos so that they are visible and easy to remember as you work.

Page 71: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

User Types & User Personas

uxmag.com/articles/personas-the-foundation-of-a-great-user-experience

Page 72: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

User Types & User Personas

Whether you decide to deal with user types or user personas is a question of resources and time, but using at least one of them tends to remind you

that your users are real.

Page 73: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

User Stories & Features

As a { type } user, I would like to { task/objective }.

These become your features. Have you come up with a feature idea that doesn’t fit into a user story? It may not be nearly as important as you

thought it was.

Page 74: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

User Stories & Features

https://www.apptrajectory.com/

Page 75: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Site Map & User Journeys

Features are going to fit into logical groups that define pages and flows. Placing these into a site map will help you create the appropriate

relationships between components, and show you just how simple or complex your plan is.

Page 76: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Wireframes & Sketches

Your wireframes are the blueprints for your product. They generally consist of layouts of the pages and flows you listed previously.

They help make sure all functionality is available, and that there is a logical hierarchy. Beyond those basics, wireframes really shouldn’t be used to

dictate design decisions.

Page 77: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Wireframes & Sketches

Wireframes don’t even have to be high fidelity to be effective. Sketches can make excellent wireframes if they’re complete and well rendered.

As another advantage, sketches are much faster to produce and iterate through than other, higher fidelity methods of wireframing.

Page 78: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Wireframes & Sketches

Page 79: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Wireframes & Sketches

Page 80: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Wireframes & Sketches

Page 81: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Wireframes & Sketches

Page 82: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Prototypes

Prototypes are a bit more advanced than wireframes. They mimic completed functionality to the point that you can run tests with a user.

Page 83: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Prototypes

They can be as small as a single piece of functionality, or they can mimic a completed product in every meaningful way. They are used to test a product

without building it.

A good prototype helps you decide what to build.

Page 84: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Prototypes

alistapart.com/article/dive-into-responsive-prototyping-with-foundation

Page 85: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Prototypes

These products can help you prototype:

Foundation: foundation.zurb.comBootstrap: twitter.github.io/bootstrap

Ratchet: maker.github.io/ratchetFlinto: flinto.com

Briefs: giveabrief.comPOP: popapp.in

Xcode/Storyboard: blog.mengto.com/prototype-xcode-storyboard

Page 86: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

User Tests

A user test helps you validate whatever you decided to build.

You can test a finished product and get lots of great information, but the greatest advantage is conferred when you are able to start testing early.

We’ll discuss this more in the next section.

Page 87: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

04What to Build and WhyYour first test

Page 88: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

So, what Should I build?

Whatever you can. Sometimes that’s not much. But ask yourself this:

Would you rather invest years and millions of dollars into building something only to find out nobody can figure out how it works? Or even

worse, that nobody wants it?

Page 89: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Prototype

For us, the answer is often a prototype. We aren’t back-end developers, we don’t employ back-end developers. If we aren’t working with a dev team yet we still need to build something to test. Fortunately, front-end tech makes

it easy to fake a back-end.

Page 90: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Minimum Viable Product

For startups and product companies a minimum viable product is often the answer. An MVP is popular in Lean circles. Building one means building the

smallest thing you can learn something from. Build it, test it, learn from those tests, build something new.

It is the smallest amount of effort you can go to and still get validated learning from it.

Page 91: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Usability Testing

Regardless of what you build, you should test it with real users. Assumptions are often wrong, and a user test will uncover that quickly.

Page 92: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Steve Krug’s Maxims of User Testing

A morning a month, that’s all we ask.

sensible.com/rsme.html

Page 93: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Steve Krug’s Maxims of User Testing

Start earlier than you think makes sense.

sensible.com/rsme.html

Page 94: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Steve Krug’s Maxims of User Testing

Recruit loosely and grade on a curve.

sensible.com/rsme.html

Page 95: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Steve Krug’s Maxims of User Testing

Make it a spectator sport.

sensible.com/rsme.html

Page 96: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Steve Krug’s Maxims of User Testing

Focus ruthlessly on a small number of the most important problems.

sensible.com/rsme.html

Page 97: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Steve Krug’s Maxims of User Testing

When fixing problems, always do the least you can do.

sensible.com/rsme.html

Page 98: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Steve Krug’s Maxims of User Testing

Read this. Thank me later. I’ll let Steve know I’m expecting a commission.

sensible.com/rsme.html

Page 99: Designing A Great User Experience

fresh tilled soil Designing A Great User Experience

Q&A

We’ll do Q&A now.

If you’re looking for some of the sources I used,

you can find this presentation on Slideshare:

goo.gl/MAbqN