1. Interaction design basics
Lecture 6
Interaction design basics

2. Objectives Differentiating designs (good and bad)
Understanding and Conceptualizing interaction
Interaction types/styles
Interaction Design principles 2

3. Good and poor design
A central concern of interaction design is to develop interactive products that are usable. (easy to learn, effective to use, and provide an enjoyable user experience.)
To begin with, study available systems ……………some are good ……..some are bad.

4. Good and bad design Peanut shaped to fit in hand
Logical layout and color-coded, distinctive buttons
Easy to locate buttons

5. What is interaction design?
Having the users in mind focus is on providing them with an enjoyable experience
Use familiar physical objects that show the need at a glance, in terms of the behavior of everyday objects.
Pleasing and enjoyable to use.
Requires one-step or a few actions to perform core tasks.
Simple but elegant design.
When considering the usability of a design, therefore, it is important to take into account where it is going to be used and who is going to use it.

6. Which kind of design?
Number of other terms used emphasizing what is being designed, e.g.
user interface design, software design, user-centered design, product design, web design, experience design (UX)
Interaction design is the umbrella term covering all of these aspects
fundamental to all disciplines, fields, and approaches concerned with researching and designing computer-based systems for people 6 6

7. What is interaction design?
Designing interactive products to support the way people communicate and interact in their everyday and working lives
Sharp, Rogers and Preece (2011)
The design of spaces for human communication and interaction
Winograd (1997) 7 7

8. Goals of interaction design
Develop usable products
Usability means easy to learn, effective to use and provide an enjoyable experience
Involve users in the design process
1.Usability goals
2. user experience goals 8 8

9. Understanding the problem space
What to design
What do you want to create?
Whom are you creating it for?
What are your assumptions?
Will it achieve what you hope it will?
Need to take into account:
Who the users are
What activities are being carried out
Where the interaction is taking place
Need to optimize the interactions users have with a product
So that they match the users’ activities and needs 9 9

10. What to design Understand your materials
understand computers
limitations, capacities, tools, platforms
understand people
psychological, social aspects
human error
and their interaction …

11. Understanding users’ needs
who are they?
probably not like you!
talk to them
watch them
use your imagination
Example: Think of a product, think of a user………..
Need to take into account what people are good and bad at
Consider what might help people in the way they currently do things
Think through what might provide quality user experiences
Listen to what people want and get them involved
Use tried and tested user-centered methods

12. Understanding the problem at hand:
Activity
How does making a call differ when using a:
Cell phone
Public phone box?
Consider the kinds of user, type of activity and context of use 12 12

13. Understanding users’ needs
Cognitive aspects, Social Interaction; Emotional Interaction
Man is a social being
Need to take into account cognitive processes involved and cognitive limitations of users
What makes us happy, sad, annoyed, anxious, frustrated, motivated, delirious and so on
translating this into different aspects of the user experience

14. From PS 2 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
A conceptual model is:
“a high-level description of how a system is organized and operates” (Johnson and Henderson, 2002, p 26)
Enables
“designers to straighten out their thinking before they start laying out their widgets” (p 28)
There is also an assumption that all images will be better when viewed in 3D. But whilst it may be a joy to see your team score a goal, will it by the same token, be more painful to watch the opponents score? And what about those who like to catch up on the news whilst eating breakfast and reading on their laptop? Will it be unpleasant having to constantly switch between the real world, a 2D display and a 3D TV? Or will it become second nature? 14 14

15. Components of a conceptual model
Metaphors and analogies
understand what a product is for and how to use it for an activity
Concepts that people are exposed to through the product
task–domain objects, their attributes, and operations (e.g. saving, revisiting, organizing)
Relationship and mappings between these concepts
We describe concepts in terms of core activities and objects
NB: always keep in mind when making design decisions how the user will understand the underlying conceptual model (user perception) 15

