SlideShare a Scribd company logo
1 of 104
Scenarios for
Design

             Elizabeth Bacon
          Interaction10 Workshop
                February 4, 2010
Introductions
                  Problem identification
                       Context scenarios
                      Key path scenarios
                    Validation scenarios
                              Other uses




                                          Interaction10
Elizabeth Bacon                    Scenarios for Design
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
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
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
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
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
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
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
Introductions
                  Problem identification
                       Context scenarios
                      Key path scenarios
                    Validation scenarios
                              Other uses




                                          Interaction10
Elizabeth Bacon                    Scenarios for Design
Craft begins with problem
    identification
          Interaction Design is not art: embrace constraints!
          And embrace the process!




                                                             Interaction10
Elizabeth Bacon                                       Scenarios for Design
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
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
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
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
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
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
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
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
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
More on persona misconceptions

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




                                                       Interaction10
Elizabeth Bacon                                 Scenarios for Design
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
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
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
Introduction
                  Problem identification
                       Context scenarios
                      Key path scenarios
                    Validation scenarios
                              Other uses




                                          Interaction10
Elizabeth Bacon                    Scenarios for Design
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
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
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
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
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
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
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
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
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
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
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
Field research   LubeSoft




                             Interaction10
Elizabeth Bacon       Scenarios for Design
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
EXAMPLE: ChoreTracker requirements




                                           Interaction10
Elizabeth Bacon                     Scenarios for Design
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
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
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
Introduction
                           Problem identification
                                Context scenarios
                  Break!
                               Key path scenarios
                             Validation scenarios
                                       Other uses




                                                   Interaction10
Elizabeth Bacon                             Scenarios for Design
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
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
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
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
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
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
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
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
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
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
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
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
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
EXAMPLE: ChoreTracker




                                   Interaction10
Elizabeth Bacon             Scenarios for Design
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
Debrief




                                  ?
         Share examples!

         Who started sketching?




                                         Interaction10
Elizabeth Bacon                   Scenarios for Design
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
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
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
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
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
EXAMPLE:
    Early-phase sketching




                                   Interaction10
Elizabeth Bacon             Scenarios for Design
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
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
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
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
EXAMPLE: ChoreTracker
    Mid-phase interaction framework




                                             Interaction10
Elizabeth Bacon                       Scenarios for Design
EXAMPLE: ChoreTracker
    Late-phase interaction framework




                                              Interaction10
Elizabeth Bacon                        Scenarios for Design
EXAMPLE: ChoreTracker
    Late-phase interaction framework




                                              Interaction10
Elizabeth Bacon                        Scenarios for Design
Introduction
                  Problem identification
                       Context scenarios
                      Key path scenarios
                    Validation scenarios
                              Other uses




                                          Interaction10
Elizabeth Bacon                    Scenarios for Design
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
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
EXAMPLE: ChoreTracker

        Logged-in states
        URL management of
         members
        Enticements




                                   Interaction10
Elizabeth Bacon             Scenarios for Design
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
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
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
Introduction
                  Problem identification
                       Context scenarios
                      Key path scenarios
                    Validation scenarios
                              Other uses




                                          Interaction10
Elizabeth Bacon                    Scenarios for Design
Importance of communication

          Narrative is
          extremely powerful
          way to describe
          interactive product
          behaviors




                                         Interaction10
Elizabeth Bacon                   Scenarios for Design
Key deliverable:
    persuasive, explanatory material
           Communication Scenarios




                                              Interaction10
Elizabeth Bacon                        Scenarios for Design
EXAMPLE: LubeSoft Dashboard




                                         Interaction10
Elizabeth Bacon                   Scenarios for Design
Conversation




                                      ?
          How would communication
          scenarios be tailored for
          various audiences?




                                             Interaction10
Elizabeth Bacon                       Scenarios for Design
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
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
Introduction
                  Problem identification
                       Context scenarios
                      Key path scenarios
                    Validation scenarios
                              Other uses

                             In summary



                                          Interaction10
Elizabeth Bacon                    Scenarios for Design
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
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

More Related Content

What's hot

zeroheight + Figma (March 2019)
zeroheight + Figma (March 2019)zeroheight + Figma (March 2019)
zeroheight + Figma (March 2019)Robin Tindale
 
