Scenarios for
Design

             Elizabeth Bacon
          Interaction10 Workshop
                February 4, 2010
Introductions
                  Problem identification
                       Context scenarios
                      Key ...
Background

           Liz Bacon
           1998-1999   MuseAll
           1999-2002   Cooper
           2002-2007   St. J...
And you?




                                        ?
          What would you like to take
          away from this work...
Goal-Directed Design methodology

      Invented at Cooper: a solid, repeatable
      methodology & process for creating i...
Why scenarios are important to
    interaction design
          Interactive systems involve design &
          communicati...
Scenarios give us context for whom
    we are designing
          Persona descriptions and goals give us criteria by
     ...
Scenarios connect research to
    appropriate design solutions




 Context Scenarios      Key Path Scenarios           Va...
Process should move between
    perspectives
          Any design process worth its salt moves back and
          forth be...
Introductions
                  Problem identification
                       Context scenarios
                      Key ...
Craft begins with problem
    identification
          Interaction Design is not art: embrace constraints!
          And e...
What are Personas?

          Personas are archetypal user profiles,
          representing what we know about users and
 ...
First-hand interviews and observation

          Personas and scenarios are most effective when
          based on first-h...
Stakeholder interviews and
    collaborative approaches

          Sometimes we can’t make it out to the field but
       ...
A good persona description captures

          • Goals (motivations...)
          • Attitudes (mental models...)
         ...
Goals rise above “tasks”

          Goals are motivations, those underlying human
          needs and qualities that won’t...
Characterizing goals

          Each persona description includes 3-4 key goals
          related to the product. Goals ar...
Persona sets and orgsonas

          Multiple personas in a set illustrate the range of
          behaviors we must consid...
Work with stakeholders to classify
    personas in a set
        Once a Persona set is defined, they are classified
      ...
Compared with target markets

          Sets of personas represent significant, distinct
          behavior patterns and g...
More on persona misconceptions

          Check out presentation available at
          www.devise.com/further_reading



...
Other research models

          We also create and consider other research
          models to clarify the problem space ...
Personas only give us part of the
    story
          Personas tell us about how users behave now.

          Scenarios te...
Scenario-based approach to design

                        Two main phases of
                        IxD with scenarios a...
Introduction
                  Problem identification
                       Context scenarios
                      Key p...
Key deliverable/outcome:
    UX requirements
                  This phase is devoted to
                  product definiti...
Visionary

         Envision the new, delightful experience of
         primary persona(s), at a high level.

         • I...
Consider lifecycle, stay real

          Represent the end-to-end experience in the real
          world.
          • Don’...
POWER of WORDS

          Fluidity of language makes for infinite
          possibilities

          • Approachability for...
Let it all out

                  Activity: Brainstorm
                  Brainstorm before committing
                  “p...
Concepts and ideas

                  Activity: Write context scenarios
                  Use personas and research
      ...
Target primary personas

          Write context scenarios for primary personas and
          secondary personas if time p...
A context scenario considers...

            • Setting in which the product will be used
            • Frequency of use; d...
EXAMPLE: ChoreTracker

          Lynn’s context scenarios
          •Setting up her family and chore
           chart
    ...
Teamwork

         We’ll be working in teams today:
         form up in teams of two.


                   “Ideas get deve...
Background for exercises                           LubeSoft
                                                       Actual
...
Field research   LubeSoft




                             Interaction10
Elizabeth Bacon       Scenarios for Design
Key Measures
            Measures needed to run shop effectively on a daily basis

            Ticket average (today)


  ...
TEAM EXERCISE: Context scenarios LubeSoft
   for Tom
                  Activity: Brainstorm & Write
                  Brai...
Debrief




                                                ?
          Were you able to think of realistic
          stor...
Scenarios drive customer requirements

          Context scenario becomes a powerful
          collaboration tool with sta...
Getting to requirements

                  Activity:
                  Identify all necessary product
                  fu...
Data needs

          Data needs address information and other data that
          each persona needs to see

          Fo...
EXAMPLE: ChoreTracker

           Lynn’s data needs
           She needs to see:
           • Individual kid’s chores
    ...
Functional needs

          Functional needs address actions the persona needs
          to take upon or in response to th...
EXAMPLE: ChoreTracker

          Lynn’s functional needs
          She needs the ability to:
          • Read about compan...
General considerations

      Consider factors that may not have surfaced yet:
      • Personas’ technical skills
      • ...
EXAMPLE: ChoreTracker

      General considerations for Lynn:
      • Lynn could get interrupted at any
        time, so t...
CLASS EXERCISE:                         LubeSoft
    Data & functional needs
                  Activity: Consider data and...
LubeSoft data elements
                  LubeSoft Dashboard - interim Form & Behavior Specification, Data Elements section ...
Defining requirements

                  Activity:
                  Define a coherent user
                  experience, ...
Note: This is different from other
    requirements lists
          These requirements are not yet comprehensive for
     ...
