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.
Engineering
Creativity
The engineering aspect of User Experience is how we engineer experiences and digital products to make sense to a human being.
The crea;ve 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 crea;ve to a@ract users and build a product.
Empathy The engineering aspect of User Experience is how we engineer experiences and digital products to make sense to a human being.
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 people learn
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 people think
People construct mental models
Anticipate mistakes and attempt to prevent them. Make it easy to undo.
People are emotional beings.
THEME TITLE
<image here> MICROSOFT IDEACAMP
UX WORKSHOP
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â&#x20AC;&#x2122;s what they want
People are better at processing images than words.
Culture affects the way people think.
how people work
Hickâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;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.
Bu#ons Bu#on normal
Bu#on
Bu#on
Focus
Hover
Bu#on
Bu#on
On tap
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â&#x20AC;&#x2122;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 â&#x20AC;&#x2DC;goâ&#x20AC;&#x2122; 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â&#x20AC;&#x2122;s attention by reducing clutter/ confusion.
Text Box Selected State
Default Text
Starbucks Signups
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
Usability
There are recommended sizes for buttons so that they are easy to tap. Minimum
Target  Size
7mm
9 Â mm
accessibility