CS 160: Lecture 3: CS 160: Lecture 3 Professor John Canny Fall 2004


Administrivia: Administrivia Please turn in project idea in class today. Project groups will be announced to you by email by Monday when the next assignment will be handed out. Lab sessions (Mon, Tues at 4pm in 330 Soda) start next week. You should attend at least one of these as a team.


From Last time: A design success: From Last time: A design success The Xerox Star design team developed a very modern computer by following a modern design process. Their process built on earlier work on usable computing by Alan Kay and others at PARC, as well as software engineers from IBM (Gould et al.) Today we’ll cover this process in detail.


The Human-Centered Design Process: The Human-Centered Design Process Who is going to use the system? What are their characteristics, goals and desires? Choose representative tasks and analyze them Rough out a design (plagiarize as needed) Rethink the design – does it best address a need? Create a prototype Test it with users Iterate Build a production version (and ship it!) Track use Evolve the design


Human-Centered Design: Human-Centered Design Who is going to use the system? What are their characteristics, goals and desires? Choose representative tasks and analyze them Rough out a design (plagiarize as needed) Rethink the design – does it best address a need? Create a prototype Test it with users Iterate Build a production version (and ship it!) Track use Evolve the design


Norman: Human-centered design: Norman: Human-centered design People here care a lot about features People here want reliability, convenience “no fuss or bother”


Norman: User Experience is “atomic”: Norman: User Experience is “atomic” You can’t separately build the aspects of user experience (& remember Gould’s principles): i.e. Design the features of the product Bring in usability experts for usability analysis Graphic and industrial design for appearance Technical writers to explain the product Doesn’t work! Marketing and product development often separated from the design groups. - also Bad


Integrated Design of User Experience: Integrated Design of User Experience You need an interdisciplinary team. You need to involve social scientists to really explore the users’ needs. Those needs should drive the design process – technical commitments come at the end.


Egoless design: Egoless design Cooper Interaction design emphasizes “egoless design”: You design for a customer, not yourself. Although good UI designs are visually pleasing, they are not works of art. Design is about expressing the customers goals and needs, not the designer’s.


“know thy user”: “know thy user” First step in good design is to identify the user community. It seems obvious but its hard anyway. Some techniques: photographs & video in context (IDEO). Some types of picture to try for: Rituals Sacred places Relationships


Human-Centered Design: Human-Centered Design Who is going to use the system? What are their characteristics, goals, desires? Choose representative tasks and analyze them Rough out a design (plagiarize as needed) Rethink the design Create a prototype Test it with users Iterate Build a production version (and ship it!) Track use Evolve the design


Personae: Personae Personae are concrete* representations of the user group as individuals. Things to strive for in a good persona: Attributes (age, gender, occupation) Likes, dislikes Values and desires (or life’s goals) A good persona is generative (of ideas) – a good fictional character. * Concrete representation is the opposite of abstract representation – it widens the designer’s perspective while abstraction narrows it.


Personae: Personae You know it’s a good persona if the design team is passionate about what the persona would or would not like.


Social Sciences: Social Sciences Social and behavioral scientists are “domain experts” on user behavior: anthropology - ethnography Psychology, especially social psychology sociology Design should start by observing the customer


Values-based design: Values-based design Interval Research explored “values-based design”, a systematic study of customer lifestyles to discover market segments.


Values-based design: Values-based design From their analysis of many homes, they concluded that: Households are displays. Households are sanctuaries. Family life is the household priority. Women are the household communicators. Aside: Our scientific understanding of home life is woefully inadequate. It is seen as an excellent emerging market for technology, which will be deployed regardless.


Know yourself: values: Know yourself: values Q: What values drive your own interest in engineering, computer science, cog sci. or… ?


Human-Centered Design: Human-Centered Design Who is going to use the system? What are their characteristics, goals and desires? Choose representative tasks and analyze them Rough out a design (plagiarize as needed) Rethink the design Create a prototype Test it with users Iterate Build a production version (and ship it!) Track use Evolve the design


Choose representative tasks and analyze them: Choose representative tasks and analyze them Choose real tasks that users articulated during interviews. Crisp task analysis is important: hierarchical task descriptions make design easier Beware of abstraction (loss of information). Information flow from contextual inquiry to task analysis should be “Fat”: keep interview transcripts, photos, narrative descriptions


Human-Centered Design: Human-Centered Design Who is going to use the system? What are their characteristics, goals and desires? Choose representative tasks and analyze them Rough out a design (plagiarize as needed) Rethink the design Create a prototype Test it with users Iterate Build a production version (and ship it!) Track use Evolve the design


Rough out the design: Rough out the design Put things on paper to negotiate them with other designers. Focus on high-level issues (what features are needed and why). Keep the task analysis and user profiles in mind when discussing features.


Borrow from previous designs: Borrow from previous designs Good design is usually evolutionary rather than revolutionary Borrow from other designs Use design patterns if they exist Use search tools and design databases


Borrow from previous designs: Borrow from previous designs Users rely on common conventions to learn a new interface: File and edit menus Left click/right click etc. Turn a steering wheel CW steers the car to the right - best to follow this !


Human-Centered Design: Human-Centered Design Who is going to use the system? What are their characteristics, goals and desires? Choose representative tasks and analyze them Rough out a design (plagiarize as needed) Rethink the design Create a prototype Test it with users Iterate Build a production version (and ship it!) Track use Evolve the design


