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

• Icing

• About you, or me

• About being completely novel

• The Holy Grail

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

• Internal
– Interactions should be consistent within
your product

• Internal
– Actions should be referenced consistently
within your application
• Icons
– People have a powerful visual memory – use it!
• Names of functions and features

• External

• External
– Not consistent: Microsoft Office Ribbon

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

• With the world
On/Off

Inside/outside

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

• With the world
– Persistence
– Spatial reasoning

• 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?

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
3. Signaling - We convey messages and
prompts to ourselves and other people.

Thoughtless Acts

• Signaling

Thoughtless Acts
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
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

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.

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
Research, Customer
Interviews

• Contextual Inquiry, Ethnographic Research

EXPLORE: Contextual

Explore
Research, Customer
Interviews

• Customer Interviews, Focus Groups


Define
Design Scenarios

• Affinity Diagrams, Card Sorting


Define
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
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
Design Scenarios

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

How are personas useful?


Define
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

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
in-person testing ;
remote testing

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


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
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
• 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?

Usability and User Experience Training Seminar

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Usability and User Experience Training Seminar

Similaire à Usability and User Experience Training Seminar (20)

Dernier

Dernier (20)

Usability and User Experience Training Seminar

Notes de l'éditeur