1 / 53

Introduction & Course Overview

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. Hall of Shame or Hall of Fame?. http://www.balthaser.com/. Hall of Shame!.

taline
Download Presentation

Introduction & Course Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. Hall of Shame or Hall of Fame? • http://www.balthaser.com/ CSE 490 L - Spring 2008

  3. 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/ CSE 490 L - Spring 2008

  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. Outline • Motivation • Who are we? • Web Design introduction • Course overview & schedule CSE 490 L - Spring 2008

  6. 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 CSE 490 L - Spring 2008

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

  8. 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, 1st 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 CSE 490 L - Spring 2008

  9. 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 CSE 490 L - Spring 2008

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

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

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

  13. 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 CSE 490 L - Spring 2008

  14. 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 CSE 490 L - Spring 2008

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

  16. 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? CSE 490 L - Spring 2008

  17. 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… CSE 490 L - Spring 2008

  18. 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 CSE 490 L - Spring 2008

  19. 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 CSE 490 L - Spring 2008

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

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

  22. Process Tunnel CSE 490 L - Spring 2008

  23. CSE 490 L - Spring 2008

  24. FLOATING WINDOWS (H6) CSE 490 L - Spring 2008

  25. FLOATING WINDOWS (H6) CSE 490 L - Spring 2008

  26. PROCESS FUNNEL (H1)Solution Diagram CSE 490 L - Spring 2008

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

  28. 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 CSE 490 L - Spring 2008

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

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

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

  32. User Interface Development Process Customers, Products, Business, Marketing Customers, Products, Business, Marketing Customers, Products, Business, Marketing Design Discovery Design Exploration Evaluate Execute Customers: - Roles (Who) - Tasks (What) - Context (Stories) Marketing: - Business Priorities - Messages Technology: - Products - Architecture Design: - Leading/competing technologies Work together to realize the design in detail. Evaluate with Customers Storyboard Review & Iterate based on slide by Sara Redpath, IBM & Thyra Trauch, Tivoli 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 Proposal: Demos/ Lo Fi Prototypes (How) CSE 490 L - Spring 2008

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

  34. 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 showingtask structure • executable prototypes • representations simplify CSE 490 L - Spring 2008

  35. Web Design Representations Site Maps Storyboards Mock-ups Schematics CSE 490 L - Spring 2008

  36. 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 CSE 490 L - Spring 2008

  37. Learnable faster the 2nd 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 Usability/User Experience Goals • Set goals early & later use to measure progress • Goals often have tradeoffs, so prioritize • Example goals CSE 490 L - Spring 2008

  38. 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 CSE 490 L - Spring 2008

  39. ? 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 CSE 490 L - Spring 2008

  40. Fantasy Basketball 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. CSE 490 L - Spring 2008

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

  42. Goals of the Course • Learn to design, prototype, & implementweb 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 • Understand where technology is going & what web sites of the future might be like CSE 490 L - Spring 2008

  43. 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/cse490l • Have fun & participate! CSE 490 L - Spring 2008

  44. 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 CSE 490 L - Spring 2008

  45. 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 CSE 490 L - Spring 2008

  46. 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 CSE 490 L - Spring 2008

  47. 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 CSE 490 L - Spring 2008

  48. 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 CSE 490 L - Spring 2008

  49. 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 CSE 490 L - Spring 2008

  50. 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) CSE 490 L - Spring 2008

More Related