Chapter 2: Understanding and

conceptualizing interaction

Adam Amril JaharadakMay 2012

Adam, 2012

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

Adam, 2012

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?

Adam, 2012

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?

When designing for a new user experience how will the proposed design extend or change current ways of doing things?

Adam, 2012

An example

What do you think were the main assumptions made by developers of online photo sharing and management applications, like Flickr?

Adam, 2012

Adam, 2012

Assumptions and claims

Assumptions 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

A claim From Flickrs website (2005): is almost

certainly the best online photo management and sharing application in the world

Adam, 2012

From problem space to design space

Having a good understanding of the problem space can help inform the design spacee.g., what kind of interface, behavior,

functionality to provide

But before deciding upon these it is important to develop a conceptual model

Adam, 2012

Conceptual model

Need to first think about how the system will appear to users (i.e. how they will understand it)

A conceptual model is: a high-level description of how a system is

organized and operates. (Johnson and Henderson, 2002, p. 26)

Adam, 2012

What is and why need a conceptual model?

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 (p. 28)

Provides a working strategy and a framework of general concepts and their interrelations

Adam, 2012

Helps the design team

Orient themselves towards asking questions about how the conceptual model will be understood by users

Not to become narrowly focused early on

Establish a set of common terms they all understand and agree upon

Reduce the chance of misunderstandings and confusion arising later on

Adam, 2012

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

Adam, 2012

A classic conceptual model: the spreadsheet

Analogous to ledger sheet

Interactive and computational

Easy to understand

Greatly extending what accountants and others could do

www.bricklin.com/history/refcards.htm

Adam, 2012

Why was it so good?

It was simple, clear, and obvious to the users how to use the application and what it could do

it is just a tool to allow others to work out their ideas and reduce the tedium of repeating the same calculations.

capitalized on users familiarity with ledger sheets

Got the computer to perform a range of different calculations and recalculations in response to user input

Adam, 2012

Another classic

8010 Star office system targeted at workers not interested in computing per se

Spent several person-years at beginning working out the conceptual model

Simplified the electronic world, making it seem more familiar, less alien, and easier to learn

Johnson et al (1989)

Adam, 2012

The Star interface

Adam, 2012

Interface metaphors

Designed to be similar to a physical entity but also has own properties

e.g. desktop metaphor, search engine

Exploit users familiar knowledge, helping them to understand the unfamiliar

Conjures 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

Adam, 2012

Benefits of interface metaphors

Makes learning new systems easier

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

Adam, 2012

Problems with interface 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

Adam, 2012

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

Adam, 2012

Instructing 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

Adam, 2012

Vending machines

Describe the conceptual model underlying the two vending machines

Which is easiest to use?

Adam, 2012

Ticketing System

How about the conceptual model of this ticketing system?

Can you describe it?

Adam, 2012

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

Adam, 2012

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

e.g. child types into a search engine, that uses natural language the question:

How many legs does a centipede have? and the system responds:

Adam, 2012

Conversing

Adam, 2012

Manipulating

Exploits 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

Adam, 2012

Manipulatives (PicoCrickets)

Adam, 2012

Direct Manipulation (DM)

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

Adam, 2012

Example of DM

Visual progress of moving a folder to the trash:

The "trash" on the desktop

is an excellent example of

direct manipulation within

computer systems

Adam, 2012

Core principles of DM

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

Adam, 2012

Why are DM interfaces so 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

Adam, 2012

What are the disadvantages with 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 rather than manipulating

e.g., spell checking

Moving a mouse around the screen can be slower than pressing function keys to do same actions

Adam, 2012

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

Adam, 2012

A virtual world

Adam, 2012

A CAVE

Adam, 2012

Activity

A company has been asked to design a computer-based system that will encourage autistic children to communicate and express themselves better.

What type of interaction would be appropriate to use at the interface for this particular user group?

Adam, 2012

Theories, models and frameworks

Are used to inform and inspire design

A theory is a well-substantiated explanation of some aspect of a phenomenon

A model is a simplification of some aspect of humancomputer interaction intended to make it easier for designers to predict and evaluate alternative designs

A framework is a set of interrelated concepts and/or a set of specific questions

Adam, 2012

Main differences

Theories tend to be comprehensive, explaining humancomputer interactions

Models tend to simplify some aspect of humancomputer interaction

Frameworks tend to be prescriptive, providing designers with concepts, questions, and principles to consider

Adam, 2012

Summary 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

Adam, 2012

Summary 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