Associate them with user needs

          Context scenarios can be used to integrate all
          design inputs
         ...
EXAMPLE: ChoreTracker requirements




                                           Interaction10
Elizabeth Bacon           ...
TEAM EXERCISE:                            LubeSoft
    UX requirements
                  Activity: Define requirements
   ...
Debrief




                                                ?
          Were you staying at the right level
          of d...
Collaboration:
    Review requirements
     Context scenarios help us drive the design and
     determine the scope of the...
Introduction
                           Problem identification
                                Context scenarios
         ...
Key deliverable/outcome:
    interaction framework
                  This phase is focused on
                  devising s...
Heart of IxD

          Key path scenarios are still a holistic view, but
          more intensely focus on the beating he...
Interaction framework is big picture

          Interaction design framework doesn’t need to
          include:
          ...
Focus shifts between forms &
    functions and interactive behaviors
          Interaction design defines:
          • the...
Foundational aspects

                  Activity: Determine posture
                  Posture refers to how a system
     ...
Foundational aspects

                  Activity: Consider inputs
                  There are increasingly many
          ...
CLASS EXERCISE:                        LubeSoft
    Posture & inputs
                  Activity: Consider application
    ...
Create key path scenarios

                  Activity: Write scenarios
                  Key path scenarios evolve from th...
Key path scenarios are an
    intersection and synthesis

                                              Data
             ...
Data and functional elements

          Evolve directly from data and functional needs

          • Catalog:
            •...
EXAMPLE: ChoreTracker data elements

          Data element: Chore
            • Attributes
                  •   Assignme...
EXAMPLE: ChoreTracker functional
    elements
          Functional need: Create chore
            • Include:
             ...
Play with mapping GUI concepts
    against elements & needs
          Revisit the “inputs” and even “posture” and
        ...
EXAMPLE: ChoreTracker




                                   Interaction10
Elizabeth Bacon             Scenarios for Design
TEAM EXERCISE:                                                 LubeSoft
   Key Path Scenarios
                         Act...
Debrief




                                  ?
         Share examples!

         Who started sketching?




            ...
Dynamic order of steps 2-3

     Follow your gut:
     • words grouped into scenarios
         first, then sketch
       o...
Collaboration:
    Feasibility
     Key path scenarios help us focus our designs on the
     most appropriate solutions fo...
Finally, start sketching!

                  Activity: Group and sketch
                  Group functionality
            ...
Importance of views

          Identify the major modes of the screen based on
          different activities. Consider se...
EXAMPLE: ChoreTracker

                   Views for Lynn’s needs

                    Sections of screens, or separate pag...
EXAMPLE:
    Early-phase sketching




                                   Interaction10
Elizabeth Bacon             Scenar...
TEAM EXERCISE: Sketching                 LubeSoft

                  Activity: Group elements and
                  sketch...
Debrief




                                            ?
        Did you keep your sketches at the
        appropriate le...
The interaction framework

                  Activity: Define interaction
                  framework
                  It...
Collaboration:
    Persuasion plus compromise
     The Interaction Framework provides a clear vision of
     the product d...
EXAMPLE: ChoreTracker
    Mid-phase interaction framework




                                             Interaction10
E...
EXAMPLE: ChoreTracker
    Late-phase interaction framework




                                              Interaction10...
EXAMPLE: ChoreTracker
    Late-phase interaction framework




                                              Interaction10...
Introduction
                  Problem identification
                       Context scenarios
                      Key p...
Check your design with validation
    scenarios
       Activity:
       Test design with scenarios
       other than the k...
