BIH - Human Centered Design
-
Upload
allison-tran -
Category
Design
-
view
234 -
download
0
description
Transcript of BIH - Human Centered Design
human centered design
BIH UI/UX BOOTCAMP / Microsoft Innovation Center @ Botswana Innovation Hub / bihux.tumblr.com
Human centered design Human centered design is design around the users needs and constraints. Using an understanding of cognitive psychology and interaction paradigms in your design, will help your interfaces communicate better with your user.
Creativity Engineering
Empathy
The engineering aspect of User
Experience is how we engineer
experiences and digital products to make
sense to a human being.
The engineering aspect of User Experience is how we engineer
experiences and digital products to make sense to a human being.
The creative side of UX allows you as a
product designer to think outside of
the box to solve problems for users.
Visual design can also be creative to
attract users and build a product.
Ask yourself, who is your user? How does your user typically solve problems?
What kinds of products and ideas does your user respond to?
What is the problem for your user?
What’s the best way to solve the problem for your user?
How does your user experience your solution? How will the user learn to use your solution?
How will the user use your solution over time?
How will they find your solution?
How will your solution affect your user?
how peoplelearn
Human memory is limited. Research shows that people can remember about 3-4 items at a time.
Don’t make people remember things going from one page to the next
People recognize symbols
People process information best in bite sized chunks.
People have to use info to make it stick.
how peoplethink
People construct mental models
Anticipate mistakes and attempt to prevent them. Make it easy to undo.
People are emotional beings.
<image here>
MICROSOFT IDEACAMP UX WORKSHOP
THEME TITLE
We are affected by pictures, especially pictures of people
DSEF
We are affected by stories
Stress impairs working memory.
Most people will spend several seconds on a webpage to figure out if it’s what they want
People are better at processing images than words.
Culture affects the way people think.
how peoplework
Hick’s Law :
The time it takes for a person to make a
decision as a result of the possible choices he
or she has: increasing the number of choices
will increase the decision time logarithmically.
People make mistakes
There must be a motivation to do something. There must be the ability to do it. There must be a well placed trigger.
The greater the effort to accomplish a task, the less likely a task will be accomplished successfully.
Mapping
Mapping
http://mccrindle.com/images/portfolio/lego-bricks-large.jpg
Affordances
http://1000awesomethings.files.wordpress.com/2010/09/what-do-you-do.jpg
Affordances
http://mccrindle.com/images/portfolio/lego-bricks-large.jpg
Progressive Disclosure
Vanseodesign
Feedback
Vanseodesign
You can modify a user’s behavior by rewarding desirable behaviors and ignoring or punishing bad behaviors
To create a positive UX, match the conceptual model of the task to what the user’s mental model is.
If you introduce a new mental model you should teach it to your users.
Clear
Only provide the information needed at the moment.
Buttons
normal Hover
Button Button
Focus
Button
On tap
Button Button
disabled
Get a user to commit to a small action before you try to get them to commit to a large action
UI should engage the user but not distract them when they are paying attention to something.
Present only the minimum amount of data required for the task at hand
Mailchimp
Make things look clickable
It’s harder for a user to recall an action than it is to choose an option.
Mailchimp
Provide defaults.
Expedia
Things that are close together are believed to ‘go’ together Jetblue
Group things so the user can find something more easily
Poor Example
Highlighted Tabs
Picture Gallery
Sign Up
Maintain the focus of a user’s attention by reducing clutter/confusion.
Text Box Selected State
Starbucks Signups
Default Text
Clickable Items
Status
Pricing Comparison
Pricing Comparison
Description Tooltips
First Time Experience/Walk Through
First Time Experience/Walk Through
Zero-Content Experience
Zero-Content Experience
Process / Steps in Progress
Data Visualization
First Time Experience
Quick Stats
Placeholder Icons
Animation
Icon States
404 Page
Pivot Content/Gallery
Tooltips
Process / Steps in Progress
Simple Entry Points
Highlighting Buttons
Buttons: Flat vs. Skeumorphic
Indicating Progress/Status
Big Numbers
Loading Indicators
Button States
There are recommended sizes for buttons so that they are easy to tap.
7mm 9 mm
Target SizeMinimum
Usability
accessibility