Design process representing
Download
1 / 51

Design Process--Representing - PowerPoint PPT Presentation


  • 281 Views
  • 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 [email protected] [cs160] in Subject line Presented in discussion section tomorrow

Related searches for Design Process--Representing

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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

NEEDS

DESIGN

EVALUATE

IMPLEMENT

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 [email protected]

    • [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

    • http://www.insidefacebook.com/category/applications/

    • http://www.techdigest.tv/2007/07/the_101_best_fa.html

    • http://www.bestfacebookapplications.com/


Today l.jpg
Today

  • 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
Meta-comment

  • 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” http://doi.acm.org/10.1145/587078.587092


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
ESM

  • 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

    • http://web.media.mit.edu/~intille/caes/

    • http://seattleweb.intel-research.net/projects/esm/

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

    • http://doi.acm.org/10.1145/503376.503394


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
Personas

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

    • http://www.cooper.com/insights/journal_of_design/articles/the_origin_of_personas_1.html


Creating personas l.jpg
Creating personas

  • Name

  • Demographic info

  • Picture

  • Paragraph descriptions

    • User motivations

    • Goals

    • Expectations

    • Personality

  • Imaginary but precise, specific but stereotyped

    http://www.infotoday.com/Online/jul03/head.shtml



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
Scenarios

  • 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
Storyboarding

  • 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, http://www.ok-cancel.com/comic/125.html


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
Role-playing

  • Enacting scenarios, storyboards

  • Recording on video

    • Presentations

    • Publicity

  • Video records (showing up on YouTube)

    • Microsoft Surfaces (2007)

    • http://www.youtube.com/watch?v=QigsOR9r36k

    • Apple Knowledge Navigator (1987)

    • http://youtube.com/watch?v=3WdS4TscWH8


Bodystorming l.jpg
Bodystorming

  • 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”

    • http://dx.doi.org/10.1007/s00779-003-0238-7


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)

      OR

    • 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)


ad