DESIGNING FOR THE USER INSTEAD OF YOUR PORTFOLIO AN INTRODUCTION TO USER EXPERIENCE DESIGN Wade Shearer wadeshearer.com
Wade Shearer User Experience Designer and Evangelist Vivint, Omniture, LDS Church, 3form, Doba, ELLIS Brigham Young University
so you designed something
why?
was it successful?
ARE THEY HAPPY?
is it EASY?
DO THEY TRUST IT?
so what s missing?
The visual interface design sets expectations about the experience, but the product's behavior delivers on that promise.
User Experience (UX) is the way a person feels about using a product, system or service.
User Experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person s perceptions of the practical aspects such as utility, ease of use and efficiency of the system.
Disciplines of User Experience Information Architecture Interaction Design Usability Engineering Visual Design
Interaction Design (IxD) is the practice of designing interactive digital products, environments, systems, and services.
It has an interest in form but its main focus is on behavior. It is synthesis and imagining things as they might be, more so than focusing on how things are. Interaction Design is heavily focused on satisfying the needs and desires of the people who will use the product, where other disciplines heavy focus on designing for stakeholders of a project.
your opinion DOESN T MATTER
WITHOUT USER EXPERIENCE DESIGN, we make products that we think are awesome; WE FOCUS ON FEATURES, SALES, AESTHETICS AND BRAND, with little to no thought of how the people who would use them would feel about it
Examples
Safari 3 Safari 4
Process
Let s see what s below the surface of a cool design
The visual treatment of graphic elements, the look and feel of the product Designing the presentation of information to facilitate understanding Structural design of the information space to facilitate intuitive access to content Definition of scope, user needs, content and info requirements, functional specs Planning out the objectives and goals of the project, specifying organizational reqs
The visual treatment of graphic elements, the look and feel of the product typography, color palette, alignment, texture, tactile quality of materials Designing the presentation of information to facilitate understanding navigation, table of contents, indices, visual hierarchy Structural design of the information space to facilitate intuitive access to content information architecture, interaction design, wireframe, progressive disclosure Definition of scope, user needs, content and info requirements, functional specs personas, accessibility, feature set, ethnographic research, differentiation, purpose Planning out the objectives and goals of the project, specifying organizational reqs project space, project schedule, selecting methods and techniques, briefing
The visual treatment of graphic elements, the look and feel of the product typography, color palette, alignment, texture, tactile quality of materials Designing the presentation of information to facilitate understanding navigation, table of contents, indices, visual hierarchy Structural design of the information space to facilitate intuitive access to content information architecture, interaction design, wireframe, progressive disclosure Definition of scope, user needs, content and info requirements, functional specs personas, accessibility, feature set, ethnographic research, differentiation, purpose Planning out the objectives and goals of the project, specifying organizational reqs project space, project schedule, selecting methods and techniques, briefing
COMPLETION concrete VISUAL DESIGN INFORMATION DESIGN STRUCTURE REQUIREMENTS STRATEGY CONCEPTION abstract ANALYSIS AND PL
CONCEPTION abstract PERSONAS & SCENARIOS ANALYSIS AND PLANNING METHODS AND TECHNIQUES STICKY NOTES Comparing notes is a useful tool to aid decision making. Ideas are written down on individual sticky notes, weighed against one another and organised according to priority or other criteria (speed, cost, quality, desirability etc). This technique can also be used with users to get them to put their considerations in order of importance. PROJECT SPACE A dedicated project area where research and visualisations can be organised spatially on walls provides a creative work environment where meetings can be held surrounded by stimuli. Constructing a story about the project in the space providing roughs and unpolished design invites others to comment and contribute. IMPLE ME NTATION E VALUATION The user centred design process The user centered design is an iterative cycle where every process is an iterative cycle where step is evaluated against the every step is evaluated against the initially identified requirements of initially the users identified and iterated requirements until these of the requirements users and iterated are met. until Evaluation these requirements methods include: are met. Evaluation methods include: CONCE P T
METHODS AND TECHNIQUES IMPLE ME NTATION E VALUATION The user centred design process The user centered design is an iterative cycle where every process is an iterative cycle where step is evaluated against the every step is evaluated against the initially identified requirements of initially the users identified and iterated requirements until these of the requirements users and iterated are met. until Evaluation these requirements methods include: are met. Evaluation methods include: CONCE P T USER REQUIREMENTS It is vital to use all available resources to gather information about the users requirements. Successful projects use an average of five different sources of information. These may be focus groups, contextual or individual interviews, observation, surveys, etc. PERSONAS AND SCENARIOS A persona is an archetype comprised of habits and characteristics of the target audience. Scenarios are little stories describing how typical user tasks are carried out. They help to anticipate and identify the decisions a user will have to make at each step in their experience and through each environment or system state they will encounter. PROGRESSIVE DISCLOSURE Managing the information complexity or cognitive load by displaying only relevant information at any given time prevents information overload. For example through effective signposting of destinations in a wayfinding system or using read more links on a website. PERSONAS & SCENARIOS ROLE PLAY USER TESTING ACCESSIBILITY TESTING FOCUS GROUP OBSERVATION DE S IGN
METHODS AND TECHNIQUES IMPLE ME NTATION E VALUATION The user centred design process The user centered design is an iterative cycle where every process is an iterative cycle where step is evaluated against the every step is evaluated against the initially identified requirements of initially the users identified and iterated requirements until these of the requirements users and iterated are met. until Evaluation these requirements methods include: are met. Evaluation methods include: CONCE P T USER REQUIREMENTS It is vital to use all available resources to gather information about the users requirements. Successful projects use an average of five different sources of information. These may be focus groups, contextual or individual interviews, observation, surveys, etc. PERSONAS AND SCENARIOS A persona is an archetype comprised of habits and characteristics of the target audience. Scenarios are little stories describing how typical user tasks are carried out. They help to anticipate and identify the decisions a user will have to make at each step in their experience and through each environment or system state they will encounter. PROGRESSIVE DISCLOSURE Managing the information complexity or cognitive load by displaying only relevant information at any given time prevents information overload. For example through effective signposting of destinations in a wayfinding system or using read more links on a website. PERSONAS & SCENARIOS ROLE PLAY USER TESTING ACCESSIBILITY TESTING FOCUS GROUP OBSERVATION USABILITY TESTING Evaluating a product by testing it with representative users helps to identify usability problems by collecting quantitative data on the users performance (e.g. error rate) and establishing their satisfaction with the product. DE S IGN
METHODS AND TECHNIQUES IMPLE ME NTATION E VALUATION The user centred design process The user centered design is an iterative cycle where every process is an iterative cycle where step is evaluated against the every step is evaluated against the initially identified requirements of initially the users identified and iterated requirements until these of the requirements users and iterated are met. until Evaluation these requirements methods include: are met. Evaluation methods include: CONCE P T USER REQUIREMENTS It is vital to use all available resources to gather information about the users requirements. Successful projects use an average of five different sources of information. These may be focus groups, contextual or individual interviews, observation, surveys, etc. PERSONAS AND SCENARIOS A persona is an archetype comprised of habits and characteristics of the target audience. Scenarios are little stories describing how typical user tasks are carried out. They help to anticipate and identify the decisions a user will have to make at each step in their experience and through each environment or system state they will encounter. PROGRESSIVE DISCLOSURE Managing the information complexity or cognitive load by displaying only relevant information at any given time prevents information overload. For example through effective signposting of destinations in a wayfinding system or using read more links on a website. PERSONAS & SCENARIOS ROLE PLAY USER TESTING ACCESSIBILITY TESTING FOCUS GROUP OBSERVATION USABILITY TESTING Evaluating a product by testing it with representative users helps to identify usability problems by collecting quantitative data on the users performance (e.g. error rate) and establishing their satisfaction with the product. RAPID VISUALISATION DE S IGN Visualising ideas and concepts rapidly using pen and paper is helpful to communicate them to the team and to test ideas quickly without investing time and resources into polished design. Rough and unpolished looking sketches, wireframes and storyboards encourage constructive feedback and stimulate discussion.
METHODS AND TECHNIQUES STICKY NOTES Comparing notes is a useful tool to aid decision making. Ideas are written down on individual sticky notes, weighed against one another and organised according to priority or other criteria (speed, cost, quality, desirability etc). This technique can also be used with users to get them to put their considerations in order of importance. PROJECT SPACE A dedicated project area where research and visualisations can be organised spatially on walls provides a creative work environment where meetings can be held surrounded by stimuli. Constructing a story about the project in the space providing roughs and unpolished design invites others to comment and contribute. IMPLE ME NTATION E VALUATION The user centred design process The user centered design is an iterative cycle where every process is an iterative cycle where step is evaluated against the every step is evaluated against the initially identified requirements of initially the users identified and iterated requirements until these of the requirements users and iterated are met. until Evaluation these requirements methods include: are met. Evaluation methods include: CONCE P T AESTHETICS Visual design impacts greatly on the usability of a product. Users prefer a beautiful look & feel over an ugly or dull one. Aesthetic designs are perceived as easier to use, whether they are or not. Good designers find a perfect combination of accessibility and aesthetics. PERSONAS & SCENARIOS ROLE PLAY USER TESTING ACCESSIBILITY TESTING FOCUS GROUP OBSERVATION PROTOTYPING Prototypes are simple, incomplete models that can be used to evaluate responses to form (looks-like prototype) or aspects of build and functionality (works-like prototype) of a product. They typically evolve from concept sketches or wireframes to low and high-fidelity models as they progress through the development cycle. DE S IGN
METHODS AND TECHNIQUES STICKY NOTES Comparing notes is a useful tool to aid decision making. Ideas are written down on individual sticky notes, weighed against one another and organised according to priority or other criteria (speed, cost, quality, desirability etc). This technique can also be used with users to get them to put their considerations in order of importance. PROJECT SPACE A dedicated project area where research and visualisations can be organised spatially on walls provides a creative work environment where meetings can be held surrounded by stimuli. Constructing a story about the project in the space providing roughs and unpolished design invites others to comment and contribute. GOOD PRACTICE GUIDELINES It is important to consider good practice guidelines relevant to the project in order to address broad user requirements and meet accessibility standards. For example RNIB legibility guidelines, W3C validation, ISO standards, British Standards or ergonomic principles. AESTHETICS Visual design impacts greatly on the usability of a product. Users prefer a beautiful look & feel over an ugly or dull one. Aesthetic designs are perceived as easier to use, whether they are or not. Good designers find a perfect combination of accessibility and aesthetics. IMPLE ME NTATION E VALUATION The user centred design process The user centered design is an iterative cycle where every process is an iterative cycle where step is evaluated against the every step is evaluated against the initially identified requirements of initially the users identified and iterated requirements until these of the requirements users and iterated are met. until Evaluation these requirements methods include: are met. Evaluation methods include: PERSONAS & SCENARIOS ROLE PLAY USER TESTING ACCESSIBILITY TESTING FOCUS GROUP OBSERVATION CONCE P T PROTOTYPING Prototypes are simple, incomplete models that can be used to evaluate responses to form (looks-like prototype) or aspects of build and functionality (works-like prototype) of a product. They typically evolve from concept sketches or wireframes to low and high-fidelity models as they progress through the development cycle. DE S IGN
STRUCTURE REQUIREMENTS STRATEGY CONCEPTION abstract NALYSIS AND PLANNING LAUNCH METHODS AND TECHNIQUES PLE ME NTATION VALUATION CONCE P T
USER CAPABILITIES Users have different requirements depending on their situation and capabilities. Catering for these needs and enabling access to the product or system for as many people as possible is the aim of inclusive design. high stress levels short of time, responsibility for children ACCESSIBILITY varying abilities eyesight, motor abilities, hearing impairment low confidence unfamiliar with system, first time user low perception of safety fear of discrimination, compromised data security, injury language barrier English not first language, low literacy, dyslexia
USER GOALS Users needs depend on what they are trying to achieve when they use the product. These user goals inform the information requirements that need to be addressed in order to achieve a high level of usability. tell me show me involve me INSTRUCT AND DIRECT INFORM AND GUIDE REVEAL time poor time rich
USER INVOLVEMENT The most successful results are achieved when the user is involved in every step of the design process either through direct feedback, user testing, observation or informed evaluation using previously gathered information. prototype DESIGNER USER feedback
Tasks and techniques
User surveys
Wireframes and prototypes
User flows
Experience maps
Storytelling
Design patterns
User profiles and personas
Narratives
Content inventory
A/B testing
High-fidelity prototype (living documentation)
Content style guides
Case study
70,000 117% Increase Average Monthly Visitors to Discussion Boards 60,000 50,000 40,000 30,000 20,000 10,000 0 183,705 Visitors Monthly average 26,244 Sept. 2006 - Mar. 2007 17% Increase 214,139 Visitors Monthly average 30,591 Sept. 2007 - Mar. 2008 464,929 Visitors Monthly average 66,418 Sept. 2008 - Mar. 2009 September 6, 2007 Boards Relaunch
70 60 Daily Registrations 50 40 30 20 10 0 Aug 5 Pre-relaunch Average: Aug 12 Aug 19 32Daily Registrations Post-relaunch Average: 45 Daily Registrations Aug 26 Sept 1 Sept 8 September 6, 2007 Boards Relaunch Sept 15 Sept 22 Sept 29 Oct 6
20 Time to Register (in minutes) 15 10 5 15 Minutes 53% Reduction 7 Minutes 0 Pre-launch Testing Post-launch Testing September 6, 2007 Boards Relaunch
Average Weekly Support Requests 20 15 10 5 0 Pre-launch 15 Requests 80% Post-launch Reduction 3 Requests September 6, 2007 Boards Relaunch
Take-aways
Technology serves humans Design is not art The experience belongs to the user Great design is invisible Simplicity is the ultimate sophistication
A product s success hinges on just one thing: HOW THE USER PERCEIVES IT
DOES THIS APP GIVE ME VALUE? IS IT EASY TO USE? Is it pleasant to use?
User Experience Design IS ALL ABOUT STRIVING TO MAKE THEM ANSWER YES
credit 1. http://www.jacksonfish.com/blog/2007/06/29/marketing-is-user-experience/ 2. http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/ 3. http://www.paznow.com/ucd/ 4. http://apple.com 5. Dan Saffer, http://www.kickerstudio.com/blog/2008/12/the-disciplines-of-user-experience/ 6. Joshua Porter, http://bokardo.com/archives/five-principles-to-design-by 7. http://wireframes.linowski.ca 8. http://www.usabilityfirst.com/documents/u1st_bco_casestudy.pdf