UX Bootcamp - 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.

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