bih - human centered design

85
human centered design BIH UI/UX BOOTCAMP / Microsoft Innovation Center @ Botswana Innovation Hub / bihux.tumblr.com

Upload: allison-tran

Post on 28-Nov-2014

234 views

Category:

Design


0 download

DESCRIPTION

UX Bootcamp @ Microsoft Innovation Center + Botswana Innovation Hub

TRANSCRIPT

Page 1: BIH - Human Centered Design

human centered design

BIH UI/UX BOOTCAMP / Microsoft Innovation Center @ Botswana Innovation Hub / bihux.tumblr.com

Page 2: BIH - Human Centered Design

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.

Page 3: BIH - Human Centered Design

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.

Page 4: BIH - Human Centered Design

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?

Page 5: BIH - Human Centered Design

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?

Page 6: BIH - Human Centered Design

how peoplelearn

Page 7: BIH - Human Centered Design

Human memory is limited. Research shows that people can remember about 3-4 items at a time.

Page 8: BIH - Human Centered Design

Don’t make people remember things going from one page to the next

Page 9: BIH - Human Centered Design

People recognize symbols

Page 10: BIH - Human Centered Design

People process information best in bite sized chunks.

Page 11: BIH - Human Centered Design

People have to use info to make it stick.

Page 12: BIH - Human Centered Design

how peoplethink

Page 13: BIH - Human Centered Design

People construct mental models

Page 14: BIH - Human Centered Design

Anticipate mistakes and attempt to prevent them. Make it easy to undo.

Page 15: BIH - Human Centered Design

People are emotional beings.

Page 16: BIH - Human Centered Design

<image here>

MICROSOFT IDEACAMP UX WORKSHOP

THEME TITLE

We are affected by pictures, especially pictures of people

DSEF

Page 17: BIH - Human Centered Design

We are affected by stories

Page 18: BIH - Human Centered Design

Stress impairs working memory.

Page 19: BIH - Human Centered Design

Most people will spend several seconds on a webpage to figure out if it’s what they want

Page 20: BIH - Human Centered Design

People are better at processing images than words.

Page 21: BIH - Human Centered Design

Culture affects the way people think.

Page 22: BIH - Human Centered Design

how peoplework

Page 23: BIH - Human Centered Design

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.

Page 24: BIH - Human Centered Design

People make mistakes

Page 25: BIH - Human Centered Design

There must be a motivation to do something. There must be the ability to do it. There must be a well placed trigger.

Page 26: BIH - Human Centered Design

The greater the effort to accomplish a task, the less likely a task will be accomplished successfully.

Page 27: BIH - Human Centered Design

Mapping

Page 28: BIH - Human Centered Design

Mapping

http://mccrindle.com/images/portfolio/lego-bricks-large.jpg

Page 29: BIH - Human Centered Design

Affordances

http://1000awesomethings.files.wordpress.com/2010/09/what-do-you-do.jpg

Page 30: BIH - Human Centered Design

Affordances

http://mccrindle.com/images/portfolio/lego-bricks-large.jpg

Page 31: BIH - Human Centered Design

Progressive Disclosure

Vanseodesign

Page 32: BIH - Human Centered Design

Feedback

Vanseodesign

Page 33: BIH - Human Centered Design

You can modify a user’s behavior by rewarding desirable behaviors and ignoring or punishing bad behaviors

Page 34: BIH - Human Centered Design

To create a positive UX, match the conceptual model of the task to what the user’s mental model is.

Page 35: BIH - Human Centered Design

If you introduce a new mental model you should teach it to your users.

Clear

Page 36: BIH - Human Centered Design

Only provide the information needed at the moment.

Page 37: BIH - Human Centered Design

Buttons

normal Hover

Button Button

Focus

Button

On tap

Button Button

disabled

Page 38: BIH - Human Centered Design

Get a user to commit to a small action before you try to get them to commit to a large action

Page 39: BIH - Human Centered Design

UI should engage the user but not distract them when they are paying attention to something.

Page 40: BIH - Human Centered Design

Present only the minimum amount of data required for the task at hand

Mailchimp

Page 41: BIH - Human Centered Design

Make things look clickable

Page 42: BIH - Human Centered Design

It’s harder for a user to recall an action than it is to choose an option.

Mailchimp

Page 43: BIH - Human Centered Design

Provide defaults.

Expedia

Page 44: BIH - Human Centered Design

Things that are close together are believed to ‘go’ together Jetblue

Page 45: BIH - Human Centered Design

Group things so the user can find something more easily

Page 46: BIH - Human Centered Design
Page 47: BIH - Human Centered Design

Poor Example

Page 48: BIH - Human Centered Design

Highlighted Tabs

Page 49: BIH - Human Centered Design

Picture Gallery

Page 50: BIH - Human Centered Design

Sign Up

Page 51: BIH - Human Centered Design

Maintain the focus of a user’s attention by reducing clutter/confusion.

Page 52: BIH - Human Centered Design

Text Box Selected State

Page 53: BIH - Human Centered Design

Starbucks Signups

Default Text

Page 54: BIH - Human Centered Design

Clickable Items

Page 55: BIH - Human Centered Design

Status

Page 56: BIH - Human Centered Design

Pricing Comparison

Page 57: BIH - Human Centered Design

Pricing Comparison

Page 58: BIH - Human Centered Design

Description Tooltips

Page 59: BIH - Human Centered Design

First Time Experience/Walk Through

Page 60: BIH - Human Centered Design

First Time Experience/Walk Through

Page 61: BIH - Human Centered Design

Zero-Content Experience

Page 62: BIH - Human Centered Design

Zero-Content Experience

Page 63: BIH - Human Centered Design

Process / Steps in Progress

Page 64: BIH - Human Centered Design

Data Visualization

Page 65: BIH - Human Centered Design

First Time Experience

Page 66: BIH - Human Centered Design

Quick Stats

Page 67: BIH - Human Centered Design

Placeholder Icons

Page 68: BIH - Human Centered Design

Animation

Page 69: BIH - Human Centered Design

Icon States

Page 70: BIH - Human Centered Design

404 Page

Page 71: BIH - Human Centered Design
Page 72: BIH - Human Centered Design

Pivot Content/Gallery

Page 73: BIH - Human Centered Design

Tooltips

Page 74: BIH - Human Centered Design

Process / Steps in Progress

Page 75: BIH - Human Centered Design

Simple Entry Points

Page 76: BIH - Human Centered Design

Highlighting Buttons

Page 77: BIH - Human Centered Design

Buttons: Flat vs. Skeumorphic

Page 78: BIH - Human Centered Design

Indicating Progress/Status

Page 79: BIH - Human Centered Design

Big Numbers

Page 80: BIH - Human Centered Design

Loading Indicators

Page 81: BIH - Human Centered Design

Button States

Page 82: BIH - Human Centered Design

There are recommended sizes for buttons so that they are easy to tap.

7mm 9 mm

Target SizeMinimum

Usability

Page 83: BIH - Human Centered Design

accessibility

Page 84: BIH - Human Centered Design
Page 85: BIH - Human Centered Design