Design process representing
1 / 51

Design Process--Representing - PowerPoint PPT Presentation

  • Updated On :

NEEDS. DESIGN. EVALUATE. IMPLEMENT. Design Process--Representing. September 11, 2007 Turn in your Conceptual Map assignment. Idea Commercials. Materials for projection by midnight tonight! Email to [cs160] in Subject line Presented in discussion section tomorrow

Related searches for Design Process--Representing

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Design Process--Representing' - KeelyKia

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Design process representing l.jpg





Design Process--Representing

September 11, 2007

Turn in your Conceptual Map assignment

Idea commercials l.jpg
Idea Commercials

  • Materials for projection by midnight tonight!

    • Email to

    • [cs160] in Subject line

  • Presented in discussion section tomorrow

    • I’m planning to attend

Facebook application review l.jpg
facebook application review

  • Resources for finding interesting applications




Today l.jpg

  • Social software / facebook followup

  • Understanding users, a few more techniques

    • Diary study

    • Experience Sampling Method

    • Personas

  • Design, representing ideas

    • Scenarios

    • Storyboard

    • Role-playing

Social software followup l.jpg
Social software followup

  • Wikipedia

    • How many people use Wikipedia?

    • How many people have contributed to Wikipedia?

  • Demonstration of “social leveraging”

  • Why does Wikipedia work?

Virtual economy l.jpg
Virtual economy

  • Point system, currency

    • Rewards for valued activities

    • Amount of “interaction time”

  • Transform points  social status

    • Visible markers

    • Acknowledge leaders

    • Exploit scarcity

  • Finding right balance of money supply

Social networking l.jpg
Social networking

  • MySpace

    • 200M users

    • Focuses on music interests

  • facebook

    • 39M users

    • Photo sharing

  • LinkedIn

    • 14M users

    • Oriented toward professional networking, hiring

  • Viral invitations, interoperability

About the facebook platform l.jpg
About the facebook platform

  • After 3 months

    • 3,261 applications vetted by facebook

    • 46 applications attracted > 1M installs

  • Platform is still evolving

    • We may experience change along the way

  • Server support

Facebook project ideas l.jpg
facebook project ideas

  • Photos

  • Games

  • Shared Interests

  • Productivity

  • Location sharing

  • Finding employment / grad school

  • Mashups

Meta comment l.jpg

  • Mostly describing a variety of tools

    • Exercised a few in assignments

    • Will need to pick appropriate ones to apply in group project

  • Grasp of tools tested in midterm

  • Group project pulls threads of class together

Additional observation tools l.jpg
Additional observation tools

  • Diary study

  • Experience Sampling Method

  • Personas

Diary study l.jpg
Diary study

  • Asking people to keep a diary of their interactions with a computer system, any significant events or problems during their use of a system, or other aspects of their working life

    • Record the date and time of an event

    • Where they are

    • Information about the event of significance

    • Ratings about how they feel, etc.

Diary study variations l.jpg
Diary study variations

  • Vocally recording diary entries

    • Give them recording device (iPod + mic)

    • Attach list of questions to device

  • Use cell phone to call recording service to capture entries

Why use a diary study l.jpg
Why use a diary study?

  • For situations that don’t afford direct observation

    • Occur infrequently

    • In dispersed settings

    • Additional observers awkward

  • Collects data from actual experience

  • Collecting data over longer time span

  • Example: When do you think of communicating with your family?

Diary study constraints l.jpg
Diary study constraints

  • Requires high incentives for participants

    • Reminder prompts

    • Reward per entry

  • Self-reporting mechanism

  • Access to recording instrument

  • Palen & Salzman, “Voice-mail diary studies for naturalistic data capture under mobile conditions”

Experience sampling method esm l.jpg
Experience Sampling Method (ESM)

  • Getting user reactions in the moment

  • Also known as Ecological Momentary Assessment (EMA)

  • From psychology

Slide17 l.jpg

  • Participant asked to carry “beeper”

  • When beeper activates

    • Fill out short survey (using device)

      • User’s context

      • Reaction to stimulus

  • Programmed alerts at “random” times

    • Several times / day over a week

    • Scope time intervals appropriately (i.e., awake hours)

  • Large enough users, samples  model

Esm resources l.jpg
ESM resources

  • Open source tool for ESM



  • Kellogg et al., “I’d be overwhelmed, but it’s just one more thing to do”


Why use esm l.jpg
Why use ESM?

  • “Ecological validity” of data

    • Better than retrospective self-report

  • Deals with mobile activities (ubicomp)

  • Captures reactions in context

    • Spatial

    • Situational

    • Temporal

  • Collecting data over longer time span (beyond a single session or observation)

  • Example: When do you answer cell phone?

