UX DESIGN 101 WELCOME!

Hi, I am Chris R. Becker - chris@chrisrbecker.com@cbecker

I have a background in

I have done projects for

Painting / Graphic Design - BFA : Colorado State UniversityMFA - Art Center College of Design : Media Design ProgramAdjunct Professor : Loyola Marymount University

Mataxa, Art Center, Jet Propulsion Laboratory (NASA), VW, CB2, Adobe, Toyota, EA, Mattel, Hyundai, Starwood Hotels, Fresh and Easy, HTC, OKGO, Hand Made Mobile, Pearson, and More.

I am a

UX / Interaction Designer / Design Researcher / Educator

I have worked for

Red Design Consultants, JPL/NASA, Art Center, Schematic, Syynlabs, Saatchi & Saatchi, Phenomenon, Innocean, Blitz, DeutschLA, the Ayzenberg Group, Handmade Mobile, Boombang, TBWA|Chiat|Day, & Two Bit Circus (currently)

I

who dabbles in physical computing experiences

WHO IS THIS GUY?

2

SOME OF MY RECENT WORK

3

Mens Warehouse - Tux Rental Redesign CB2 - Physical Interactive Campaign

Moca - Interactive Conversation tracker OK GO music video - Interaction Builder

4

Senior UX at TwoBit Circustwobitcircus.com• Hackers / Makers & Story Tellers• A mixture of startup, product design & technology company with a focus on bringing fun to education• Focusing on agile UX & rapid prototyping•Kickstarter : STEAM carnival : http://2bc.io/ks

CURRENT ROLE

LEARNING OBJECTIVES Identify the different roles within UX and the responsibilities of each

• Talk about the changing role of UX in modern business for startups to big corporations

• Use Jakob Nielsen’s 5 Principles of Usability to evaluate web and mobile experiences

5

AGENDA

•What is UX?•Who does UX?•Principles of Usability•Paired Activity

6

Anyone Know who this is?

HISTORY LESSON

7

Anyone Know who this is?

HISTORY LESSON

7

TimBL?Anyone Know who this is?

HISTORY LESSON

7

TimBL?

Tim Burners Lee

Anyone Know who this is?

HISTORY LESSON

7

TimBL?

Tim Burners Lee

Anyone Know who this is?

What did he do?

HISTORY LESSON

7

TimBL?

http?

Tim Burners Lee

Anyone Know who this is?

What did he do?

HISTORY LESSON

7

TimBL?

http?

Tim Burners Lee

Hypertext Protocol with a server

Anyone Know who this is?

What did he do?

HISTORY LESSON

7

TimBL?

http?

Tim Burners Lee

Hypertext Protocol with a server

The Internet was Invented!

Anyone Know who this is?

What did he do?

HISTORY LESSON

7

TimBL?

http?

Tim Burners Lee

Hypertext Protocol with a server

The Internet was Invented!

Year?

Anyone Know who this is?

What did he do?

HISTORY LESSON

7

TimBL?

http?

Tim Burners Lee

1990!

Hypertext Protocol with a server

The Internet was Invented!

Year?

Anyone Know who this is?

What did he do?

HISTORY LESSON

7

TimBL?

http?

Tim Burners Lee

1990!

Hypertext Protocol with a server

HTML

The Internet was Invented!

Year?

Anyone Know who this is?

What did he do?

HISTORY LESSON

7

TimBL?

http?

Tim Burners Lee

1990!

Hypertext Protocol with a server

HTML Hypertext Markup Language

The Internet was Invented!

Year?

Anyone Know who this is?

What did he do?

HISTORY LESSON

7

TimBL?

http?

Tim Burners LeeHe made a proposal for an information management system in March 1989, and on 25 December 1990, with the help ofRobert Cailliau and a young student at CERN, he implemented the first successful communication between a Hypertext Transfer Protocol (HTTP) client and server via the Internet.

Tim Berners-Lee is the director of the World Wide Web Consortium (W3C), which oversees the Web's continued development. He is also the founder of the World Wide Web Foundation, which writes and creates standards for HTML 5.