16. Interface metaphors
why metaphors
Makes learning new systems easier
Helps users understand the underlying conceptual model
Can be very innovative and enable the realm of computers and their applications to be made more accessible to a greater diversity of users
Conjures up the essence of the unfamiliar activity, enabling users to leverage of this to understand more aspects of the unfamiliar functionality
Interface designed to be similar to a physical entity but also has own properties
e.g. desktop metaphor, web portals
Can be based on activity, object or a combination of both
Exploit user’s familiar knowledge, helping them to understand ‘the unfamiliar’
The best conceptual models are those that appear obvious; the operations they support being intuitive to use. However, sometimes applications can end up being based on overly complex conceptual models, especially if they are the result of a series of upgrades, where more and more functions and ways of doing something are added to the original conceptual model. Most interface applications are actually based on well-established conceptual models. For example, a conceptual model based on the core aspects of the customer experience when at a shopping mall underlies most online shopping websites.
Interface metaphors are intended to provide familiar entities that enable people to readily understand the underlying conceptual model and know what to do at an interface. However, they can also contravene people’s expectations about how things should be, such as the recycle bin (trashcan) that used to sit on the desktop. Logically and culturally (i.e. in the real world) it should have been placed under the desk. But users would not have been able to see it because it would be occluded by the desktop surface. So it needed to go on the desktop. Some users find this irksome but most did not find it to be a problem. Once they understood why the bin icon was on the desktop they simply accepted it being there. 16 16

17. Interaction types Instructing Conversing Manipulating Exploring
How the user invokes actions
Instructing
issuing commands and selecting options
Conversing
interacting with a 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 17 17

18. 1. Instructing Where users instruct a system and tell it what to do
e.g. tell the time, print a file, save a file
Very common conceptual model, underlying a diversity of devices and systems
e.g. word processors, VCRs, vending machines
Main benefit is that instructing supports quick and efficient interaction
good for repetitive kinds of actions performed on multiple objects 18