Esm constraints l.jpg
ESM constraints

  • It is interruptive

    • Strategy for handling “non-response”

  • Survey must be extremely quick to fill out

    • Less than 1 minute

Personas l.jpg

Archetypal users that represent the needs of larger groups of users, in terms of their goals and personal characteristics

  • Representing user research

  • Guide vision and design

  • Popularized by Alan Cooper

    • The Inmates are Running the Asylum


Creating personas l.jpg
Creating personas

  • Name

  • Demographic info

  • Picture

  • Paragraph descriptions

    • User motivations

    • Goals

    • Expectations

    • Personality

  • Imaginary but precise, specific but stereotyped

Course scheduler example persona24 l.jpg
Course Scheduler example persona

Thanks to Prof. Marti Hearst

Remember jim l.jpg
Remember Jim?

  • What were his good attributes?

    • Great looks

    • Witty stories

    • Good listening skills

Personas anecdotes l.jpg
Personas anecdotes

  • Sun Microsystems life-size cutouts of real customers

    • Sun’s customers otherwise “remote”

    • Get to know the customer

  • “Customer” cutouts became jokes

  • One customer actually visited in person!

The transformation of kimberly washington l.jpg
The Transformation of Kimberly Washington

  • A persona for the development team

  • Kimberly began her persona life…

    • Late 30s, master’s degree in technical discipline

    • Plump, African American

    • Engineers were not interested

  • Kimberly’s persona was transformed…

    • Early 20s, Bachelor's degree in humanities

    • Slender, white, blonde

  • Designing for yourself  designing for your fantasy

Thanks to Michael Muller, IBM Research

Design representing ideas l.jpg
Design, Representing Ideas

  • Scenarios

  • Storyboards

  • Role-playing

Scenarios l.jpg

  • Providing context for use (narrative)

    • Sometime referred to as “use cases”

  • Narrative description of:

    • User(s)

    • Resources (tools, information, people)

    • Goal

    • Circumstances

    • Time interval

Gas pumping scenario l.jpg
Gas-pumping scenario

  • User(s)

    • Driver, passenger

  • Resources (tools, information, people)

    • Car, pump, currency, gas station attendant

  • Goal

    • Fill up car with appropriate gas

  • Circumstances

    • Day / night, sunny / rainy, leisurely / hurried

  • Time interval

    • As quickly as possible

Storyboarding l.jpg

  • Series of frames depicting key steps in reaching a goal

    • Mechanically, can use pin board for easy rearrangement / editing

  • Describe the interaction in context

    • Show user in at least 1st frame (establishing shot)

    • User and the environment

    • User and the system

That sounds like comics l.jpg
That sounds like comics

OK/Cancel February 3, 2006,

The value of comics l.jpg
The value of comics

  • Juxtaposed pictorial images in a deliberate sequence; “sequential art”

    • Abstraction allows personal projection into the scene

    • Our sense of closure fills in the missing details

Testing storyboards with users l.jpg
Testing storyboards with users

  • Using storyboards to get input from users, other stakeholders

  • Check understanding of process that users go through

    • Observe user reaction

    • Debrief users

  • Good reference point for design process

Storyboarding hints l.jpg
Storyboarding hints

  • Keep it quick

  • Cleverly re-use cards and copying

    • Draw large window

    • Draw components on cards

    • Rearrange cards, copy

  • Allows trying out ideas without writing any code

Storyboarding exercise l.jpg
Storyboarding exercise

  • Storyboard the process of adding a cameraphone picture to facebook photos

    • Last time focused on drawing

    • This time, focused on designing and expressing ideas

    • What are the steps? Features?

    • 15 minutes

Reflecting on storyboarding l.jpg
Reflecting on storyboarding

  • Features?

    • Email, text, designated email

  • Steps?

Role playing l.jpg

  • Enacting scenarios, storyboards

  • Recording on video

    • Presentations

    • Publicity

  • Video records (showing up on YouTube)

    • Microsoft Surfaces (2007)


    • Apple Knowledge Navigator (1987)


Bodystorming l.jpg

  • Transformation of abstract ideas and concepts into physical experiences

  • Imagining the product already exists

    • Act as if it exists

    • In the context of how you would use it

    • Involving entire body in enacting usage

  • Oulasvirta et al., “Understanding contexts by being there: Case studies in bodystorming”


Assignment due sept 13 l.jpg
Assignment (Due Sept. 13)

  • Forming project teams (4 people)

    • Submit list of names + email in group (1 per group)


    • Name, email, plus list of interests to help form group

      • Especially important to participate in section

  • Visually annotated idea list

Next time l.jpg
Next time

  • Readings

    • Norman, DOET, Chapter 2

    • First Principles of Interaction Design (from AskTog)