Designing a Great User Experience

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

View Slide

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

View Slide

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

View Slide

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?

View Slide

UI VS. UX Design
How do I feel while using the product?

View Slide

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.

View Slide

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.

View Slide

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

View Slide

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.

View Slide

Err towards making it easier for the user.

View Slide

Phone Number:
Submit

View Slide

Phone Number:
1 (508) 833-8469 Submit

View Slide

Phone Number:
1 (508) 833-8469 Submit
Error: must be entered in this format: 555-867-5309

View Slide

Phone Number:
example: 508-833-8469 Submit

View Slide

Phone Number:
example: 508-833-8469
Submit

View Slide

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

View Slide

The Pareto Principle
For many events, roughly 80% of the effects
come from 20% of the causes.
measuringusability.com/blog/pareto-ux.php

View Slide

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

View Slide

Country:
Afghanistan Submit

View Slide

Country:
United States of America Submit
Afghanistan
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antarctica
Antigua And Barbuda
Argentina
Armenia
Aruba

View Slide

Country:
United States of America Submit
United States of America
Canada
United Kingdom
Australia
------------------------------
Afghanistan
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla

View Slide

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

View Slide

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

View Slide

Fitts’s Law

View Slide

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

View Slide

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

View Slide


View Slide

Dieter Rams: Principle 10
Good design is as little design as possible.
vitsoe.com/us/about/good-design

View Slide

He also stated this as “less, but better.” Many would refer to it as simplicity.
vitsoe.com/us/about/good-design

View Slide


View Slide

Joshua Porter: Principle 6
One primary action per screen.
bokardo.com/principles-of-user-interface-design/

View Slide

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

View Slide


View Slide

Great design is invisible.

View Slide

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.

View Slide


View Slide

BJ Fogg’s Behavior Model
Three factors drive behavior: motivation, ability and triggers.
ability
motivation
High
Low
Low
High Target behavior
Triggers fail here.
Triggers succeed here.
behaviormodel.org/

View Slide

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/

View Slide

Motivation happens on three spectrums:
Sensation: Pleasure <> Pain
Anticipation: Hope <> Fear
Social Cohesion: Acceptance <> Rejection
behaviormodel.org/

View Slide

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/

View Slide

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/

View Slide

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/

View Slide

02Methods of Effective UX Design
The habits of highly effective UX designers

View Slide

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

View Slide

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!

View Slide

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.

View Slide

1. Be Prolific
teehanlax.com/story/medium/

View Slide

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.

View Slide

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

View Slide

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

View Slide

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.

View Slide

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

View Slide

3. Iterate
azarask.in/blog/post/iterative_design_isnt_design_by/

View Slide

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.

View Slide

4. Be Flexible
Each change has the potential to affect every other deliverable.

View Slide

03Artifacts of a UX Design Process
The things we build

View Slide

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/

View Slide

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.

View Slide

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.

View Slide

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.

View Slide

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

View Slide

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.

View Slide

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.

View Slide

User Stories & Features
https://www.apptrajectory.com/

View Slide

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.

View Slide

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.

View Slide

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.

View Slide


View Slide

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

View Slide

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.

View Slide

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

View Slide

Prototypes
These products can help you prototype:
Foundation: foundation.zurb.com
Bootstrap: twitter.github.io/bootstrap
Ratchet: maker.github.io/ratchet
Flinto: flinto.com
Briefs: giveabrief.com
POP: popapp.in
Xcode/Storyboard: blog.mengto.com/prototype-xcode-storyboard

View Slide

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.

View Slide

04What to Build and Why
Your first test

View Slide

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?

View Slide

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.

View Slide

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.

View Slide

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.

View Slide

Steve Krug’s Maxims of User Testing
A morning a month, that’s all we ask.
sensible.com/rsme.html

View Slide

Start earlier than you think makes sense.

View Slide

Recruit loosely and grade on a curve.

View Slide

Make it a spectator sport.

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Designing a Great User Experience

Designing a Great User Experience

Steve Hickey

More Decks by Steve Hickey

Other Decks in Design

Featured

Transcript