1. Understanding and conceptualizing interaction
Chapter 2
Understanding and conceptualizing interaction

2. Understanding the problem space
Understand and conceptualize
Current user experience
Current product
Ways to improve current user experience/product

3. An example
Problem: Providing drivers with better navigation and traffic information
Question: What do we need to know before designing the system?

4. An example Understand the problem space:
Find out problems with existing forms of navigating while driving
Read maps while moving the steering wheel
Look at a small navigation display when approaching a roundabout
Ensure that drivers can continue to drive safely without being distracted

5. Understanding the problem space
Framework
Are there problems with an existing product or user experience? If so, what are they?
Why do you think there are problems?
How do you think your proposed design ideas might overcome these?

6. Understanding the problem space
Framework
If you have not identified any problems and instead are designing for a new user experience, how do you think your proposed design ideas support, change, or extend current ways of doing things?

7. 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
From:

8. Conceptualizing the design space
Describe what the system is going to be to the users, through
developing a task-based conceptual model
exploring the nature of the interaction that underlies user activities
using different theories, models, and frameworks

9. Conceptual model
A conceptual model is “a high-level description of how a system is organized and operates.” – Johnson and Henderson
It is based on the task domain the system is supposed to support

10. Conceptual model A conceptual model outlines
What people can do with a product
What concepts are needed to understand how to interact with it

11. Conceptual model
A conceptual model is not a description of the user interface
But
it is a structure outlining the concepts and relationships between concepts that will form the basis of the product or system

12. Conceptual model 4 components – Johnson and Henderson
Metaphors and analogies
Concepts: task-domain objects, objects’ attributes, operations performed on objects
Relationships between concepts
Mappings between concepts and task-domain the system is designed to support

13. Example Designing an online library catalog:
Metaphors and analogies: the information is organized as in a physical card-catalogue

14. Example Concepts: item
with attributes: title, ISBN, status;
with actions: check-out, check-in, reserve
subtypes of item, e.g., book, periodical issue, video
periodical volume
user account
with attributes: name, items checked out
librarian

15. Example
Relationships: a book is one type of item, periodical volumes contain issues
Mappings: each item in the system corresponds to a physical item in the library

16. Examples
VisiCalc -> MS Excel
Looked like a ledger sheet

17. A classic conceptual model: the spreadsheet
Analogous to ledger sheet
Interactive and computational
Easy to understand
Greatly extending what accountants and others could do
From:

18. Examples Desktop interface
Included a familiar knowledge of an office: papers, folders, filing cabinets, and mailboxes
Drag and drop action similar to, e.g., moving a file and placing it in a folder

19. The Star interface
From:

20. Benefits of the conceptual model
The conceptual model helps the design team
To ask specific questions about how the conceptual model will be understood by the targeted users
Not to become narrowly focused early on
To establish a set of common terms

21. Interface metaphors A central component of a conceptual model
Provide a structure similar to familiar entities but also have its own behaviors and properties
E.g. search engine
The similarities implied are at a general level

22. Benefits of a metaphor Help map familiar to unfamiliar knowledge
Enable users to learn about the new domain
Make learning new systems easier

23. Problems with interface metaphors (Nelson, 1990)
Violate the cultural and logical rules
e.g. a recycle bin placed on desktop
Constrain designers in the way they conceptualize the problem space
e.g. accessing a hierarchy of files
Conflict with design principles
e.g. an inconsistency use of a trash can on Mac

24. Problems with interface metaphors (Nelson, 1990)
Constrain users’ understanding of the system in terms of the metaphor
Emulate existing bad designs of physical objects
Limit designers’ imagination in designing new paradigms and models

25. Conceptualizing the design space
Describe what the system is going to be to the users, through
developing a task-based conceptual model
exploring the nature of the interaction that underlies user activities
using different theories, models, and frameworks

26. Interaction Types Users’ interactions with a system or product
1) Instructing – users issue instructions to a system
2) Conversing – users have a dialog with a system

27. Interaction Types
3) Manipulating – users interact with objects in a virtual or physical space by manipulating them, e.g. opening, holding, closing, placing.
4) Exploring – users move through a virtual environment or a physical space

28. Instructing Varied ways of issuing instructions Benefits:
e.g. pressing buttons, typing in strings of characters
Unix & Linux OS: command-based systems
Windows & GUI-based systems: control keys or the selection of menu options via a mouse
Benefits:
Quick and efficient

29. Conversing User having a conversation with a system
Two-way communication process
The system acting like a partner rather than a machine that obeys orders

30. Conversing
Used for applications where users need to find out specific information or discuss issues
Examples: advisory systems, help facilities, search engines
Varied kinds: voice recognition, menu-driven systems, natural language-based systems

31. Benefits of conversing
Allows people, esp. novice, to interact with a system in a way that is familiar to them
makes them feel comfortable, at ease and less scared

32. Disadvantages of conversing
Potential misunderstandings between the system and users
i.e. systems can’t provide answers in a way that users expected
Make a task cumbersome and one-sided interactions
e.g. automated phone-based systems

33. Manipulating
Manipulate objects by using users’ knowledge of how to manipulate objects in the physical world
e.g. moving, selecting, opening, and closing

34. Direct Manipulation - Shneiderman (1983)
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

35. Core principles of DM
Continuous representation of objects and actions of interest
Rapid reversible actions with immediate feedback on object of interest
Physical actions and button pressing instead of issuing commands with complex syntax

36. Benefits of DM Beginners can quickly learn basic functions
Experienced users can rapidly carry out different kinds of tasks
Infrequent users can remember how to perform functions over time

37. Benefits of DM Error messages are rarely needed
Users can see immediate feedback of their actions
Users feel less anxious
Help users gain confidence and mastery and feel in control

38. Disadvantage of DM
For some kinds of tasks, it is less efficient to use DM to accomplish the task
e.g. spell checking

39. Exploring Moving through virtual 3D environment
Moving through physical environment embedded with sensing technologies and location-detection technologies
Exploit users’ existing knowledge of how they move and navigate through spaces

40. Examples
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
From:

41. A virtual world
From:

42. Theories, Models, Frameworks
A theory is a well-substantiated explanations of some aspect of a phenomenon
Help identify factors (such as cognitive, social, and affective) relevant to the design and evaluation of interactive products

43. Models
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
Derived based on a theory
Characterize aspects of human-computer interaction

44. Frameworks
A framework is a set of interrelated concepts and/or a set of specific questions that is intended to inform a particular domain area
Offers advice to designers as to what to design or look for
Many forms: steps, questions, concepts, challenges, principles, dimensions

45. Frameworks Derived from Theories of human behavior
Experiences of actual design practice
Findings arising from user studies

46. Highly influential HCI framework
Norman (1988)
Explains relationship between the design of a conceptual model and a user’s understanding of it
Depicts 3 interacting components:
Designer
User
System

47. Designer’s model – the model
the designer has of how the system
should work
Design
Model
Users
Model
User’s model –
how the user
understands how
the system works
Designer
User
System
System
Image
System image – how the system
actually works is portrayed to the
user through the interface, manuals
help facilities, etc.

48. Main differences
Theories tend to be comprehensive, explaining human–computer interactions
Models tend to simplify some aspect of human–computer interaction
Frameworks tend to be prescriptive, providing designers with concepts, questions, and principles to consider

49. 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

50. Key points 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

51. Key points
Decisions about conceptual design should be made before commencing any physical design
Interface metaphors are commonly used as part of a conceptual model

52. Key points
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