1. 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 2005 http://www.sims.berkeley.edu/academics/courses/is146/s05/ IS146: Foundations of New Media

2. 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

3. 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

4. 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

5. 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?

6. 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

7. 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

8. 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

9. 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

10. 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?

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 2005.02.22 SLIDE 18 How to Design and Build UIs Design Prototype Evaluate Iterate at every stage!

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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)

25. 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

26. 2005.02.22 SLIDE 26IS146 – SPRING 2005 Developing Personas Be specific Represent user population Demographics Psychographics Memorable

27. 2005.02.22 SLIDE 27IS146 – SPRING 2005 Developing Scenarios Tell the story of the interaction among your personas and artifact Act them out

28. 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

29. 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

30. 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.

31. 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

32. 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

33. 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

34. 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

35. 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)

36. 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?

37. 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.”

38. 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...

39. 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”?

40. 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?

41. 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?

42. 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.“

43. 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?"

44. 2005.02.22 SLIDE 44IS146 – SPRING 2005 Nicole Schwartz on Vertelney

45. 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

46. 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