Alternative scenarios

     Alternative scenarios explore possibilities (whereas
     context & key path focused on ideals...
EXAMPLE: ChoreTracker

        Logged-in states
        URL management of
         members
        Enticements




       ...
Never forget design is iterative

     Adjust your solutions,
     scenarios, and start from
     scratch if you need to!
...
Persona-based usability testing

     Sometimes there is no budget or time for formal or
     even guerrilla usability tes...
CLASS EXERCISE: Validation                           LubeSoft
    scenarios (time permitting)
              Validation Sce...
Introduction
                  Problem identification
                       Context scenarios
                      Key p...
Importance of communication

          Narrative is
          extremely powerful
          way to describe
          inter...
Key deliverable:
    persuasive, explanatory material
           Communication Scenarios




                             ...
EXAMPLE: LubeSoft Dashboard




                                         Interaction10
Elizabeth Bacon                   S...
Conversation




                                      ?
          How would communication
          scenarios be tailored...
Scenarios can be employed in many
   other ways throughout development
  Uses                                  Potential M...
Conversation de l’Agile




                                            ?
           How do you use scenarios in
         ...
Introduction
                  Problem identification
                       Context scenarios
                      Key p...
Indispensable tool in your kit

          Scenarios are a fundamental IxD practice since
          all experiences unfold ...
Thank you!

           Email:
           ixd@elizabethbacon.com
           Twitter:
           @ebacon


           Recomm...
Upcoming SlideShare
Loading in...5
×

Scenarios For Design: Interaction10 Workshop by Elizabeth Bacon

22,214

Published on

This presentation supported a 4-hour workshop taught by Liz Bacon at the Interaction10 conference in Savannah, Georgia on February 4, 2010. It describes the nuts-and-bolts of applying a scenario-based approach to design. It also covers some of the theoretical underpinnings of this method as well as how it supports effective team communication and collaboration. Liz will be writing a book on this subject, and welcomes your comments here or directly via http://www.devise.com/contact.

Published in: Design, Technology, Business
2 Comments
126 Likes
Statistics
Notes
  • Hi Liz, is that possible that I could get this presentation? It is not enable for download, so I would appreciate if you would allow me to download it. Thanks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi there! When a slide says 'Let's walk through an example...' and of course when there's an exercise slide, this references a physical hand-out that you don't get here in Slideshare. Since I also speak to a lot more detail and offer additional examples than the slides display, I wanted to mention I am available professionally to teach this workshop to your organization, so please get in touch via http://www.devise.com/contact. Thank you!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
22,214
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
2
Likes
126
Embeds 0
No embeds

No notes for slide

Transcript of "Scenarios For Design: Interaction10 Workshop by Elizabeth Bacon"

  1. 1. Scenarios for Design Elizabeth Bacon Interaction10 Workshop February 4, 2010
  2. 2. Introductions Problem identification Context scenarios Key path scenarios Validation scenarios Other uses Interaction10 Elizabeth Bacon Scenarios for Design
  3. 3. Background Liz Bacon 1998-1999 MuseAll 1999-2002 Cooper 2002-2007 St. Jude Medical 2007-now Devise IxDA Director/Vice-President, 2007-2010 Interaction10 Elizabeth Bacon Scenarios for Design
  4. 4. And you? ? What would you like to take away from this workshop? Role call: • Designer • Manager • Developer • Other... Do you care about Agile? Interaction10 Elizabeth Bacon Scenarios for Design
  5. 5. Goal-Directed Design methodology Invented at Cooper: a solid, repeatable methodology & process for creating interactive products • Ethnographic research • Personas as the central actor in scenarios • Conceptual interaction design • Communication of interaction design solutions • Principles, patterns & other practices Interaction10 Elizabeth Bacon Scenarios for Design
  6. 6. Why scenarios are important to interaction design Interactive systems involve design & communication of forms and behaviors over time. Scenarios help us create an end-to-end experience, so that we designing features in consideration of one another. Interaction10 Elizabeth Bacon Scenarios for Design
  7. 7. Scenarios give us context for whom we are designing Persona descriptions and goals give us criteria by which to design and evaluate solutions. Scenarios give us real-world situations to solve for, and a context in which the personas act. Interaction10 Elizabeth Bacon Scenarios for Design
  8. 8. Scenarios connect research to appropriate design solutions Context Scenarios Key Path Scenarios Validation Scenarios Communication Scenarios • High level • Detailed • Detailed • High-level or detailed, • Comprehensive • Core & comprehensive • Edge cases depending on audience • Drive requirements • Drive interaction design • Test design solution • Drive agreement on design definition solutions candidates rightness Interaction10 Elizabeth Bacon Scenarios for Design
  9. 9. Process should move between perspectives Any design process worth its salt moves back and forth between steps that focus on: sequence objects flow separations connections functions Interaction10 Elizabeth Bacon Scenarios for Design
  10. 10. Introductions Problem identification Context scenarios Key path scenarios Validation scenarios Other uses Interaction10 Elizabeth Bacon Scenarios for Design
  11. 11. Craft begins with problem identification Interaction Design is not art: embrace constraints! And embrace the process! Interaction10 Elizabeth Bacon Scenarios for Design
  12. 12. What are Personas? Personas are archetypal user profiles, representing what we know about users and potential users. • Articulate current patterns of behavior • Describe the environment in which users will use your product or service • Help team focus on representative needs of a few target users plus they help us avoid: • Self-referential design Power of specificity • Elastic users • Focus on edge cases Interaction10 Elizabeth Bacon Scenarios for Design
  13. 13. First-hand interviews and observation Personas and scenarios are most effective when based on first-hand research. Ethnographic research is fast & powerful. Interaction10 Elizabeth Bacon Scenarios for Design
  14. 14. Stakeholder interviews and collaborative approaches Sometimes we can’t make it out to the field but we still want human specificity. Provisional personas are based on: • Stakeholder interviews • Subject matter experts • Collaboration with people close to users Interaction10 Elizabeth Bacon Scenarios for Design
  15. 15. A good persona description captures • Goals (motivations...) • Attitudes (mental models...) • Work or activity flows • Environment (context...) • Skill level, anthropometrics • Frustrations (obstacles...) Interaction10 Elizabeth Bacon Scenarios for Design
  16. 16. Goals rise above “tasks” Goals are motivations, those underlying human needs and qualities that won’t shift (much) even as technology does Real people are consistent. Technology solutions match or don’t match their world. Interaction10 Elizabeth Bacon Scenarios for Design
  17. 17. Characterizing goals Each persona description includes 3-4 key goals related to the product. Goals are of 3 types: Experience goals End goals Life goals Describe how someone Describe what a persona Seldom appropriate, unless wants to feel while using a wants to accomplish. The achieving the life goal is a product. product can help accomplish key motivation for using the these things directly or product. indirectly. Let’s walk through an example persona description (Lynn Castillo, for ChoreTracker) Interaction10 Elizabeth Bacon Scenarios for Design
  18. 18. Persona sets and orgsonas Multiple personas in a set illustrate the range of behaviors we must consider. Orgsonas place them in an archetypal context. Capture domain variations important to your product definition, such as: • Senior vs junior roles • Large organization vs small organization • Buyers vs users • Target users vs non-target users Interaction10 Elizabeth Bacon Scenarios for Design
  19. 19. Work with stakeholders to classify personas in a set Once a Persona set is defined, they are classified collaboratively to create team alignment Focusing on Primary personas reigns in scope and keeps designers sane Interaction10 Elizabeth Bacon Scenarios for Design
  20. 20. Compared with target markets Sets of personas represent significant, distinct behavior patterns and goals within a target market. By itself, a target market identifies only the buying population. User profiles from marketing illustrate how to sell & pitch products. We need more insights about USAGE. Interaction10 Elizabeth Bacon Scenarios for Design
  21. 21. More on persona misconceptions Check out presentation available at www.devise.com/further_reading Interaction10 Elizabeth Bacon Scenarios for Design
  22. 22. Other research models We also create and consider other research models to clarify the problem space and start to characterize the solution: • Mental models • Workflows diagrams • Affinity diagrams • Human factors & anthropometrics • Usability testing Interaction10 Elizabeth Bacon Scenarios for Design
  23. 23. Personas only give us part of the story Personas tell us about how users behave now. Scenarios tell us about how users will behave— in the future—with our new product or service. Scenarios are what really drive requirements and design. Interaction10 Elizabeth Bacon Scenarios for Design
  24. 24. Scenario-based approach to design Two main phases of IxD with scenarios at their core Next, ensure ideas are valid, then communicate in a user-centered way Interaction10 Elizabeth Bacon Scenarios for Design
  25. 25. Introduction Problem identification Context scenarios Key path scenarios Validation scenarios Other uses Interaction10 Elizabeth Bacon Scenarios for Design
  26. 26. Key deliverable/outcome: UX requirements This phase is devoted to product definition and establishing scope. Research insights are synthesized into novel, pleasing solutions. Interaction10 Elizabeth Bacon Scenarios for Design
  27. 27. Visionary Envision the new, delightful experience of primary persona(s), at a high level. • Innovative • Begin with brainstorming • Apply magic thinking Interaction10 Elizabeth Bacon Scenarios for Design
  28. 28. Consider lifecycle, stay real Represent the end-to-end experience in the real world. • Don’t forget people’s disabilities and environmental constraints Use personas to drive user-centered decisions on business side. Determine WHAT and don’t focus on HOW! Interaction10 Elizabeth Bacon Scenarios for Design
  29. 29. POWER of WORDS Fluidity of language makes for infinite possibilities • Approachability for stakeholders • Ultimate lightweight documentation Sketching with words Interaction10 Elizabeth Bacon Scenarios for Design
  30. 30. Let it all out Activity: Brainstorm Brainstorm before committing “pen” to “paper”. • Go crazy however you see fit • Don’t be critical • Don’t get attached Interaction10 Elizabeth Bacon Scenarios for Design
  31. 31. Concepts and ideas Activity: Write context scenarios Use personas and research models to describe how the persona(s) might use the product. Context scenarios are high-level but lifecycle-comprehensive. Interaction10 Elizabeth Bacon Scenarios for Design
  32. 32. Target primary personas Write context scenarios for primary personas and secondary personas if time permits There are usually 2-6 context scenarios. They cover data & actions, in sequence, that meet user goals. Interaction10 Elizabeth Bacon Scenarios for Design
  33. 33. A context scenario considers... • Setting in which the product will be used • Frequency of use; duration of use • Possibility of creating “flow”, dealing with interruptions • Number of users on a single system • Ecosystem of related products • Tolerable level of complexity • Experience goals • End goals Interaction10 Elizabeth Bacon Scenarios for Design
  34. 34. EXAMPLE: ChoreTracker Lynn’s context scenarios •Setting up her family and chore chart •Monitoring chore progress Let’s walk through one (handouts). Interaction10 Elizabeth Bacon Scenarios for Design
  35. 35. Teamwork We’ll be working in teams today: form up in teams of two. “Ideas get developed by explaining them to the right kind of person. You need that resistance, just as a carver needs the resistance of the wood.” - Paul Graham, essayist, programmer, language designer Interaction10 Elizabeth Bacon Scenarios for Design
  36. 36. Background for exercises LubeSoft Actual Devise LubeSoft client Quick lube shop operating software ISI wants to take advantage of internet capabilities and chain-wide data reporting Conceived the LubeSoft Dashboard, a graphical, web-based interface to system Tom is our primary persona for the LubeSoft Dashboard (see handouts) Interaction10 Elizabeth Bacon Scenarios for Design
  37. 37. Field research LubeSoft Interaction10 Elizabeth Bacon Scenarios for Design
  38. 38. Key Measures Measures needed to run shop effectively on a daily basis Ticket average (today) Labor % of Sales (today) (hour by hour) Cost of Goods Sold Car count (today) (monthly, hourly) (Hourly car count is “traffic”) Sales figures per employee Net sales Bay times Interaction10 Elizabeth Bacon Scenarios for Design
  39. 39. TEAM EXERCISE: Context scenarios LubeSoft for Tom Activity: Brainstorm & Write Brainstorm concepts. Then consider how many context scenarios you need. With your teammate, write out one (or more) context scenarios. Stay away from “how” and focus on “what” Interaction10 Elizabeth Bacon Scenarios for Design
  40. 40. Debrief ? Were you able to think of realistic stories about Tom and how he could use the product? Was it hard to stay at a high level of detail? Did you discuss edge cases? Interaction10 Elizabeth Bacon Scenarios for Design
  41. 41. Scenarios drive customer requirements Context scenario becomes a powerful collaboration tool with stakeholders • Bridging the gap between customer research and what development needs to know to scope work Interaction10 Elizabeth Bacon Scenarios for Design
  42. 42. Getting to requirements Activity: Identify all necessary product functionality & capabilities that contribute to a positive user experience. • Data needs • Functional needs • General needs Interaction10 Elizabeth Bacon Scenarios for Design
  43. 43. Data needs Data needs address information and other data that each persona needs to see For example, a Zappo’s user needs to see: • Product image • Description • Cost • Availability Interaction10 Elizabeth Bacon Scenarios for Design
  44. 44. EXAMPLE: ChoreTracker Lynn’s data needs She needs to see: • Individual kid’s chores • Chore completion status • Individual kid allowance • Reward goals Interaction10 Elizabeth Bacon Scenarios for Design
  45. 45. Functional needs Functional needs address actions the persona needs to take upon or in response to the data For example, a Zappo’s user needs to be able to: • View their specific size • Read customer reviews • Add product to cart, or favorites Interaction10 Elizabeth Bacon Scenarios for Design
  46. 46. EXAMPLE: ChoreTracker Lynn’s functional needs She needs the ability to: • Read about company philosophy • Create accounts for each child • Create new chores, including scheduling them • Create new reward goals Interaction10 Elizabeth Bacon Scenarios for Design
  47. 47. General considerations Consider factors that may not have surfaced yet: • Personas’ technical skills • Anthropometrics • Competitive pressures • Stakeholder & business goals • Industry regulations Interaction10 Elizabeth Bacon Scenarios for Design
  48. 48. EXAMPLE: ChoreTracker General considerations for Lynn: • Lynn could get interrupted at any time, so the site should never lose track of what she’s started but not finished. • Lynn is fairly tech savvy • Lynn wants to live sustainably so we can help her try to avoid printing paper Interaction10 Elizabeth Bacon Scenarios for Design
  49. 49. CLASS EXERCISE: LubeSoft Data & functional needs Activity: Consider data and functional needs Let’s discuss LubeSoft operations. What information and activities would be helpful for Tom? Interaction10 Elizabeth Bacon Scenarios for Design
  50. 50. LubeSoft data elements LubeSoft Dashboard - interim Form & Behavior Specification, Data Elements section - dated April 23, 2008 LubeSoft “DASH”, “SHOP”, “SALES”, “TEAM” and “CHAIN” indicate where this measure is displayed for the specific timeframe; “-” means the measure is not needed for that timeframe. SHOP MEASURES: Measure Unit Today Week- Month- Month +|- +|- Target Level at Historical: Historical: Historical: to- to-date Trend Target applicable which This month Last month Last week for time target is last year + same + same date projection (%) period of: configured month last week last year year Definitions DISPLAYED TIMEFRAMES Definitions DISPLAYED TIMEFRAMES Ticket $ DASH CHAIN DASH SHOP DASH Today, Shop SHOP CHAIN CHAIN Average CHAIN CHAIN CHAIN SHOP Month CHAIN Trend Car Count # DASH CHAIN DASH SHOP DASH Month Shop SHOP CHAIN CHAIN CHAIN CHAIN CHAIN SHOP trend CHAIN Net Sales $ DASH CHAIN DASH SHOP DASH Month Shop SHOP CHAIN CHAIN CHAIN CHAIN CHAIN SHOP trend CHAIN Labor % of Net DASH CHAIN DASH SHOP DASH Today, Shop SHOP CHAIN CHAIN Sales, CHAIN CHAIN CHAIN SHOP Month $, or CHAIN Trend Man Hours Cost of % of Net DASH CHAIN DASH SHOP DASH Today, Shop SHOP CHAIN CHAIN Goods Sold Sales, CHAIN CHAIN CHAIN SHOP Month or $ CHAIN Trend Category % of Net SALES CHAIN SALES SALES SALES Month Chain SALES CHAIN CHAIN Sales Sales CHAIN CHAIN CHAIN CHAIN Trend Bay Times Minutes DASH - - - - Today Chain - - - Average Bay Minutes DASH CHAIN CHAIN CHAIN CHAIN Month Chain - - - Time CHAIN CON- Trend FIGURE Repeat % of DASH - - - - n/a n/a - - - Customers Total Invoices Discounts % of Net DASH - - - - n/a n/a - - - Sales (?) Notes: • “+|- Target” is defined as the % difference (either positive or negative) between the measure!s Month Trend projection value and the Target value for that measure as configured by the Owner. • For example, if the Car Count Target for a given shop is configured at 500 cars and the Month Trend projection shows 400 cars, the +|- Target value is -20% and is displayed to the user as “-20”. For this measure, a negative value is bad. Interaction10 • For example, if the Labor Warning Threshold for a given shop is configured at 25% and the Month Trend projection shows Elizabeth Bacon 32%, the +|- Target value is +25% and is displayed to the user as “+25”. For this measure, a positive value is bad. Scenarios for Design
  51. 51. Defining requirements Activity: Define a coherent user experience, where user and business needs converge as innovative solutions are defined. Feasibility Viability Desirability Interaction10 Elizabeth Bacon Scenarios for Design
  52. 52. Note: This is different from other requirements lists These requirements are not yet comprehensive for development. Main audience is project stakeholders, not detailed planning. Allow team to discuss major functionality and make informed trade-off decisions. Interaction10 Elizabeth Bacon Scenarios for Design
  53. 53. Associate them with user needs Context scenarios can be used to integrate all design inputs • Personas & goals • Mental models • Human factors • Data needs • Functional needs • General considerations Interaction10 Elizabeth Bacon Scenarios for Design
  54. 54. EXAMPLE: ChoreTracker requirements Interaction10 Elizabeth Bacon Scenarios for Design
  55. 55. TEAM EXERCISE: LubeSoft UX requirements Activity: Define requirements With your partner, write out one (or more) sets of product requirements for your context scenario Consider all sources of user- centered insight and business goals If you maintain a separate list of general requirements, that’s A-OK! Interaction10 Elizabeth Bacon Scenarios for Design
  56. 56. Debrief ? Were you staying at the right level of detail? Did you get excited about your concepts and what they would do for the personas? Interaction10 Elizabeth Bacon Scenarios for Design
  57. 57. Collaboration: Review requirements Context scenarios help us drive the design and determine the scope of the product or service. • Meet with stakeholders around this important material • Each scenario may be prioritized based on research and business goals (technical complexity if Agile) • Requirements within scenarios will start to be deemed vital, in-scope, nice-to-have or candidates for deferment Interaction10 Elizabeth Bacon Scenarios for Design
  58. 58. Introduction Problem identification Context scenarios Break! Key path scenarios Validation scenarios Other uses Interaction10 Elizabeth Bacon Scenarios for Design
  59. 59. Key deliverable/outcome: interaction framework This phase is focused on devising solutions and delivering high-level specifications for product’s fundamental forms and behaviors. Not every interaction is solved, but the foundation is true and purposes are clear. Interaction10 Elizabeth Bacon Scenarios for Design
  60. 60. Heart of IxD Key path scenarios are still a holistic view, but more intensely focus on the beating heart • Identify and refine geodes or nuggets of coherence • Balance importance of features against each other to refine the most important elements Interaction10 Elizabeth Bacon Scenarios for Design
  61. 61. Interaction framework is big picture Interaction design framework doesn’t need to include: • Visual design • Every widget • Field names • Real content Interaction10 Elizabeth Bacon Scenarios for Design
  62. 62. Focus shifts between forms & functions and interactive behaviors Interaction design defines: • the structure and behaviors of interactive products and services • user interactions with those products and services To define user interactions, we must analyze structure and behavior at multiple levels: • Component functions & forms • Interactive, behavioral links between functions & forms Interaction10 Elizabeth Bacon Scenarios for Design
  63. 63. Foundational aspects Activity: Determine posture Posture refers to how a system manifests itself within its ecosystem. For example: • Extended use / intermittent use • All-in-one or niche tool Interaction10 Elizabeth Bacon Scenarios for Design
  64. 64. Foundational aspects Activity: Consider inputs There are increasingly many platform possibilities: • Keyboard, mouse • Voice • Touch • Stylus • Gestures This decision guides subsequent form and behavior choices. Interaction10 Elizabeth Bacon Scenarios for Design
  65. 65. CLASS EXERCISE: LubeSoft Posture & inputs Activity: Consider application posture and possible inputs Few constraints have been placed on you! Interaction10 Elizabeth Bacon Scenarios for Design
  66. 66. Create key path scenarios Activity: Write scenarios Key path scenarios evolve from the context scenarios, and focus on most important & most common things personas will do. Make the “what” more concrete by investigating the “how”. Interaction10 Elizabeth Bacon Scenarios for Design
  67. 67. Key path scenarios are an intersection and synthesis Data elements Context scenarios Functional elements Key Path scenarios Business value Cost Interaction10 Elizabeth Bacon Scenarios for Design
  68. 68. Data and functional elements Evolve directly from data and functional needs • Catalog: • Objects and information user sees • Tools that act upon those objects • Containers in which objects are viewed • Identify attributes, relationships and hierarchies among data & functions Interaction10 Elizabeth Bacon Scenarios for Design
  69. 69. EXAMPLE: ChoreTracker data elements Data element: Chore • Attributes • Assignment to whom • Chore name • Text description • Scheduled when • Expiry • Relationship to allowance Data element: Kid • Attributes • Kid’s name • Chores assigned each day • Allowance tracking • Notifications/alerts Interaction10 Elizabeth Bacon Scenarios for Design
  70. 70. EXAMPLE: ChoreTracker functional elements Functional need: Create chore • Include: • Name chore • Schedule chore • Remove chore when expired Functional element: Add button + calendar view Functional need: Create kid • Includes: • Name kid • Set age, gender • Add profile picture • Set allowance Functional element: Pane with form controls & sliders Interaction10 Elizabeth Bacon Scenarios for Design
  71. 71. Play with mapping GUI concepts against elements & needs Revisit the “inputs” and even “posture” and consider alternative interaction paradigms • Use a table to be extra-rigorous • Explore metaphors Interaction10 Elizabeth Bacon Scenarios for Design
  72. 72. EXAMPLE: ChoreTracker Interaction10 Elizabeth Bacon Scenarios for Design
  73. 73. TEAM EXERCISE: LubeSoft Key Path Scenarios Activity: Key Paths In your teams, settle on posture & inputs methods. Then, create a key path scenario for one aspect of our quick lube service. • Start with a context scenario, but make it more specific by adding data and functional elements to the story • Define HOW! The next step (not for this exercise!) is to draw the interface to correspond with the key path scenario. If you must picture something, picture the personas... Interaction10 Elizabeth Bacon Scenarios for Design
  74. 74. Debrief ? Share examples! Who started sketching? Interaction10 Elizabeth Bacon Scenarios for Design
  75. 75. Dynamic order of steps 2-3 Follow your gut: • words grouped into scenarios first, then sketch or • sketch first, then words written and groups derived/verified Interaction10 Elizabeth Bacon Scenarios for Design
  76. 76. Collaboration: Feasibility Key path scenarios help us focus our designs on the most appropriate solutions for our situation • Different interaction paradigms involve different development costs • Start to think about development reading your scenario & requirements to write code • Within each scenario, prioritize development effort based on importance of persona goals Caution: some audiences can handle “how” in words while some need pictures Interaction10 Elizabeth Bacon Scenarios for Design
  77. 77. Finally, start sketching! Activity: Group and sketch Group functionality appropriately based on key path sequence of use. Sketch the interaction framework by drawing a rough wireframe of each view and its component elements. Interaction10 Elizabeth Bacon Scenarios for Design
  78. 78. Importance of views Identify the major modes of the screen based on different activities. Consider sets of activities, and flows between activities. Ensure you determine where beating heart lives at core of system. Interaction10 Elizabeth Bacon Scenarios for Design
  79. 79. EXAMPLE: ChoreTracker Views for Lynn’s needs Sections of screens, or separate pages: • An area where she is introduced to the service • An area where she gets access for free • An area for scheduling chores • An area for defining allowance Our key path scenario and Lynn’s mental model tell us she will use the first two and the latter two functional elements together in sequence: • Get introduced to service View #1 • Free services Other View • Paid service • Add a chore for Justin View #2 • Add a chore for Zach • Set Justin & Zach’s allowance Other View • Monitor chores Interaction10 Elizabeth Bacon Scenarios for Design
  80. 80. EXAMPLE: Early-phase sketching Interaction10 Elizabeth Bacon Scenarios for Design
  81. 81. TEAM EXERCISE: Sketching LubeSoft Activity: Group elements and sketch views In team pairs, sketch one or more views of your LubeSoft web experience. • Reference key path scenario • Keep drawings at the wireframe level • Give your sections names • Discuss relationships among parts, and whole Interaction10 Elizabeth Bacon Scenarios for Design
  82. 82. Debrief ? Did you keep your sketches at the appropriate level of detail? How much chance did you have to iterate? Interaction10 Elizabeth Bacon Scenarios for Design
  83. 83. The interaction framework Activity: Define interaction framework Iterate, iterate, iterate! Finalize posture & inputs; revise the key path scenario; assess groupings and continue sketching. Work with your team, share ideas, and refine until the design framework is fully formed. Interaction10 Elizabeth Bacon Scenarios for Design
  84. 84. Collaboration: Persuasion plus compromise The Interaction Framework provides a clear vision of the product design • Scope • System architecture • Prioritization of functionality • Compromise solutions won’t break the system, as long as the beating heart is respected Communicate appropriately for each audience Interaction10 Elizabeth Bacon Scenarios for Design
  85. 85. EXAMPLE: ChoreTracker Mid-phase interaction framework Interaction10 Elizabeth Bacon Scenarios for Design
  86. 86. EXAMPLE: ChoreTracker Late-phase interaction framework Interaction10 Elizabeth Bacon Scenarios for Design
  87. 87. EXAMPLE: ChoreTracker Late-phase interaction framework Interaction10 Elizabeth Bacon Scenarios for Design
  88. 88. Introduction Problem identification Context scenarios Key path scenarios Validation scenarios Other uses Interaction10 Elizabeth Bacon Scenarios for Design
  89. 89. Check your design with validation scenarios Activity: Test design with scenarios other than the key path. Not extreme edge cases but fairly common circumstances. Return to Secondary personas. Interaction10 Elizabeth Bacon Scenarios for Design
  90. 90. Alternative scenarios Alternative scenarios explore possibilities (whereas context & key path focused on ideals and probables) • Consider failure of system • Explore “What if...?” • Mitigate risks • View system as a quality assurance person would Interaction10 Elizabeth Bacon Scenarios for Design
  91. 91. EXAMPLE: ChoreTracker Logged-in states URL management of members Enticements Interaction10 Elizabeth Bacon Scenarios for Design
  92. 92. Never forget design is iterative Adjust your solutions, scenarios, and start from scratch if you need to! Fundamental design cycle is iterative. • Returning to earlier steps with insights gained from more advanced steps produces great design Interaction10 Elizabeth Bacon Scenarios for Design
  93. 93. Persona-based usability testing Sometimes there is no budget or time for formal or even guerrilla usability testing. Validation scenarios may be your only opportunity to sanity-check wireframes before proceeding to development & deployment. Interaction10 Elizabeth Bacon Scenarios for Design
  94. 94. CLASS EXERCISE: Validation LubeSoft scenarios (time permitting) Validation Scenarios What are some alternative scenarios to explore? What are the main edge cases the developers care about? Interaction10 Elizabeth Bacon Scenarios for Design
  95. 95. Introduction Problem identification Context scenarios Key path scenarios Validation scenarios Other uses Interaction10 Elizabeth Bacon Scenarios for Design
  96. 96. Importance of communication Narrative is extremely powerful way to describe interactive product behaviors Interaction10 Elizabeth Bacon Scenarios for Design
  97. 97. Key deliverable: persuasive, explanatory material Communication Scenarios Interaction10 Elizabeth Bacon Scenarios for Design
  98. 98. EXAMPLE: LubeSoft Dashboard Interaction10 Elizabeth Bacon Scenarios for Design
  99. 99. Conversation ? How would communication scenarios be tailored for various audiences? Interaction10 Elizabeth Bacon Scenarios for Design
  100. 100. Scenarios can be employed in many other ways throughout development Uses Potential Misuses • Usability testing: basis of • Freewheeling storyboarding: protocols can be too pie-in-the-sky if not • Testing: support formal based on user needs verification & validation testing • Use cases: can be too rigid when • Marketing education and used as requirements authoring training: provide insights to tool central workflows • Agile development: can be too loose if not based on true understanding of user Interaction10 Elizabeth Bacon Scenarios for Design
  101. 101. Conversation de l’Agile ? How do you use scenarios in your Agile IxD practice today? What’s the relationship of user stories to key path scenarios? Interaction10 Elizabeth Bacon Scenarios for Design
  102. 102. Introduction Problem identification Context scenarios Key path scenarios Validation scenarios Other uses In summary Interaction10 Elizabeth Bacon Scenarios for Design
  103. 103. Indispensable tool in your kit Scenarios are a fundamental IxD practice since all experiences unfold over time • Efficient way to synthesize research • User-centered way to define requirements • Powerful method for conceiving interaction design solutions • Compelling form of design communication May the flow be with you! Interaction10 Elizabeth Bacon Scenarios for Design
  104. 104. Thank you! Email: ixd@elizabethbacon.com Twitter: @ebacon Recommended reading: Kim Goodwin, “Designing for the Digital Age” Wiley Publishing Alan Cooper, Robert Riemann and David Cronin “About Face 3” Wiley Publishing My future book! :) Interaction10 Elizabeth Bacon Scenarios for Design

×