usability and user experience training seminar

Usability and User Experience (UX)

Amaya Becvar Weddle, Ph.D.Usability Manager

About Me

– Ph.D. Cognitive Science, University of California, San Diego

– Joined BitDefender in August, 2009

Course Overview

• Introduction• What is usability and user experience?• What is technology?• 4 Important Principles of Usability

– LUNCH -

• UX Research and the Development Cycle

• Applied exercise

Huh? What does all this mean?

• Usability• User Experience• User Research• Information Architecture• Interaction Design• Visual Design

Usability

• Usability is the study of the ease with which people can employ a particular tool or other human-made object in order to achieve a particular goal.

Usability Principles– Jakob Nielsen

• Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?

• Efficiency: Once users have learned the design, how quickly can they perform tasks?

• Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?

• Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?

• Satisfaction: How pleasant is it to use the design?

User Experience (UX)

• User eXperience (UX) highlights the experiential, affective, meaningful and valuable aspects of Human-Computer Interaction and product design.

• It also covers a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system.

What Usability is NOT…

• Magic

What Usability is NOT…

• Icing

What Usability is NOT…

• About you, or me

What Usability is NOT…

• About being completely novel

What Usability is NOT…

• The Holy Grail

What is technology?

What is technology?

• “The system by which a society provides its members with those things needed or desired.” (Websters’ New World Dictionary of the American Language)– This includes stuff, ways of interacting with stuff,

and ways of interacting with other people.

Defining Boundaries

• How should we think about technology as user experience professionals?– Hint: It’s more than just PCs

Ecological Perspective

• Using technology implies a set of social and cultural practices (soft technology)

• We should keep these in mind when designing technology for everyday use– Bonni Nardi, Vicki O’Day (1998) “Information

Ecologies: Using Technology with Heart”

Ecological Perspective• “Glass door” refrigerator

Potential issue: for many families, the refrigerator door is a central waypoint for organizing information

Hierarchical Perspective

• The Human-tech Ladder– Kim Vicente, The

Human Factor

Hierarchical Perspective• Example. The iPhone

Physical

Psychological

Team

Organizational

Political

Exercise 1.

• Take a piece of cardstock paper and create a Human-tech ladder describing a piece of technology of your choice. It should have all 5 levels described.

• Think about it: How would considering these different levels help you to design? Is this a useful mental exercise?

4 Important Concepts in Usability

4 important concepts…

1. Consistency2. Affordances3. Mappings4. Feedback

1. Consistency

When crafting interactions, rely on user’s previously acquired knowledge!

3 kinds of consistency

• Internal• External• With the world

3 kinds of consistency

• Internal– Interactions should be consistent within

your product

3 kinds of consistency

• Internal– Actions should be referenced

consistently within your application• Icons

– People have a powerful visual memory – use it!

• Names of functions and features

3 kinds of consistency

• External

• External– Not consistent: Microsoft Office Ribbon

3 kinds of consistency

• External

3 Kinds of Consistency

• If consistency is a guiding principle to use in design, how do we innovate?

3 Kinds of Consistency

• With the world

Inside/outside

Not consistent: unlimited vs. fixed size, order, media

On/Off

3 Kinds of Consistency

• With the world– Persistence– Spatial reasoning

3 Kinds of Consistency

• With the world– Changing screen resolutions

2. Affordances• “Action possibilities" that are readily

perceivable by a user

Shaping behavior

• Reducing degrees of freedom through design

2. Affordances• So what?

– When we design, we should allow the design to “speak for itself”

– It’s form suggests an interaction

2. Affordances• So what?

– When we design, we should allow the design to “speak for itself”

– It’s form suggests an interaction

old new

3. Mappings

• A logical match between a user’s mental model of the system and interface features

Good or poor mapping?

• Analog watch knob– for setting the time

• Digital watch – for setting the time

• Power Window Buttons – For opening and closing car windows

What’s behind a mapping, anyway?

• Mental models of interfaces– Ex. Driving– Ex. ‘Surfing’ the Web

