213: User Interface Design & Development

1. 213:User Interface Design & Development Professor: Tapan Parikh (parikh@berkeley.edu) TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu) Lecture #1 - January 22nd, 2008

2. Today’s Outline 1) What is HCI? 2) Why is HCI important? 3) Course Overview 4) Introductions 5) Administrivia

3. What is HCI?

4. Human-Computer Interaction

5. Implement Design Evaluate

6. Computer Science Design Psychology

7. Design = Art + Engineering When I first saw this site, I thought it would be best to do nothing. - S.Calatrava

8. Comp Sci = Science + Engineering In 20 or 30 years, you'll be able to hold in your hand as much computing knowledge as exists now in the whole city, or even the whole world. - Douglas Engelbart

9. Psych = Natural + Social Science For an experiment in hand movement, post doc [name removed] electrically stimulates parts of lab manager [name removed]’s brain. - Berkeleyan, Janaury 25, 2007

10. Why is HCI important?

13. Course Overview

14. Implement Design Evaluate

15. Course Outline Weeks 1-6: Design • Design process, methods, principles Weeks 7-8: Evaluation • Qualitative, quantitative methods Weeks 9-10: Implementation • Toolkits, frameworks, mobile UIs Weeks 10-14: Advanced Topics

16. Course Objectives Learn how to study user tasks in context Learn how to prototype and test solutions Learn how to evaluate usability of a system Learn how to work as a team Learn how to communicate the process and results of a design exercise

17. Individual Assignments Week 3: Observation Week 6: Paper Prototype Week 9: Heuristic Evaluation All Year: Class Participation Subject to change

18. Group Project Design, implement and evaluate a working prototype for a user need that you have identified Web-based, Mobile-based or Standalone Application 3-5 members per group

19. Group Project Schedule Week 8: Lo-Fi Prototype Week 9: Project Proposal Week 12: Project Checkpoint Week 15: Final Presentation Week 15: Final Report Subject to change

20. Managed Groups strong leader individual accountability organizational purpose individual work products efficient meetings measures performance by influence on others delegates work Kinds of Groups Teams • shared leadership • individual & mutual accountability • specific team purpose • collective work products • open-ended meetings • measures performance from work products • do real work together Adapted from James Landay, Marti Hearst

21. Benefits of a Team Approach UI design requires many different skills • Design • Management • Programming • Observation • Writing • Speaking You must work together with others who have complementary abilities

22. Introductions

23. Who Am I? Born and raised in New York My work interests include HCI, design methodologies, and information systems supporting sustainable rural development I am excited to work with you and to see all the great projects you will do!

24. Administrivia

25. Administrivia Class meets T,Th 330-5 PM in South Hall 205 Class website: http://courses.ischool.berkeley.edu/i213/s08/ Professor Parikh’s office hours are Thursdays from 1-3pm in South Hall 303B TA Eun Ky Choe’s office hours are by appointment

26. Mailing List To sign up for the i213@ischool.berkeley.edu mailing list, send an email to majordomo@ischool.berkeley.edu with: subscribe i213 in the body of the message. You will receive a confirmation message to which you must reply to complete the subscription process. If you have any difficulty signing up for the list, send email to help@ischool.berkeley.edu to request assistance.

27. Course Wiki Linked from the course home page We will use it for collaboration between students, project groups and the teaching team You can use the Wiki to post content that would be relevant for the entire class *** Please use the course mailing list and Wiki ***

28. Readings Readings are due before class Will be posted to the course web page (at least one week in advance) Also taken from the following books (available at the bookstore): • The Design of Everyday Things, by Donald Norman • Usability Engineering, by Jakob Nielsen • GUI Bloopers 2.0: Common User Interface Design Don'ts and Dos, by Jeff Johnson (optional)

29. Grading Class Participation: 20% Individual Assignments: 35% User Observation: 10% Paper Prototype: 10% Lo-Fi Prototype: 10% Heuristic Evaluation: 5% Group Project: 45% Proposal: 10% Final Presentation: 20% Final Report: 15% Subject to change

30. Show & Tell

31. Show & Tell Nothing motivates design better then real artifacts Whenever we have time, we will use the last thirty minutes to discuss an application, device, interface, widget, trend or another topic related to HCI This week I will supply the topic, but in the future I expect students to come prepared with their own ideas - this is part of class participation! THURSDAY - Examples of GOOD or BAD interfaces

32. For Next Time Read Donald Norman, Design of Everyday Things, Chapters 1-2 Bring examples of really good or bad UIs (in the future email me before class if there is something specific you would like to share that day) Start thinking about interesting user tasks and applications you might want to study Sign up for the Mailing List