UX en 30 Minutos
UX en 30 MinutosUX en 30 Minutos
UX en 30 MinutosSol Mesz
 
Human Computer Interaction: The Design of Everyday Things (Chapter 4: Knowing...
Human Computer Interaction: The Design of Everyday Things (Chapter 4: Knowing...Human Computer Interaction: The Design of Everyday Things (Chapter 4: Knowing...
Human Computer Interaction: The Design of Everyday Things (Chapter 4: Knowing...Shakil Mahmood
 
Agile 2010 Estimation Games
Agile 2010 Estimation  GamesAgile 2010 Estimation  Games
Agile 2010 Estimation GamesAgileCoach.net
 
Personas Demystified 1.0
Personas Demystified 1.0Personas Demystified 1.0
Personas Demystified 1.0Mo Goltz
 
5 Things I Wish I Knew – A Service Design Journey
5 Things I Wish I Knew – A Service Design Journey5 Things I Wish I Knew – A Service Design Journey
5 Things I Wish I Knew – A Service Design JourneyJamin Hegeman
 
UX STRAT USA: Leah Buley, "The Role of UX / CX in Business"
UX STRAT USA: Leah Buley, "The Role of UX / CX in Business"UX STRAT USA: Leah Buley, "The Role of UX / CX in Business"
UX STRAT USA: Leah Buley, "The Role of UX / CX in Business"UX STRAT
 
Game Design Document
Game Design DocumentGame Design Document
Game Design DocumentKika Syafii
 
Product Design and UX / UI Design Process in Digital Product Development
Product Design and UX / UI Design Process in Digital Product DevelopmentProduct Design and UX / UI Design Process in Digital Product Development
Product Design and UX / UI Design Process in Digital Product DevelopmentVolodymyr Melnyk
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design GDGKuwaitGoogleDevel
 
Requirement gathering-and-lean-canvas
Requirement gathering-and-lean-canvasRequirement gathering-and-lean-canvas
Requirement gathering-and-lean-canvasYaowaluck Promdee
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataMohamed Shehata
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
 
Demystifying User Experience
Demystifying User ExperienceDemystifying User Experience
Demystifying User ExperienceCake and Arrow
 
Introduction to Design Thinking and UX Research
Introduction to Design Thinking and UX ResearchIntroduction to Design Thinking and UX Research
Introduction to Design Thinking and UX ResearchMuhamad Edison A
 

What's hot (20)

zeroheight + Figma (March 2019)
zeroheight + Figma (March 2019)zeroheight + Figma (March 2019)
zeroheight + Figma (March 2019)
 
UX en 30 Minutos
UX en 30 MinutosUX en 30 Minutos
UX en 30 Minutos
 
Human Computer Interaction: The Design of Everyday Things (Chapter 4: Knowing...
Human Computer Interaction: The Design of Everyday Things (Chapter 4: Knowing...Human Computer Interaction: The Design of Everyday Things (Chapter 4: Knowing...
Human Computer Interaction: The Design of Everyday Things (Chapter 4: Knowing...
 
User Stories
User StoriesUser Stories
User Stories
 
Agile 2010 Estimation Games
Agile 2010 Estimation  GamesAgile 2010 Estimation  Games
Agile 2010 Estimation Games
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
Personas Demystified 1.0
Personas Demystified 1.0Personas Demystified 1.0
Personas Demystified 1.0
 
5 Things I Wish I Knew – A Service Design Journey
5 Things I Wish I Knew – A Service Design Journey5 Things I Wish I Knew – A Service Design Journey
5 Things I Wish I Knew – A Service Design Journey
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
User stories in agile software development
User stories in agile software developmentUser stories in agile software development
User stories in agile software development
 
UX STRAT USA: Leah Buley, "The Role of UX / CX in Business"
UX STRAT USA: Leah Buley, "The Role of UX / CX in Business"UX STRAT USA: Leah Buley, "The Role of UX / CX in Business"
UX STRAT USA: Leah Buley, "The Role of UX / CX in Business"
 
Game Design Document
Game Design DocumentGame Design Document
Game Design Document
 
Product Design and UX / UI Design Process in Digital Product Development
Product Design and UX / UI Design Process in Digital Product DevelopmentProduct Design and UX / UI Design Process in Digital Product Development
Product Design and UX / UI Design Process in Digital Product Development
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
Requirement gathering-and-lean-canvas
Requirement gathering-and-lean-canvasRequirement gathering-and-lean-canvas
Requirement gathering-and-lean-canvas
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
Demystifying User Experience
Demystifying User ExperienceDemystifying User Experience
Demystifying User Experience
 
Introduction to Design Thinking and UX Research
Introduction to Design Thinking and UX ResearchIntroduction to Design Thinking and UX Research
Introduction to Design Thinking and UX Research
 
What is UX?
What is UX?What is UX?
What is UX?
 

Viewers also liked

Framing and Scenarios - Design with Dialogue - July 14, 2010
Framing and Scenarios - Design with Dialogue - July 14, 2010Framing and Scenarios - Design with Dialogue - July 14, 2010
Framing and Scenarios - Design with Dialogue - July 14, 2010The Moment
 
An introduction to personas for technical authors
An introduction to personas for technical authorsAn introduction to personas for technical authors
An introduction to personas for technical authorsNeil Turner
 
How to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design ApproachHow to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design Approach5th Finger
 
What I learned at Cooper U about Design Research
What I learned at Cooper U about Design ResearchWhat I learned at Cooper U about Design Research
What I learned at Cooper U about Design ResearchSolutionStream
 
TWS 2014 – Personas, scenarios, user stories
TWS 2014 – Personas, scenarios, user storiesTWS 2014 – Personas, scenarios, user stories
TWS 2014 – Personas, scenarios, user storiesValeria Gasik
 
How to use Scenarios
How to use ScenariosHow to use Scenarios
How to use ScenariosPeter Zalman
 
Ideation Mind Mapping
Ideation Mind MappingIdeation Mind Mapping
Ideation Mind Mappingjascc1
 
Processo Criativo
Processo CriativoProcesso Criativo
Processo Criativo.start
 
Inspired by your content. Engaging content providers in development activities
Inspired by your content. Engaging content providers in development activitiesInspired by your content. Engaging content providers in development activities
Inspired by your content. Engaging content providers in development activitiesMariana Salgado
 
Business Value and Business Model Innovation in Decentralized Interoperabilit...
Business Value and Business Model Innovation in Decentralized Interoperabilit...Business Value and Business Model Innovation in Decentralized Interoperabilit...
Business Value and Business Model Innovation in Decentralized Interoperabilit...Boris Otto
 
Automotive Design Portfolio
Automotive Design PortfolioAutomotive Design Portfolio
Automotive Design PortfolioGirish Panchal
 
Technique to design Business Model from the book: Business Model Generation
Technique to design Business Model from the book: Business Model GenerationTechnique to design Business Model from the book: Business Model Generation
Technique to design Business Model from the book: Business Model GenerationRoukaya Issaoui
 
E1 Scenario Planning
E1 Scenario PlanningE1 Scenario Planning
E1 Scenario Planninglisbk
 
Engineering anthropometry
Engineering anthropometryEngineering anthropometry
Engineering anthropometryAnkur Sharma
 
The creative empathy
The creative empathyThe creative empathy
The creative empathy.start
 
Branding + Software
Branding + SoftwareBranding + Software
Branding + SoftwarePaul Hart
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonMukalele Rogers
 
Paper Prototyping
Paper Prototyping Paper Prototyping
Paper Prototyping Summer Zhang
 
2013: Framing for Innovation
2013: Framing for Innovation2013: Framing for Innovation
2013: Framing for InnovationMatt Mayfield
 
Design Techniques for Business Model Generator
Design Techniques for Business Model GeneratorDesign Techniques for Business Model Generator
Design Techniques for Business Model GeneratorHani Tarabichi
 

Viewers also liked (20)

Framing and Scenarios - Design with Dialogue - July 14, 2010
Framing and Scenarios - Design with Dialogue - July 14, 2010Framing and Scenarios - Design with Dialogue - July 14, 2010
Framing and Scenarios - Design with Dialogue - July 14, 2010
 
An introduction to personas for technical authors
An introduction to personas for technical authorsAn introduction to personas for technical authors
An introduction to personas for technical authors
 
How to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design ApproachHow to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design Approach
 
What I learned at Cooper U about Design Research
What I learned at Cooper U about Design ResearchWhat I learned at Cooper U about Design Research
What I learned at Cooper U about Design Research
 
TWS 2014 – Personas, scenarios, user stories
TWS 2014 – Personas, scenarios, user storiesTWS 2014 – Personas, scenarios, user stories
TWS 2014 – Personas, scenarios, user stories
 
How to use Scenarios
How to use ScenariosHow to use Scenarios
How to use Scenarios
 
Ideation Mind Mapping
Ideation Mind MappingIdeation Mind Mapping
Ideation Mind Mapping
 
Processo Criativo
Processo CriativoProcesso Criativo
Processo Criativo
 
Inspired by your content. Engaging content providers in development activities
Inspired by your content. Engaging content providers in development activitiesInspired by your content. Engaging content providers in development activities
Inspired by your content. Engaging content providers in development activities
 
Business Value and Business Model Innovation in Decentralized Interoperabilit...
Business Value and Business Model Innovation in Decentralized Interoperabilit...Business Value and Business Model Innovation in Decentralized Interoperabilit...
Business Value and Business Model Innovation in Decentralized Interoperabilit...
 
Automotive Design Portfolio
Automotive Design PortfolioAutomotive Design Portfolio
Automotive Design Portfolio
 
Technique to design Business Model from the book: Business Model Generation
Technique to design Business Model from the book: Business Model GenerationTechnique to design Business Model from the book: Business Model Generation
Technique to design Business Model from the book: Business Model Generation
 
E1 Scenario Planning
E1 Scenario PlanningE1 Scenario Planning
E1 Scenario Planning
 
Engineering anthropometry
Engineering anthropometryEngineering anthropometry
Engineering anthropometry
 
The creative empathy
The creative empathyThe creative empathy
The creative empathy
 
Branding + Software
Branding + SoftwareBranding + Software
Branding + Software
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lesson
 
Paper Prototyping
Paper Prototyping Paper Prototyping
Paper Prototyping
 
2013: Framing for Innovation
2013: Framing for Innovation2013: Framing for Innovation
2013: Framing for Innovation
 
Design Techniques for Business Model Generator
Design Techniques for Business Model GeneratorDesign Techniques for Business Model Generator
Design Techniques for Business Model Generator
 

Similar to Scenarios For Design: Interaction10 Workshop by Elizabeth Bacon

Multi-dimensional: Building 21st Century Experiences for Financial Outcomes
Multi-dimensional:  Building 21st Century Experiences for Financial Outcomes Multi-dimensional:  Building 21st Century Experiences for Financial Outcomes
Multi-dimensional: Building 21st Century Experiences for Financial Outcomes Harriet Wakelam
 
Building immersive experiences: Usability you can really use
Building immersive experiences: Usability you can really useBuilding immersive experiences: Usability you can really use
Building immersive experiences: Usability you can really useX.commerce
 
Design principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney HessDesign principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney Hesswww.usarte.co
 
Design Principles: The Philosophy of UX
Design Principles: The Philosophy of UXDesign Principles: The Philosophy of UX
Design Principles: The Philosophy of UXWhitney Hess
 
Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Mobile Information Architecture and Interaction Design (InfoCamp 2010)Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Mobile Information Architecture and Interaction Design (InfoCamp 2010)Nick Finck
 
Flotree pcv 2012 slideshare
Flotree pcv 2012 slideshareFlotree pcv 2012 slideshare
Flotree pcv 2012 slideshareDave Flotree
 
Speed sketching UX Cambridge 2011
Speed sketching UX Cambridge 2011Speed sketching UX Cambridge 2011
Speed sketching UX Cambridge 2011Francis Rowland
 
Introduction into User Experience
Introduction into User ExperienceIntroduction into User Experience
Introduction into User ExperienceAbdullah Al Nady
 
Effective prototyping
Effective prototypingEffective prototyping
Effective prototypingEverett McKay
 
World Usability Day Singapore 2008
World Usability Day Singapore 2008World Usability Day Singapore 2008
World Usability Day Singapore 2008Daniel Alenquer
 
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction DesignMobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction DesignNick Finck
 
Visualising the user experience
Visualising the user experience Visualising the user experience
Visualising the user experience Darren Menachemson
 
E design hci team intro
E design hci team introE design hci team intro
E design hci team introCapital One
 
Effective prototyping (for Vermont Code Camp)
Effective prototyping (for Vermont Code Camp)Effective prototyping (for Vermont Code Camp)
Effective prototyping (for Vermont Code Camp)Everett McKay
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem Jenica Welch
 
The Lost Art of the Critique
The Lost Art of the CritiqueThe Lost Art of the Critique
The Lost Art of the CritiqueDavid du Plessis
 
Enlighten - Bookfinding in Libraries Made Easy
Enlighten - Bookfinding in Libraries Made EasyEnlighten - Bookfinding in Libraries Made Easy
Enlighten - Bookfinding in Libraries Made EasyMark Choi
 
Enlighten: Library Bookfinding Presentation
Enlighten: Library Bookfinding PresentationEnlighten: Library Bookfinding Presentation
Enlighten: Library Bookfinding Presentationmarkschoi
 

Similar to Scenarios For Design: Interaction10 Workshop by Elizabeth Bacon (20)

Multi-dimensional: Building 21st Century Experiences for Financial Outcomes
Multi-dimensional:  Building 21st Century Experiences for Financial Outcomes Multi-dimensional:  Building 21st Century Experiences for Financial Outcomes
Multi-dimensional: Building 21st Century Experiences for Financial Outcomes
 
Building immersive experiences: Usability you can really use
Building immersive experiences: Usability you can really useBuilding immersive experiences: Usability you can really use
Building immersive experiences: Usability you can really use
 
Flotree pcs 2011
Flotree pcs 2011Flotree pcs 2011
Flotree pcs 2011
 
Design principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney HessDesign principles philopsohy of ux -Whitney Hess
Design principles philopsohy of ux -Whitney Hess
 
Design Principles: The Philosophy of UX
Design Principles: The Philosophy of UXDesign Principles: The Philosophy of UX
Design Principles: The Philosophy of UX
 
Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Mobile Information Architecture and Interaction Design (InfoCamp 2010)Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Mobile Information Architecture and Interaction Design (InfoCamp 2010)
 
Flotree pcv 2012 slideshare
Flotree pcv 2012 slideshareFlotree pcv 2012 slideshare
Flotree pcv 2012 slideshare
 
Speed sketching UX Cambridge 2011
Speed sketching UX Cambridge 2011Speed sketching UX Cambridge 2011
Speed sketching UX Cambridge 2011
 
Introduction into User Experience
Introduction into User ExperienceIntroduction into User Experience
Introduction into User Experience
 
Effective prototyping
Effective prototypingEffective prototyping
Effective prototyping
 
World Usability Day Singapore 2008
World Usability Day Singapore 2008World Usability Day Singapore 2008
World Usability Day Singapore 2008
 
Finding the Center
Finding the CenterFinding the Center
Finding the Center
 
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction DesignMobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
 
Visualising the user experience
Visualising the user experience Visualising the user experience
Visualising the user experience
 
E design hci team intro
E design hci team introE design hci team intro
E design hci team intro
 
Effective prototyping (for Vermont Code Camp)
Effective prototyping (for Vermont Code Camp)Effective prototyping (for Vermont Code Camp)
Effective prototyping (for Vermont Code Camp)
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem
 
The Lost Art of the Critique
The Lost Art of the CritiqueThe Lost Art of the Critique
The Lost Art of the Critique
 
Enlighten - Bookfinding in Libraries Made Easy
Enlighten - Bookfinding in Libraries Made EasyEnlighten - Bookfinding in Libraries Made Easy
Enlighten - Bookfinding in Libraries Made Easy
 
Enlighten: Library Bookfinding Presentation
Enlighten: Library Bookfinding PresentationEnlighten: Library Bookfinding Presentation
Enlighten: Library Bookfinding Presentation
 

More from Elizabeth Bacon

Healthy Design for People
Healthy Design for PeopleHealthy Design for People
Healthy Design for PeopleElizabeth Bacon
 
Understanding Patient Engagement
Understanding Patient EngagementUnderstanding Patient Engagement
Understanding Patient EngagementElizabeth Bacon
 
New Ideas on the Future of Healthcare at WebVisions PDX
New Ideas on the Future of Healthcare at WebVisions PDXNew Ideas on the Future of Healthcare at WebVisions PDX
New Ideas on the Future of Healthcare at WebVisions PDXElizabeth Bacon
 
Extraordinary design considerations e bacon 2011 08-05
Extraordinary design considerations e bacon 2011 08-05Extraordinary design considerations e bacon 2011 08-05
Extraordinary design considerations e bacon 2011 08-05Elizabeth Bacon
 
Interaction Design for Medical Systems (Whitepaper)
Interaction Design for Medical Systems (Whitepaper)Interaction Design for Medical Systems (Whitepaper)
Interaction Design for Medical Systems (Whitepaper)Elizabeth Bacon
 
Death To Personas! Long Live Personas!
Death To Personas! Long Live Personas!Death To Personas! Long Live Personas!
Death To Personas! Long Live Personas!Elizabeth Bacon
 

More from Elizabeth Bacon (6)

Healthy Design for People
Healthy Design for PeopleHealthy Design for People
Healthy Design for People
 
Understanding Patient Engagement
Understanding Patient EngagementUnderstanding Patient Engagement
Understanding Patient Engagement
 
New Ideas on the Future of Healthcare at WebVisions PDX
New Ideas on the Future of Healthcare at WebVisions PDXNew Ideas on the Future of Healthcare at WebVisions PDX
New Ideas on the Future of Healthcare at WebVisions PDX
 
Extraordinary design considerations e bacon 2011 08-05
Extraordinary design considerations e bacon 2011 08-05Extraordinary design considerations e bacon 2011 08-05
Extraordinary design considerations e bacon 2011 08-05
 
Interaction Design for Medical Systems (Whitepaper)
Interaction Design for Medical Systems (Whitepaper)Interaction Design for Medical Systems (Whitepaper)
Interaction Design for Medical Systems (Whitepaper)
 
Death To Personas! Long Live Personas!
Death To Personas! Long Live Personas!Death To Personas! Long Live Personas!
Death To Personas! Long Live Personas!
 

Recently uploaded

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 

Recently uploaded (18)

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 

Scenarios For Design: Interaction10 Workshop by Elizabeth Bacon

  • 1. Scenarios for Design Elizabeth Bacon Interaction10 Workshop February 4, 2010
  • 2. Introductions Problem identification Context scenarios Key path scenarios Validation scenarios Other uses Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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. 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. 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. 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. 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. 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. Introductions Problem identification Context scenarios Key path scenarios Validation scenarios Other uses Interaction10 Elizabeth Bacon Scenarios for Design
  • 11. Craft begins with problem identification Interaction Design is not art: embrace constraints! And embrace the process! Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. More on persona misconceptions Check out presentation available at www.devise.com/further_reading Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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. 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. Introduction Problem identification Context scenarios Key path scenarios Validation scenarios Other uses Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Field research LubeSoft Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. EXAMPLE: ChoreTracker requirements Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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. 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. Introduction Problem identification Context scenarios Break! Key path scenarios Validation scenarios Other uses Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. EXAMPLE: ChoreTracker Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. Debrief ? Share examples! Who started sketching? Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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. 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. 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. 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. EXAMPLE: Early-phase sketching Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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. 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. 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. EXAMPLE: ChoreTracker Mid-phase interaction framework Interaction10 Elizabeth Bacon Scenarios for Design
  • 86. EXAMPLE: ChoreTracker Late-phase interaction framework Interaction10 Elizabeth Bacon Scenarios for Design
  • 87. EXAMPLE: ChoreTracker Late-phase interaction framework Interaction10 Elizabeth Bacon Scenarios for Design
  • 88. Introduction Problem identification Context scenarios Key path scenarios Validation scenarios Other uses Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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. EXAMPLE: ChoreTracker Logged-in states URL management of members Enticements Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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. 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. Introduction Problem identification Context scenarios Key path scenarios Validation scenarios Other uses Interaction10 Elizabeth Bacon Scenarios for Design
  • 96. Importance of communication Narrative is extremely powerful way to describe interactive product behaviors Interaction10 Elizabeth Bacon Scenarios for Design
  • 97. Key deliverable: persuasive, explanatory material Communication Scenarios Interaction10 Elizabeth Bacon Scenarios for Design
  • 98. EXAMPLE: LubeSoft Dashboard Interaction10 Elizabeth Bacon Scenarios for Design
  • 99. Conversation ? How would communication scenarios be tailored for various audiences? Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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. Introduction Problem identification Context scenarios Key path scenarios Validation scenarios Other uses In summary Interaction10 Elizabeth Bacon Scenarios for Design
  • 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. 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