1. Prof. James A. Landay University of Washington Autumn 2004 Introduction & Course Overview CS490jl September 30, 2004

2. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation2 UI Hall of Fame or Hall of Shame?

3. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation3 Hall of Shame! Does not help the user accomplish their task –why did they come to the site? Takes too long –most visitors will just leave & never come back May be valid for entertainment, art, or branding sites

4. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation4 Hall of Fame or Shame? Page setup for printing in IE5

5. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation5 Hall of Shame! Page setup for printing in IE5 Problems –codes for header & footer information requires recall! want recognition no equivalent GUI –help is the way to find out, but not obvious

6. Prof. James A. Landay University of Washington Autumn 2004 Introduction & Course Overview CS490jl September 30, 2004

7. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation7 Outline Who are we? HCI introduction Course overview & schedule Introductions

8. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation8 Who are we? James Landay –Associate Professor in Computer Science at the University of Washington (formerly professor in EECS at UC Berkeley) –Ph.D. in CS from Carnegie Mellon ‘96 –HCI w/ focus on informal input (pens, speech, etc.), Web design (tools, patterns, etc.), & Ubiquitous Computing –founded NetRaker, leader in Web experience management Now subsidiary of KeyNote Systems –Co-authored The Design of Sites with D. van Duyne & J. Hong –Director of Intel Research Seattle (ubicomp lab) Kate Everitt –Ph.D. student in CSE –BSc in Computing & Info Science from Queen’s University –MS in CS from UC Berkeley –HCI w/ focus on computer support cooperative work

9. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation9 Who are we? Richard Davis –Ph.D. student in CS at UC Berkeley –BS & MS in EECS from MIT –lots of industry experience (Virtual Ink, Boris F/X, Mathworks, Intel) –HCI w/ focus on pen-based user interfaces (animation)

10. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation10 Computer –the machine the program runs on –often split between clients & servers Human-Computer Interaction (HCI) Human –the end-user of a program –the others in the organization Interaction –the user tells the computer what they want –the computer communicates results

11. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation11 HCI Approach to UI Design Design Organizational & Social Issues Technology Humans Tasks

12. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation12 Factors Influence Each Other Design Organizational & Social Issues Technology Humans Tasks “People change their knowledge as they perform, i.e., they learn”

13. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation13 User Interfaces (UIs) Part of application that allows people –to interact with computer –to carry out their task User vs. Customer vs. Client –user is a term only used by 2 industries -> bad! –customer –person who will use the product you build –client – the person/company who is paying you to build it HCI = design, prototyping, evaluation, & implementation of UIs

14. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation14 Why is HCI Important? Major part of work for “real” programs –approximately 50% Bad user interfaces cost –money 5%  satisfaction -> up to 85%  profits finding problems early makes them easier to fix –reputation of organization (e.g., brand loyalty) –lives (Therac-25) User interfaces hard to get right –people are unpredictable –intuition of designers often wrong

15. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation15 Who Builds UIs? A team of specialists (ideally) –graphic designers –interaction / interface designers –information architects –technical writers –marketers –test engineers –usability engineers –software engineers –users

16. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation16 How to Design and Build UIs UI Development process Usability goals User-centered design Task analysis & contextual inquiry Rapid prototyping Evaluation Programming

17. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation17 User Interface Development Process Design Exploration EvaluateExecute Proposal: Demos/ Lo Fi Prototypes (How) Work together to realize the design in detail. Evaluate with Customers Design Discovery Customers, Products, Business, Marketing Customers, Products, Business, Marketing Customers, Products, Business, Marketing Design Definition: - Design Problem Statement - Targeted User Roles (Who) - Targeted User Tasks (What) - Design Direction Statements Specification: Hi Fidelity, Refined Design - Based on customer feedback - Foundation in product reality - Refined Design description Storyboard Customers: - Roles (Who) - Tasks (What) - Context (Stories) Marketing: - Business Priorities - Messages Technology: - Products - Architecture Design: - Leading/competing technologies Review & Iterate based on slide by Sara Redpath, IBM & Thyra Trauch, Tivoli

18. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation18 Iteration Design Prototype Evaluate At every stage!

19. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation19 Design Design is driven by requirements –what the artifact is for –not how it is to be implemented –e.g., PDA not as important as “mobile” app. A design represents the artifact –for UIs these representations include (?) screen sketches or storyboards flow diagrams/outline showing task structure executable prototypes –representations simplify Write essay start word processor write outline fill out outline Start word processor find word processor icon double click on icon Write outline write down high-level ideas.

20. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation20 Web Design Representations Site MapsStoryboards SchematicsMock-ups

21. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation21 Usability According to the ISO: The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments This does not mean you have to create a “dry” design or something that is only good for novices – it all depends on your goals

22. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation22 Usability Goals –Learnable faster the 2 nd time & so on –Memorable from session to session –Flexible multiple ways to accomplish tasks –Efficient perform tasks quickly –Robust minimal error rates good feedback so user can recover –Pleasing high user satisfaction –Fun Set goals early & later use to measure progress Goals often have tradeoffs, so prioritize Example goals

23. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation23 User-centered Design “Know thy User” Cognitive abilities –perception –physical manipulation –memory Organizational / job abilities Keep users involved throughout –developers working with target users –think of the world in users terms –understanding work process –not technology-centered/feature driven

24. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation24 Task Analysis & Contextual Inquiry Observe existing work practices Create examples and scenarios of actual use “Try-out”new ideas before building software ?

25. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation25 Rapid Prototyping Build a mock-up of design so you can test Low fidelity techniques –paper sketches –cut, copy, paste Interactive prototyping tools –HTML, Visual Basic, HyperCard, Director, Flash, DENIM, etc. UI builders –Visual Studio.NET, JBuilder… Fantasy Basketball

26. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation26 ESP Evaluation Test with real users (participants) –w/ interactive prototype –low-fi with paper “computer” Build models –GOMS Low-cost techniques –expert evaluation –walkthroughs –online testing

27. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation27 Programming Toolkits UI Builders Event models Input / Output models etc.

28. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation28 Goals of the Course 1)Learn to design, prototype, & evaluate UIs –the needs & tasks of prospective users –cognitive/perceptual constraints that affect design –technology & techniques used to prototype UIs –techniques for evaluating a user interface design –importance of iterative design for usability –technology used to prototype & implement UI code –how to work together on a team project –communicate your results to a group key to your future success 2)Understand where technology is going & what UIs of the future might be like

29. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation29 Course Format Interactive lectures Semester long project & homeworks Readings All material is online –slides, exercises, readings, schedule –http://www.cs.washington.edu/cs490jlhttp://www.cs.washington.edu/cs490jl Have fun & participate!

30. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation30 How CSE490jl Fits into CS Curriculum Most courses for learning technology –compilers, operating systems, databases, etc. CSE490jl concerned w/design & evaluation –assume you can program/learn new languages –technology as a tool to evaluate via prototyping –skills will become very important upon graduation complex systems, large teams don’t look for large immediate impact in other CS courses

31. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation31 Project Description Each of you will propose an interface idea –fixing something you don’t like or a new idea Groups –4 students to a group –work with students w/ different skills/interests –groups meet with teaching staff every 2 weeks Cumulative –apply several HCI methods to a single interface

32. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation32 Project Process Overview Project proposal (individual) due Tuesday Break-up into groups next Thursday Project task analysis & “sketches” –i.e., rough proposals that can & will change Low fidelity prototyping & testing Build 1 st interactive prototype In class presentations & critiques Heuristic evaluations (individual)

33. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation33 Project Process Overview (cont.) Heuristic evaluation summary Build 2 nd interactive prototype In lab demo & critiques Customer testing of 2 nd prototype In class presentation & critiques Not enough time for 3 rd prototype

34. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation34 Project Examples Research notebook –threads of ideas –multiple views –secure time stamps

35. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation35 Research Notebook

36. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation36 Project Examples (cont.) SiteSketch –web page design –sketch-based

37. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation37 SiteSketch

38. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation38 Project Examples (cont.) CD Jukebox

39. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation39 CD JukeBox

40. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation40 Project Examples (cont.) Clothes Shopper –online shopping –knows your prefs & sizes

41. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation41 Clothes Shopper

42. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation42 Project Examples (cont.) Electronic book reader – take advantage of all the online texts on the net

43. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation43 Electronic Book Reader

44. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation44 Project Examples (cont.) Nutrition tracker

45. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation45 Nutrition Tracker

46. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation46 Project Examples (cont.) cUIzine –recipe tool for the home

47. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation47 cUIzine

48. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation48 Project Examples (cont.) Tech support help desk – avoid using the phone for getting help

49. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation49 Project Examples (cont.) Apartment finder – kinda obvious!!! :)

50. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation50 Apartment Finder

51. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation51 Project Examples (cont.) Read WWW over phone –find structure in pages & build voice menus –navigation problem –cache common paths & reorder? PDA brainstorming tool –small portable computers in a group meeting (say Palm Pilots)

52. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation52 PDA Brainstorming

53. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation53 Project Examples (cont.) Runner’s training log –input daily workouts –reports –reminders PDA for shopping –scan in UPC & tells you whether a good price Home entertainment control -“no more remotes”

54. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation54 Total Entertainment Control

55. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation55 Project Examples (cont.) PDA Baseball score keeper –have stats of the players on your PDA –keep track of what happens during the game –upload stats after the game

56. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation56 PDA Baseball Scorekeeper

57. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation57 PalmStock

58. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation58 InkChat

59. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation59 Josh Back- end Ed Brian Cliff Rendezvous

60. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation60 Nutrition/Exercise Tracker

61. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation61 Trippin’

62. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation62 Ubiquitous Computing Project Themes Location-enhanced computing –Devices that are aware of their location –Examples include car navigation, Trippin’, finding nearby restaurants, etc Digital home –focus on how to simplify people’s personal lives rather than adding technology to get new features –helping care for an elder –helping people stay fit (exercise & nutrition)

63. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation63 Administrivia Registration –limited by room and project constraints to 32 –fill-out appeal form if not enrolled (due today at 5 PM) –tell us why you should be in the course background, interests, what you can contribute –will post list of admits on course web page by Friday at 5 PM Roll James’ office hours –Tue. 2:30-3:30 PM (642 Allen Center) –Wed. 9-10 AM online (send Kate your Yahoo id) –email landay@cs for appointments at other times

64. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation64 Administrivia (cont.) Teaching assistants –Katherine Everitt last name at cs.washington.edu O.H.: TBA in 409 Allen Center –Richard Davis rcdavis at cs.washington.edu O.H.: TBA in 606 Allen Center Discussion sections –TBD - please fill out course survey linked off course web page today to help determine this & other things –new material will be covered in discussion -> attend

65. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation65 Books The Design of Sites by van Duyne, Landay, & Hong –order from Amazon.com –much of the first 4 chapters of book & appendices based on this course We will also hand out papers, give you web links, & refer to lecture slides Two recommended textbooks –Human-Computer Interaction by Alan Dix, et. al., 3 rd edition, 2003 –Developing User Interfaces by Dan Olsen, 1998 –order from Amazon.com (link off class web page) Other recommended books on web page

66. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation66 Assignments (tentative) Individual –4 written + one talk each Group –6 written assignments 3 presentation/demos with the write-ups –all group work handed in on Web (group web site)

67. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation67 Grading A combination of –midterm (15%) –final (20%) –individual assignments (20%) –group project (40%) demos/presentation (group component) project write-ups and exercises ratings given by other team members & class –in class participation (5%) No curve

68. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation68 Tidbits Late Policy –no lates on group assignments –individual assignments lose one letter grade/day Cheating policy –will get you an F in the course –more than once can get you dismissed More information (syllabus/schedule/slides) –http://www.cs.washington.edu/cs490jl

69. CSE490jl - Autumn 2004User Interface Design, Prototyping, and Evaluation69 Summary Check web site for admit list by Friday at 5 PM Do on-line survey by Friday Project proposal due at start of lecture on Tuesday Next lecture on design discovery –Read Tools For Thought Ch 11 (Engelbart Demo)Tools For Thought Ch 11 (Engelbart Demo) –Chapter 3 of The Design of Sites