Usability and User Experience Training Seminar
Upcoming SlideShare
Loading in...5
×
 

Usability and User Experience Training Seminar

on

  • 3,897 views

This presentation describes a day-long seminar for giving participants an overview of best practices in usability design and research. Also included are several hand-on exercises to be done ...

This presentation describes a day-long seminar for giving participants an overview of best practices in usability design and research. Also included are several hand-on exercises to be done throughout the day to solidify participants' understanding of course concepts.

Statistics

Views

Total Views
3,897
Views on SlideShare
3,859
Embed Views
38

Actions

Likes
7
Downloads
99
Comments
0

7 Embeds 38

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

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Does not imply having special abilities or talents. There are some skills and principles that are learned, but most good insight into usability comes from observation and research – from users, not UX professionals.
  • Google Buzz
  • Draw on design patterns and interactions that users are familiar with Don’t overengineer – keep it simple
  • Ultimately, the usability team is situated in a business environment and needs to operate fluidly between many groups of an organization. While user needs should be important for setting priorities, sometimes creating a product involves compromise, and iterating on a design until you get it as good as you can. (asking for an email address when creating an account)
  • It’s useful to take a step back and think about how technology is part of the complex environment in which we live and work.
  • If you notice, this definition does not differentiate between hardware, software, and people (culture)
  • How much do we consider? It goes beyond the screen of the computer…
  • Let’s say we were a company designing a new and improved refrigerator.Opportunistic use of the metal surface of refrigerators – magnets.When we create a glass door refrigerator, this is no longer possibleHow will this affect consumers’ everyday use of the product?How would we know about this potential issue if we didn’t consider the whole ecology?
  • Team level – how has having a cell phone or an iPhone affected your relationships with people?Organizational level – let’s say you were trying to coordinatea group of people together using an app on the iPhonePolitical level – GPS embedded phone – who can track that information? Privacy? How comfortable to people feel sharing that information?
  • 3 types of consistency to consider…
  • Sometimes hard for stakeholders to understandwireframes and see their possibility – like an architectural blueprint

Usability and User Experience Training Seminar Usability and User Experience Training Seminar Presentation Transcript

  • 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
  • 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
  • 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
  • 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
  • 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?
  • 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
  • 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
  • DESIGN: Sketching; DESIGN Prototyping • Mockups
  • DESIGN: Sketching; DESIGN Prototyping • Mockups
  • 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
  • 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?