1990!

Hypertext Protocol with a server

HTML Hypertext Markup Language

The Internet was Invented!

Year?

Anyone Know who this is?

What did he do?

HISTORY LESSON

7

1990 2000 2007 2010

HTML HTML5

2013

CSS

JavaScript

CSS3

HTML4

FLASH

timeline

1990 2000 2007 2010

HTML HTML5

2013

CSS

JavaScript

CSS3

HTML4

FLASH

timeline

1990 2000 2007 2010

HTML HTML5

2013

CSS

JavaScript

CSS3

HTML4

FLASH

timeline You Are

Here

1990 2000 2007 2010

HTML HTML5

2013

CSS

JavaScript

CSS3

HTML4

FLASH

timeline You Are

Here

1990 2000 2007 2010

HTML HTML5

2013

CSS

JavaScript

CSS3

HTML4

FLASH

timeline You Are

HereClientsmight

be here

WHAT IS THE PROBLEM?

WHAT IS THE PROBLEM?

WHAT IS THE PROBLEM?

WHAT IS THE PROBLEM?

A considered User ExperienceWHAT IS THE PROBLEM?

A considered User ExperienceWHAT IS THE PROBLEM?

A considered User Experience

Across Multi Platforms

WHAT IS THE PROBLEM?

A considered User Experience

But the Media Space Reality is :

Across Multi Platforms

WHAT IS THE PROBLEM?

A considered User Experience

But the Media Space Reality is :

Across Multi Platforms

WHAT IS THE PROBLEM?

WHAT IS UX?

11

h"ps://vimeo.com/19131028

MULTI MEDIA PORTION :

JESSE JAMES GARRETT

“the design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal”

12

-­‐Jesse  James  Garre"

JACOB GUBE

13

“User experience is how a person feels when interfacing with a system or product.”

Includes but is not limited to websites, apps or software

UX INCORPORATES SCIENCE AS AN ART

14

Jacob  Gube  -­‐  h"p://uxdesign.smashingmagazine.com/2010/10/05/what-­‐is-­‐user-­‐experience-­‐design-­‐overview-­‐tools-­‐and-­‐resources/

JESSE JAMES GARRETT

15

h"p://www.jjg.net/elements/pdf/elements.pdf

JESSE JAMES GARRETT

16

BUSINESS ANALYSIS & UX

17

SPECTRUM OF UX

18

WHO DOES UX?

20

WHO DOES UX: UR ･ IA ･ IXD･ DEV

20

• User Researcher

WHO DOES UX: UR ･ IA ･ IXD･ DEV

20

• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys

WHO DOES UX: UR ･ IA ･ IXD･ DEV

20

• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys

WHO DOES UX: UR ･ IA ･ IXD･ DEV

20

• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys

• Information Architect (IA)

WHO DOES UX: UR ･ IA ･ IXD･ DEV

20

• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys

• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered

WHO DOES UX: UR ･ IA ･ IXD･ DEV

20

• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys

• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered

WHO DOES UX: UR ･ IA ･ IXD･ DEV

20

• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys

• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered

• Interaction Designer (IxD/UX Designer)

WHO DOES UX: UR ･ IA ･ IXD･ DEV

20

• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys

• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered

• Interaction Designer (IxD/UX Designer)– Defines interactions, user flows, wireframes, and affordances of a system

WHO DOES UX: UR ･ IA ･ IXD･ DEV

20

• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys

• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered

• Interaction Designer (IxD/UX Designer)– Defines interactions, user flows, wireframes, and affordances of a system

WHO DOES UX: UR ･ IA ･ IXD･ DEV

20

• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys

• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered

• Interaction Designer (IxD/UX Designer)– Defines interactions, user flows, wireframes, and affordances of a system

• UI Developer

WHO DOES UX: UR ･ IA ･ IXD･ DEV

20

• User Researcher– Identifies user behaviours, goals and needs through interviews, studies and surveys