• Technology may be easier to use when our mental models match logically with the system model - enables us to reason about it

BUT...

• Sometimes “smoke and mirrors” is better for design

• System model can often be very technical• Designing interfaces that match the

system model may not be optimal for users– Remote controls– Power switches on CPU

• Technology is easier to use when our conceptual models match with the interface!

Mental Models

• How are mental models used?

Mental Models

Cognition, Psychology, and Design

• Clues to how things work come from affordances, constraints, and mappings– Scissors– Digital watch

• Help the user form a mental model of the system

What’s so different about modern technology?

• Surface vs. internal representations of technology

What’s so different about modern technology?

• Surface vs. internal representations of technology

Inspiration from Mechanical Devices

• One band-aid is replicating the incidental feedback given by mechanical devices in the digital realm

• Digital cameras• Clicking buttons

4. Another concept: feedback

• Provide people with immediate, salient feedback

• Ziplock bags

4. Feedback

Goals (user)

Computer

Interface

Evaluation – how we compare what happened to what the user wanted to happen

Execution – how the user tells the computer what they want it to do

Interaction is like a conversation

ExecutionHow the user tells the computer what they want it to do

EvaluationHow we compare what happened to the computer to what we wanted to happen• Example – error messages

EvaluationExample – error messages

• Explain what has gone wrong, why, and what to do next.

• Don't blame the user for the error. Reword it in a neutral way. (The design is always to blame).

Examples1

3 4

5 6

2

Thoughtless Acts?

Inspiration from people’s mundane actions in the

everyday world

Thoughtless Acts

• “Thoughtless acts are those intuitive ways we adapt, exploit, and react to things in our environment; things we do without really thinking.”– -- Jane Fulton Suri, IDEO Design

• We can use such everyday moments to better understand design environments, and how people live within them.

Thoughtless Acts

1. Reacting - we react automatically with objects and spaces that we encounter. Some qualities and features prompt us to behave in particular ways.

Thoughtless Acts

1. Reacting - we react automatically with objects and spaces that we encounter. Some qualities and features prompt us to behave in particular ways.

2. Adapting - We alter the purpose or context of things to meet our objectives.

Thoughtless Acts

Adapting

Thoughtless Acts

1. Reacting - we react automatically with objects and spaces that we encounter. Some qualities and features prompt us to behave in particular ways.

2. Adapting - We alter the purpose or context of things to meet our objectives.

3. Signaling - We convey messages and prompts to ourselves and other people.

Thoughtless Acts

• Signaling

Thoughtless Acts

1. Reacting - we react automatically with objects and spaces that we encounter. Some qualities and features prompt us to behave in particular ways.

2. Adapting - We alter the purpose or context of things to meet our objectives.

3. Signaling - We convey messages and prompts to ourselves and other people.

4. Conforming - we learn patterns of behavior from others in our social and cultural group.

Thoughtless Acts

• Conforming– “Some actions, such as hanging a jacket to

claim a chair, have become spontaneous through habit or social learning.”

Thoughtless Acts

Conforming

“Attractors”

Thoughtless Acts1. Reacting - we react automatically with

objects and spaces that we encounter. Some qualities and features prompt us to behave in particular ways.

2. Adapting - We alter the purpose or context of things to meet our objectives.

3. Signaling - We convey messages and prompts to ourselves and other people.

4. Conforming - we learn patterns of behavior from others in our social and cultural group.

5. Co-opting - We make use of opportunities present in our immediate surroundings.

Thoughtless Acts

• Co-opting

Thoughtless acts and affordances

• Thoughtless provide evidence showing how people opportunistically exploit affordances of objects...even ones not explicitly “designed in.”

Thoughtless Acts

• “Observing everyday interactions reveals subtle details about how we relate to the designed and natural world. This is key information and inspiration for design, and a good starting point for any creative initiative.”

• Watching naturalistic behavior to inspire design

Inspiring Design

Exercise

• During the lunch break, find 5 examples of Thoughtless Acts. You can search in people’s work spaces, outside the building, in the lunchroom, etc. Record them in notes, take digital photos, or sketch them.

