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