2005.02.22 SLIDE 1IS146 – SPRING 2005

Designing New Media

Prof. Marc Davis, Prof. Peter Lyman, and danah boyd

UC Berkeley SIMS

Tuesday and Thursday 2:00 pm – 3:30 pm

Spring 2005http://www.sims.berkeley.edu/academics/courses/is146/s05/

IS146:

Foundations of New Media

2005.02.22 SLIDE 2IS146 – SPRING 2005

Lecture Overview

• Assignment Check In– Assignment 3: Documenting Artifact Usage

• Review of Last Time– New Media On The Go and In The Home

• Today– Designing New Media

• Preview of Next Time– Speech and Audio as Media

2005.02.22 SLIDE 3IS146 – SPRING 2005

Lecture Overview

• Assignment Check In– Assignment 3: Documenting Artifact Usage

• Review of Last Time– New Media On The Go and In The Home

• Today– Designing New Media

• Preview of Next Time– Speech and Audio as Media

2005.02.22 SLIDE 4IS146 – SPRING 2005

Lecture Overview

• Assignment Check In– Assignment 3: Documenting Artifact Usage

• Review of Last Time– New Media On The Go and In The Home

• Today– Designing New Media

• Preview of Next Time– Speech and Audio as Media

2005.02.22 SLIDE 5IS146 – SPRING 2005

Questions for Today

• How do theories of culture help us do ethnography?

• How does ethnography help us do design?

2005.02.22 SLIDE 6IS146 – SPRING 2005

Review of Culture

• “Culture is a description of a particular way of life which expresses certain meanings and values not only in art and learning but also in institutions and ordinary behavior”

• Meanings and practices

• Encoding and decoding, interpretation

2005.02.22 SLIDE 7IS146 – SPRING 2005

Goal of Ethnography

• Ethnographers seek to understand culture, identity, and social practices– Similar to advertisers?

• Why do people do what they do, think how they think and how does this connect to culture?– Theory helps us ground observations

2005.02.22 SLIDE 8IS146 – SPRING 2005

Challenges for Ethnographers

• Access– Ability to ‘see’ and gain trust

• Interpretation– Bias and reflexivity

• Moral imperative – Ethnographers care about the people they

study

• Inexactitude of method• Thick description

– They aren’t just stories

2005.02.22 SLIDE 9IS146 – SPRING 2005

Ethnography for Design

• Understand people, culture, practices, technology and the interconnections– Think from the subjects’ perspective

• Challenge technological determinism– Show that technology is not on a path towards

progress, but culturally situated – Situate design in users’ worldview, not

designers

2005.02.22 SLIDE 10IS146 – SPRING 2005

Design for People

• Who are you designing for?– Why does that population matter?– What is the culture of that population?– How will the design affect that culture?

• How are these people (un)like you? – How are their needs different?

2005.02.22 SLIDE 11IS146 – SPRING 2005

Design for Flexibility

• Create flexible cultural artifacts– Allow different interpretations for different

people in different situations

• Expect the unexpected

• Iterative ethnography

2005.02.22 SLIDE 12IS146 – SPRING 2005

Lecture Overview

• Assignment Check In– Assignment 3: Documenting Artifact Usage

• Review of Last Time– New Media On The Go and In The Home

• Today– Designing New Media

• Preview of Next Time– Speech and Audio as Media

2005.02.22 SLIDE 13IS146 – SPRING 2005

Why Design Matters

• Shapes the artifacts that people use

• Builds your skills for– Creativity– Problem solving– Teamwork– Analysis– Communication

• Enables you to be part of shaping the material culture you live in

2005.02.22 SLIDE 14

Human-Computer Interaction (HCI)

• Human– The end-users of a program– The others in the organization– The designers of the program

• Computer– The machines the programs run on

• Interaction– The users tell the computers what they want– The computers communicate results– The computer may also tell users what the computer

wants them to do

2005.02.22 SLIDE 15

Who Builds UIs?

• A team of specialists (ideally)– Graphic designers– Interaction / interface designers– Technical writers– Marketers– Test engineers– Software engineers– Enthnographers– Cognitive psychologists

2005.02.22 SLIDE 16IS146 – SPRING 2005

User Differences

• Abilities, preferences, predilections– Spatial ability– Memory– Reasoning abilities– Verbal aptitudes– Personality differences– Age, gender, ethnicity, class, sexuality,

culture, education– Modalilty preferences/restrictions

• Vision, audition, speech, gesture, haptics, locomotion

2005.02.22 SLIDE 17IS146 – SPRING 2005

Interfaces For Expert And Novice Users

• Simplicity vs. power tradeoffs

• “Scaffolded” user interface

• How much information to show the user?– Number and complexity of user operations– Variants of operations– Inner workings of system itself– System history

• Example:– Television remote control

2005.02.22 SLIDE 18

How to Design and Build UIs

