1. Introduction & Course Overview Professor James A. Landay University of Washington (Guest Lecturer: Kate Everitt) CSE 490L – Web Design, Prototyping, & Implementation Spring 2008 April 1, 2008

2. CSE 490 L - Spring 2008 Hall of Shame or Hall of Fame? http://www.balthaser.com/ 2

3. April 1, 2008CSE 490 L - Spring 2008 Hall of Shame! no CLEAR FIRST READ (I3)! links to basic areas? –doesn’t make navigation easy video doesn’t download fast http://www.balthaser.com/ 3

4. Introduction & Course Overview Professor James A. Landay University of Washington (Guest Lecturer: Kate Everitt) CSE 490L – Web Design, Prototyping, & Implementation Spring 2008 April 1, 2008

5. CSE 490 L - Spring 20085 Outline Motivation Who are we? Web Design introduction Course overview & schedule

6. April 1, 2008CSE 490 L - Spring 2008 Customer-Centered Design Matters NYTimes, Aug 30 1999, on IBM Web site –“Most popular feature was … search … people couldn't figure out how to navigate the site” –“The 2nd most popular feature was the help button, because the search technology was so ineffective.” After customer-centered redesign –use of the “help” button decreased 84% –sales increased 400 percent Good Web Site Design can Lead to Healthy Sales http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html 6

7. April 1, 2008CSE 490 L - Spring 2008 Customer-Centered Design: “build the right site & build the site right!” 7

8. April 1, 2008CSE 490 L - Spring 2008 Who Are We? James Landay –Associate Professor in Computer Science & Engineering (CSE) at the University of Washington (previously at UC Berkeley) –Ph.D. in Computer Science from Carnegie Mellon –HCI researcher w/ focus on informal input (pens & speech), Web design (tools & patterns), & Ubiquitous Computing –Founder & Chief Scientist of NetRaker, 1 st online web site evaluation firm Kate Everitt (guest lecturer today) –Senior graduate student in CSE at UW –BS from Queens University –HCI researcher w/ focus on collaborative computing, tabletop I/O Sean Liu (TA) –Graduate student in CSE at UW –BS from National Taiwan University –HCI researcher w/ focus on ubiquitous computing 8

9. April 1, 2008CSE 490 L - Spring 2008 Web Design Patterns Design patterns communicate common design problems and solutions –how to create navigation bars for finding relevant content… –how to create a shopping cart that supports check out… –how to make sites where people return & buy… DOS required text for 490L –buy it ASAP if you don’t have it –read Chapter 1 today –Amazon has a good price 9

10. April 1, 2008CSE 490 L - Spring 2008 NAVIGATION BAR (K2) Problem: Customers need a structured, organized way of finding the most important parts of your Web site 10

11. April 1, 2008CSE 490 L - Spring 2008 NAVIGATION BAR (K2) Solution –captures essence on how to solve problem First-level navigation Second-level navigation Link to home 11

12. April 1, 2008CSE 490 L - Spring 2008 Iterative design Getting it right the first time is hard Need better support for quick turns around loop Design Best Practices for Designing Interfaces PrototypeEvaluate Design Patterns 12

13. April 1, 2008CSE 490 L - Spring 2008 Customer-Centered Design Empathizing w/ customers, understanding their needs, the tools they use, & their social/organizational context What if you don’t practice CCD? –might overrun budget & management pulls plug –site may be too hard to learn/use & visitors never return 13

14. April 1, 2008CSE 490 L - Spring 2008 Myths of Customer-Centered Design Myth 1: Good Design is Just Common Sense –why are there so many bad sites? Myth 2: Only Experts Create Good Designs –experts faster, but anyone can understand & use CCD Myth 3: Interfaces can be Redesigned Before Launch –assumes site has right features & being built correctly Myth 4: Good Design Takes Too Long/Costs Too Much –CCD can reduce total development time & cost (finds problems early on) Myth 5: Good Design Is Just Cool Graphics –only one part of the larger picture of what to communicate & how Myth 6: UI Guidelines Guide you to Good Designs –only address how a site is implemented, not features, organization, or flow Myth 7: Customers Can Always Rely on Documentation & Help –help is the last resort of a frustrated customer Myth 8: Market Research Takes Care of Understanding All Customer Needs –does not help you understand behavior: what people say vs. what they do Myth 9: Quality Assurance Groups Make Sure That Web Sites Work Well –QA makes sure product meets spec., not what happens w/ real customers on real problems 14

15. April 1, 2008CSE 490 L - Spring 2008 Design = Solutions Design is about finding solutions –unfortunately, designers often reinvent hard to know how things were done before why things were done a certain way how to reuse solutions 15

