1. Chapter 2 Understanding and conceptualizing interaction

2. Recap 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

3. By the end of this chapter, you will..
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.

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

5. Understanding the Problem Space
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?
Problem Space

6. A framework for analysing the problem space
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

7. 3D TVs (were their assumptions and claims correct?)
Understanding the Problem Space
3D TVs (were their assumptions and claims correct?)
What are the assumptions and claims made about 3D TV?
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?
Problem Space
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. !!
enjoy the clarity and color

8. An Example: Flickr A framework for analysing the problem space
What do you think were the main assumptions and claims made by developers of online photo sharing and management applications, like Flickr?
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. An Example: Flickr A framework for analysing the problem space
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
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?
From Flickr’s website (2005): “is almost certainly the best online photo management and sharing application in the world”

10. Conceptualizing the design space
Problem Space
Design Space

11. Software Engineering Vs Interaction Design
Conceptualizing the design space
Software Engineering Vs Interaction Design
Software Engineering
Think about functionalities
Model the application with an UML-like representation
Not a description of the source code but of the architecture and functionalities of the system
Enables developers to structure their thinking before they start coding
Develop and debug
Interaction Design
Define the Problem Space
Develop the conceptual model
Not a description of the user interface but a structure outlining the concepts and the relationships between them
Enables designers to straighten out their thinking before they start laying out their widgets
Define UI and evaluate with real users

12. What do you want to create?
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.
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?
Task b
Task a
Task d
Task c

13. Develop a conceptual model
From problem space to design space
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 conceptual model
Develop a conceptual model
Problem Space
Design Space

14. Definitions of Conceptual Models
From problem space to design space
Definitions of Conceptual Models
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

15. Goals of Conceptual Models
From problem space to design space
Goals of Conceptual Models
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.

16. Conceptual Models (Components)
From problem space to design space
Conceptual Models (Components)
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

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

18. First Steps in Formulating a Conceptual Model
From problem space to design space
First Steps in Formulating a Conceptual Model
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

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

20. Conceptual Models (Example)
From problem space to design space
Conceptual Models (Example)
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

21. Conceptual model
Mental
model

23. Example Conceptual model Mental model
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.
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.

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. Interface Metaphors
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

26. Interface Metaphors (Examples)
iPhone Case Study

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

28. Benefits and problems with metaphors
Interface Metaphors
Benefits and problems with metaphors
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
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

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. Instructing (Command-based)
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. Instructing (Vending machines example)
Interaction Types
Instructing (Vending machines example)
How is the interaction different?
Which is easier to use?

37. Vending Machines That Interact and Talk

38. Conversing Interaction Types
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. Conversing (Pros and Cons)
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’

40. Conversing (Pros and Cons)
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. Manipulating Interaction Types
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. Direct Manipulation Interaction Types (Manipulating)
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. Direct Manipulation Interaction Types (Manipulating)
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. Direct Manipulation Interaction Types (Manipulating)
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. Exploring Interaction Types
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. Immersive Environments
Interaction Types (Exploring)
Immersive Environments

49. Which interaction type is best
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.

50. Paradigm 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

51. Theories, models and frameworks
Are used to inform and inspire design
A theory is a well-substantiated explanation of some aspect of a phenomenon.
Example: Activity Theory see Bonnie Nardi’s HCI work on activity theory
To help identify factors relevant to design.
A model is a simplification of some aspect of human–computer interaction intended to make it easier for designers to predict and evaluate alternative designs.
Based on a theory coming from other discipline.
A framework is a set of interrelated concepts and/or a set of specific questions.
Provide advice on how to design e.g. steps, questions, concepts, challenges, principles, tactics and dimensions

52. Main Differences Theories Models Frameworks
Theories tend to be comprehensive, explaining human–computer interactions
Helps in identify factors. E.g. cognitive, social, and affective.
Models
Models tend to simplify some aspect of human–computer interaction
Frameworks
Frameworks tend to be prescriptive, providing designers with (advice )concepts, questions, and principles to consider

53. Key Points
Need to have a good understanding of the problem space: specifying what it is you are doing, why, and how it will support users in the way intended
A conceptual model is a high-level description of a product: what users can do with it and the concepts they need to understand how to interact with it
Decisions about conceptual design should be made before commencing any physical design
Interface metaphors are commonly used as part of a conceptual model
Interaction types (e.g., conversing, instructing) provide a way of thinking about how best to support the activities users will be doing when using a product or service
Theories, models, and frameworks provide another way of framing and informing design and research