Introduction to User Experience and User Interface Design: A One-Hour Crash Course

Introduction to User Experience andUser Interface DesignA One Hour Crash Course

Jason Hong

What is User Experience (UX)?

Understand

Design

Evaluate

Understanding People

• Let’s say we want to design a new web-based system for <insert here>_

• How can we understand what people do?• How can we understand what people want?• How can we understand what people know?

• Rather than assuming we know the above, what can we do to quickly understand?

8Applying These Ideas

• Most important takeaway here is to understand “you are not the user”– Being able to take a step back and try

to put self in user’s shoes is a big step

• Asking people what they want only goes so far– What people say vs what people do

Understand

Design

Evaluate

Design

• What are effective screen layouts?• What are good use of colors?• How can we leverage design patterns?• How to design to prevent errors?• How to match the way people think?• … much, much more

How Might You Fix This?

Preventing Errors

• Defensive Design

What’s Wrong Here?

14Preventing Errors

http://www.youtube.com/watch?v=pPKymEC_Hss

15How to Prevent This Problem?

16Fitts’ Law

• Things that are closer and bigger are faster and easier to hit (and vice versa)

• Ex. Windows menus vs. Mac menus– Note different placing, what effect is there?

17Good Example of Fitts’ Law

18Another Fitts’ Law Example

19Example: Bad Use of Color

• What does this image show?

20Example: Good Use of Color

• Why is the left’s color choice poor?What makes the right side better?

21How Do People Believe How

Things Work?• Mental models describe

how a person thinkssomething works

• Incorrect mental models can make things very hard to understand and use

Lighting Example at CMU

• Users create a model from what they hear from others, past experiences, and usage– interactions with system image

Every System has Three Different Mental Models

System Image(Your implementation)

User InteractionsSystem feedback

Design Model(How you intend the

system to work)

User Model(How users think the

system works)

25Mental Models

• People inevitably build models of how things work– Ex. me and my car– Ex. children & computers– Ex. maps of New York

26Mental Models Impact Security

• Ex. visibility in Facebook– Suppose you have a private

Facebook album, but tag someone. Can that person see it or not?

• Ex. app stores– All apps are vetted by

Google, so they are all safe to download. Correct?

27Using Mental Models

• Predictability most immediate criteria

• Another unclear model. A lot of people probably hit the button under “Yes”.

• That clearly doesn’t work, based on the drawn arrow.

• CMU’s sign up page for emergency text alerts

• What do you think happens if you hit “Enter”?

Example: How to Login?

Use Design Patterns

• Basic idea: lots of well-known, good solutions already exist

• Find that solution, don’t re-invent wheel

• Examples for WAWF:– High-Visibility Action

Buttons– Above the Fold

37Navigation Bar Pattern

Advanced ecommerce

Completing tasks

Page layouts

Search

Page-level navigation

The mobile web

Our patterns organized by group

Site genres

Navigational framework

Home page

Content management

Trust and credibility

Basic ecommerce

Pattern Groups

Example: What’s Wrong Here?

Use a Grid to Align Things

Use a Grid to Align ThingsExample Grid – Amazon (1/3)

44Example Grid (for print)

45Example Grid (for print)

• Preventing errors (easy)– Defensive design, Fitts’ Law

• Good use of colors (moderate)– Best tip: find existing color palettes

• Mental models (moderate)• Design patterns (moderate)

– Definitely do this, don’t re-invent wheel• Grid (moderate)

– Even basic grid can improve things

Understand

Design

Evaluate

• How can we build and test things faster?

• Core idea:– Build and test cheap prototypes first– Find and fix bugs earlier in cycle– Fail fast

• Almost every creative field does this

49Early Nintendo Wii Prototypes

52Rough Storyboarding

59We Can Apply These Same

Ideas for Interfaces

61Avoid Pixel Perfect High-

Fidelity Prototypes Early On• High-fidelity prototypes

– tend to waste time on small details that aren’t important in early stages of design

– people tend to focus narrowly on one design with high-fidelity tools

– tend to get low-level feedback, again not useful in early stages of design

62The Basic Materials for Low-

Fi• Large, heavy, white paper (11 x 17)• 5x8 in. index cards• Post-its• Tape, stick glue, correction tape• Pens & markers (many colors & sizes)• Overhead transparencies• Scissors, X-acto knives

from “Prototyping for Tiny Fingers” by Rettig

Good Tool: Balsamiq

• Create and test UI wireframes quickly

• Can’t focus on fonts, alignment, colors

Good Tool: Balsamiq

• Don’t start with code• Don’t start with photoshop

– Takes too long to build, hard to make changes

• Goal: Build and test interfaces cheaply, quickly, and effectively– Fail fast– Rapid iteration

Understand

Design

Evaluate

• How can we tell if our designs are working?

• Before deploying– User tests– Heuristic evaluation– Cognitive walkthrough– Sensors– more

• After deploying– QA feedback– Log analysis– A/B testing– more

71Case Study:

Game Testing for Fun in Halo 3• http://www.wired.com/gaming/virtualworlds/magazi

ne/15-09/ff_halo

72Case Study:

Game Testing for Fun in Halo 3After each session Pagulayan analyzes the data for patterns... For example, he produces snapshots of where players are located in the game at various points in time — five minutes in, one hour in, eight hours in — to show how they are advancing. If they're going too fast, the game might be too easy; too slow, and it might be too hard.

73Case Study:

Game Testing for Fun in Halo 3He can also generate a map showing where people are dying, to identify any topographical features that might be making a battle onerous. And he can produce charts that detail how players died