• Information Architect (IA)– Defines the structure of a system, how content is described, organised and discovered

• Interaction Designer (IxD/UX Designer)– Defines interactions, user flows, wireframes, and affordances of a system

• UI Developer– Builds the system by interpreting the functional specification, sitemaps, wireframes while working

within technical constraints

WHO DOES UX: UR ･ IA ･ IXD･ DEV

USER RESEARCHER

• Identify user needs and behaviors– interviews– surveys– existing data

• Carry out user testing– Paper prototyping – A/B testing– Usability / click tracking

21

IA: STRUCTURE

22

+ + + + + +

2

Saved Search

Starred

Following

Recent

Popular

Nearby

Filter

Search

Results

Project

Gallery

Submit

New Project

My Profile

Settings

Edit Profile

Adv Options

Edit Notification

Edit SharingUsers

StarredUser Profile

Users Submits

My Projects

Share

Login

Home

Launch

Users Projects

Edit Project

Download

Other User

Not Logged In

Help

+

My Submits

IXD: WHAT IS AFFORDANCE

“A potential action that is made possible by a given object”

23

h"p://www.jnd.org/dn.mss/affordances_and.html

DONALD NORMAN

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

24

IXD: COUNT THE PERCEIVED AFFORDANCES

25

DEV: IMPLEMENTATION

Carrier 12:00 PM

MediaTask

TitleDescription

#Submit

sNew Task ProfileFeed

TitleDescription

#

TitleDescription

#

TitleDescription

#

T7 Profile PageTap to view Profile Page. Transitional animation: no animation

T8 Create ProjectTap to Create a New

Project. Transition: display cut to new view w same footer and new highlight

state, no animation

T2 Feed Tap to view Feed Page (Home

Page). Transition: display cut to new view w same footer and new

highlight state, no animation. Until page contents loads display

header, footer, and a loading spinner w message.

T5 Project PageTap to view Project Page. Transitional animation: slide left from right When a project has no submissions display a Submit button that takes users directly to the camera capture step. See T5

Project List Item Includes Image

from project creator, Title,

Description, # of Submissions, and

up to 5 of the most recent submission

images.

Drag list down to refresh feed.Display with animating arrow or spinner and message:"Pull down to Refresh""Release to Refresh""Updating""Not Connected to Interent"

T1 InfoTap to view Info

page. Transitional

animation: slide up from bottom

T10 SearchTap to view Search Page. Transitional animation: slide left from right When a project has no submissions display a Submit button that takes users directly to the camera capture step. See T5

M3 FilterTap to view Info

Filters. Transitional

animation: slide up from bottom

Carrier 12:00 PM

TitleCategory ## photos ## videos submittedUser Name

My Projects Recent Popular

MediaTask

T8 Create ProjectTap to Create a New Project. Transition: display cut to new view w same footer and new highlight state, no animation

Pull down to refresh.

Search

Title, by User Name

0/100

Category | ## | ## | ## Days leftDescription...

10/40

The Title of the Prject, by User Name Category | ## | ## | ## Days left

Description...

10/40

The Title of the Prject, by User Name Category | ## | ## | ## Days left

Description...

Swipe to navigate, tap to select Feeds . Default feed is Recent.

T5 Project PageTap to view Project Page. Transitional animation: slide left from right When a project has no submissions display a Submit button that takes users directly to the camera capture step. See T5 This is a project with no submissions.

M1 Project List Item Includes Title, User Name,

Project Image, Category, # of photos, # of videos, # days left till project close, Description, Goal Gauge,

optional gallery.

Drag list down to expose search, and then refresh feed. On release without reaching refresh threshold keep search visible. Upon reaching refresh threshold display with animating arrow or spinner and message:"Pull down to Refresh" >"Release to Refresh""Updating""Not Connected to Interent"

T3 Profile PageTap to view Profile Page.

Transitional animation: no animation

M3 FilterTap to view Filters.

Transitional animation: slide down from top

For projects with submissions, swipe

anywhere on a list item to navigate a gallery of up to 10 recent entries. Swiping