19. 2. Conversing
Would you talk with Anna?
Underlying model of having a conversation with another human
Range from simple voice recognition menu-driven systems to more complex ‘natural language’ dialogs
Examples include timetables, search engines, advice-giving systems, help systems
Also virtual agents, toys and pet robots designed to converse with you
Pros and cons of conversational model
Allows users, (novices & technophobes, interact with the system in a familiar way
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 19 19

20. 3. Manipulating Direct Manipulation
Involves dragging, selecting, opening, closing and zooming actions on virtual objects
Exploit’s users’ knowledge of how they move and manipulate in the physical world
Can involve actions using physical controllers (e.g. Wii) or air gestures (e.g. Kinect) to control the movements of an on screen avatar
Tagged physical objects (e.g. balls) that are manipulated in a physical world result in physical/digital events (e.g. animation)
Shneiderman (1983) coined the term DM, came from his fascination with computer games at the time
Continuous representation of objects and actions of interest
Physical actions and button pressing instead of issuing commands with complex syntax
Rapid reversible actions with immediate feedback on object of interest
WHY DM
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
Disadvantages of DM
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
e.g. spell checking
Can become screen space ‘gobblers’
Moving a mouse around the screen can be slower than pressing function keys to do same actions 20 20

21. 4. Exploring
Involves users moving through virtual or physical environments
Physical environments with embedded sensor technologies
Context aware
Example: playing games 21

22. Which conceptual model 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 22 22

23. Conceptual models: interaction and interface
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, menu-based, gesture 23

24. Many kinds of interface types available…
Command
Speech
Data-entry
Form fill-in
Query
Graphical
Web
Pen
Augmented reality
Gesture
(for more see chapter 6)
Which interaction
type to choose?
Need to determine requirements and user needs
Take budget and other constraints into account
Also will depend on suitability of technology for activity being supported 24

25. Designing 4 Usability and user experience goals
Selecting terms to convey a person’s feelings, emotions, etc., can help designers understand the multifaceted nature of the user experience
How do usability goals differ from user experience goals? How do i design for usability and user experience goals?
Are there trade-offs between the two kinds of goals?
e.g. can a product be both fun and safe?
How easy is it to measure usability versus user experience goals? 25 25

26. Design principles
Generalizable abstractions for thinking about different aspects of design
The do’s and don’ts of interaction design
What to provide and what not to provide at the interface
Derived from a mix of theory-based knowledge, experience and common-sense
Visibility, Feedback, Constraints, Consistency, Affordances, logical design 26 26

27. Visibility How would you make this action more visible?
…you need to insert your room card in the slot by the buttons to get the elevator to work!
How would you make this action more visible?
• make the card reader more obvious
• provide an auditory message, that says what to do (which language?)
• provide a big label next to the card reader that flashes when someone enters
• make relevant parts visible
• make what has to be done obvious
Imagine: Invisible automatic controls
can make it more difficult to use 27 27

28. Feedback
Constraints
Sending information back to the user about what has been done
Includes sound, highlighting, animation and combinations of these
e.g. when screen button clicked on provides sound or red highlight feedback:
Restricting the possible actions that can be performed
Helps prevent user from selecting incorrect options
Physical objects can be designed to constrain things
e.g. only one way you can insert a key into a lock 28 28

29. Logical or ambiguous design?
Mapping relationships to control and their effects
Where do you plug the mouse?
Where do you plug the keyboard?
top or bottom connector?
Do the color coded icons help?
(i) A provides direct adjacent mapping between icon and connector
(ii) B provides color coding to associate the connectors with the labels 29 29

30. Consistency
When consistency breaks down
What happens if there is more than one command starting with the same letter?
e.g. save, spelling, select, style
Have to find other initials or combinations of keys, thereby breaking the consistency rule
e.g. ctrl+S, ctrl+Sp, ctrl+shift+L
Increases learning burden on user, making them more prone to errors
Design interfaces to have similar operations and use similar elements for similar tasks
For example:
always use ctrl key plus first initial of the command for an operation – ctrl+C, ctrl+S, ctrl+O
Main benefit is consistent interfaces are easier to learn and use 30 30

31. Keypad numbers layout A case of external inconsistency
(a) phones, remote controls
(b) calculators, computer keypads 1 2 3 7 8 9 4 5 6 4 5 6 7 8 9 1 2 3 31 31

32. Affordances: to give a clue
Refers to an attribute of an object that allows people to know how to use it
e.g. a mouse button invites pushing, a door handle affords pulling
Norman (1988) used the term to discuss the design of everyday objects
Since has been much popularised in interaction design to discuss how to design interface objects
e.g. scrollbars to afford moving up and down, icons to afford clicking on 32 32

33. What does ‘affordance’ have to offer interaction design?
Interfaces are virtual and do not have affordances like physical objects
Norman argues it does not make sense to talk about interfaces in terms of ‘real’ affordances
Instead interfaces are better conceptualized as ‘perceived’ affordances
Learned conventions of arbitrary mappings between action and effect at the interface
Some mappings are better than others 33 33

34. Activity Physical affordances:
‘affords’ grasping
Physical affordances:
How do the following physical objects afford? Are they obvious? 34 34

35. Activity Virtual affordances
for screen objects
button–like object ‘affords’ mouse click or touch in case of touch screen
Virtual affordances
How do the following screen objects afford?
What if you were a novice user?
Would you know what to do with them? 35 35

37. screen design and layout
Guiding the design
screen design and layout
basic principles
grouping, structure, order
alignment
use of white space
Affordances

38. Available tools grouping of items order of items
decoration - fonts, boxes etc.
alignment of items
white space between items

39. Summary: Key points
Important to have a good understanding of the problem space
Fundamental aspect of interaction design is to develop a conceptual model
Interaction modes and interface metaphors provide a structure for thinking about which kind of conceptual model to develop
Interaction styles are specific kinds of interfaces that are instantiated as part of the conceptual model 39

40. Key points
Interaction design is concerned with designing interactive products to support the way people communicate and interact in their everyday and working lives
It is concerned with how to create quality user experiences
It requires taking into account a number of interdependent factors, including context of use, type of activities, cultural differences, and user groups
It is multidisciplinary, involving many inputs from wide-reaching disciplines and fields 40 40

41. Students to research about prototyping
What is a prototype?
Why prototype?
Different kinds of prototyping
Examples of low and high fidelity prototyping 41

42. References
Human Factor Theories Part I - Mental Model & Problem Solving: Dr. Pearl Pu
From: