Chapter 2 Understanding and conceptualizing interaction

1. Chapter 2 Understanding and conceptualizing interaction

2. HCI has moved beyond designing interfaces for desktop machines • Concerned with extending and supporting all manner of human activities • Designing for user experiences, including: • Making work effective, efficient and safer • Improving and enhancing learning and training • Providing enjoyable and exciting entertainment • Enhancing communication and understanding • Supporting new forms of creativity and expression Recap

3. Understand what is meant by the problem space. • Understand how to conceptualize interaction. • Understand what a conceptual model is and explain the different kinds. • Understand the pros and cons of using interface metaphors as conceptual models. • Be able to debate the pros and cons of using realism versus abstraction at the interface. • Understand how to outline the relationship between conceptual design and physical design. By the end of this chapter, you will..

4. Consider this problem: Providing drivers with better navigation and traffic information ? HP’s vision of the future: CoolTown Augmented reality Understanding the Problem Space

5. Problem Space Understanding the Problem Space

6. Are there problems with an existing product or user experience? • Why do you think there are problems? • How do you think your proposed design ideas might overcome these problems? • When designing for a new user experience how will the proposed design extend or change current ways of doing things? Read Box 2.1 – Identifying the problem space in a team A framework for analysing the problem space

7. Problem Space What are the assumptions and claims made about 3D TV? • not mind wearing the glasses. • not mind paying more !! • happy carrying special glasses in living rooms !! • all images will be better when viewed in 3D. !! Understanding the Problem Space 3D TVs (were their assumptions and claims correct?) • enjoy the clarity and color

8. What do you think were the main assumptionsand claims made by developers of online photo sharing and management applications, like Flickr? A framework for analysing the problem space An Example: Flickr

9. Able to capitalize on the hugely successful phenomenon of blogging • Just as people like to blog so will they want to share with the rest of the world their photo collections and get comments back • People like to share their photos with the rest of the world • From Flickr’s website (2005): “is almost certainly the best online photo management and sharing application in the world” A framework for analysing the problem space An Example: Flickr

10. Conceptualizing the design space

11. Conceptualizing the design space Software Engineering Vs Interaction Design

12. Having a good understanding of the problem space will help in conceptualizing the design space. Given the problem space stages in the figure below and some analysis tasks, determine which task is held at each stage. Tasks: People do not mind paying more to buy a haptic TV. We want to make a new experience by adding haptic feedback to the television. Defending and filtering design ideas in order to choose the requirements that can be implemented. People will enjoy the sensation that haptic feedback will provide. Task b Task a Task d Task c

13. Having a good understanding of the problem space can help inform the design space • e.g., what kind of interface, behavior, functionality to provide • But before deciding upon these it is important to develop a conceptualmodel Develop a conceptual model From problem space to design space

14. A conceptual model is “a high-level description of how a system is organized and operates.” (Johnson and Henderson, 2002, p. 26) • Not a description of the user interface but a structure outlining the concepts and the relationships between them • Why not start with the nuts and bolts of design? • Architects and interior designers would not think about which color curtains to have before deciding where the windows will be placed in a new building • Enables “designers to straighten out their thinking before they start laying out their widgets” • Provides a working strategy and a framework of general concepts and their interrelations From problem space to design space Definitions of Conceptual Models

15. How can conceptual models help design teams? • Orientation: • Orient themselves towards asking questions about how the conceptual model will be understood by users. • Open minded: • prevents design teams from becoming narrowly focused early on. • Common Ground: • Establish a set of common terms they all understand and agree upon. • Reduce the chance of misunderstandings and confusion arising later on. http://www.its.monash.edu.au/staff/web/slideshows/usability-humanfactors From problem space to design space Goals of Conceptual Models

16. Main Components: • Major metaphors and analogies that are used to convey how to understand what a product is for and how to use it for an activity. • Concepts that users are exposed to through the product • The relationships between the concepts • e.g., one object contains another • The mappings between the concepts and the user experience the product is designed to support From problem space to design space Conceptual Models (Components)

17. What is the mapping between the concepts and the user experience the product is designed to support or invoke? From problem space to design space Conceptual Models (Components)

18. What will the users be doing when carrying out their tasks? • How will the system support these? • What kind of interface metaphor, if any, will be appropriate? • What kinds of interaction modes and styles to use? • always keep in mind when making design decisions how the user will understand the underlying conceptual model From problem space to design space First Steps in Formulating a Conceptual Model

19. Many kinds and ways of classifying them We describe them in terms of core activities and objects Also in terms of interface metaphors From problem space to design space Conceptual Models

20. A Classic Example of a conceptual model: • The Spreadsheet • Analogous to ledger sheet ( Familiarity) • Interactive and computational • Easy to understand • Greatly extending what accountants and others could do From problem space to design space Conceptual Models (Example)

21. Conceptual model Mental model

23. Example Conceptual model Mental model For example if you sit inside a car you have a mental model about how that car should work. You expect to find an ignition, which you’ll likely turn on with a key. • There’s no reason we need to turn a key to start the ignition. A designer’s conceptual model of a car could suggest that a push button ignition and joystick controls are better ways to operate the car.

