1. Prof. James A. Landay University of Washington Autumn 2006 Introduction & Course Overview CS490f

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

3. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation3 UI Hall of Fame or Hall of Shame?

4. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation4 Hall of Shame! Doesn’t help user accomplish their task –why did they come to the site? Takes too long –most visitors will leave & never return May be valid for entertainment, art, or branding sites

5. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation5 Hall of Fame or Shame? Page setup for printing in IE5

6. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation6 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

7. Prof. James A. Landay University of Washington Autumn 2006 Introduction & Course Overview CS490f

8. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation8 Outline HCI introduction Course overview & schedule Introductions

9. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation9 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

10. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation10 HCI Approach to UI Design Design Organizational & Social Issues Technology Humans Tasks

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

12. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation12 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 company who is paying you to build it HCI = design, prototyping, evaluation, & implementation of UIs

13. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation13 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

14. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation14 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

15. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation15 How to Design and Build UIs UI Development process Usability goals User-centered design Task analysis & contextual inquiry Rapid prototyping Evaluation Programming

16. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation16 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

17. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation17 Iteration Design Prototype Evaluate At every stage!

18. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation18 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.

19. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation19 Web Design Representations Site MapsStoryboards SchematicsMock-ups

20. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation20 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

21. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation21 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

22. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation22 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 –not technology-centered/feature driven

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

24. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation24 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, Flash, DENIM, etc. UI builders –Visual Studio.NET, JBuilder… Fantasy Basketball

25. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation25 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

26. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation26 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 –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

27. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation27 Course Format Interactive lectures Presentation Project & homework Readings Have fun & participate!

28. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation28 Project Examples SiteSketch –web page design –sketch-based

29. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation29 SiteSketch

30. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation30 Project Examples (cont.) Clothes Shopper –online shopping –knows your prefs & sizes

31. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation31 Clothes Shopper

32. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation32 Project Examples (cont.) Electronic book reader – take advantage of all the online texts on the net

33. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation33 Electronic Book Reader

34. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation34 Project Examples (cont.) Nutrition tracker

35. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation35 Nutrition Tracker

36. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation36 Project Examples (cont.) cUIzine –recipe tool for the home

37. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation37 cUIzine

38. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation38 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)

39. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation39 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”

40. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation40 Total Entertainment Control

41. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation41 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

42. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation42 PDA Baseball Scorekeeper

43. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation43 PalmStock

44. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation44 InkChat

45. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation45 Nutrition/Exercise Tracker

46. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation46 Trippin’

47. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation47 Traffic Monitor

48. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation48 Traffic Monitor

49. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation49 Traffic Monitor Alert icons Pan Zoom Map view presets (radio buttton metaphor) Center on driver Audible reports about alerts Volume Congestion Information (traffic light metaphor) Driver’s location

50. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation50 Otto: Location-based Photos

51. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation51 Bus Buddy

52. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation52 Bus Buddy

53. CSE490f - Autumn 2006User Interface Design, Prototyping, and Evaluation53 Ubiquitous Computing Project Themes Location-enhanced computing –phones that are aware of their location –past examples include car navigation, Trippin’, finding nearby restaurants, etc Activity-based computing –applications that use inference of human physical activity to enhance our lives –helping care for an elder –helping people stay fit exercise & nutrition Ubiquitous RFID –tags & readers