Think about the design: Think about the design Don’t get stuck on your original idea. Now that you have users, tasks and needs, explore some completely different solutions. Break down your assumptions: Does this have to run on a PDA? Does it really require continuous net access? Will users really adopt this product (even if you like it)? Force yourself to sketch some designs that are very different.


Think about the design: Think about the design This is the phase to do engineering analysis if appropriate. For usability, automated systems are not very powerful, and there are few (GOMS, EPIC). Heuristic evaluation is a systematic method for human evaluation of an interface. Another method is “cognitive walkthroughs” explained later in Lewis and Rieman. More elaborate techniques include: scenario development role-playing


Slide27: Break


Human-Centered Design: Human-Centered Design Who is going to use the system? What are their characteristics, goals and desires? Choose representative tasks and analyze them Rough out a design (plagiarize as needed) Rethink the design Create a prototype Test it with users Iterate Build a production version (and ship it!) Track use Evolve the design


Prototype the design: Prototype the design Prototypes let you simulate a lot of detail of an interface. Informal (paper or digital sketch) interfaces keep designs more fluid - more changes happen They allow presentations to the user The “Wizard of Oz” method has the designer simulate the behavior as well as the appearance of the system


Human-Centered Design: Human-Centered Design Who is going to use the system? What are their characteristics, goals and desires? Choose representative tasks and analyze them Rough out a design (plagiarize as needed) Rethink the design Create a prototype Test it with users Iterate Build a production version (and ship it!) Track use Evolve the design


Test the prototype: Test the prototype Test with users with similar backgrounds to your target users. Doing the design will give you a large set of expectations about what users will do with the design. Testing will reinforce or contradict your expectations. You learn from that process.


Test the prototype: Test the prototype Testing ideally involves putting real users in front of a prototype, and having them work through sample tasks. User is asked to “think aloud” while performing the task. Testers observe user and makes notes about user actions (especially any problems) and what the user says. Testers may prompt the user to explain something they said or did. Testers don’t help users to do the task. Testers don’t let users take shortcuts.


Human-Centered Design: Human-Centered Design Who is going to use the system? What are their characteristics, goals and desires? Choose representative tasks and analyze them Rough out a design (plagiarize as needed) Rethink the design Create a prototype Test it with users Iterate Build a production version (and ship it!) Track use Evolve the design


Iterate! : Iterate! Testing will expose problems with various severity You can then attack those problems in order of severity - and work on features in order of value Beware of interactions between design elements - fixing one may break another Design Prototype Evaluate


Human-Centered Design: Human-Centered Design Who is going to use the system? What are their characteristics, goals and desires? Choose representative tasks and analyze them Rough out a design (plagiarize as needed) Rethink the design Create a prototype Test it with users Iterate Build a production version (and ship it!) Track use Evolve the design


Build It! : Build It! Some prototyping tools (IDEs or UIMS) allow you to move prototype code to production code - most do not, and this method is not recommended. When you move from prototype to production code, remember that commitments you make will be hard to undo - check everything first! Remember that UI code is typically half of all code for interactive systems. Allow enough time for development.


Build and Release : Build and Release Early releases (alpha and beta) allow yet more testing. Make sure you have good mechanisms in place to get developer/early user feedback. The time from “fully-working” code to “industrial-strength” code can be 6 months or more. Program defensively, anticipate and deal with errors inside and outside your system. Test at appropriate scale Introduce stress on the system (other apps, lots of users, unusual command sequences, undos etc.). Stress on testers would be a good idea - but hard to implement!


Human-Centered Design: Human-Centered Design Who is going to use the system? What are their characteristics, goals and desires? Choose representative tasks and analyze them Rough out a design (plagiarize as needed) Rethink the design Create a prototype Test it with users Iterate Build a production version (and ship it!) Track use Evolve the design


Track Use : Track Use Remember the Zoomer! Interview real users, log their complaints and praise. Talk to maintenance and support staff. Put in logging and bug reporting software. Be very careful about privacy.


Toolbelt Design + Technology Probes : Toolbelt Design + Technology Probes There is a trend in design to build suites of inter-operable tools that the customer can adapt (something like MS office + VBasic). Toolbelt design allows user evolution of the basic features of the design. New generations of the system can move user ideas into the core system. In other words, users can become your best designers.


Human-Centered Design: Human-Centered Design Who is going to use the system? What are their characteristics, goals and desires? Choose representative tasks and analyze them Rough out a design (plagiarize as needed) Rethink the design Create a prototype Test it with users Iterate Build a production version (and ship it!) Track use Evolve the design


Evolve the Design : Evolve the Design Real user feedback should help you figure out what needs to change. Its often a challenge to accept what you find, and act on it: the company’s strategy and assumptions may have been wrong (Zoomer again). But remember that many truly innovative products were 2nd or 3rd attempts: Palm Pilot Apple Mac Windows 3.1


Evolve the Design : Evolve the Design Users as designers: e.g. email is used by people for Calendaring/ Reminders As a list of contacts As a to-do list New versions of a design can take these into account.


Summary : Summary Human-centered design starts with the user. Time spent in the early phases pays the most dividends. Groups will be emailed by Monday. Labs will start next week (Mon, Tues at 4pm in 330 Soda).