CMSC 20370/30370 Winter 2020 Inclusive Technology: Designing For Under-served and Marginalized Communities - Jan 13, 2020

CMSC 20370/30370 Winter 2020
Inclusive Technology: Designing
     For Under-served and
  Marginalized Communities
          Jan 13, 2020

Quiz Time (5-7 minutes).
Quiz on Memory Music Box.

   Principles of Good Design

Administrivia
• GP0 due on Friday
  – let us know if you have questions ASAP

Today’s Agenda
• Design
  – Ideation and Brainstorming
  – Use of Sketching
• Prototyping

USER-CENTERED DESIGN

              DESIGN/PROTOTYPE

USER NEEDS                          IMPLEMENT

               EVALUATE

USER-CENTERED DESIGN

              DESIGN/PROTOTYPE

USER NEEDS                          IMPLEMENT

               EVALUATE

USER-CENTERED DESIGN

              DESIGN/PROTOTYPE

USER NEEDS                          IMPLEMENT

               EVALUATE

Design Alternatives/Ideation
•   Need to generate lots of ideas
•   How do we come up with great ideas?
•   How do we come up with lots of ideas?
•   How do we come up with big ideas?
•   How do we refine ideas?
•   How do we organize ideas?

Case Study: Memory Music Box
• Designed to help older adults with
  loneliness and to feel more connected
• Based on focus groups, prior research, and
  interviews
• Also meetings with behavioral neurologist
  and clinic staff focused on older adults
• Developed 2 prototypes over time
• Evaluated with focus group with
  grandparents and online survey with
  grandchildren

How Not To Brainstorm
https://www.youtube.com/watch?
v=cmoWCSyujPY

Design Funnel

Design is about making choices
• Determine the methods you will use to
  investigate a problem
• Enumerating options from which you
  will choose
• Defining criteria or heuristics by which
  you will make your choices

Being Creative as a Designer
•   Collect things from existing systems
•   Collect things that annoy you
•   Collect things that seem well designed
•   Sample from things that inspire you

Existing Systems

What’s so good about this? (Why is it good?)
What is the general problem that this solves?
Where else could I use it?

Prac>ce ar>cula>ng what makes something good.   16

Things that annoy
             • Articulate and
               understand
               what makes
               something
               annoying.

             • Why are
               mistakes
               happening?

             • How can it be
               done better?

                               17

Things that seem really good
                  Can be real
                  objects too

                  What are the
                  principles that
                  drive this
                  design?

                                    18

Sample the inspiring
              How have others
              solved these
              problems?

              What is
              aesthe>cally
              pleasing to you?

                             19

Case Study: Memory Music Box
       Why is this good?

Creativity as a Designer
• Explain ideas to others

• Take an outsider’s perspective on
  something you know well
  – Helps to simplify your language/understanding

• Take an insider’s perspective you don’t
  know well
  – Helps you to identify your assumptions

                                                21

Sketch constantly
• Generate ideas constantly (keep a
  sketchbook)
• Sketch vague ideas to help think more
  clearly

                                                                                   22
      From Carloyn Snyder’s Book: Paper Prototyping (2003) Morgan Kaufmann, p350

Creativity as a Designer
• Take risks (early on, it doesn’t hurt!)
• Be like a kid, they don’t know the rules,
  so they break them all the time

                                              23

What to do with your collection
• Keep a sketchbook   • Wallpaper it

                                       24

Brainstorming
• Works best in groups

• Can be useful and fun

• Keep the results of user research handy
  during the process (e.g. scenarios, lists
  of design requirements, etc.)

                                              25

Brainstorming for Design
•   be visual
•   defer judgment
•   encourage wild ideas
•   build on others
•   go for quantity
•   one conversation at a time
•   stay focused on topic

                                 26

Common Sketching questions
•   Why do I need to sketch?
•   Do I need to be an artist to sketch?
•   How do I sketch?
•   What do I sketch?
•   Is sketching the only way to
    communicate?
    – Can also use Personas, Storyboarding, Use
      Cases

Summary #1
• Find things that x you
  – where x = { inspire, interest, annoy, amuse }

• Find things that you y
  – where y = { can improve, relate to }

• Break the rules, and think freely

                                                28

Summary #2
• The role of creativity in design
• Techniques to inspire creativity—point:
  apply these lessons as you engage with
  your project work.

                                            29

USER-CENTERED DESIGN

              DESIGN/PROTOTYPE

USER NEEDS                          IMPLEMENT

               EVALUATE

What is a prototype?
•   Paper version of system
•   Cardboard
•   Wood
•   3D printing

Why Prototype?
• Evaluation + feedback central to user centered
  design
• Stakeholders can see, hold, interact with
  prototype more easily than drawing or
  document
• Team members can communicate effectively
• Can test out ideas for yourself
• Encourages reflection – important part of
  design
• Answer questions + help designers choose
  between alternatives

What do you prototype?
•   Screen layout
•   Technical implementation
•   Work flow and task design
•   Information display
•   Form factors
•   Difficult and controversial areas
•   Memory Music Box:
•   https://youtu.be/Uf4Chus3P2I

Low fidelity prototype
• Uses medium unlike final product
  – e.g. paper, cardboard etc.
• +VE
  –   Quick and cheap to produce
  –   Evaluate multiple concepts easily
  –   Communication mechanism
  –   Proof of concept
• -VE
  – Can’t do error checking
  – Harder to move to code
  – Not as useful for usability and navigation tests

Examples

Paper prototype

hLps://www.flickr.com/photos/collylogic

Paper prototype

Index Cards

Scenario/Use Case

hLps://www.flickr.com/photos/designetrecherche/5461812874/   Storyboards

Case Study: Memory Music Box
      Scenario/Use Case

Wizard of OZ Technique

Wizard of Oz

User

       >Blurb blurb
       >Do this
       >Why?

Video Prototyping
• https://www.youtube.com/watch?
  v=djXB-i3-V6Q
• http://johnnyholland.org/2009/07/
  communicating-ux-through-video-1-
  prototyping/
• https://www.youtube.com/watch?
  v=9wQkLthhHKA

High Fidelity Prototyping
• Uses materials you expect to be in final
  product
• Looks more like final version than lo-fi
  prototype
• +VE
  –   Complete functionality
  –   Fully interactive
  –   User-driven
  –   Use for exploration and test
  –   Look and feel like final product
  –   Living spec

High Fidelity Prototyping
• -VE:
  – More expensive to develop
  – Time consuming to create
  – Inefficient for proof of concept
  – Not as good for requirements gathering
  – Users think they have final product

Examples

Horizontal vs Vertical Prototyping

• Either wide range of functions with little
  detail or
• Few functions with lots of detail
• Always a compromise
• Depends on what you need feedback on

Evolutionary vs Throwaway
            Prototypes
• Evolutionary
  – Prototype evolves into
    final product

• Throwaway
  – Stepping stones towards
    final design

Summary #3
• Prototyping helps you to move from
  design to a final product
• It can vary from lightweight to fully
  functional systems
• Evaluating prototypes helps us to
  understand how to refine our design

                                          51

Coming up next class
• RR4 and Quiz
• Finish prototyping/start on evaluation

Get in touch:
  Office hours: Fridays 2-4pm (Sign up in
  advance) or by appointment JCL 355
  Email: marshini@uchicago.edu