• Once recorded, identify the type of Thoughtless Act each represents (not necessarily mutually exclusive categories, you must make a case for which type it is).

• Finally, choose the most “promising” example, and provide an example of how you might create a new design based upon what you have observed.

Lu nch

User Research

Discovering user needs throughout the development process

Who are your users?

• Know who to invite to the “party”• Defining characteristics of those users

– New or returning customers– Novice or advanced– Age, gender– Jobs, skills– Online habits– Interests and activities– Demographic information– Availability to participate!

How do you find them?

• General population?– Friends, networks, family, company– Craigslist or other job boards

• Targeted user communities– Specialized interest groups (parents, IT

admins)– Conferences

How do you invite them?

• Create a screener – document/survey used to recruit those users– Address the required characteristics– Consider the order and number of

questions– Don’t lead or reveal the desired answer

• http://www.surveymonkey.com/MySurvey_EditorFull.aspx?sm=ofKYkzMqjxH9pjWopn%2bCPvqCSCG05mDvVeO%2bNCGa4gs%3d

Why would they come?

• Incentives!– Typically I try to compensate people

about $1/min. for their time– More if they are from a specialized or

professional group

Research and the Product Development Cycle

EXPLORE: Contextual Inquiry, Ethnographic Research, Customer

Interviews

DEFINE: Affinity Diagrams, Persona Development,

Design Scenarios

DESIGN: Sketching; Prototyping

RELEASE: Alpha, Beta, GM

USABILITY TESTING: RIT; in-person testing ;

remote testing

USABILITY TESTING: Verification

Research and the Product Development Cycle

EXPLORE: Contextual Inquiry, Ethnographic Research, Customer

Interviews

DEFINE: Affinity Diagrams, Persona Development,

Design Scenarios

DESIGN: Sketching; Prototyping

RELEASE: Alpha, Beta, GM

USABILITY TESTING: RIT; in-person testing ;

remote testing

USABILITY TESTING: Verification

Explore• Contextual Inquiry, Ethnographic Research

EXPLORE: Contextual Inquiry, Ethnographic Research, Customer

Interviews

Explore• Customer Interviews, Focus Groups

EXPLORE: Contextual Inquiry, Ethnographic Research, Customer

Interviews

Research and the Product Development Cycle

EXPLORE: Contextual Inquiry, Ethnographic Research, Customer

Interviews

DEFINE: Affinity Diagrams, Persona Development,

Design Scenarios

DESIGN: Sketching; Prototyping

RELEASE: Alpha, Beta, GM

USABILITY TESTING: RIT; in-person testing ;

remote testing

USABILITY TESTING: Verification

Define• Affinity Diagrams, Card Sorting

DEFINE: Affinity Diagrams, Persona Development,

Design Scenarios

Define• Affinity Diagrams and Card Sorting

– Useful for figuring out how to organize websites, complex information architecture in software

• What’s in the navigation bar?• How should the menus be organized?

DEFINE: Affinity Diagrams, Persona Development,

Design Scenarios

Define• Affinity Diagrams and Card Sorting

– Exercise. • Work with a team of 3. Imagine you are

helping to build a website for parents where they can build a profile and find useful information.

• Group the following terms into categories that make sense to you. Some terms can be sub-categories and some terms can be group headers.

DEFINE: Affinity Diagrams, Persona Development,

Design Scenarios

How are personas useful?

Define• Personas

– Who are your users? What do their daily activities look like?

DEFINE: Affinity Diagrams, Persona Development,

Design Scenarios

Define• Design Scenarios

– How will your users interact with the product?

DEFINE: Affinity Diagrams, Persona Development,

Design Scenarios

Research and the Product Development Cycle

EXPLORE: Contextual Inquiry, Ethnographic Research, Customer

Interviews

DEFINE: Affinity Diagrams, Persona Development,

Design Scenarios

DESIGN: Sketching; Prototyping

RELEASE: Alpha, Beta, GM

