Interaction Design

1. Interaction Design

2. Today’s objectives • Understanding & conceptualizing interaction • Project page • Visio – workflow

3. Understanding & conceptualizing interaction

4. Understanding & conceptualizing interaction • When creating interactive products, can be tempting to begin by designing the physical interface and what technologies and interaction styles to use (e.g. multitouch, speech, graphical user interface, gesture-based). • A problem with starting here is that usability and user experience goals can be overlooked.

5. Usability goals A problem with starting here is that usability and user experience goals can be overlooked. Effective to use Efficient to use Safe to use Have good utility Easy to learn Easy to remember how to use

6. User experience goals A problem with starting here is that usability and user experience goals can be overlooked. Desirable aspects satisfying helpful fun enjoyable motivating provocative engaging challenging surprising pleasurable enhancing sociability rewarding exciting supporting creativity emotionally fulfilling entertaining cognitively stimulating Undesirable aspects boring unpleasant frustrating patronizing making one feel guilty making one feel stupid annoying cutesy childish gimmicky

7. Understanding & conceptualizing interaction • Must articulate nature of the problem space before choosing technology or deciding how to design the physical aspects • Must understand and conceptualize current user experience/product and how it is going to be improved or changed. • Designers must think through how their ideas will support or extend the way people communicate and interact in their everyday activities.

8. Understanding problem space • Identifying usability and UX goals or ensuring they are met. • What do you want to create? • What are your assumptions? • What are your claims? • Will it achieve what you hope it will? If so, how?

9. What is an assumption? • taking something for granted when it needs further investigation • e.g. people will want to watch TV while driving 9

10. What is an assumption? What are the assumptions and claims made about 3D TV? 10

11. Assumptions: realistic or wish-list? People won’t mind wearing glasses needed to see in 3D in their living rooms – reasonable People won’t mindpaying a lot more for a new 3D-enabled TV screen - not reasonable People would really enjoy the enhanced clarity and color detail provided by 3D – reasonable People will be happy carrying around their own special glasses - reasonable only for a very select bunch of users

12. Understandingproblem space • Allowing people to explain assumptions and claims about why they think something might be a good idea enables design team to view multiple perspectives on the problem space, revealing conflicts and problems.

13. Benefits of conceptualising • Orientation • enables design team to ask specific questions about how the conceptual model will be understood • Open-minded • prevents design teams from becoming narrowly focused early on • Common ground • allows design teams to establish a set of commonly agreed terms

14. Understand problem space Core questions to help design team analyse problem space: • Are there problems with existing product or UX? • Why do you think there are problems? • How will your proposed design overcome them? • How will the proposed design extend or change current ways of doing things?

15. From Problem space Conceptualizing design space Source: www.theaterxtremeseattle.com/

16. Conceptualizing design space From problem space to design space: • A good understanding of the problemspace helps inform the design space • e.g., what kind of interface, behavior, functionality to provide

17. Conceptualizing design space • Conceptualizing the design space – describe what system is going to do for users. • Conceptualizing the design space – • outlines what people can do with product and • what concepts are needed to understand how to interact with it. • We conceptualize the design space using a conceptual model

18. Your heater? You return home to find your house very cold. You have friends coming over in 2 minute so you need to get the house warm as quickly as possible. What do you do?

19. Conceptualizing design space • A conceptual model is: “a high-level description of how a system is organized and operates.” (Johnson and Henderson, 2002, p. 26) • Organization of functionality and interaction to assist user in understanding how system works.

20. Conceptualizing design space • Designers have a model…, users develop a model and hopefully they are the same –designers’ model must be clear. • People develop knowledge about how to interact with the systems and how they systems works – this is often referred to as the user’s mental model. • Mental models are used by people to reason about a system and to try to figure out how to use it, particularly when something unexpected happens.

21. Designers have a model…, users develop a model and hopefully they are the same –designers’ model must be clear.