16. April 1, 2008CSE 490 L - Spring 2008 Design Patterns Design patterns communicate common design problems and solutions –first used in architecture [Alexander] ex. How to create a beer hall where people socialize? 16

17. April 1, 2008CSE 490 L - Spring 2008 Design Patterns Not too general & not too specific –use a solution “a million times over, without ever doing it the same way twice” Design patterns are a shared language –a language for “building and planning towns, neighborhoods, houses, gardens, and rooms.” –ex. BEER HALL is part of a CENTER FOR PUBLIC LIFE … –ex. BEER HALL needs spaces for groups to be alone… 17

18. April 1, 2008CSE 490 L - Spring 2008 Patterns Support Creativity Patterns come from successful examples –sites that are so successful that lots of users are familiar with their paradigms (e.g., Yahoo) –interaction techniques/metaphors that work well across many sites (e.g., shopping carts) Not too general (principles) & not too specific (guidelines) –designer will specialize to their needs Patterns let designers focus on the hard, unique problems to their design situation –every real design will have many of these 18

19. April 1, 2008CSE 490 L - Spring 2008 PROCESS FUNNEL (H1) Problem: Need a way to help people complete highly specific stepwise tasks –ex. Create a new account –ex. Fill out survey forms –ex. Check out 19

20. April 1, 2008CSE 490 L - Spring 2008 PROCESS FUNNEL (H1) What’s different? –no tab rows –no impulse buys –only navigation on page takes you to next step What’s different? –no tab rows –no impulse buys –only navigation on page takes you to next step What’s the same? –logo, layout, color, fonts What’s the same? –logo, layout, color, fonts 20

21. April 1, 2008CSE 490 L - Spring 2008 PROCESS FUNNEL (H1) Problem: What if users need extra help? 21

22. April 1, 2008CSE 490 L - Spring 200822 Process Tunnel

23. April 1, 2008CSE 490 L - Spring 200823

24. April 1, 2008CSE 490 L - Spring 200824 FLOATING WINDOWS (H6)

25. April 1, 2008CSE 490 L - Spring 200825 FLOATING WINDOWS (H6)

26. April 1, 2008CSE 490 L - Spring 200826 PROCESS FUNNEL (H1) Solution Diagram

27. April 1, 2008CSE 490 L - Spring 2008 PROCESS FUNNEL (H1) Related Patterns (A10) Web Apps (K5) High-Viz Action Buttons (A1) E-Commerce(A11) Intranets (H1) Process Funnel (K12) Preventing Errors (H8) Context-Sensitive Help (I2) Above the Fold (K13) Meaningful Error Messages 27 (H6) Floating Windows

28. April 1, 2008CSE 490 L - Spring 2008 Patterns Offer the Best of Principles, Guidelines, & Templates Patterns help you get the details right, without over- constraining your solution –unlike principles, patterns not too general, so will apply to your situation –unlike guidelines, patterns discuss tradeoffs, show good examples, & tie to other patterns –unlike style guides, patterns not too specific, so can still be specialized –unlike templates, patterns illustrate flows among different pages Patterns can serve as documentation for team- oriented environments 28

29. April 1, 2008CSE 490 L - Spring 2008 Format of Web Design Patterns Pattern Name & Number Exemplar Background Problem Statement Forces Solution Summary Solution Diagram Related Patterns 29

30. April 1, 2008CSE 490 L - Spring 2008 Pattern Name and Number Exemplar Background Problem Statement Forces & Solution Forces & Solution 30

31. April 1, 2008CSE 490 L - Spring 2008 Bus Stops Solution Diagram Solution Diagram Related Patterns Related Patterns Solution Summary Solution Summary 31

32. April 1, 2008CSE 490 L - Spring 200832 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) Specification: Hi Fidelity, Refined Design - 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

33. April 1, 2008CSE 490 L - Spring 200833 Iteration Design Prototype Evaluate At every stage!

34. April 1, 2008CSE 490 L - Spring 200834 Design Design is driven by requirements –what the artifact is for –not how it is to be implemented –e.g., phone 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

35. April 1, 2008CSE 490 L - Spring 200835 Web Design Representations Site MapsStoryboards Schematics Mock-ups

36. April 1, 2008CSE 490 L - Spring 200836 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

37. April 1, 2008CSE 490 L - Spring 200837 Usability/User Experience Goals –Learnable faster the 2 nd time & so on –Memorable from session to session –Flexible multiple ways to do tasks –Efficient perform tasks quickly –Robust minimal error rates good feedback so user can recover –Discoverable learn new features over time –Pleasing high user satisfaction –Fun Set goals early & later use to measure progress Goals often have tradeoffs, so prioritize Example goals

38. April 1, 2008CSE 490 L - Spring 200838 User-centered Design “Know thy User” Cognitive abilities –perception –physical manipulation –memory Organizational / job abilities Keep users involved throughout –developers working with target customers –think of the world in users terms –not technology-centered/feature driven

39. April 1, 2008CSE 490 L - Spring 200839 Task Analysis & Contextual Inquiry Observe existing work practices –augment with self-report tools (e.g., ESM) Create examples & scenarios of actual use “Try-out”new ideas before building software ?

40. April 1, 2008CSE 490 L - Spring 200840 Rapid Prototyping Build a mock-up of design so you can test Low fidelity techniques –paper sketches –cut, copy, paste Interactive prototyping tools –HTML, DreamWeaver, Flash, DENIM, etc. Fantasy Basketball

41. April 1, 2008CSE 490 L - Spring 200841 ESP Evaluation Test with real customers (participants) –w/ interactive prototype –low-fi with paper “computer” Low-cost techniques –expert evaluation –remote, online testing

42. April 1, 2008CSE 490 L - Spring 200842 Goals of the Course 1)Learn to design, prototype, & implement web UIs –the needs & tasks of prospective customers –cognitive/perceptual constraints that affect design –technology & techniques used to prototype UIs –techniques for evaluating web sites –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 web sites of the future might be like

43. April 1, 2008CSE 490 L - Spring 200843 Course Format Interactive lectures Quarter long project & homework assignments Readings All material is/will be online –slides, exercises, supplemental readings, schedule –http://www.cs.washington.edu/cse490lhttp://www.cs.washington.edu/cse490l Have fun & participate!

44. April 1, 2008CSE 490 L - Spring 200844 Project Description Each of you will propose a web site/application 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 design/protypting/evaluation methods to a single interface

45. April 1, 2008CSE 490 L - Spring 200845 Project Process Overview Project proposal (individual) due Thursday 4/3 Choose projects you want to work on Thursday 4/10, We break you into groups Tuesday, 4/15 (show up!) Project task analysis & “sketches” –i.e., rough proposals that can & will change –based on field interviews In class presentations & critiques Low fidelity prototyping & user testing In class presentations & critiques Interactive prototype using tools & user test In class presentations & critiques Online usability test Final presentations & project fair with industry guests

46. April 1, 2008CSE 490 L - Spring 200846 Mobile Web Project Themes Mobile web computing device of future –i.e., everything like today’s Apple iPhone Location-enhanced computing –devices that are aware of their location –past examples include car navigation, car pools, finding nearby restaurants, etc Activity-based computing –applications that use inference of human physical activity to enhance our lives –helping people stay fit exercise & nutrition Domains of special interest –environment –developing world

47. April 1, 2008CSE 490 L - Spring 200847 Administrivia Registration –limited by room and project constraints to 40 –appeal email to me if not enrolled (due today at 5 PM) –tell us why you should be in the course background, interests, what you can contribute Roll today to see who is here

48. April 1, 2008CSE 490 L - Spring 200848 Administrivia (cont.) Teaching assistants –Sean Liu O.H.: TBA Discussion sections –TBD – please talk to Sean about the current times –new material will be covered in discussion  attend

49. April 1, 2008CSE 490 L - Spring 200849 Books The Design of Sites by van Duyne, Landay, & Hong –Required book. Please get it now if you haven’t We will also give you web links & refer to lecture slides Other recommended books on web page

50. April 1, 2008CSE 490 L - Spring 200850 Assignments (tentative) Individual –3 written + one talk each Group –5 written assignments 3 presentation/demos with the write-ups –all group work handed in on Web (group web site)

51. April 1, 2008CSE 490 L - Spring 200851 Grading A combination of –midterm (20%) –individual assignments (20%) –group project (55%) demos/presentation (group component) project write-ups and exercises ratings given by other team members & class –in class participation (5%) No curve

52. April 1, 2008CSE 490 L - Spring 200852 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/cse490l

53. April 1, 2008CSE 490 L - Spring 200853 Summary Project proposal due at start of lecture Thur. Next lecture on Human Abilities & Errors Read –Ch 1 of Design of Sites (now) –Ch. 2: The Human Information Processor, from The Psychology of Human-Computer Interaction By Stuart K. Card, Thomas P. Moran, & Allen Newell, 1983, pp. 23-83 (online, for Thur)