also displays the submissions button. See M1 for full specification.

FeedsMy SubmissionsStarredMy ProjectsFollowingRecentPopularNearby

T10 SearchTap to view Search.

Transitional animation: slide keyboard up; expand the

height of search to include the location field, slide up list

of recent searches. see animation from Yelp Search.

PRINCIPLES OF USABILITY

27

INTUITIVE

“There is no intuitive interface! Not even the Nipple, It’s all learned.”

Bruce Ediger

28

MEASURE UX: USABILITY

5 PRINCIPLES OF USABILITY

•Learnability•Efficiency•Memorability•Error Management•Satisfaction

29

USABILITY: LEARNABILITY

30

How essential is your site? Is it client or internal facing?Do I have to use it?

How many features do you have? It’s the difference between using a basic Google search and the Google advanced search.

Core experience Your product offering should be distilled to its most core elements. Desktop conventions for set up and customization may be too difficult to use in mobile.

Using features to remove workSensors of mobile platforms may allow you to skip steps and make a system easier to learn.

Mobile Implications

LEARNABILITY: PANTS

31

bonobos.com dockers.comvs

LEARNABILITY: PANTS

32

LEARNABILITY: DOCKERS

33

LEARNABILITY: MOBILE

34

source: http://www.uxbooth.com/blog/mobile-design-patters/

USABILITY: EFFICIENCY

35

Depth of interactionsSimple structure for both navigation and tasks.

Does my system give feedback? Reduce hesitation and confusion.

States, TransitionsLeave the same way you came in, know what you can do when you need to, satisfaction

Gesture Affordances Design and ergonomics increase ease and intuitiveness.

Feedback & LabelingDirect users and show them their interactions are being accepted.

Mobile Implications

EFFICIENCY: ASANA

36

EFFICIENCY: FITT’ S LAW

37

EFFICIENCY: TOUCH / DISCOVERABLE

38

MEMORABILITY

39

Do you repeat walk throughs or tips?If your site has many features then teaching everything at once will not help users who have a lot to remember. Begin with core functionality and save the advanced tips for later experiences.

How many steps does it take?Analyze all the tasks a user must go through and apply patterns where possible.

Recall vs RecognitionLabels or icons may be the difference between remembering something and being satisfied by design. Which is better?

Introducing new patterns As systems grow and meet the quickly growing capabilities, new interactions may mean throwing away familiar patterns.

Use what is at your disposal judiciouslyAnalyze all the tasks a user must go through and try to apply patterns where possible.

Mobile Implications

MEMORABILITY: ESCAPEFLIGHT.COM

40

MEMORABILITY: ESCAPEFLIGHT.COM

41

MEMORABILITY: ESCAPEFLIGHT.COM

42

USABILITY: ERROR MANAGEMENT

43

Are my error messages clear? Interactive Negative Space

How often are mistakes being made?Track early and often.

Is it the system or the user?Need can often be greater on mobile which means frustration comes quicker. Admit fault.

Opportunities aboundTurn empty sets and dead ends into opportunities and use empathy to avoid errors.

Mobile Implications

ERROR MANAGEMENT: KINDLE

44

ERROR MANAGEMENT: FLOW

45

USABILITY: SATISFACTION

46

How do you keep the users coming back?This is the most subjective part of usability.

What pleases as many users as possible?It is easy to get into a circular argument. Investigation is important.

InnovateShow OffTouchShow the wayAnimations

Mobile Implications

PAIRED ACTIVITYPair up with your neighbor and introduce yourself!

YOUR COMPANYS’ WEBSITE/APP

How easy is it for you to learn and start using it?

• Are there features that help make performing tasks more efficient?

• Are there features that make it easy for you to remember the tasks you are

performing?

• What errors are coming up? How are they handled?

• Is there anything else that makes the site particularly satisfying to use?

• What ideas do you have to improve on any of these usability principles?

48

VOLUNTEERS?

• Share what you came up with• What was done really well?• What ideas do you have to improve the usability?

49