2. Today: Quick Review Understanding Interaction Understanding Users

3. What is Interaction Design? Interaction design defines the structure and behaviors of interactive products and services, as well as the user interactions with those products and services.

4. Interactive Design… Communicates interactivity and functionality to users Defines behavior that communicates responses to user interaction Reveals both simple and complex workflows Informs users about system state changes Prevents user error

5. Interaction Design is an Interdisciplinary Field

6. Process of Interaction Design Identify needs and establish requirements. Develop alternative designs that meet those requirements. Build interactive versions of the designs so that they can be communicated and assessed. Evaluate what is being built throughout the process.

7. Usability Principles (Norman, 1988) Visibility Feedback Constraints Mapping Consistency Affordance

8. Usability Principles (Nielsen, 2001) Visibility of system status Match between system and the real world User control and freedom Consistency and Standards Help users recognize, diagnose, and recover from errors Error Prevention Recognize rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help and documentation

9. 8 Golden Rules (Schneiderman) Strive for consistency –Identical Terminology (unifying metaphor) in prompts, menus, and help screens –Consistency in color, layout, capitalization, fonts Enable frequent users to use shortcuts –Abbreviations; Special keys; Hidden commands; Macro facilities Offer informative feedback Design dialogs to yield closure –Sequences of actions should be organized into groups –Beginning, middle, and an end Offer error prevention and simple error handling Permit easy reversal of actions Support internal locus of control Reduce short-term memory load

10. Interaction Design Principles Visibility –Users must feel in control, therefore users must be able to feel aware of the current state of the software (what is the current status, what are the current rights and privileges, etc.) Feedback –Users need to know that their actions have in fact been accomplished. Cf. editing a rendered a molecular structure in 3D-space.

11. Interaction Design Principles Constraints –To prevent users from making mistakes, the software needs to constrain actions. Cf. error message vs. grayed-out item. Consistency –Design interfaces should have similar operations and use similar elements to perform similar tasks. Cf. voice mail controls on a cell phone.

12. Interaction Design Principles Affordance Objects within an interface should have attributes that facilitate the user being able to perceive their purpose and functionality. Which button is clickable?! What is this dialog’s affordances? ‘Go’, ‘Log On’, ‘Site Map’, and ‘Help’ are clickable. ‘Quotes’ is not clickable. But ‘Site Map’ and ‘Help’ looks just like ‘Quotes’ 

13. Understanding Interactions Before designing a new interface, the designers must understand the nature of the work environment of the users Designers must understand the problem space. Designers conceptualize the need for the application software in question.

14. Understanding Interactions Before designing a new interface, the designers must understand the nature of the work environment of the users Designers must understand the problem space. Designers conceptualize the need for the application software in question.

15. Conceptual Model “A description of the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by users in the manner intended”

16. Conceptual Model This model represents what the user is likely to think, and how the user is likely to respond.

17. Conceptual Model “The most important thing to design is the user’s conceptual model. Everything else should be subordinated to making the model clear, obvious, and substantial. That is almost exactly the opposite of how most software is designed”

18. Conceptual Model Based on activities –Instructing –Conversing –Manipulating objects and Navigating –Exploring and Browsing Based on objects

19. Conceptual Model Shell versus desktop Word versus Latex Paper clip versus help

20. Conceptual Model Unix Shell

21. Conceptual Model Desktop

22. Conceptual Model LaTeX example % Example LaTeX document for GP111 - note % sign indicates a comment \documentstyle[11pt]{article} % Default margins are too wide all the way around. I reset them here \setlength{\topmargin}{-.5in} \setlength{\textheight}{9in} \setlength{\oddsidemargin}{.125in} \setlength{\textwidth}{6.25in} \begin{document} \title{LaTeX Typesetting By Example} \author{Phil Farrell\\ Stanford University School of Earth Sciences} \renewcommand{\today}{November 2, 1994} \maketitle This article demonstrates a basic set of LaTeX formatting commands. Compare the typeset output side-by-side with the input document.

