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 Political Organizational Team Psychological Physical

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. Consistency 2. Affordances 3. Mappings 4. 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

3 kinds of consistency • External – Not consistent: Microsoft Office Ribbon

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 On/Off Inside/outside Not consistent: unlimited vs. fixed size, order, media

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

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 Interaction is like a conversation Computer Interface Execution – how the Evaluation – how we user tells the computer compare what what they want it to do happened to what the user wanted to happen Goals (user)

Execution How the user tells the computer what they want it to do

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

Evaluation Example – 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).

Examples 1 2 3 4 5 6

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 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. 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_Edit orFull.aspx?sm=ofKYkzMqjxH9pjWopn%2bCPvq CSCG05mDvVeO%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 USABILITY TESTING: RIT; in-person testing ; remote testing DESIGN: Sketching; Prototyping RELEASE: Alpha, Beta, GM USABILITY TESTING: Verification

EXPLORE: Contextual Explore Inquiry, Ethnographic Research, Customer Interviews • Contextual Inquiry, Ethnographic Research

EXPLORE: Contextual Explore Inquiry, Ethnographic Research, Customer Interviews • Customer Interviews, Focus Groups

DEFINE: Affinity Diagrams, Define Persona Development, Design Scenarios • Affinity Diagrams, Card Sorting

DEFINE: Affinity Diagrams, Define Persona Development, Design Scenarios • 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, Define Persona Development, Design Scenarios • 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, Define Persona Development, Design Scenarios • Personas – Who are your users? What do their daily activities look like? How are personas useful?

DEFINE: Affinity Diagrams, Define Persona Development, Design Scenarios • Design Scenarios – How will your users interact with the product?

DESIGN: Sketching; DESIGN Prototyping • 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; Design Prototyping • 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; DESIGN Prototyping • Mockups – Some of my favorite tools • PowerPoint • Photoshop • MS Paint • Omnigraffle

DESIGN: Sketching; DESIGN Prototyping • Mockups

USABILITY TESTING: RIT; in-person testing ; remote testing 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; USABILITY TESTING in-person testing ; remote testing “Think aloud” protocol What would you do here? What do you think of that? What happened?

USABILITY TESTING: RIT; USABILITY TESTING in-person testing ; remote testing Participants 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; USABILITY TESTING in-person testing ; remote testing

DESIGN: Sketching; USABILITY TESTING Prototyping – 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.

Some other “flavors” of usability testing

USABILITY TESTING • Rapid Iterative Testing (RIT) TEST QUICK REDESIGN TEST AGAIN

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?

https://si0.twimg.com	23
http://www.techgig.com	5
http://petehwang.posterous.com	3
http://www.twylah.com	2
http://paper.li	1
http://us-w1.rockmelt.com	1
http://mediates.blogspot.com	1

Usability and User Experience Training Seminar

by labecvar on Jun 28, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 36

Statistics

Usability and User Experience Training Seminar — Presentation Transcript