22. Conceptualizing design space • Designer's must specify completely and unambiguously the user’s whole experience.... • The most important thing to design properly is the user's conceptual model. Everything else should be subordinated to making that model clear, obvious, and substantial. Source: (Liddle - http://hci.stanford.edu/publications/bds/2-liddle.html

23. Conceptualizing design space Conceptual model should consist of: • Major metaphors and analogies • Concepts users are exposed (e.g., folders, URL, dragging, drop, etc.) • Relationships between the concepts (e.g., one object contains another ) • Mappings between the concepts

24. What are the: Major metaphors and analogies Concepts users are exposed Relationships between the concepts Mappings

25. Conceptualizing design space • … what concepts are needed to understand how to interact with this interface. Mappings? Insert screwdriver Turning screwdriver

26. Conceptualizing design space • … what concepts are needed to understand how to interact with this interface. Interaction Example: Multi-touch surface http://www.youtube.com/watch?v=REIH4AjQxXM

27. Conceptualizing design space • … what concepts are needed to understand how to interact with this interface.

28. Conceptualizing design space • … what concepts are needed to understand how to interact with this interface. Browsing Shopping | Shopping Cart Checkout Linking Departments Searching Scrolling Buttons URL

29. Metaphors/analogies

30. Metaphors/analogies Print calendar

31. Concepts Tabs Navigating Search Entering an appointment Creating a calendar Scroll

32. Relationships between concepts Enter a appointment = highlights in calendar By clicking a date, 24 hours will display here. Appointments here are for one day. There can be multiple appointments in one day

33. The selected date. Mappings • Enter an appointment • appointment is saved • shows in calendar • get alert on date and time. • Click next button • next calendar month appears Select a date, full day (24 hours) display here

34. Interaction Styles and Types Another way of conceptualizing the design space Interaction Example

35. Conceptualizing the design space • Another way of conceptualizing the design space is in terms of the user’s interaction with the product. • Helps form a conceptual model by determining what kinds of interaction to use and why.

36. Interaction mode • Think about how users will interact with the system/product (talk, instruct, manipulate, etc.). • Can help designers formulate a conceptual model by determining kinds of interaction to use, and why, before committing to a particular interface. In a noisy room is a talk interaction type appropriate?

37. Interaction mode Interaction type: what the user is doing when interacting with a system, e.g. instructing, talking, browsing, etc. Interaction style: kind of interface used to support the mode, e.g. speech, menu-based, gesture

38. Interaction types • Instructing • issuing commands using keyboard and function keys and selecting options via menus • Conversing • interacting with the system as if having a conversation • Manipulating • interacting with objects in a virtual or physical space by manipulating them (WIMP) • Exploring • moving through a virtual environment or a physical space

39. Instructing • Users instruct system by telling it what to do • e.g., tell the time, print a file, find a photo • Common interaction type underlying a range of devices and systems • Main benefit of instructing is to support quick and efficient interaction • good for repetitive kinds of actions performed on multiple objects

40. Instructing

41. Vending machines Which is easiest to use?

42. Conversing • Like having a conversation with another human • More like two-way communication, with the system acting like a partner rather than a machine that obeys orders • Ranges from simple voice recognition menu-driven systems to more complex ‘natural language’ dialogues • Examples include search engines, advice-giving systems and help systems (e.g., Sync) Sync example

43. Pros and cons of conversational model • Allows users, especially novices and technophobes, to interact with the system in a way that is familiar • makes them feel comfortable, at ease and less scared • Misunderstandings can arise when the system does not know how to parse what the user says

44. Manipulating • Exploit’s users’ knowledge of how they move and manipulate in the physical world • Virtual objects can be manipulated by moving, selecting, opening, and closing them

45. Direct manipulation • Shneiderman (1983) coined the term Direct Manipulation • Digital objects can be designed so they can be interacted with analogous to how physical objects are manipulated • Assumes that direct manipulation interfaces enable users to feel that they are directly controlling the digital objects • WIMP - window, icon, menu, pointing device

46. Manipulative

47. Core principles of DM • Physical actions and button pressing instead of issuing commands with complex syntax • Rapid reversible actions with immediate feedback on object of interest

48. Exploring • Involves users moving through virtual or physical environments • Examples include: • 3D desktop virtual worlds where people navigate using mouse around different parts to socialize (e.g., Second Life) • CAVEs where users navigate by moving whole body, arms, and head

49. A CAVE Cave video http://www.youtube.com/watch?v=-Sf6bJjwSCE

50. Many kinds of interaction styles available… • Command • Speech • Data-entry • Form fill-in • Query • Graphical • Web • Pen • Augmented reality • Gesture and even...