24. Research has shown: • Research has shown that the changing of mental models is enhanced when concepts and new ways are presented for the user in the form of visual and verbal at once ... maybe video presentation that will be placed on page one of the main site of these solutions. • Understanding of the term " mental model " will enable you as a designer to quickly comprehend the problems of usability in your designs, When you see people make mistakes on your site , it will be mostly the reason is " that the user may form a model mentally wrong ." • It may be difficult to change the user interface , especially in Web applications that are frequently pages and details , in this case, you can begin helping users to understand the mental model , which is built upon the user interface , which was designed , but should have sufficient flexibility to also recognize that there are points and details can not be changed in the brains of the users then have to stop and make the user interface designed by descend upon the wishes of the " brains of the users " that do not align with the wishes of " brain " as a designer .

25. Designed to be similar to a physical entity but also has own properties (e.g. desktop metaphor, search engine) • Exploit user’s familiar knowledge, helping them to understand ‘the unfamiliar’ • Brings up the essence of the unfamiliar activity, enabling users to leverage of this to understand more aspects of the unfamiliar functionality • People find it easier to learn and talk about what they are doing at the computer interface in terms familiar to them Interface Metaphors

26. iPhone Case Study Interface Metaphors (Examples)

27. Ex: Elderly Mobile Interface Metaphors (Examples) It is based totally on the Mental Model of the users!

28. Problems with metaphors (Nelson, 1990) • Break conventional and cultural rules (e.g., recycle bin placed on desktop) • Can constrain designers in the way they conceptualize a problem space • Conflict with design principles • Forces users to only understand the system in terms of the metaphor • Designers can inadvertently use bad existing designs and transfer the bad parts over • Limits designers’ imagination in coming up with new conceptual models • Benefits of using a metaphor • Makes learning new systems easier • Explains an abstract concept • Helps users understand the underlying conceptual model • Can be innovative and enable the realm of computers and their applications to be made more accessible to a greater diversity of users Interface Metaphors Benefits and problems with metaphors

30. Interaction Types

31. 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 • Exploring • Moving through a virtual environment or a physical space

32. Interaction and Interfaces • Interaction type: • what the user is doing when interacting with a system, e.g. instructing, talking, browsing or other • Interface type: • the kind of interface used to support the mode, e.g. speech, command, menu-based, gesture, Data-entry, forms, web, pen

33. Interaction Types Instructing (Command-based) • Where users instruct a system by telling it what to do • e.g., tell the time, print a file, find a photo • Very common interaction type underlying a range of devices and systems • A main benefit of instructing is to support quick and efficient interaction • good for repetitive kinds of actions performed on multiple objects

34. Interaction Types Instructing (Vending machines example) How is the interaction different? Which is easier to use?

37. Vending Machines That Interact and Talk

38. Interaction Types Conversing • Like having a conversation with another human • Differs from instructing in that it 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

39. Interaction Types Conversing (Pros and Cons) • 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 • The continental airline’s Virtual agent uses natural language and responds differently to ‘plane’ and ‘flight’ http://www.continental.com/web/en-us/content/contact/default.aspx

40. Interaction Types Conversing (Pros and Cons) • Child types into a search engine, that uses natural language the question: • “How many legs does a centipede have?” and the system responds:

41. Interaction Types 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 • Tagged physical objects (e.g., bricks, blocks) that are manipulated in a physical world (e.g., placed on a surface) can result in other physical and digital events

42. Interaction Types (Manipulating) Direct Manipulation • Shneiderman (1983) coined the term Direct Manipulation • Came from his fascination with computer games at the time • Proposes that digital objects 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 • Core principles: • Continuous representation of objects and actions of interest • Physical actions and button pressing instead of issuing commands with complex syntax (ex: changing colour of an object using mouse pointer instead of typing colour values ) • Rapid reversible actions with immediate feedback on object of interest • Direct manipulation of objects in a virtual world

43. Interaction Types (Manipulating) Direct Manipulation • Why are direct manipulation interfaces enjoyable? • Novices can learn the basic functionality quickly • Experienced users can work extremely rapidly to carry out a wide range of tasks, even defining new functions • Intermittent users can retain operational concepts over time • Error messages rarely needed • Users can immediately see if their actions are furthering their goals and if not do something else • Users experience less anxiety • Users gain confidence and mastery and feel in control

44. Interaction Types (Manipulating) Direct Manipulation • What are the problems with direct manipulation interfaces? • Some people take the metaphor of direct manipulation too literally • Not all tasks can be described by objects and not all actions can be done directly • Some tasks are better achieved through delegating rather than manipulating • e.g., spell checking • Moving a mouse around the screen can be slower than pressing function keys to do same actions

45. Interaction Types 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 • physical context aware worlds, embedded with sensors, that present digital information to users at appropriate places and times (watch video by Snibbe Interactive)

46. Interaction Types (Exploring) Virtual Worlds

47. Interaction Types (Exploring) A CAVE

48. http://www.snibbeinteractive.com/ Interaction Types (Exploring) Immersive Environments

49. Direct manipulation is good for ‘doing’ types of tasks, e.g. designing, drawing, flying, driving, sizing windows • Issuing instructions is good for repetitive tasks, e.g. spell-checking, file management • Having a conversation is good for children, computer-phobic, disabled users and specialised applications (e.g. phone services) • Hybrid conceptual models are often employed, where different ways of carrying out the same actions is supported at the interface - but can take longer to learn. Which interaction type is best

50. Inspiration for a conceptual model • General approach adopted by a community for carrying out research shared assumptions, concepts, values, and practices • e.g. desktop, ubiquitous computing • It is intended to orient designers to the kinds of questions they need to ask. • Examples: • Ubiquitous computing (mother of them all) • Pervasive computing • Wearable computing • Tangible bits, augmented reality • Attentive environments • Transparent computing Paradigm