23. Conceptual Model MS Word

24. Contextual Design A user-centered approach to designing software within the context of how the user works. 1.Talk to users and gather data 2.Interpret the data 3.Consolidate the data 4.Invent Solutions 5.Structure the system 6.Iterate with the users 7.Design for implementation Exam Alert! Know these.

25. Contextual Design Talk to users while they work –Provides reliable knowledge about what users actually do and what they care about.

26. Contextual Design Interpret the data in a cross-functional (xfunc) team –Creates a shared perspective of the data

27. Contextual Design Consolidate data across multiple users –Creates a single statement of work practice for the entire user population

28. Contextual Design Invent solutions grounded in user work practices –Provide a way to imagine and provide a better way to work

29. Contextual Design Structure the system to support the new work practices –Represents the system for planning, marketing, UI design, and specification

30. Contextual Design Iterate with users through paper mockups/prototypes –Provides early verification of design before any ideas are committed to code

31. Contextual Design Design the code structure for implementation –Defines the implementation architecture and ensures support of work structure

32. Contextual Design Components 1 - Contextual Inquiry Goal: Uncover who the customers are and how they work on a daily basis. Field Interviews - Design team members talk individually with customers in order to discover motivations and strategies. Through discussion, the interviewer and the customer develop a shared interpretation of the work. Team Interpretation Sessions - The design team meets to discuss the interviews and to gain insights relevant to their design problem. By collating their different perspectives on the customers’ needs, the team members can develop a shared view.

33. Contextual Design Components 2 - Work Modeling Goal: represent customer tasks in the form of diagrams Work be represented with more than one model! Flow: Communication and coordination issues. Sequence: Detailed steps to accomplish tasks Physical: Environment that supports the work Artifact: items used to support the work. Cultural: culture and policies

34. Contextual Design Components 2 - Work Modeling

35. Contextual Design Components 3 - Consolidation Goal: collate info from many customers and discern patterns. Derive consolidated work models. Merge the work models to reveal common strategies and individual differences. Part art, part science, but mostly common sense!

36. Affinity Diagrams are a product of consolidation. They are hierarchical diagram to reveal the scope of the problem across all customers.

37. Contextual Design Components 3 - Consolidation A ffinity diagrams are often wall-sized)

38. Contextual Design Components 3 - Consolidation Goal: collate info from many customers and discern patterns. Derive consolidated work models. Merge the work models to reveal common strategies and individual differences. An inductive process (few->large pop.) Part art, part science, but mostly common sense!

39. Example of a consolidated model

40. Contextual Design Components 4 – Work Redesign Goal: envision how customers will use the new product Don’t just automate! Look for places to improve Visioning –Brainstorming sessions –Creative process, “creative leap”

41. Contextual Design Components – Work Redesign Live Bookmarks Tabbed Browsing Smart Keywords

42. Contextual Design Components 5 – User Environment Design Goal: establish a blueprint for the UI design (structure the system) Explicit representation of system work model Blue print for the user-interface design

43. Contextual Design Components 5 – User Environment Design Goal: establish a blueprint for the UI design (structure the system) Itemize each design component, its purpose and functionality, and how it will fit into the overall navigation of the system. Explicitly state how each design component may be rolled out over a series of releases. Articulate a coherent design structure that will enable the design team to counterbalance later “incoherent” forces, like ease of implementation and delivery schedule.

44. Contextual Design Components 6 – Interface Design and Prototyping Paper Prototyping –Low-fidelity prototype –Communicate design with the user –Working dynamically with the user to determine what might and might not work, the design team can quickly eliminate most of the remaining misconceptions that the team has about the tasks that the software system will handle.

45. Contextual Design Components 6 – Interface Design and Prototyping

46. Contextual Design Components 7 – Prioritization and Design Modularize the design by breaking it into coherent delivery units, and decide which units may be implemented in parallel and which must be implemented in sequence. This is often the point at which “high fidelity” prototypes are implemented, with all major screen components and test case scenarios that demonstrate actual user interactions.