Design

Prototype

Evaluate

Iterate at every stage!

2005.02.22 SLIDE 19IS146 – SPRING 2005

Design Process

• Design– Observe people’s practice– Brainstorm and develop personas, artifact concepts,

and scenarios– Communicate designs (usually visually)

• Prototype– Build working examples of the artifact concepts in

varying levels of implementation (from low-fi to hi-fi)

• Evaluate– Observe, test, and analyze people using prototypes

2005.02.22 SLIDE 20IS146 – SPRING 2005

Mountford on Interface Design

• Borrow insights and methods from prior design disciplines– Film– Animation– Theater– Architecture– Industrial Design– Information Display

2005.02.22 SLIDE 21IS146 – SPRING 2005

Vertelney on Design Process

• User Interface + Industrial Design = Whole-Product User Interface

• Whole-Product User Interface design process– Product definition– Research– Brainstorm– Generate design solutions– Analyze– Repeat

2005.02.22 SLIDE 22IS146 – SPRING 2005

Design Techniques

• Observe users’ practice

• Brainstorm and develop personas

• Brainstorm artifact concepts

• Brainstorm and develop scenarios of personas using artifact

• Brainstorm and develop storyboards for scenarios

2005.02.22 SLIDE 23IS146 – SPRING 2005

Personas, Scenarios, Storyboards

• Persona– Description of a person intended to represent

the prototypical demographics and psychographics (values, goals, and intentions) of a particular population

• Scenario– Description of a situation (where, when, and

how) the personas use the artifact

• Storyboard– A graphical and textual depiction of the

scenario

2005.02.22 SLIDE 24IS146 – SPRING 2005

Brainstorming

• IDEO Rules of Brainstorming– Defer Judgment– Encourage Wild Ideas– Build on the Ideas of Others– Stay Focused on Topic– One Conversation at a Time– Be Visual– Go for Quantity