74Case Study:

Game Testing for Fun in Halo 3• At first the designers couldn't figure out how to fix

this problem. But then Griesemer stumbled on an elegant hack: He made the targeting reticule turn red when enemies were in range, subtly communicating to players when their shots were likely to hit home. It worked.

• Last week 52 percent of players gave the Jungle level a 5 out of 5 rating for "fun," and another 40 percent rated it a 4.

75Where People get Lost in Halo

76Heuristic Evaluation

• Cheap, fast, effective in practice– My personal favorite

• Basic idea: review a user interfaces, look at list of heuristics, and see where interface does (or not) comply– Which heuristic it violates less important

than finding a (potential) usability problem

77Heuristics

H2-1: Visibility of System Status

searching database for matches

• Keep users informed what is going on• Example: response time

– 0.1 sec: no special indicators needed, why? – 1.0 sec: user tends to lose track of data – 10 sec: max. duration if user to stay

focused on action – for longer delays, use progress bars

78Heuristics

H2-2: Match Bet. System & Real World

• Speak the users’ language• Follow conventions

• Old example: Mac desktop– Dragging disk to trash

• Deletes it or ejects it?• Fixed in Mac OS X

79Heuristics

80Heuristics

81Heuristics

82Heuristics

H2-3: User Control and Freedom

• Make it easy to fix mistakes– Exits for mistakes, undo, redo

• Example: Wizards– must respond to question before next step– good for infrequent task (ex. network config)– not for common tasks

83Heuristics

H2-4: Consistency and Standards

• Consistent with self?• Consistent with platform standards?

84Heuristics

H2-5 Error PreventionH2-6 Recognition over Recall

• Recall– Info from

memory• Recognition

– Ex. menu items– Ex. icons– Ex. labels– Ex. examples

85Heuristics

H2-5 Error PreventionH2-6 Recognition over Recall

Make objects, actions, options, and directions visible or easily retrievable

86Heuristics

H2-7: Flexibility and efficiency of use

• Accelerators for experts – Ex. gestures, keyboard shortcuts

• Allow users to tailor frequent actions– Ex. macros

87Heuristics

H2-8: Aesthetic and Minimalist Design

• Elements should be aligned and grouped• No irrelevant information• (Use a grid)

88Heuristics

H2-9: Help users recognize, diagnose, and recover from errors

• Error messages in plain language• Precisely indicate the problem• Constructively suggest a solution

89Heuristics

90Heuristics

91Heuristics

H2-10: Help and documentation

• Easy to search• Focused on the user’s task• List concrete steps to carry out• Not too long

93Recap of Heuristics

• H2-1: Visibility of system status• H2-2: Match between system & real world• H2-3: User control & freedom• H2-4: Consistency & standards• H2-5: Error prevention• H2-6: Recognition rather than recall• H2-7: Flexibility and efficiency of use• H2-8: Aesthetic and minimalist design• H2-9: Help users recognize, diagnose,

and recover from errors• H2-10: Help and documentation

94Most Important Ideas

• Understand– You are not the user

• Design– Mental models– Use design patterns, don’t re-invent

• Build– Build and test cheap prototypes

• Evaluation– Heuristic Evaluation

95Other Resources

96Other Resources

Why is Good Design Important?

99Good Example of Fitts’ Law

Introduction to User Experience and User Interface Design: A One-Hour Crash Course

Design

Win32 Programming Lesson 11: User-mode Thread Sync (aka: How to crash your machine without really trying…)

Application User Manualsha2.aladata.com/articles/eCrash+User+Guide-09.pdf · Application User Manual ... A2 How to Log into the Website ... crash as possible and then lock it in by

Python Crash Course File I/O Bachelors V1.0 dd 20-01-2015 Hour 2

User Manual UCB Particle Monitor v8 30Dec2010edge.rit.edu/edge/P13625/public/Reference Documents/User Manual_UCB...UCB Particle Monitor User Manual – Version 8.0 ... hour launches

Practical User Research: A Crash Course

Kronos Supervisor User Guide - auxs.umn.edu · C. Visa Student Hour Limitations .....11 D. Temp Casual/Grad Students Hour Limitations

Pre-Con Education: CA Service Operations Insight Power User Crash Course

Python Crash Course Programming Bachelors V1.0 dd 13-01-2015 Hour 5

UNDERSTANDING VULNERABLE ROAD USER CRASH RISK (ON …

Python Crash Course Numpy Bachelors V1.0 dd 28-01-2015 Hour 1

1 Event Driven Programming wirh Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer

Python Crash Course Plotting 3 rd year Bachelors V1.0 dd 05-09-2013 Hour 1

Python Crash Course Aplpy 3 rd year Bachelors V1.0 dd 06-09-2013 Hour 3

Healthcare Medical Crash Carts - Southwest Solutions · 2014. 6. 24. · CCB Crash Cart Blue TP Taupe new • Our new Select Lineoffers the very best and most user friendly carts

Python Crash Course Containers Bachelors V1.0 dd 13-01-2015 Hour 6

Social Media Crash Course - A One-Hour Guide

Python Crash Course PyFits, Astropy 3 rd year Bachelors V1.0 dd 05-09-2013 Hour 7

Physiological, biochemical, and performance responses to a 24-hour crash diet · 2012. 5. 31. · Physiological, biochemical, and performance responses to a 24-hour crash diet Author:

CRaSH Portal Team. 2 Agenda Introduction to CRaSH Deployment and connection Using the CRaSH command Develop the CRaSH commands yourself

Popcorn Hour a-300 User Manual 0212