USABILITY TESTING: RIT; in-person testing ;

remote testing

USABILITY TESTING: Verification

DESIGN

• Sketches and Wireframes– a basic visual guide used in interface

design to suggest the structure and relationships between its elements.

– Typically, wireframes are completed before any artwork is developed.

– Meant to be a work-in-progress

DESIGN: Sketching; Prototyping

Design• Paper Prototyping

– Exercise • Using the information architecture

discovered in the card sorting exercise, come up with a preliminary home page design for the parent’s website. You can use cardstock paper, pens, and smaller pieces of paper to represent menus or navigation elements. Be creative! Look for design patterns inspired from websites that you like. Don’t worry about getting it “perfect” as we will test this design later.

DESIGN: Sketching; Prototyping

DESIGN

• Mockups– Some of my favorite tools

• PowerPoint• Photoshop• MS Paint• Omnigraffle

DESIGN: Sketching; Prototyping

DESIGN

• Mockups

DESIGN: Sketching; Prototyping

DESIGN

• Mockups

DESIGN: Sketching; Prototyping

DESIGN

• Mockups

DESIGN: Sketching; Prototyping

Research and the Product Development Cycle

EXPLORE: Contextual Inquiry, Ethnographic Research, Customer

Interviews

DEFINE: Affinity Diagrams, Persona Development,

Design Scenarios

DESIGN: Sketching; Prototyping

RELEASE: Alpha, Beta, GM

USABILITY TESTING: RIT; in-person testing ;

remote testing

USABILITY TESTING: Verification

USABILITY TESTING

Methodology• ~6-10 participants are recruited to match a target

profile:– e.g.: PC users, have purchased security software

before; have basic to moderate comfort level with computers– Sometimes, special criteria: e.g. 5/6 are female

parents• Participants are invited to the testing facility for a 1-1.5

hour session.• The moderator guides participants through a series of

simulated tasks, using low or high-fidelity prototypes. • “Imagine that you have just purchased security

software for your PC and are trying to install it on your computer. Please interact with these screens as you would expect to in order to install the software.”

USABILITY TESTING: RIT; in-person testing ;

remote testing

“Think aloud” protocol What would you do here?What do you think of that?

What happened?

USABILITY TESTINGUSABILITY TESTING: RIT;

in-person testing ; remote testing

USABILITY TESTINGParticipants are videotaped with a dual-camera set-up to allow for simultaneous recording of screen activity and facial expressions. One moderator guides the participant through tasks, and one to two observers can be present.

USABILITY TESTING: RIT; in-person testing ;

remote testing

USABILITY TESTINGUSABILITY TESTING: RIT;

in-person testing ; remote testing

USABILITY TESTING– Exercise

• Now you will test the paper prototype that you created in the previous exercise. One person from your team (moderator) should take the design to two other people (participants) from another team. Before running a test, be sure that you have come up with a defined set of tasks that you will ask each participant to attempt during the test. When you are finished, meet with your team to discuss the results, and what your observations suggest in the way of a redesign.

DESIGN: Sketching; Prototyping

Some other “flavors” of usability testing

USABILITY TESTING

• Rapid Iterative Testing (RIT)

TEST AGAIN

TEST

QUICK REDESIGN

In-context Usability Testing

In-context Usability Testing

• Visited the homes of 10 target users

• How easy was the product to use in their home?

UX Research in the Modern Age

• Eyetracking• Web analytics• Remote usability testing• Hosted surveys

Applied Exercise

Putting it all together!

Design your own UX Research Program!

• Working by yourself, or with a partner or group, come up with a research program to study a new product or website through its development. You can choose a topic that you are interested in, or you can ask me for some samples.

• Assumptions – – There is a market for this product, and a marketing team to target

it– Your technical team can build/support the underlying technology

• Your objectives:– How will you find out who will use this product?– How will you find out what users want from a product like this?– What will you do with this data?– How will you formulate a design/prototype?– How will you test its efficacy?– Why are these methods more appropriate than other alternatives?