user experience & web product design
DESCRIPTION
TRANSCRIPT
![Page 1: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/1.jpg)
UX & Web Product Design
Presented by Steve Hickey — fresh tilled soil
fresh tilled soil
User Experience &Web Product Design
![Page 2: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/2.jpg)
fresh tilled soil UX & Web Product Design
About Your Instructor
Hi, I’m Steve Hickey.
I design and develop apps/sites for Fresh Tilled Soil.
I write, speak and teach.
You can find me on Twitter @stevehickeydsgn
![Page 3: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/3.jpg)
fresh tilled soil UX & Web Product Design
Course Structure
• session 1: What is User Experience Design?
• lunch
• session 2: Starting at Zero: Methods & Artifacts of UX Design
• session 3: Your First Test: What to Build and Why
![Page 4: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/4.jpg)
fresh tilled soil UX & Web Product Design
01 What is User Experience Design?UI vs UX and select principles of user experience design
![Page 5: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/5.jpg)
fresh tilled soil UX & Web Product Design
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 6: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/6.jpg)
fresh tilled soil UX & Web Product Design
UI VS. UX Design
How does a user feel while using it?
![Page 7: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/7.jpg)
fresh tilled soil UX & Web Product Design
UI VS. UX Design
They are both incredibly important.
Excellent user interface design is part of what creates a great user experience. But you can have a great UI with a terrible experience. The opposite is harder, but also possible.
![Page 8: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/8.jpg)
fresh tilled soil UX & Web Product Design
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 by no means exhaustive, but it should spark a conversation.
![Page 9: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/9.jpg)
fresh tilled soil UX & Web Product Design
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 10: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/10.jpg)
fresh tilled soil UX & Web Product Design
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 that information 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 11: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/11.jpg)
fresh tilled soil UX & Web Product Design
The Robustness Principle
Err towards serving the user.
alistapart.com/article/your-website-has-two-faces
![Page 12: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/12.jpg)
fresh tilled soil UX & Web Product Design
The Robustness Principle
Phone Number:
Submit
![Page 13: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/13.jpg)
fresh tilled soil UX & Web Product Design
The Robustness Principle
Phone Number:
1 (508) 833-8469 Submit
![Page 14: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/14.jpg)
fresh tilled soil UX & Web Product Design
The Robustness Principle
Phone Number:
1 (508) 833-8469 Submit
Error: must be entered in this format: 555-867-5309
![Page 15: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/15.jpg)
fresh tilled soil UX & Web Product Design
The Robustness Principle
Phone Number:
example: 508-833-8469 Submit
![Page 16: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/16.jpg)
fresh tilled soil UX & Web Product Design
The Pareto Principle
For many events, roughly 80% of the effects come from 20% of the causes.
measuringusability.com/blog/pareto-ux.php
![Page 17: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/17.jpg)
fresh tilled soil UX & Web Product Design
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 18: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/18.jpg)
fresh tilled soil UX & Web Product Design
The Pareto Principle
Country:
United States of America Submit
![Page 19: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/19.jpg)
fresh tilled soil UX & Web Product Design
The Pareto Principle
Country:
United States of America SubmitAfghanistanAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua And BarbudaArgentinaArmeniaAruba
![Page 20: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/20.jpg)
fresh tilled soil UX & Web Product Design
The Pareto Principle
Country:
United States of America SubmitUnited States of AmericaCanadaUnited KingdomAustralia---------------------------------------AfghanistanAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguilla
![Page 21: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/21.jpg)
fresh tilled soil UX & Web Product Design
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 22: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/22.jpg)
fresh tilled soil UX & Web Product Design
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 23: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/23.jpg)
fresh tilled soil UX & Web Product Design
Fitts’s Law
![Page 24: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/24.jpg)
fresh tilled soil UX & Web Product Design
Fitts’s Law
![Page 25: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/25.jpg)
fresh tilled soil UX & Web Product Design
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 26: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/26.jpg)
fresh tilled soil UX & Web Product Design
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 of the system.
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 27: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/27.jpg)
fresh tilled soil UX & Web Product Design
The Principle of Least Astonishment
![Page 28: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/28.jpg)
fresh tilled soil UX & Web Product Design
The Principle of Least Astonishment
![Page 29: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/29.jpg)
fresh tilled soil UX & Web Product Design
Dieter Rams: Principle 10
Good design is as little design as possible.
vitsoe.com/us/about/good-design
![Page 30: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/30.jpg)
fresh tilled soil UX & Web Product Design
Dieter Rams: Principle 10
He also stated this as “less, but better.” Many people would refer to this as simplicity.
vitsoe.com/us/about/good-design
![Page 31: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/31.jpg)
fresh tilled soil UX & Web Product Design
Dieter Rams: Principle 10
![Page 32: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/32.jpg)
fresh tilled soil UX & Web Product Design
Dieter Rams: Principle 10
![Page 33: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/33.jpg)
fresh tilled soil UX & Web Product Design
Joshua Porter: Principle 6
One primary action per screen.
bokardo.com/principles-of-user-interface-design/
![Page 34: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/34.jpg)
fresh tilled soil UX & Web Product Design
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 35: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/35.jpg)
fresh tilled soil UX & Web Product Design
Joshua Porter: Principle 6
![Page 36: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/36.jpg)
fresh tilled soil UX & Web Product Design
Joshua Porter: Principle 6
![Page 37: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/37.jpg)
fresh tilled soil UX & Web Product Design
Joshua Porter: Principle 17
Great design is invisible.
bokardo.com/principles-of-user-interface-design/
![Page 38: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/38.jpg)
fresh tilled soil UX & Web Product Design
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 39: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/39.jpg)
fresh tilled soil UX & Web Product Design
Joshua Porter: Principle 17
![Page 40: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/40.jpg)
fresh tilled soil UX & Web Product Design
Joshua Porter: Principle 17
![Page 41: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/41.jpg)
fresh tilled soil UX & Web Product Design
BJ Fogg’s Behavior Model
Three factors drive behavior: motivation, ability and triggers.
ability
motivatio
n
HighLowLow
High Target behavior
Triggers fail here.
Triggers succeed here.
behaviormodel.org/
![Page 42: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/42.jpg)
fresh tilled soil UX & Web Product Design
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 43: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/43.jpg)
fresh tilled soil UX & Web Product Design
BJ Fogg’s Behavior Model
Motivation happens on three spectrums:
Sensation: Pleasure <> PainAnticipation: Hope <> Fear
Social Cohesion: Acceptance <> Rejection
behaviormodel.org/
![Page 44: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/44.jpg)
fresh tilled soil UX & Web Product Design
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 45: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/45.jpg)
fresh tilled soil UX & Web Product Design
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 can both fit this model.
behaviormodel.org/
![Page 46: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/46.jpg)
fresh tilled soil UX & Web Product Design
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 47: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/47.jpg)
fresh tilled soil UX & Web Product Design
02 Effective Methods For Crafting an ExperienceThe habits of highly effective UX designers
![Page 48: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/48.jpg)
fresh tilled soil UX & Web Product Design
Methods
Every UX designer’s process is different, but the way successful ones approach their process include some useful commonalities.
![Page 49: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/49.jpg)
fresh tilled soil UX & Web Product Design
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 50: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/50.jpg)
fresh tilled soil UX & Web Product Design
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 51: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/51.jpg)
fresh tilled soil UX & Web Product Design
1. Be Prolific
teehanlax.com/story/medium/
![Page 52: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/52.jpg)
fresh tilled soil UX & Web Product Design
1. Be Prolific
teehanlax.com/story/medium/
![Page 53: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/53.jpg)
fresh tilled soil UX & Web Product Design
1. Be Prolific
teehanlax.com/story/medium/
![Page 54: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/54.jpg)
fresh tilled soil UX & Web Product Design
1. Be Prolific
teehanlax.com/story/medium/
![Page 55: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/55.jpg)
fresh tilled soil UX & Web Product Design
1. Be Prolific
teehanlax.com/story/medium/
![Page 56: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/56.jpg)
fresh tilled soil UX & Web Product Design
1. Be Prolific
teehanlax.com/story/medium/
![Page 57: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/57.jpg)
fresh tilled soil UX & Web Product Design
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 58: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/58.jpg)
fresh tilled soil UX & Web Product Design
2. Collaborate
Other opinions will break you out of your mental traps and improve your work.
![Page 59: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/59.jpg)
fresh tilled soil UX & Web Product Design
2. Collaborate
designstaff.org/articles/product-design-sprint-day-2-diverge-2012-10-26.html
![Page 60: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/60.jpg)
fresh tilled soil UX & Web Product Design
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 61: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/61.jpg)
fresh tilled soil UX & Web Product Design
3. Iterate
Fail early and often and you’ll set yourself up better for eventual success.
![Page 62: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/62.jpg)
fresh tilled soil UX & Web Product Design
3. Iterate
azarask.in/blog/post/iterative_design_isnt_design_by/
![Page 63: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/63.jpg)
fresh tilled soil UX & Web Product Design
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 64: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/64.jpg)
fresh tilled soil UX & Web Product Design
4. Be Flexible
Each change has the potential to affect every other deliverable.
![Page 65: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/65.jpg)
fresh tilled soil UX & Web Product Design
03 Artifacts of an Experience Design ProcessThe things we build
![Page 66: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/66.jpg)
fresh tilled soil UX & Web Product Design
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 67: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/67.jpg)
fresh tilled soil UX & Web Product Design
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 68: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/68.jpg)
fresh tilled soil UX & Web Product Design
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 69: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/69.jpg)
fresh tilled soil UX & Web Product Design
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 70: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/70.jpg)
fresh tilled soil UX & Web Product Design
User Types & User Personas
uxmag.com/articles/personas-the-foundation-of-a-great-user-experience
![Page 71: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/71.jpg)
fresh tilled soil UX & Web Product Design
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 72: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/72.jpg)
fresh tilled soil UX & Web Product Design
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 73: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/73.jpg)
fresh tilled soil UX & Web Product Design
User Stories & Features
https://www.apptrajectory.com/
![Page 74: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/74.jpg)
fresh tilled soil UX & Web Product Design
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 75: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/75.jpg)
fresh tilled soil UX & Web Product Design
Site Map & User Journeys
![Page 76: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/76.jpg)
fresh tilled soil UX & Web Product Design
Site Map & User Journeys
User journeys define how a user moves through your app or site to accomplish tasks. Basically, take your user stories and translate them onto your site map.
![Page 77: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/77.jpg)
fresh tilled soil UX & Web Product Design
Site Map & User Journeys
![Page 78: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/78.jpg)
fresh tilled soil UX & Web Product Design
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 79: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/79.jpg)
fresh tilled soil UX & Web Product Design
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 80: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/80.jpg)
fresh tilled soil UX & Web Product Design
Wireframes & Sketches
![Page 81: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/81.jpg)
fresh tilled soil UX & Web Product Design
Wireframes & Sketches
![Page 82: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/82.jpg)
fresh tilled soil UX & Web Product Design
Wireframes & Sketches
![Page 83: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/83.jpg)
fresh tilled soil UX & Web Product Design
Wireframes & Sketches
![Page 84: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/84.jpg)
fresh tilled soil UX & Web Product Design
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 85: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/85.jpg)
fresh tilled soil UX & Web Product Design
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 86: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/86.jpg)
fresh tilled soil UX & Web Product Design
Prototypes
alistapart.com/article/dive-into-responsive-prototyping-with-foundation
![Page 87: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/87.jpg)
fresh tilled soil UX & Web Product Design
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 88: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/88.jpg)
fresh tilled soil UX & Web Product Design
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 89: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/89.jpg)
fresh tilled soil UX & Web Product Design
04 What to Build and WhyYour first test
![Page 90: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/90.jpg)
fresh tilled soil UX & Web Product Design
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 91: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/91.jpg)
fresh tilled soil UX & Web Product Design
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 92: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/92.jpg)
fresh tilled soil UX & Web Product Design
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 valid lessons from it.
![Page 93: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/93.jpg)
fresh tilled soil UX & Web Product Design
Usability Testing
Regardless of what you build, you should test it with real users. Assumptions are often wrong, and nothing will uncover that faster than a user test.
![Page 94: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/94.jpg)
fresh tilled soil UX & Web Product Design
Steve Krug’s Maxims of User Testing
A morning a month, that’s all we ask.
sensible.com/rsme.html
![Page 95: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/95.jpg)
fresh tilled soil UX & Web Product Design
Steve Krug’s Maxims of User Testing
Start earlier than you think makes sense.
sensible.com/rsme.html
![Page 96: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/96.jpg)
fresh tilled soil UX & Web Product Design
Steve Krug’s Maxims of User Testing
Recruit loosely and grade on a curve.
sensible.com/rsme.html
![Page 97: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/97.jpg)
fresh tilled soil UX & Web Product Design
Steve Krug’s Maxims of User Testing
Make it a spectator sport.
sensible.com/rsme.html
![Page 98: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/98.jpg)
fresh tilled soil UX & Web Product Design
Steve Krug’s Maxims of User Testing
Focus ruthlessly on a small number of the most important problems.
sensible.com/rsme.html
![Page 99: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/99.jpg)
fresh tilled soil UX & Web Product Design
Steve Krug’s Maxims of User Testing
When fixing problems, always do the least you can do.
sensible.com/rsme.html
![Page 100: User Experience & Web Product Design](https://reader031.vdocuments.mx/reader031/viewer/2022012922/54c811c34a7959f55d8b4602/html5/thumbnails/100.jpg)
fresh tilled soil UX & Web Product Design
Steve Krug’s Maxims of User Testing
Read this. Thank me later. I’ll let Steve know I’m expecting his commission check.
sensible.com/rsme.html