– (IDEO is a famous design firm with several offices in the Bay Area and worldwide: http://www.ideo.com)

2005.02.22 SLIDE 25IS146 – SPRING 2005

Brainstorming

• Joy Mountford’s Techniques for Generating New Ideas– New Uses for the Object– Adapt the Object to be like Something Else– Modify the Object for a New Purpose– Magnify—Add to the Object– Minimize—Subtract from the Object– Substitute Something Similar– Rearrange the Data– Reverse of Transpose the Information– Combine the Data into an Ensemble

2005.02.22 SLIDE 26IS146 – SPRING 2005

Developing Personas

• Be specific

• Represent user population

• Demographics

• Psychographics

• Memorable

2005.02.22 SLIDE 27IS146 – SPRING 2005

Developing Scenarios

• Tell the story of the interaction among your personas and artifact

• Act them out

2005.02.22 SLIDE 28IS146 – SPRING 2005

Storyboarding

• A storyboard provides you with a pictorial “script” of important events– It sketches a scenario of a possible interaction

between your persona and your (redesigned) artifact– It leaves out the details and concentrates on the

important interaction and events

• A technique called performance-based design might be really helpful in creating your storyboards– Literally take on one of your personas and act out

what might happen if this user interacts with your re-designed artifact

2005.02.22 SLIDE 29IS146 – SPRING 2005

Storyboarding

• Suggested media for creating your storyboard– Paper and pencil are the easiest tools to sketch your

storyboard—simply scan your results– Use a whiteboard and take a digital picture of the

outcome– You can use applications like PowerPoint, Adobe

Illustrator, Visio, or any other graphical program to draw your scenario

– Take photographs in which you act out the use scenario to create the images in your storyboard

2005.02.22 SLIDE 30

Rapid Prototyping

• Build a mock-up of design

• Low fidelity techniques– Paper sketches– Cut, copy, paste– Video segments

• Interactive prototyping tools– Visual Basic, HyperCard, Director, etc.

• UI builders– NeXT, etc.

2005.02.22 SLIDE 31IS146 – SPRING 2005

Prototyping Techniques

• Low-fi prototyping tools– Paper and pens– Drawing programs (e.g., PhotoShop)– Video

• Interactive prototyping tools– Director– Flash– PowerPoint– Visual Basic– HyperCard

2005.02.22 SLIDE 32IS146 – SPRING 2005

Evaluation Techniques

• Qualitative vs. quantitative methods– Qualitative (non-numeric, discursive, ethnographic)

• Focus groups• Interviews• Surveys• User observation• Participatory design sessions

– Quantitative (numeric, statistical, empirical)• User testing• System testing• Surveys• Usage logs

2005.02.22 SLIDE 33IS146 – SPRING 2005

Assignment 4: Logo in LOGO

• As a group make a working logo-drawing program

• Structure your program into multiple sub-routines, with at least 1 sub-routine per group member

• Follow good coding practice by using parameters or control flow to avoid redundant code– Reuse a single procedure to draw shapes of various

sizes– Use a loop rather than simply repeat code

2005.02.22 SLIDE 34IS146 – SPRING 2005

Assignment 4: Process

• Use your interviews and experience to define your target audience

• Develop 1-2 personas that you want to focus on • Brainstorm artifact redesign ideas for those

personas• Evaluate your ideas and agree on one to pursue • Come up with a scenario for your redesign • Draw a storyboard with explanatory text • Document the results of your brainstorming

2005.02.22 SLIDE 35IS146 – SPRING 2005

Assignment 4: Deliverables

• Persona description (1-2 pages)

• List all brainstorming ideas and reasons for selecting or rejecting each

• Brief description of the redesign idea you selected (1-3 paragraphs)

• Scenario description (1 page max)

• Annotated storyboard

• A write-up (2-4 pages)

2005.02.22 SLIDE 36IS146 – SPRING 2005

Assignment 4: Write-Up Questions

• What does “more programmable” mean to your artifact?

• How does your redesign make your artifact more programmable?

• Describe your intended population, including their social practices, culture, and demographics as relevant to the redesign.

• How do you anticipate your redesign will affect that population?

• What biases do you have in choosing this redesign and population?

• What limitations does your redesign have?

2005.02.22 SLIDE 37IS146 – SPRING 2005

Norman on Why Interfaces Don’t Work

• Because…– We still think of using the interface– We still talk of designing the interface– We still talk of improving the interface

• “We need to aid the task, not the interface to the task.”

• “The computer of the future should be invisible.”

2005.02.22 SLIDE 38IS146 – SPRING 2005

Norman on Design Process

• The user – What does that person really need to have

accomplished?

• The task – Analyze the task– How best can the job be done? taking into account

the whole setting in which it is embedded, including the other tasks to be accomplished, the social setting, the people, and the organization?

• As much as possible, make the task dominate and make the tools invisible

• Then, get the interaction right...

2005.02.22 SLIDE 39IS146 – SPRING 2005

Stacy Anker on Norman

• Norman states that “by specializing, [a computer] can do its intended job better and more efficiently than can more powerful, general-purpose machines, at least from the viewpoint of the user.”  However, different users will inevitably have different viewpoints.  What are some of the arguments that people might make in favor of “generality and power” over “specialization and ease of use”?

2005.02.22 SLIDE 40IS146 – SPRING 2005

Stacy Anker on Norman

• I am not a very computer literate person, so upon first reading this article I didn’t actually know what an interface was.  But then I came across Norman’s definition that an interface is “an obstacle [that] stands between a person and the system being used.”  However, the less biased dictionary defines it as, “the ‘connection’ between the display-keyboard combination and the user.”  Is an “obstacle” or a “connection” more of an appropriate interface definition?

2005.02.22 SLIDE 41IS146 – SPRING 2005

Stacy Anker on Norman

• Donald A. Norman shows two comparisons, one between playing a game on Nintendo and playing the same game on the Apple IIGS Computer and the other between organizing activities with the Day-Timer Pocket Organizer or with Focal Point on the Macintosh.  Norman seems to come to the conclusion that both Nintendo and the Day-Timer Pocket Organizer (a.k.a. the two products that are non computer related) are more user-friendly.  However, Norman then goes on to say, with regards to the computer-based products, that he likes “the fact that [he] can type legibly rather than scrawl illegibly…[he] likes the fact [he] can search for things…” Why does it seem that Norman can’t fully commit to either one side or the other (i.e., what are some of the similarities and differences between these products)? Does Norman seem to believe that the pros of computer-based products outweigh the cons? Do you, yourself, believe the pros make up for the cons?

2005.02.22 SLIDE 42IS146 – SPRING 2005

David Hsiao on Mountford

• In Mountford's "Tools and Techniques for Creative Design" he stated "Some people believe that new ideas are almost always the result of collisions—juxtaposition or recombination of ideas." Is this true? And Where does "good ideas" come from? and what makes them "good.“

2005.02.22 SLIDE 43IS146 – SPRING 2005

David Hsiao on Mountford

• Thinking from a computer user's perspective, what is the most important/critical part of interface design? What makes an interface "good?"

2005.02.22 SLIDE 44IS146 – SPRING 2005

Nicole Schwartz on Vertelney

2005.02.22 SLIDE 45IS146 – SPRING 2005

Lecture Overview

• Assignment Check In– Assignment 3: Documenting Artifact Usage

• Review of Last Time– New Media On The Go and In The Home

• Today– Designing New Media

• Preview of Next Time– Speech and Audio as Media

2005.02.22 SLIDE 46IS146 – SPRING 2005

Readings for Next Time

• Walter J. Ong. Orality and Literacy: The Technologizing of the Word, London: Methuen, 1982, p. 31-77. – Discussion Questions

• Nate Bennett• Amanda Hsueh