101-01_人機互動_課程講義 by insight ewpg

2013/1/10

Bad designs Chapter 1

What is interaction design?

– Elevator controls and labels on the bottom row all look the same, so it is easy to push a label by mistake instead of a control button

– People do not make same mistake for the labels and buttons on the top row. Why not? www.id-book.com

www.id-book.com

Why is this vending machine so bad?

From: www.baddesigns.com

Good design • Marble answering machine (Bishop, 1995) • Based on how everyday objects b h behave • Easy, intuitive and a pleasure to use • Only requires onestep actions to perform core tasks

• Need to push button first to activate reader • Normally y insert bill first before making selection • Contravenes well known convention From: www.baddesigns.com www.id-book.com

www.id-book.com

Good and bad design

• Need to take into account: – Who the users are – What activities are being carried out – Where the interaction is taking place

– Peanut shaped to fit in hand – Logical layout and color-coded, distinctive buttons – Easy to locate buttons 5

What to design

• What is wrong with the remote on the right? • Why is the TiVo remote so much better designed?

www.id-book.com

• Need to optimize the interactions users have with a product – So that they match the users’ activities and needs

www.id-book.com

2013/1/10

Novel interface

www.id-book.com

Understanding users’ needs

Activity

• Designing interactive products to support the way people communicate and interact in their everyday and working lives

– Cell phone – Public phone box?

– Sharp, Rogers and Preece (2011)

• The design of spaces for human communication and interaction

• Consider the kinds of user, type of activity and context of use

www.id-book.com

What is interaction design?

• How does making a call differ when using a:

www.id-book.com

• Need to take into account what people are good and bad at • Consider what might help people y they y currently y do things g in the way • Think through what might provide quality user experiences • Listen to what people want and get them involved • Use tried and tested user-centered methods

– Winograd (1997)

www.id-book.com

Goals of interaction design

Which kind of design?

• Develop usable products – Usability means easy to learn, effective to use and provide an enjoyable experience e pe e ce

• Involve users in the design process

• 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 computerbased systems for people

www.id-book.com

2013/1/10

Relationship between ID, HCI and other fields

HCI and interaction design

• Academic disciplines contributing to ID: – Psychology – Social Sciences – Computing Sciences – Engineering – Ergonomics – Informatics

www.id-book.com

Relationship between ID, HCI and other fields • Design practices contributing to ID:

Relationship between ID, HCI and other fields

– – – – – – – 15

• Interdisciplinary fields in interaction design:

– Graphic design – Product design – Artist-design Artist design – Industrial design – Film industry

www.id-book.com

Working in multidisciplinary teams

HCI Ubiquitous Computing Human Factors Cognitive Engineering Cognitive Ergonomics Computer Supported Co-operative Work Information Systems

www.id-book.com

Interaction design in business • Increasing number of ID consultancies, examples of well known ones include:

• Many people from different backgrounds involved

– Nielsen Norman Group: “help companies enter the age of the consumer, designing human-centered products and services” – Cooper: ”From research and product to goal-related design” – Swim: “provides a wide range of design services, in each case g to address the p product development p needs at hand” targeted – IDEO: “creates products, services and environments for companies pioneering new ways to provide value to their customers”

• Different perspectives and ways of seeing and d ttalking lki about b t things thi • Benefits – more ideas and designs generated

• Disadvantages – difficult to communicate and progress forward the designs being create

www.id-book.com

2013/1/10

What do professionals do in the ID business?

The User Experience

• interaction designers - people involved in the design of all the interactive aspects of a product

• How a product behaves and is used by people in the real world

• usability engineers - people who focus on evaluating products, using usability methods and principles

– the way people feel about it and their pleasure and satisfaction when using it, looking at it, holding it, and p g or closing g it opening – “every product that is used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2003)

• web designers - people who develop and create the visual design of websites websites, such as layouts • information architects - people who come up with ideas of how to plan and structure interactive products

• Cannot design a user experience, only design for a user experience

• user experience designers (UX) - people who do all the above but who may also carry out field studies to inform the design of products

www.id-book.com

Why was the iPod user experience such a success?

The iPod Nano Touch

• Quality user experience from the start • Simple, elegant, distinct brand, pleasurable, must have fashion item, catchy names, cool, etc.,

www.id-book.com

• users should be involved through the development of the project • specific usability and user experience goals need to be identified, clearly documented and agreed at the beginning of the project • iteration is needed through the core activities

Establishing requirements Developing alternatives Prototyping Evaluating

www.id-book.com

Core characteristics of interaction design

What is involved in the process of interaction design • • • •

www.id-book.com

2013/1/10

Are cultural differences important?

Why go to this length? • Help designers: – understand how to design interactive products that fit with what people want, need and may desire – appreciate that one size does not fit all e.g., teenagers are very different to grown-ups

– identify any incorrect assumptions they may have about particular user groups e.g., not all old people want or need big fonts

– be aware of both people’s sensitivities and their capabilities

www.id-book.com

• 5/21/2012 versus 21/5/2012? – Which should be used for international services and online forms?

• Why is it that certain products, like the iPod, are universally accepted by people from all parts of the world whereas websites are reacted to differently by people from different cultures? www.id-book.com

Usability goals

Anna, IKEA online sales agent

• Effective to use • Efficient to use • Safe to use • Have good utility • Easy to learn • Easy to remember how to use

• Designed to be different for UK and US customers • What are the differences and d which hi h iis which? hi h? • What should Anna’s appearance be like for other countries, like India, South Africa, or China?

www.id-book.com

Activity on usability

– Using a DVD to play a movie? – Use a DVD to p pre-record two p programs? g – Using a web browser tool to create a website?

User experience goals

• How long should it take and how long does it actually take to:

www.id-book.com

Desirable aspects satisfying enjoyable engaging pleasurable exciting entertaining

helpful motivating challenging enhancing sociability supporting creativity cognitively stimulating

Undesirable aspects boring frustrating making one feel guilty annoying childish

unpleasant patronizing making one feel stupid cutesy gimmicky

www.id-book.com

fun provocative surprising rewarding emotionally fulfilling

2013/1/10

Usability and user experience goals

Design principles

• Selecting terms to convey a person’s feelings, emotions, etc., can help designers understand the multifaceted nature of the user experience

• Generalizable abstractions for thinking about different aspects of design

• How do usability goals differ from user experience goals?

provide and what not to p provide at • What to p the interface

• Are there trade-offs between the two kinds of goals?

• Derived from a mix of theory-based knowledge, experience and common-sense

• The do’s and don’ts of interaction design

– e.g. can a product be both fun and safe?

• How easy is it to measure usability versus user experience goals? www.id-book.com

www.id-book.com

Visibility

Visibility …you need to insert your room card in the slot by the buttons to get the elevator to work!

• This is a control panel for an elevator • How does it work?

How would you make this action more visible?

you want? • Push a button for the floor y

• 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

• Nothing happens. Push any other button? Still nothing. What do you need to do? It is not visible as to what to do! From: www.baddesigns.com www.id-book.com

• make relevant parts visible • make what has to be done obvious 33

www.id-book.com

What do I do if I am wearing black? • Invisible automatic controls can make it more difficult to use

Feedback • 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: “ccclichhk”

www.id-book.com

2013/1/10

Constraints

Logical or ambiguous design?

• Restricting the possible actions that can be performed • Helps prevent user from selecting incorrect options • Physical Ph i l objects bj t can be b designed d i d tto constrain things

• Where do you plug the mouse? • Where do you plug the keyboard?

– e.g. only one way you can insert a key into a lock

• top or bottom connector?

From: www.baddesigns.com www.id-book.com

• Design interfaces to have similar operations and use similar elements for similar tasks • For example:

(i) A provides direct adjacent mapping between icon and connector

– always use ctrl key plus first initial of the command for an operation – ctrl+C, ctrl+S, ctrl+O

(ii) B provides color coding to associate the connectors with the labels From: www.baddesigns.com 39

Consistency

How to design them more logically

www.id-book.com

• Do the color coded icons help?

• Main benefit is consistent interfaces are easier to learn and use www.id-book.com

– 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

Internal and external consistency

When consistency breaks down • What happens if there is more than one command starting with the same letter?

• Internal consistency refers to designing operations to behave the same within an application – Difficult to achieve with complex interfaces

• External consistency refers to designing operations, interfaces, etc., to be the same across applications and devices – Very rarely the case, based on different designer’s preference

www.id-book.com

2013/1/10

Keypad numbers layout

Affordances: to give a clue • Refers to an attribute of an object that allows people to know how to use it

• A case of external inconsistency (a) phones, remote controls

(b) calculators, computer keypads 7

3 6

1 0

4 7

0 www.id-book.com

– 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

www.id-book.com

Activity

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 b interfaces f in terms off ‘real’ ‘ l’ affordances ff d • Instead interfaces are better conceptualized as ‘perceived’ affordances

– Physical affordances: How do the following physical objects afford? Are they obvious?

– Learned conventions of arbitrary mappings between action and effect at the interface – Some mappings are better than others

www.id-book.com

Activity

• 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 i • 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

How do the following screen objects afford? What if you were a novice user? Would you know what to do with them?

Key points

– Virtual affordances

www.id-book.com

2013/1/10

Recap • HCI has moved beyond designing interfaces for desktop machines • About extending and supporting all manner of human activities in all manner of places • Facilitating user experiences through designing interactions

Chapter 2

Understanding and Conceptualizing interaction

• • • • • www.id-book.com

Understanding the problem space

– e.g. people will want to watch TV while driving

www.id-book.com

A framework for analysing the problem space

• stating something to be true when it is still open to question – e.g. a multimodal style of interaction for controlling GPS — one that involves speaking while driving — is safe

• taking something for granted when it needs further investigation

What is a claim?

www.id-book.com

What is an assumption?

– What do you want to create? – What are your assumptions? – Will it achieve what you hope it will?

www.id-book.com

Make work effective, efficient and safer Improve and enhance learning and training Provide enjoyable and exciting entertainment Enhance communication and understanding Support new forms of creativity and expression

• 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? • If you are designing for a new user experience how do you think your proposed design ideas support, change, or extend current ways of doing things? www.id-book.com

2013/1/10

Assumptions: realistic or wish-list?

Activity • What are the assumptions and claims made about 3D TV?

www.id-book.com

• People would not mind wearing the glasses that are needed to see in 3D in their living rooms - reasonable • People would not mind paying a lot more for a new 3D-enabled TV screen- not reasonable • People would really enjoy the enhanced clarity and color detail provided by 3D - reasonable • People will be happy carrying around their own special glasses - reasonable only for a very select bunch of users

www.id-book.com

From problem space to design space

Benefits of conceptualising

• Having a good understanding of the problem space can help inform the design space

• Orientation – enables design teams to ask specific questions about how the conceptual model will be understood

– e.g. g what kind of interface, behavior, functionality to provide

• Open-minded

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

– prevents design teams from becoming narrowly focused early on

• Common ground – allows design teams to establish a set of commonly agreed terms www.id-book.com Id-book.com

www.id-book.com

Conceptual model

Components • Metaphors and analogies

• A conceptual model is: – “a high-level description of how a system is organized and operates” (Johnson and Henderson, 2002, p 26)

– understand what a product is for and how to use it for an activity

• Concepts that people are exposed to through the product

• Enables – “designers to straighten out their thinking before they start laying out their widgets” (p 28)

– task–domain objects, their attributes, and operations (e.g. saving, revisiting, organizing)

• Relationship and mappings between these concepts www.id-book.com

www.id-book.com

2013/1/10

First steps in formulating a conceptual model

Conceptual models

• 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 ill be b appropriate? i t ? • What kinds of interaction modes and styles to use?

• Many kinds and ways of classifying them • We describe them in terms of core activities and objects • Also in terms of interface metaphors

always keep in mind when making design decisions how the user will understand the underlying conceptual model

www.id-book.com

Interface metaphors

Interface metaphors • Conceptualizing what we are doing, e.g. surfing the web • A conceptual model instantiated at the interface, interface e.g. e g the desktop metaphor • Visualising an operation, – e.g. an icon of a shopping cart for placing items into

www.id-book.com

Activity

• 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’ • Conjures up the essence of the unfamiliar activity, enabling users to leverage of this to understand more aspects of the unfamiliar functionality

– Shopping cart – Proceeding to check-out – 1-click – Gift wrapping – Cash till? 17

Interface metaphors

• Describe the components of the conceptual model underlying most online shopping websites, e.g.

www.id-book.com

2013/1/10

Benefits of interface metaphors

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

www.id-book.com

• Break conventional and cultural rules – e.g. recycle bin placed on desktop • Can constrain designers in the way they conceptualize a problem space • Conflict C fli t with ith design d i principles i i l • 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 ©2011

www.id-book.com

Interaction types

• Where users instruct asystem and tell it what to do

– issuing commands and selecting options

– e.g. tell the time, print a file, save a file

• Conversing

• Very common conceptual model, underlying a diversity of devices and systems

– interacting with a system as if having a conversation i

• Manipulating – interacting with objects in a virtual or physical space by manipulating them

• Exploring – moving through a virtual environment or a physical space 21

1. Instructing

• Instructing

www.id-book.com

– 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

www.id-book.com

Which is easiest and why?

2. Conversing • Underlying model of having a conversation with another human • Range from simple voice recognition menudriven 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

www.id-book.com Id-book.com

23 23

www.id-book.com

2013/1/10

Pros and cons of conversational model

Would you talk with Anna?

• 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

www.id-book.com Id-book.com

25 25

www.id-book.com

• Shneiderman (1983) coined the term DM, came from his fascination with computer games at the time

• Involves dragging, selecting, opening, closing and zooming actions on virtual objects • Exploit’s users’ knowledge of how they move and manipulate p in the p physical y world

–C Continuous ti representation t ti off objects bj t and d 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

• 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) 27

• 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 29

www.id-book.com

What are the disadvantages with DM?

Why are DM interfaces so enjoyable?

www.id-book.com

Direct Manipulation

3. Manipulating

www.id-book.com

• 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 www.id-book.com

2013/1/10

Which conceptual model is best?

4. Exploring • Involves users moving through virtual or physical environments

• 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

• Physical environments with embedded sensor technologies t h l i – Context aware

www.id-book.com

– what the user is doing when interacting with a system, e.g. instructing, talking, browsing or other

• Interface I f type: – the kind of interface used to support the mode, e.g. speech, menu-based, gesture

www.id-book.com

• • • • • • • • • •

Command Speech Data-entry Form fill-in Query Graphical Web Pen Augmented reality Gesture (for more see chapter 6)

www.id-book.com

Which interaction type to choose?

Paradigm

• Need to determine requirements and user needs • Take budget and other constraints into account • Also Al will ill depend d d on suitability it bilit off technology for activity being supported • This is covered in course when designing conceptual models

www.id-book.com

Many kinds of interface types available…

Conceptual models: interaction and interface • Interaction type:

• Inspiration for a conceptual model • General approach adopted by a community for carrying out research – shared h d assumptions, ti concepts, t values, l and practices – e.g. desktop, ubiquitous computing, in the wild

www.id-book.com

2013/1/10

Examples of new paradigms • • • • • •

Theory

Ubiquitous computing (mother of them all) Pervasive computing Wearable computing Tangible bits, bits augmented reality Attentive environments Transparent computing – and many more….

www.id-book.com

• Explanation of a phenomenon – e.g. information processing that explains how the mind, or some aspect of it, o t, is s assumed assu ed to work o

• Can help identify factors – e.g. cognitive, social, and affective, relevant to the design and evaluation of interactive products

www.id-book.com

Models

– intended to make it easier for designers to predict and evaluate alternative designs – abstracted from a theory coming from a contributing discipline, e.g. psychology, e.g. keystroke model

Framework

• A simplification of an HCI phenomenon

www.id-book.com

• Set of interrelated concepts and/or specific questions for ‘what to look for’ • Many in interaction design – e.g. g Norman’s conceptual p models,, Benford’s trajectories

• Provide advice on how to design – e.g. steps, questions, concepts, challenges, principles, tactics and dimensions www.id-book.com

Summary • 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 p 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 • Paradigms, theories, models and frameworks can also shape a conceptual model www.id-book.com

www.id-book.com

2013/1/10

Overview Chapter 3

• What is cognition? • What are users good and bad at? • Describe how cognition has been applied to interaction design • Mental Models • Internals classic theories of cognition • More recent external theories of cognition

Cognitive aspects

www.id-book.com

Why do we need to understand users?

Cognitive processes

• Interacting with technology is cognitive • Need to take into account cognitive processes involved and cognitive limitations of users • Provides knowledge about what users can and cannott be b expected t d to t do d • Identifies and explains the nature and causes of problems users encounter • Supply theories, modelling tools, guidance and methods that can lead to the design of better interactive products

www.id-book.com

• Attention • Perception and recognition • Memory • Learning • Reading, speaking and listening • Problem-solving, planning, reasoning and decision-making

www.id-book.com

Activity: Find the price of a double room at the Holiday Inn in Bradley

Attention • Selecting things to concentrate on at a point in time from the mass of stimuli around us • Allows us to to focus on information that is relevant to what we are doing • Involves audio and/or visual senses • Focussed and divided attention enables us to be selective in terms of the mass of competing stimuli but limits our ability to keep track of all events • Information at the interface should be structured to capture users’ attention, e.g. use perceptual boundaries (windows), colour, reverse video, sound and flashing lights

www.id-book.com

2013/1/10

Activity: Find the price for a double room at the Quality Inn in Columbia

Activity • Tullis (1987) found that the two screens produced quite different results – 1st screen - took an average of 5.5 seconds to search – 2nd screen - took 3.2 seconds to search

• Why Why, since both displays have the same density of information (31%)? • Spacing – In the 1st screen the information is bunched up together, making it hard to search – In the 2nd screen the characters are grouped into vertical categories of information making it easier

www.id-book.com

Multitasking and attention • Is it possible to perform multiple tasks without one or more of them being detrimentally affected? • Ophir p et al ((2009)) compared p heavy y vs light multi-taskers – heavy were more prone to being distracted than those who infrequently multitask – heavy multi-taskers are easily distracted and find it difficult to filter irrelevant information

www.id-book.com

An example of over-use of graphics

Design implications for attention • Make information salient when it needs attending to • Use techniques that make things stand out like color ordering color, ordering, spacing, spacing underlining, underlining sequencing and animation • Avoid cluttering the interface with too much information • Avoid using too much because the software allows it

www.id-book.com

Our Situation State St t the th bad b d news Be clear, don’t try to obscure the situation

www.id-book.com

2013/1/10

Is color contrast good? Find italian

Perception • How information is acquired from the world and transformed into experiences • Obvious implication is to design representations that are readily perceivable, e.g. – Text should be legible – Icons should be easy to distinguish and read

www.id-book.com

Are borders and white space better? Find french

Activity • Weller (2004) found people took less time to locate items for information that was grouped – using a border (2nd screen) compared with using color contrast (1st screen)

• Some argue that too much white space on web pages is detrimental to search – Makes it hard to find information

• Do you agree? www.id-book.com

www.id-book.com

Which is easiest to read and why? What is the time?

– Icons should enable users to readily distinguish their meaning – Bordering and spacing are effective visual ways of grouping information – Sounds should be audible and distinguishable – Speech output should enable users to distinguish between the set of spoken words – Text should be legible and distinguishable from the background – Tactile feedback should allow users to recognize and distinguish different meanings

What is the time?

www.id-book.com

Design implications

What is the time?

www.id-book.com

2013/1/10

Memory

Processing in memory

• Involves first encoding and then retrieving knowledge • We don’t remember everything - involves filtering and processing what is attended to • Context C t t iis iimportant t t iin affecting ff ti our memory (i.e. where, when) • We recognize things much better than being able to recall things

www.id-book.com

• Encoding is first stage of memory – determines which information is attended to in the environment and how it is interpreted

• The more attention paid to something… • The more it is p processed in terms of thinking g about it and comparing it with other knowledge… • The more likely it is to be remembered – e.g. when learning about HCI, it is much better to reflect upon it, carry out exercises, have discussions with others about it, and write notes than just passively read a book, listen to a lecture or watch a video about it

www.id-book.com

Context is important

Activity

• Context affects the extent to which information can be subsequently retrieved • Sometimes it can be difficult for people to recall information that was encoded in a different context: – “You are on a train and someone comes up to you and says hello. You don’t recognize him for a few moments but then realize it is one of your neighbors. You are only used to seeing your neighbor in the hallway of your apartment block and seeing him out of context makes him difficult to recognize initially”

• Try to remember the dates of your grandparents’ birthday • Try to remember the cover of the last two DVDs you bought or rented • Which was easiest? Why? • People are very good at remembering visual cues about things – e.g. the color of items, the location of objects and marks on an object

• They find it more difficult to learn and remember arbitrary material www.id-book.com

• Command-based interfaces require users to recall from memory a name from a possible set of 100s • GUIs provide visually-based options that users need only browse through until they recognize one • Web browsers, MP3 players, etc., provide lists of visited URLs, song titles etc., that support recognition memory

The problem with the classic ‘7 2’

Recognition versus recall

www.id-book.com

– e.g. birthdays and phone numbers 22

www.id-book.com

• George Miller’s (1956) theory of how much information people can remember • People’s immediate memory capacity is very limited • Many designers think this is useful finding for interaction design • But… www.id-book.com

2013/1/10

Why?

What some designers get up to… • • • • •

• Inappropriate application of the theory • People can scan lists of bullets, tabs, menu items for the one they want • They don’t have to recall them from memory having h i only l briefly b i fl heard h d or seen them • Sometimes a small number of items is good • But depends on task and available screen estate

Present only 7 options on a menu Display only 7 icons on a tool bar Have no more than 7 bullets in a list Place only 7 items on a pull down menu Place only 7 tabs on the top of a website page – But this is wrong? Why?

www.id-book.com

– vast numbers of documents, images, music files, video clips, emails, attachments, bookmarks, etc., – where and how to save them all, then remembering what they were called and where to find them again – naming most common means of encoding them – but can be difficult to remember, especially when have 1000s and 1000s – How might such a process be facilitated taking into account people’s memory abilities?

www.id-book.com

Personal information management

Personal information management • Personal information management is a growing problem for many users

• Memory involves 2 processes – recall-directed and recognition-based scanning

• File management systems should be designed to optimize both kinds of memory processes – e.g. Search box and history list

• Help users encode files in richer ways – Provide them with ways of saving files using colour, flagging, image, flexible text, time stamping, etc

www.id-book.com

Is Apple’s Spotlight search tool any good?

Memory aids • SenseCam developed by Microsoft Research Labs • a wearable device that intermittently takes p photos without any y user intervention while worn • digital images taken are stored and revisited using special software • Has been found to improve people’s memory, suffering from Alzheimers

www.id-book.com

2013/1/10

SenseCam

Design implications • Don’t overload users’ memories with complicated procedures for carrying out tasks • Design interfaces that promote recognition rather than recall • Provide users with various ways of encoding information to help them remember – e.g. categories, color, flagging, time stamping

www.id-book.com

Learning

• prefer to learn by doing

• Speech-based menus and instructions should be short • Accentuate the intonation of artificially generated speech voices – they are harder to understand than human voices

• Provide opportunities for making text large on a screen www.id-book.com

Reading, speaking, and listening

• Speech-recognition systems allow users to interact with them by using spoken commands – e.g. Google Voice Search app

– Many prefer listening to reading – Reading can be quicker than speaking or listening – Listening requires less cognitive effort than reading or speaking – Dyslexics have difficulties understanding and recognizing written words

Applications

• The ease with which people can read, listen, or speak differs

www.id-book.com

Design implications

• How to learn to use a computerbased application • Using a computer-based application to understand a given topic • People find it hard to learn by following instructions in a manual

www.id-book.com

• Speech-output systems use artificially generated speech • e.g. written-text-to-speech systems for the blind • Natural-language systems enable users to type in questions and give text-based responses – e.g. Ask search engine

www.id-book.com

2013/1/10

Problem-solving, planning, reasoning and decision-making

Design implications • Design interfaces that encourage exploration • Design interfaces that constrain and guide learners • Dynamically linking concepts and representations can facilitate the learning of complex material

www.id-book.com

• All involves reflective cognition – e.g. thinking about what to do, what the options are, and the consequences • Often involves conscious processes, discussion with others (or oneself), and the use of artifacts – e.g. maps, books, pen and paper • May involve working through different scenarios and deciding which is best option www.id-book.com

Mental models

Design implications • Provide additional information/functions for users who wish to understand more about how to carry out an activity more effectively • Use simple computational aids to support rapid decision-making and planning for users on the move

• Users develop an understanding of a system through learning about and using it • Knowledge is sometimes described as a mental model: – How to use the system (what to do next) – What to do with unfamiliar systems or unexpected situations (how the system works)

• People make inferences using mental models of how to carry out tasks

www.id-book.com

Everyday reasoning and mental models

Mental models • Craik (1943) described mental models as:

(a) You arrive home on a cold winter’s night to a cold house. How do you get the house to warm up as quickly as possible? Set the thermostat to be at its highest or to the desired temperature?

– internal constructions of some aspect of the external world enabling predictions to be made

(b) You arrive home starving hungry. You look in the fridge and find all that is left is an uncooked pizza. You have an electric oven. Do you warm it up to 375 degrees first and then put it in (as specified by the instructions) or turn the oven up higher to try to warm it up quicker?

• Involves unconscious and conscious processes – images and analogies are activated

• Deep versus shallow models – e.g. how to drive a car and how it works www.id-book.com

www.id-book.com

2013/1/10

Heating up a room or oven that is thermostat-controlled

• Many people have erroneous mental models (Kempton, 1996)

• Same is often true for understanding how interactive devices and computers work:

• Why? – General valve theory, where ‘more is more’ principle is generalised to different settings (e.g. (e g gas pedal, pedal gas cooker, tap, radio volume) – Thermostats based on model of on-off switch model

www.id-book.com

– poor, often incomplete, easily confusable, based on inappropriate analogies and superstition (Norman, 1983) – e.g. elevators and pedestrian crossings - lot of people hit the button at least twice – Why? Think it will make the lights change faster or ensure the elevator arrives!

www.id-book.com

• Write down how an ATM works

• Your mental model

– How much money are you allowed to take out? – What denominations? – If you went to another machine and tried the same what would happen? – What information is on the strip on your card? How is this used? – What happens if you enter the wrong number? – Why are there pauses between the steps of a transaction? What happens if you try to type during them?

– How accurate? – How similar? – How shallow?

• Payne (1991) did a similar study and found that people frequently resort to analogies to explain how they work • People’s accounts greatly varied and were often ad hoc

– Why does the card stay inside the machine? – Do you count the money? Why?

How did you fare?

Exercise: ATMs

www.id-book.com

Gulfs of execution and evaluation

Bridging the gulfs

• The ‘gulfs’ explicate the gaps that exist between the user and the interface • The gulf of execution – the distance from the user to the physical system

• The gulf of evaluation – the distance from the physical system to the user

• Bridging the gulfs can reduce cognitive effort required to perform tasks www.id-book.com

www.id-book.com

2013/1/10

Model Human processor (Card et al, 1983)

Information processing • Conceptualizes human performance in metaphorical terms of information processing stages

www.id-book.com

• Models the information processes of a user interacting with a computer • Predicts which cognitive processes are involved when a user interacts with a computer • Enables calculations to be made of how long a user will take to carry out a task

www.id-book.com

The human processor model

Limitations • based on modeling mental activities that happen exclusively inside the head • do not adequately account for how people interact with computers and other devices in real world

www.id-book.com

• Concerned with explaining how we interact with external representations (e.g. maps, notes, diagrams)

• Diaries, reminders, calendars, notes, shopping lists, to-do lists – written to remind us of what to do

• What are the cognitive benefits and what processes involved

• Post Post-its its, piles, piles marked emails – where placed indicates priority of what to do

• How they extend our cognition • What computer-based representations can we develop to help even more?

Externalizing to reduce memory load

External cognition

www.id-book.com

• External representations: – Remind us that we need to do something (e.g. to buy something for mother’s day) – Remind us of what to do (e.g. buy a card) – Remind us when to do something (e.g. send a card by a certain date) www.id-book.com

2013/1/10

Annotation and cognitive tracing

Computational offloading

• Annotation involves modifying existing representations through making marks

• When a tool is used in conjunction with an external representation to carry out a computation (e.g. pen and paper)

– e.g. crossing off, ticking, underlining

• Cognitive tracing involves externally manipulating items into different orders or structures

• Try doing the two sums below (a) in your head, (b) on a piece of paper and c) with a calculator.

– e.g. playing Scrabble, playing cards

– 234 x 456 =?? – CCXXXIIII x CCCCXXXXXVI = ???

• Which is easiest and why? Both are identical sums www.id-book.com

www.id-book.com

• Concerned with the nature of cognitive phenomena across individuals, artifacts, and internal and external representations (Hutchins, 1995) • Describes these in terms of propagation across representational state • Information is transformed through different media (computers, displays, paper, heads)

• Provide external representations at the interface that reduce memory load and facilitate computational offloading e.g. Information visualizations have been designed to allow people to make sense and rapid decisions about masses of data 57

Distributed cognition

Design implication

www.id-book.com

How it differs from information processing

www.id-book.com

2013/1/10

What’s involved

Summary

• The distributed problem-solving that takes place • The role of verbal and non-verbal behavior • The various coordinating mechanisms that are used d (e.g. ( rules, l procedures) d ) • The communication that takes place as the collaborative activity progresses • How knowledge is shared and accessed

• Cognition involves several processes including attention, memory, perception and learning • The way an interface is designed can greatly affect how well users can perceive, attend, learn and remember how to do their tasks • Theoretical frameworks, such as mental models and external cognition, provide ways of understanding how and why people interact with products • This can lead to thinking about how to design better products

www.id-book.com

2013/1/10

Overview Chapter 4

• Being social • Face to face conversations • Remote conversations • Tele-presence Tele presence • Co-presence • Emergent social phenomena

Social Interaction

www.id-book.com

Conversational mechanisms

Being social

• Various mechanisms and ‘rules’ are followed when holding a conversation, e.g.mutual greetings

• Are F2F conversations being superseded by our social media interactions? • How many friends do you have on Facebook,, LinkedIn,, vs real life? • How much overlap? • How are the ways we live and interact with one another changing? • Are the established rules and etiquette still applicable to online and offline?

A: B B: C: A: C: A: C: B:

www.id-book.com

Hi there Hi! Hi All right? Good, how’s it going? Fine, how are you? OK So-so. How’s life treating you?

www.id-book.com

Conversational rules

• Sacks et al. (1978) work on conversation analysis describe three basic rules: Rule 1: the current speaker chooses the next speaker by asking an opinion, opinion question, question or request Rule 2: another person decides to start speaking Rule 3: the current speaker continues talking

• Turn-taking used to coordinate conversation – A: Shall we meet at 8? – B: Um, can we meet a bit later? – – – –

A: B: A: B:

Shall we meet at 8? Wow, look at him? Yes what a funny hairdo! Um, can we meet a bit later?

• Back channeling to signal to continue and following – Uh-uh, umm, ahh www.id-book.com

www.id-book.com

2013/1/10

More conversational rules

Breakdowns in conversation

• Farewell rituals

• When someone says something that is misunderstood:

– Bye then, see you, yer bye, see you later….

• Implicit p and explicit p cues – e.g. looking at watch, fidgeting with coat and bags – explicitly saying “Oh dear, must go, look at the time, I’m late…”

–Speaker Speaker will repeat with emphasis: A: “this one?” B: “no, I meant that one!”

–Also use tokens: Eh? Quoi? Huh? What?

www.id-book.com

What happens in social media conversations?

Remote conversations

• Many applications have been developed – e.g., email, videoconferencing, videophones, videoconferencing, instant messaging, chatrooms

Phone? email? Instant messaging? texting? Skyping?

www.id-book.com

• Much research on how to support conversations when people are ‘at a distance’ from each other

• Do same conversational rules apply? • Are there more breakdowns? • How do people repair them for: – – – – –

• Do they mimic or move beyond existing ways of conversing?

Early videophone and visualphone

www.id-book.com

VideoWindow system (Bellcore, 1989) • Shared space that allowed people 50 miles apart to carry on a conversation as if in same room drinking coffee together • 3 x 8 ft ‘picture-window’ between two sites with video and audio • People did interact via the window but strange things happened (Kraut, 1990)

www.id-book.com

2013/1/10

Findings of how VideoWindow System was used

Sketch of VideoWindow

• Talked constantly about the system • Spoke p more to other p people p in the same room rather than in other room • When tried to get closer to someone in other place had opposite effect - went out of range of camera and microphone • No way of monitoring this www.id-book.com

www.id-book.com

Skype success

3D virtual worlds • Second Life (2007)

• Global household name • Seeing others on screen enables o e intimacy t acy than t a audio aud o phone p o e more • Enables people to get to know each other better • Less awkward for young children

– Over 8 million users

• What kinds of conversation take place in these h environments? i ? • VoIP versus chatroom talk? – Which is preferred and why?

– Like “to show, not tell” (Ames et al, 2010) www.id-book.com

www.id-book.com

Second Life – The OU

Facebook and Twitter • Everyone uses them so what is there to learn? • Used in emergencies, demos, etc., – e.g., users spread d up-to-the t th minute i t iinfo f and retweet about how a wildfire or gas plume is moving – but can also start or fuel rumors, by adding news that is old or incorrect – more confusing than helpful

www.id-book.com

2013/1/10

Telepresence

Portholes (Dourish and Bly, 1992)

• New technologies designed to allow a person to feel as if they were present in the other location

Regularly updated digitized images of people in their offices appeared on everyone’s desktop machines throughout day and night

– projecting their body movements, movements actions, voice and facial expressions to the other location or person – e.g. superimpose images of the other person on a workspace

www.id-book.com

Clearboard (Ishii et al, 1993) • Transparent board that shows other person’s facial expression on your board as you draw

www.id-book.com

Hypermirror (Morikawa and Maesako, 1998) – allows people to feel as if they are in the same virtual place even though in physically different spaces (woman in white sweater is in a different room to the other three)

People in different places are superimposed on the same screen to make them appear as if in same space

www.id-book.com

Creating personal space in Hypermirror

2) Two in this room are invading the ‘virtual’ personal space of the other person by appearing to be physically on top of woman in white sweater

www.id-book.com

Everyone happy

3) Two in the room move apart to allow person in other space more ‘virtual’ personal space

www.id-book.com

2013/1/10

How much realism?

A telepresence room

• Is needed in telepresence to make it compelling? • Telepresence rooms try make the remote people appear to be life-like life like by using multiple high def cameras with eye-tracking features and directional microphones • Is skype just as good? www.id-book.com

www.id-book.com

Coordination mechanisms

• Technologies that enable co-located groups to collaborate more effectively – when working, learning and socializing

– e.g., playing football, navigating a ship

• Examples: Smartboards, Surfaces, Wii and Kinect

• They use: – verbal and non-verbal communication – schedules, rules, and conventions – shared external representations

www.id-book.com

• Talk is central • Non-verbal also used to emphasize and as substitute – e.g. g nods,, shakes,, winks,, glances, g , gestures g and hand-raising

• Formal meetings – explicit structures such as agendas, memos, and minutes are employed to coordinate the activity

Schedules, rules and conventions

F2F coordinating mechanisms

www.id-book.com

Co-presence

• When a group of people act or interact together they need to coordinate themselves

www.id-book.com

• Schedules used to organize regular activities in large organizations • Formal rules, like the writing of monthly reports enable organizations to maintain order and keep track • Conventions, like keeping quiet in a library, are a form of courtesy to others

www.id-book.com

2013/1/10

Shared external representations

Collaborative technologies to support coordination

• Common method used to coordinate collaborative activities,

• There are a variety of software tools designed to support scheduling, planning and coordinating

– e.g., checklists, tables, to-do lists

• They can provide external information on: – – – –

who h iis working ki on what h t When it is being worked on where it is being worked on when a piece of work is supposed to be finished – whom it goes to next

www.id-book.com

– e.g., group calendars, electronic schedulers, project management tools, and workflow tools

• Need to get balance between human and system control – too much system control and the users will rebel – too little control and the system breaks down

Awareness mechanisms

www.id-book.com

Lo tech awareness mechanism

• Involves knowing who is around, what is happening, and who is talking with whom • Peripheral awareness – keeping an eye on things happening in the periphery of vision – Overhearing and overseeing - allows tracking of what others are doing without explicit cues

www.id-book.com

Designing technologies to support awareness

www.id-book.com

The Reactable experience

• Provide awareness of others who are in different locations • Workspace awareness: “the up-to-themoment understanding of another person’s interaction with the shared workspace” (Gutwin and Greenberg, 2002) • Examples: ReacTable and Reflect Table www.id-book.com

www.id-book.com

2013/1/10

The Reflect Table

www.id-book.com

The Dynamo system

Notification systems

– example: Babble

Babble (IBM, Erickson et al, 1999)

• Users notify others as opposed to being constantly monitored • Provide information about shared objects and progress of collaborative tasks

www.id-book.com

Circle with marbles represents people taking part in conversation in a chatroom Those in the middle are doing the most chatting Those towards the outside are less active in the conversation www.id-book.com

Activity: Privacy settings on Facebook

What next? • Besides perpetual sharing and broadcasting of information, knowledge, and personal content? • Lifelogging – recording everything in one’s life and sharing

• Micro-chatting – beyond twittering and chatroulette? www.id-book.com

www.id-book.com

2013/1/10

Summary • Social mechanisms, like turn-taking, conventions, etc., enable us to collaborate and coordinate our activities • Keeping aware of what others are doing and letting others know what you are doing are important aspects of collaborative working and socialising • Many technologies systems have been built to support telepresence and copresence

www.id-book.com

1/10/13

Overview Chapter 5

•  Emotions and the user experience •  Expressive interfaces

Emotional Interaction

–  how the appearance of an interface can affect users

•  Frustrating interfaces –  what are they and how to reduce them

•  Persuasive technologies and behavioral change –  how technologies can be designed to change people s attitudes and behavior

•  Anthropomorphism –  The pros and cons

•  Models of emotion www.id-book.com

www.id-book.com

Is this form fun to fill in?

Emotions and the user experience

My goal was to design Wufoo to feel like something Fisher-Price would make. Kevin Hale, Wufoo director

•  HCI has traditionally been about designing efficient and effective systems •  Now more about how to design interactive systems that make people respond in certain ways –  e.g. to be happy, to be trusting, to learn, to be motivated

•  Emotional interaction is concerned with how we feel and react when interacting with technologies www.id-book.com

www.id-book.com

Emotional interaction

–  translating this into different aspects of the user experience

•  Why people become emotionally attached to certain products (e.g. virtual pets) •  Can social robots help reduce loneliness and improve wellbeing? •  How to change human behavior through the use of emotive feedback

Activity

•  What makes us happy, sad, annoyed, anxious, frustrated, motivated, delirious and so on

www.id-book.com

•  Try to remember the emotions you went through when buying a big ticket item online (e.g. a fridge, a vacation, a computer) •  How many different emotions did you go through?

www.id-book.com

1/10/13

Expressive interfaces

User-created expressiveness

•  Provide reassuring feedback that can be both informative and fun •  But can also be intrusive, causing people to get annoyed and even angry •  Color, icons, sounds, graphical elements and animations are used to make the look and feel of an interface appealing

•  Users have created a range of emoticons compensate for lack of expressiveness in text communication: Happy :) Sad :< Sick :X Mad >: Very angry >:-(

–  conveys an emotional state

•  In turn this can affect the usability of an interface –  people are prepared to put up with certain aspects of an interface (e.g. slow download rate) if the end result is appealing and aesthetic www.id-book.com

LOL, I 12 CU 2NITE

Would you use any of these? What for?

www.id-book.com

•  Also use of icons and shorthand in texting and instant messaging has emotional connotations, e.g.

www.id-book.com

Which one do you prefer?

www.id-book.com

Marcus and Teasley study

Friendly interfaces •  Microsoft pioneered friendly interfaces for technophobes - At home with Bob software

•  Marcus (1992) proposed interfaces for different user groups –  Left dialog box was designed for white American females –  Who prefer a more detailed presentation, curvilinear shapes and the absence of some of the more brutal terms ... favored by male software engineers.

•  3D metaphors based on familiar places (e.g. living rooms)

–  Right dialog box was designed for European adult male intellectuals

•  Agents in the guise of pets (e.g. bunny, dog) were included to talk to the user

–  who like suave prose, a restrained treatment of information density, and a classical approach to font selection

–  Make users feel more at ease and comfortable

•  Teasley et al (1994) found this not to be true –  the European dialog box was preferred by all and was considered most appropriate for all users –  round dialog box was strongly disliked by everyone

www.id-book.com

1/10/13

Bob

Clippy •  Why was Clippy disliked by so many? •  Was it annoying, distracting, patronising or other? •  What sort of user liked Clippy?

www.id-book.com

Frustrating interfaces –  When an application doesn t work properly or crashes –  When a system doesn t do what the user wants it to do –  When a user s expectations are not met –  When a system does not provide sufficient information to enable the user to know what to do –  When error messages pop up that are vague, obtuse or condemning –  When the appearance of an interface is garish, noisy, gimmicky or patronizing –  When a system requires users to carry out too many steps to perform a task, only to discover a mistake was made earlier and they need to start all over again 15

Gimmicks

•  Many causes:

www.id-book.com

Error messages

•  Amusing to the designer but not the user, e.g. – Clicking on a link to a website only to discover that it is still under construction

www.id-book.com

Website error messages

The application Word Wonder has unexpectedly quit due to a type 2 error.

Why not instead: the application has expectedly quit due to poor coding in the operating system

•  Shneiderman s guidelines for error messages include: •  •  •  •  •

avoid using terms like FATAL, INVALID, BAD Audio warnings Avoid UPPERCASE and long code numbers Messages should be precise rather than vague Provide context-sensitive help

www.id-book.com

1/10/13

Should computers say they re sorry?

More helpful error message The requested page /helpme is not available on the web server. If you followed a link or bookmark to get to this page, please let us know, so that we can fix the problem. Please include the URL of the referring page as well as the URL of the missing page. Otherwise check that you have typed the address of the web page correctly. The Web site you seek Cannot be located, but Countless more exist.

•  Reeves and Naas (1996) argue that computers should be made to apologize •  Should emulate human etiquette •  Would users be as forgiving of computers saying sorry as people are of each other when saying sorry? •  How sincere would they think the computer was being? For example, after a system crash: –  I m really sorry I crashed. I ll try not to do it again

•  How else should computers communicate with users? www.id-book.com

Persuasive technologies and behavioral change

–  Pop-up ads, warning messages, reminders, prompts, personalized messages, recommendations, Amazon 1-click –  Commonly referred to as nudging

Nintendo s Pocket Pikachu

•  Interacive computing systems deliberately designed to change people s attitudes and behaviors (Fogg, 2003) •  A diversity of techniques now used to change what they do or think

www.id-book.com

How effective?

•  Changing bad habits and improving well being –  Designed to motivate children to be more physically active on a regular basis –  owner of the digital pet that lives in the device is required to walk, run, or jump –  If owner does not exercise the virtual pet becomes angry and refuses to play anymore

www.id-book.com

Which is most effective?

•  Is the use of novel forms of interactive technologies (e.g., the combination of sensors and dynamically updated information) that monitor, nag, or send personalized messages intermittently to a person more effective at changing a person s behavior than non-interactive methods, such as the placement of warning signs, labels, or ads in prominent positions?

www.id-book.com

1/10/13

Energy reduction

Phishing and trust •  Web used to deceive people into parting with personal details –  e.g. Paypal, eBay and won the lottery letters •  Allows Internet fraudsters to access their bank accounts and draw money from them •  Many vulnerable people fall for it •  The art of deception is centuries old but internet allows ever more ingeniuos ways to trick people

www.id-book.com

Anthropomorphism

Which do you prefer? 1. As a welcome message

•  Attributing human-like qualities to inanimate objects (e.g. cars, computers)

•  Hello Chris! Nice to see you again. Welcome back. Now what were we doing last time? Oh yes, exercise 5. Let s start again.

•  Well known phenomenon in advertising –  Dancing butter, drinks, breakfast cereals

•  User 24, commence exercise 5.

•  Much exploited in human-computer interaction –  Make user experience more enjoyable, more motivating, make people feel at ease, reduce anxiety www.id-book.com

www.id-book.com

Evidence to support anthropomorphism

Which do you prefer? 2. Feedback when get something wrong

•  Reeves and Naas (1996) found that computers that flatter and praise users in education software programs -> positive impact on them

Now Chris, that s not right. You can do better than that.Try again. 2.  Incorrect. Try again.

Your question makes an important and useful distinction. Great job!

Is there a difference as to what you prefer depending on type of message? Why?

www.id-book.com

•  Students were more willing to continue with exercises with this kind of feedback

www.id-book.com

1/10/13

Virtual characters

Criticism of anthropomorphism •  Deceptive, make people feel anxious, inferior or stupid •  People tend not to like screen characters that wave their fingers at the user and say: –  Now Chris, that s not right. You can do better than that.Try again.

•

•  Many prefer the more impersonal: –  Incorrect. Try again.

•

•  Studies have shown that personalized feedback is considered to be less honest and makes users feel less responsible for their actions (e.g. Quintanar, 1982)

www.id-book.com

Appearing on our screens in the form of: –

Sales agents, characters in videogames, learning companions, wizards, pets, newsreaders

Provides a persona that is welcoming, has personality and makes user feel involved with them

www.id-book.com

Disadvantages

Rea the realtor •  Rea showing user an apartment

•  Can lead people into false sense of belief, enticing them to confide personal secrets with chatterbots •  Annoying and frustrating

•  Human-like body •  Uses gesture, non-verbal communication (facial expressions, winks) while talking

–  e.g. Clippy

•  May not be trustworthy

•  Sophisticated AI techniques used to enable this form of interaction

–  virtual shop assistants?

Cassell, 2000, MIT www.id-book.com

www.id-book.com

Conversation with Rea •  •  •  •  •  •  •  •  •  •  •  •  •

Virtual agents

Mike approaches screen and Rea turns to face him and says: Hello. How can I help you? Mike: I’m looking to buy a place near MIT. Rea nods, indicating she is following. Rea: I have a house to show you. (picture of a house appears on the screen) Rea: it is in Somerville. Mike: Tell me about it. Rea looks up and away while she plans what to say. Rea: It’s big. Rea makes an expansive gesture with her hands. Mike brings his hands up as if to speak, so Rea does not continue, waiting for him to speak. Mike: Tell me more about it. Rea: Sure thing. It has a nice garden...

•  What do the virtual agents do? •  Do they elicit an emotional response in you? •  Do you trust them? •  What is the style of interaction? •  What facial expression do they have? •  Are they believable, pushy, helpful? •  Would it be different if they were male? If so, how?

•  Would you buy a house from her? www.id-book.com

www.id-book.com

1/10/13

What makes a virtual agent believable?

Robot-like or cuddly? •  Which do you prefer and why?

•  Believability refers to the extent to which users come to believe an agent s intentions and personality •  Appearance is very important –  Are simple cartoon-like characters or more realistic characters, resembling the human form more believable?

•  Behavior is very important –  How an agent moves, gestures and refers to objects on the screen –  Exaggeration of facial expressions and gestures to show underlying emotions (c.f. animation industry)

www.id-book.com

Emotional design model

Claims from model

•  Norman, Ortony and Revelle (2004) model of emotion

•  Our emotional state changes how we think –  when frightened or angry we focus narrowly and body responds by tensing muscles and sweating •  more likely to be less tolerant

–  when happy we are less focused and the body relaxes •  more likely to overlook minor problems and be more creative

www.id-book.com

Implications

Pleasure model

•  Should we, therefore, create products that adapt according to people s different emotional states?

•  Jordon (2000) based on Tiger s (1992) framework of pleasure •  Focuses on the pleasurable aspects of our interactions with products

–  When people are feeling angry should an interface be more attentive and informative than when they are happy?

–  (i) physio-pleasure –  (ii) socio-pleasure –  (iii) psycho-pleasure –  (iv) ideo-pleasure (cognitive)

•  Is Norman right? –  designers can get away with more for products intended to be used during leisure time than those designed for serious tasks

www.id-book.com

1/10/13

Technology as Experience

Summary

•  McCarthy and Wright (2004) framework of the user experience in terms of how it is felt by the user •  Draws from Pragmatism, which focus on the sense-making aspects of human experience •  Made up of 4 core threads

•  Emotional interaction is concerned with how interactive systems make people respond in emotional ways •  Well-designed interfaces can elicit good feelings in users •  Expressive interfaces can provide reassuring feedback •  Badly designed interfaces make people angry and frustrated •  Anthropomorphism is the attribution of human qualities to objects •  An increasingly popular form of anthropomorphism is to create interface agents and robot pets •  Models of affect provide a way of conceptualizing emotional and pleasurable aspects of interaction design

–  compositional, –  sensual, –  emotional –  spatio-temporal www.id-book.com

www.id-book.com

1/10/13

Overview Chapter 6

•  Interface types – highlight the main design and research issues for each of the different interfaces

Interfaces

•  Consider which interface is best for a given application or activity

www.id-book.com

1. Command-based •  Commands such as abbreviations (e.g. ls) typed in at the prompt to which the system responds (e.g. listing current files) •  Some are hard wired at keyboard, others can be assigned to keys •  Efficient, precise, and fast •  Large overhead to learning set of commands

www.id-book.com

Second Life command-based interface for visually impaired users

www.id-book.com

Research and design issues •  Form, name types and structure are key research questions •  Consistency is most important design principle –  e.g. always use first letter of command

•  Command interfaces popular for web scripting

www.id-book.com

1/10/13

2. WIMP and GUI

GUIs

•  Xerox Star first WIMP -> rise to GUIs

•  Same basic building blocks as WIMPs but more varied

•  Windows –  could be scrolled, stretched, overlapped, opened, closed, and moved around the screen using the mouse

– Color, 3D, sound, animation, – Many types of menus, icons, windows

•  Icons

•  New graphical elements, e.g.

–  represented applications, objects, commands, and tools that were opened when clicked on

– toolbars, docks, rollovers

•  Menus –  offering lists of options that could be scrolled through and selected

•  Pointing device –  a mouse controlling the cursor as a point of entry to the windows, menus, and icons on the screen www.id-book.com

Windows

www.id-book.com

Apple s shrinking windows

•  Windows were invented to overcome physical constraints of a computer display –  enable more information to be viewed and tasks to be performed

•  Scroll bars within windows also enable more information to be viewed •  Multiple windows can make it difficult to find desired one –  listing, iconising, shrinking are techniques that help

www.id-book.com

Safari panorama window view

www.id-book.com

Selecting a country from a scrolling window

www.id-book.com

1/10/13

Is this method any better?

Research and design issues •  Window management –  enables users to move fluidly between different windows (and monitors)

•  How to switch attention between windows without getting distracted •  Design principles of spacing, grouping, and simplicity should be used

www.id-book.com

Menus

www.id-book.com

iPod flat menu structure

•  A number of menu interface styles

A sequence of options selected shown in the 4 windows

–  flat lists, drop-down, pop-up, contextual, and expanding ones, e.g., scrolling and cascading

•  Flat menus –  good at displaying a small number of options at the same time and where the size of the display is small, e.g. iPods –  but have to nest the lists of options within each other, requiring several steps to get to the list with the desired option –  moving through previous screens can be tedious www.rainbow.gr/images/ rainbow/news/press/menu.jpg www.id-book.com

www.id-book.com

Expanding menus

Cascading menu

•  Enables more options to be shown on a single screen than is possible with a single flat menu •  More flexible navigation, allowing for selection of options to be done in the same window •  Most popular are cascading ones –  primary, secondary and even tertiary menus –  downside is that they require precise mouse control –  can result in overshooting or selecting wrong options

www.id-book.com

1/10/13

Contextual menus

Windows Jump List Menu

•  Provide access to often-used commands that make sense in the context of a current task •  Appear when the user presses the Control key while clicking on an interface element –  e.g., clicking on a photo in a website together with holding down the Control key results in options open it in a new window, save it, or copy it

•  Helps overcome some of the navigation problems associated with cascading menus www.id-book.com

www.id-book.com

Research and design issues

–  Quit and save need to be far apart

•  Many international guidelines exist emphasizing depth/breadth, structure and navigation –  e.g. ISO 9241

•  Icons are assumed to be easier to learn and remember than commands •  Can be designed to be compact and variably positioned on a screen •  Now pervasive in every interface –  e.g. represent desktop objects, tools (e.g. paintbrush), applications (e.g. web browser), and operations (e.g. cut, paste, next, accept, change)

www.id-book.com

Icons

•  The mapping between the representation and underlying referent can be: –  similar (e.g., a picture of a file to represent the object

–  black and white -> color, shadowing, photorealistic images, 3D rendering, and animation

file), –  analogical (e.g., a picture of a pair of scissors to represent cut ) –  arbitrary (e.g., the use of an X to represent delete )

•  Many designed to be very detailed and animated making them both visually attractive and informative •  GUIs now highly inviting, emotionally appealing, and feel alive 23

Icon forms

•  Since the Xerox Star days icons have changed in their look and feel:

www.id-book.com

Icon design

•  What are best names/labels/phrases to use? •  Placement in list is critical

www.id-book.com

•  Most effective icons are similar ones •  Many operations are actions making it more difficult to represent them –  use a combination of objects and symbols that capture the salient part of an action ©2011

www.id-book.com

1/10/13

Early icons

www.id-book.com

Newer icons

www.id-book.com

Simple icons plus labels

Activity •  Sketch simple icons to represent the operations to appear on a digital camera LCD screen: –  Delete last picture taken –  Delete all pictures stored –  Format memory card

www.id-book.com

Toshiba s icons

•  There is a wealth of resources now so do not have to draw or invent new icons from scratch

Which is which? Are they easy to understand Are they distinguishable? What representation forms are used? •  How do yours compare?

Research and design issues

•  •  •  •

www.id-book.com

–  guidelines, style guides, icon builders, libraries

•  Text labels can be used alongside icons to help identification for small icon sets •  For large icon sets (e.g. photo editing or word processing) use rollovers

www.id-book.com

1/10/13

BioBlast multimedia learning environment

3. Multimedia •  Combines different media within a single interface with various forms of interactivity –  graphics, text, video, sound, and animations

•  Users click on links in an image or text

-> another part of the program -> an animation or a video clip is played ->can return to where they were or move on to another place

www.id-book.com

Pros and cons

–  provide hands-on interactivities and simulations that the user has to complete to solve a task –  Use dynalinking, where information depicted in one window explicitly changes in relation to what happens in another (Scaife and Rogers, 1996).

•  Several guidelines that recommend how to combine multiple media for different kinds of task

www.id-book.com

Pros and cons

•  Computer-generated graphical simulations providing: –  the illusion of participation in a synthetic environment rather than external observation of such an environment (Gigante, 1993)

•  provide new kinds of experience, enabling users to interact with objects and navigate in 3D space •  Create highly engaging user experiences

•  How to design multimedia to help users explore, keep track of, and integrate the multiple representations

4. Virtual reality

www.id-book.com

Research and design issues

•  Facilitates rapid access to multiple representations of information •  Can provide better ways of presenting information than can any media alone •  Can enable easier learning, better understanding, more engagement, and more pleasure •  Can encourage users to explore different parts of a game or story •  Tendency to play video clips and animations, while skimming through accompanying text or diagrams

www.id-book.com

•  Can have a higher level of fidelity with objects they represent compared to multimedia •  Induces a sense of presence where someone is totally engrossed by the experience –  a state of consciousness, the (psychological) sense of being in the virtual environment (Slater and Wilbur, 1999)

•  Provides different viewpoints: 1st and 3rd person •  Head-mounted displays are uncomfortable to wear, and can cause motion sickness and disorientation

www.id-book.com

1/10/13

Virtual Gorilla Project

Research and design issues •  Much research on how to design safe and realistic VRs to facilitate training –  e.g. flying simulators –  help people overcome phobias (e.g. spiders, talking in public)

•  Design issues –  how best to navigate through them (e.g. first versus third person) –  how to control interactions and movements (e.g. use of head and body movements) –  how best to interact with information (e.g. use of keypads, pointing, joystick buttons); –  level of realism to aim for to engender a sense of presence www.id-book.com

Which is the most engaging game of Snake?

www.id-book.com

5. Information visualization •  Computer-generated interactive graphics of complex data •  Amplify human cognition, enabling users to see patterns, trends, and anomalies in the visualization (Card et al, 1999) •  Aim is to enhance discovery, decision-making, and explanation of phenomena •  Techniques include: –  3D interactive maps that can be zoomed in and out of and which present data via webs, trees, clusters, scatterplot diagrams, and interconnected nodes

www.id-book.com

Research and design issues

6. Web

•  whether to use animation and/or interactivity •  what form of coding to use, e.g. color or text labels •  whether to use a 2D or 3D representational format •  what forms of navigation, e.g. zooming or panning, •  what kinds and how much additional information to provide, e.g. rollovers or tables of text •  What navigational metaphor to use www.id-book.com

•  Early websites were largely text-based, providing hyperlinks •  Concern was with how best to structure information at the interface to enable users to navigate and access it easily and quickly •  Nowadays, more emphasis on making pages distinctive, striking, and pleasurable

www.id-book.com

1/10/13

Usability versus attractive?

In your face ads

•  Vanilla or multi-flavor design? –  Ease of finding something versus aesthetic and enjoyable experience

•  Web designers are: –

thinking great literature

•  Users read the web like a: –

billboard going by at 60 miles an hour (Krug, 2000)

•  Need to determine how to brand a web page to catch and keep eyeballs www.id-book.com

•  Web advertising is often intrusive and pervasive •  Flashing, aggressive, persistent, annoying •  Often need to be actioned to get rid of •  What is the alternative?

www.id-book.com

Research and design issues

•  Look at the Nike.com website •  What kind of website is it? •  How does it contravene the design principles outlined by Veen? •  Does it matter? •  What kind of user experience is it providing for? •  What was your experience of engaging with it?

(1)Where am I? (2)Where can I go? (3) What s here?

Activity

•  Need to consider how best to design, present, and structure information and system behavior •  But also content and navigation are central •  Veen s design principles

www.id-book.com

Nike.com

Consumer electronics and appliances

•  Everyday devices in home, public place, or car –  e.g. washing machines, remotes, photocopiers, printers and navigation systems)

•  And personal devices –  e.g. MP3 player, digital clock and digital camera

•  Used for short periods –  e.g. putting the washing on, watching a program, buying a ticket, changing the time, taking a snapshot

•  Need to be usable with minimal, if any, learning

www.id-book.com

1/10/13

A toaster

Research and design issues •  Need to design as transient interfaces with short interactions •  Simple interfaces •  Consider trade-off between soft and hard controls – e.g. buttons or keys, dials or scrolling

www.id-book.com

8. Mobile

–  many apps not designed for any need, want or use but purely for idle moments to have some fun –  e.g. iBeer developed by magician Steve Sheraton –  ingenious use of the accelerometer that is inside the phone ©2011

iBeer app

www.id-book.com

•  A whole new user experience that was designed primarily for people to enjoy

–  used in restaurants to take orders –  car rentals to check in car returns –  supermarkets for checking stock –  in the streets for multi-user gaming –  in education to support life-long learning 51

The advent of the iPhone app

•  Handheld devices intended to be used while on the move •  Have become pervasive, increasingly used in all aspects of everyday and working life •  Applications running on handhelds have greatly expanded, e.g.

www.id-book.com

QR codes and cell phones

www.id-book.com

1/10/13

Simple or complex phone for you and your grandmother?

Mobile challenges •  Small screens, small number of keys and restricted number of controls •  Many smartphones now use multi-touch surface displays •  Innovative physical designs including: –  roller wheels, rocker dials, up/down lips on the face of phones, 2-way and 4-way directional keypads, softkeys, silk-screened buttons

•  Usability and preference varies –  depends on the dexterity and commitment of the user www.id-book.com

www.id-book.com

Research and design issues

9. Speech

•  mobile interfaces can be tricky and cumbersome to use for those with poor manual dexterity or fat fingers •  Key concern is designing for small screen real estate and limited control space

•  Where a person talks with a system that has a spoken language application, e.g., timetable, travel planner •  Used most for inquiring about very specific information, e.g. flight times or to perform a transaction, e.g. buy a ticket •  Also used by people with disabilities

• e.g. mobile browsers allow users to view and navigate the internet, magazines etc., in a more streamlined way compared with PC web browsers www.id-book.com

Have speech interfaces come of age?

–  e.g. speech recognition word processors, page scanners, web readers, home control systems

www.id-book.com

Get me a human operator! •  Most popular use of speech interfaces currently is for call routing •  Caller-led speech where users state their needs in their own words –  e.g. I m having problems with my voice mail

•  Idea is they are automatically forwarded to the appropriate service •  What is your experience of speech systems?

www.id-book.com

1/10/13

Format

Research and design issues

•  Directed dialogs are where the system is in control of the conversation •  Ask specific questions and require specific responses •  More flexible systems allow the user to take the initiative: –  e.g. I d like to go to Paris next Monday for two weeks.

•  More chance of error, since caller might assume that the system is like a human •  Guided prompts can help callers back on track –  e.g. Sorry I did not get all that. Did you say you wanted to fly next Monday?

www.id-book.com

•  How to design systems that can keep conversation on track –  help people navigate efficiently through a menu system –  enable them to easily recover from errors –  guide those who are vague or ambiguous in their requests for information or services

•  Type of voice actor (e.g. male, female, neutral, or dialect) –  do people prefer to listen to and are more patient with a female or male voice, a northern or southern accent? www.id-book.com

10. Pen

Pros and cons

•  Enable people to write, draw, select, and move objects at an interface using lightpens or styluses –  capitalize on the well-honed drawing skills developed from childhood

•  Allows users to quickly and easily annotate existing documents •  Can be difficult to see options on the screen because a user s hand can occlude part of it when writing •  Can have lag and feel clunky

•  Digital pens, e.g. Anoto, use a combination of ordinary ink pen with digital camera that digitally records everything written with the pen on special paper

www.id-book.com

11. Touch

•  Multi-touch support a range of more dynamic finger tip actions, e.g. swiping, flicking, pinching, pushing and tapping •  Now used for many kinds of displays, such as Smartphones, iPods, tablets and tabletops

Research and design issues

•  Touch screens, such as walk-up kiosks, detect the presence and location of a person s touch on the display

www.id-book.com

•  More fluid and direct styles of interaction involving freehand and pen-based gestures •  Core design concerns include whether size, orientation, and shape of touch displays effect collaboration •  Much faster to scroll through wheels, carousels and bars of thumbnail images or lists of options by finger flicking •  More cumbersome, error-prone and slower to type using a virtual keyboard on a touch display than using a physical keyboard

www.id-book.com

1/10/13

Research and design issues

12. Air-based gestures

•  Will finger-flicking, stroking and touching a screen result in new ways of consuming, reading, creating and searching digital content? www.id-book.com

•  Uses camera recognition, sensor and computer vision techniques –  can recognize people s body, arm and hand gestures in a room –  systems include Kinect and EyeToy

Home entertainment

www.id-book.com

Research and design issues

•  Universal appeal

•  How does computer recognize and delineate players gestures?

– young children, grandparents, professional gamers, technophobes

– Deictic and hand waving

•  Does holding a control device feel more intuitive than controller free gestures? – For gaming, exercising, dancing

www.id-book.com

13. Haptic –  applying vibration and forces to a person s body, using actuators that are embedded in their clothing or a device they are carrying, such as a cell phone

•  Can enrich user experience or nudge them to correct error •  Can also be used to simulate the sense of touch between remote people who want to communicate 71

Realtime vibrotactile feedback

•  Tactile feedback

www.id-book.com

•  Provides nudges when playing incorrectly •  Uses motion capture •  Nudges are vibrations on arms and hands

www.id-book.com

1/10/13

Research and design issues

14. Multi-modal

•  Where best to place actuators on body •  Whether to use single or sequence of touches •  When to buzz and how intense •  How does the wearer feel it in different contexts?

www.id-book.com

•  Meant to provide enriched and complex user experiences –  multiplying how information is experienced using different modalities, i.e. touch, sight, sound, speech –  support more flexible, efficient, and expressive means of human–computer interaction –  Most common is speech and vision

www.id-book.com

Research and design issues

A smartboard

www.id-book.com

15. Shareable

•  Need to recognize and analyse speech, gesture, and eye gaze •  what is gained from combining different input and outputs •  Is talking and gesturing, as humans do with other humans, a natural way of interacting with a computer?

www.id-book.com

•  Shareable interfaces are designed for more than one person to use –  provide multiple inputs and sometimes allow simultaneous input by co-located groups –  large wall displays where people use their own pens or gestures –  interactive tabletops where small groups interact with information using their fingertips –  e.g. DiamondTouch, Smart Table and Surface

www.id-book.com

DiamondTouch Tabletop

www.id-book.com

1/10/13

Advantages

The Drift Table

•  Provide a large interactional space that can support flexible group working •  Can be used by multiple users –  can point to and touch information being displayed –  simultaneously view the interactions and have same shared point of reference as others

•  Can support more equitable participation compared with groups using single PC

www.id-book.com

Research and design issues

16. Tangible

•  More fluid and direct styles of interaction involving freehand and pen-based gestures •  Core design concerns include whether size, orientation, and shape of the display have an effect on collaboration •  horizontal surfaces compared with vertical ones support more turn-taking and collaborative working in co-located groups •  Providing larger-sized tabletops does not improve group working but encourages more division of labor

www.id-book.com

•  Type of sensor-based interaction, where physical objects, e.g., bricks, are coupled with digital representations •  When a person manipulates the physical object/s it causes a digital effect to occur, e.g. an animation •  Digital effects can take place in a number of media and places or can be embedded in the physical object www.id-book.com

Examples

Flow blocks

•  Chromarium cubes –  when turned over digital animations of color are mixed on an adjacent wall –  faciliates creativity and collaborative exploration

•  Flow Blocks –  depict changing numbers and lights embedded in the blocks –  vary depending on how they are connected together

•  Urp –  physical models of buildings moved around on tabletop –  used in combination with tokens for wind and shadows > digital shadows surrounding them to change over time www.id-book.com

www.id-book.com

1/10/13

Urp

Benefits •  Can be held in both hands and combined and manipulated in ways not possible using other interfaces –  allows for more than one person to explore the

interface together –  objects can be placed on top of each other, beside each other, and inside each other –  encourages different ways of representing and exploring a problem space

•  People are able to see and understand situations differently –  can lead to greater insight, learning, and problemsolving than with other kinds of interfaces –  can facilitate creativity and reflection www.id-book.com

•  Develop new conceptual frameworks that identify novel and specific features •  The kind of coupling to use between the physical action and digital effect –  If it is to support learning then an explicit mapping between action and effect is critical –  If it is for entertainment then can be better to design it to be more implicit and unexpected

•  What kind of physical artifact to use –  Bricks, cubes, and other component sets are most commonly used because of flexibility and simplicity –  Stickies and cardboard tokens can also be used for placing material onto a surface 87

17. Augmented and mixed reality

Research and design issues

www.id-book.com

•  Augmented reality - virtual representations are superimposed on physical devices and objects •  Mixed reality - views of the real world are combined with views of a virtual environment •  Many applications including medicine, games, flying, and everyday exploring

www.id-book.com

Examples

An augmented map

•  In medicine –  virtual objects, e.g. X-rays and scans, are overlaid on part of a patient s body –  aid the physician s understanding of what is being examined or operated

•  In air traffic control –  dynamic information about aircraft overlaid on a video screen showing the real planes, etc. landing, taking off, and taxiing –  Helps identify planes difficult to make out www.id-book.com

www.id-book.com

1/10/13

Smart augmented reality?

Research and design issues

•  Smartphone apps intended to guide people walking in a city

•  What kind of digital augmentation? –  When and where in physical environent? –  Needs to stand out but not distract from ongoing task –  Need to be able to align with real world objects

–  arrows and local information (e.g. nearest McDonalds) are overlaid on a picture of the street the person is walking in –  Will this mean people spending most of their time glued to their smartphone rather than looking at the sites?

www.id-book.com

•  What kind of device? –  Smartphone, head up display or other?

www.id-book.com

Steve Mann - pioneer of wearables

18.Wearables •  First developments were head- and eyewearmounted cameras that enabled user to record what was seen and to access digital information •  Since, jewellery, head-mounted caps, smart fabrics, glasses, shoes, and jackets have all been used –  provide the user with a means of interacting with digital information while on the move

•  Applications include automatic diaries, tour guides, cycle indicators and fashion clothing

www.id-book.com

Research and design issues

19. Robots

•  Comfort

•  Four types

–  needs to be light, small, not get in the way, fashionable, and preferably hidden in the clothing

•  Hygiene –  is it possible to wash or clean the clothing once worn?

•  Ease of wear –  how easy is it to remove the electronic gadgetry and replace it?

–  remote robots used in hazardous settings –  domestic robots helping around the house –  pet robots as human companions –  sociable robots that work collaboratively with humans, and communicate and socialize with them – as if they were our peers

•  Usability –  how does the user control the devices that are embedded in the clothing?

www.id-book.com

1/10/13

Advantages

Research and design issues •  How do humans react to physical robots designed to exhibit behaviors (e.g. making facial expressions) compared with virtual ones? •  Should robots be designed to be human-like or look like and behave like robots that serve a clearly defined purpose? •  Should the interaction be designed to enable people to interact with the robot as if it was another human being or more human-computerlike (e.g. pressing buttons to issue commands)?

•  Pet robots are assumed to have therapeutic qualities, being able to reduce stress and loneliness •  Remote robots can be controlled to investigate bombs and other dangerous materials

www.id-book.com

20. Brain-computer

Brainball game

•  Brain–computer interfaces (BCI) provide a communication pathway between a person s brain waves and an external device, such as a cursor on a screen •  Person is trained to concentrate on the task, e.g. moving the cursor •  BCIs work through detecting changes in the neural functioning in the brain

www.id-book.com

Which interface?

•  Is multimedia better than tangible interfaces for learning? •  Is speech as effective as a command-based interface? •  Is a multimodal interface more effective than a monomodal interface? •  Will wearable interfaces be better than mobile interfaces for helping people find information in foreign cities? •  Are virtual environments the ultimate interface for playing games? •

100

Will shareable interfaces be better at supporting communication and collaboration compared with using

•  Will depend on task, users, context, cost, robustness, etc. •  Mobile platforms taking over from PCs •  Speech interfaces also being used much more for a variety of commercial services •  Appliance and vehicle interfaces becoming more important •  Shareable and tangible interfaces entering our homes, schools, public places, and workplaces

networked desktop PCs?

www.id-book.com

101

www.id-book.com

102

1/10/13

Summary •  Many innovative interfaces have emerged post the WIMP/GUI era, including speech, wearable, mobile, brain and tangible •  Many design and research questions need to be considered to decide which to use •  An important concern that underlies the design of any kind of interface is how information is represented to the user so they can carry out ongoing activity or task

www.id-book.com

103

1/10/13

Overview Chapter 7

•  Five key issues of data gathering •  Data recording

Data Gathering

•  Interviews •  Questionnaires •  Observation •  Choosing and combining techniques

www.id-book.com

Five key issues

Data recording

1.  Setting goals •

•  Notes, audio, video, photographs

Decide how to analyze data once collected

2.  Identifying participants •

Decide who to gather data from

•  Notes plus photographs •  Audio plus photographs •  Video

3.  Relationship with participants •  •

Clear and professional Informed consent when appropriate

4.  Triangulation •

Look at data from more than one perspective

5.  Pilot studies •  www.id-book.com

Small trial of main study 3

www.id-book.com

Interviews

Interview questions •  Two types:

•  Unstructured - are not directed by a script. Rich but not replicable. •  Structured - are tightly scripted, often like a questionnaire. Replicable but may lack richness. •  Semi-structured - guided by a script but interesting issues can be explored in more depth. Can provide a good balance between richness and replicability.

www.id-book.com

−  ‘closed questions’ have a predetermined answer format, e.g., ‘yes’ or ‘no’ −  ‘open questions’ do not have a predetermined format

•  Closed questions are easier to analyze •  Avoid: −  Long questions −  Compound sentences - split them into two −  Jargon and language that the interviewee may not understand −  Leading questions that make assumptions e.g., why do you like …? −  Unconscious biases e.g., gender stereotypes ©2011

www.id-book.com

1/10/13

Enriching the interview process

Running the interview •  Introduction – introduce yourself, explain the goals of the interview, reassure about the ethical issues, ask to record, present any informed consent form. •  Warm-up – make first questions easy and nonthreatening. •  Main body – present questions in a logical order •  A cool-off period – include a few easy questions to defuse tension at the end •  Closure – thank interviewee, signal the end, e.g, switch recorder off.

www.id-book.com

•  Props - devices for prompting interviewee, e.g., a prototype, scenario

www.id-book.com

Questionnaires

Questionnaire design

•  Questions can be closed or open •  Closed questions are easier to analyze, and may be done by computer •  Can be administered to large populations •  Paper, email and the web used for dissemination •  Sampling can be a problem when the size of a population is unknown as is common online

•  The impact of a question can be influenced by question order. •  Do you need different versions of the questionnaire for different populations? •  Provide clear instructions on how to complete the questionnaire. •  Strike a balance between using white space and keeping the questionnaire compact. •  Decide on whether phrases will all be positive, all negative or mixed.

www.id-book.com

Question and response format •  Checkboxes that offer many options •  Rating scales –  Likert scales

•

–  semantic scales –  3, 5, 7 or more points?

•  •  •

•  Open-ended responses

Encouraging a good response •  •  •  •

•  ‘Yes’ and ‘No’ checkboxes

www.id-book.com

Make sure purpose of study is clear Promise anonymity Ensure questionnaire is well designed Offer a short version for those who do not have time to complete a long questionnaire If mailed, include a stamped addressed envelope Follow-up with emails, phone calls, letters Provide an incentive 40% response rate is high, 20% is often acceptable

www.id-book.com

1/10/13

Advantages of online questionnaires •  •  •  •  •

Problems with online questionnaires

Responses are usually received quickly No copying and postage costs Data can be collected in database for analysis Time required for data analysis is reduced Errors can be corrected easily

www.id-book.com

•  Sampling is problematic if population size is unknown •  Preventing individuals from responding more than once •  Individuals have also been known to change questions in email questionnaires

•  Direct observation in the field

•  Direct observation in controlled environments •  Indirect observation: tracking users’ activities –  Diaries –  Interaction logging

•  The Goetz and LeCompte (1984) framework: - Who is present? - What is their role? - What is happening? - When does the activity occur? - Where is it happening? - Why is it happening? - How is the activity organized? www.id-book.com

Ethnography (1)

Ethnography (2)

•  Ethnography is a philosophy with a set of techniques that include participant observation and interviews •  Debate about differences between participant observation and ethnography •  Ethnographers immerse themselves in the culture that they study •  A researcher’s degree of participation can vary along a scale from ‘outside’ to ‘inside’ •  Analyzing video and data logs can be timeconsuming •  Collections of comments, incidents, and artifacts are made www.id-book.com

•  - The person. Who? - The place. Where? - The thing. What?

–  Structuring frameworks –  Degree of participation (insider or outsider) –  Ethnography

Structuring frameworks to guide observation

Observation

www.id-book.com

•  Co-operation of people being observed is required •  Informants are useful •  Data analysis is continuous •  Interpretivist technique

•  Questions get refined as understanding grows •  Reports usually contain examples www.id-book.com

1/10/13

Online Ethnography

An ethnographic project for you … •  Join www.ActiveWorlds.com or go to another chat room of your choice •  ActiveWorlds is a 3-D chatroom environment in which you can visit different environments and chat with the people that you meet there •  To use ActiveWorlds you will need to check the instructions that they provide and download the appropriate software to run on your computer

•  Virtual, Online, Netnography •  Online and offline activity •  Interaction online differs from faceto-face •  Virtual worlds have a persistence that physical worlds do not have •  Ethical considerations and presentation issues are different

www.id-book.com

•  Select one of the worlds to visit and choose an avatar (a graphical personification) to represent you. •  Spend one to two hours doing an ethnographic study. •  Use one of the frameworks discussed in the previous slides to guide you and write a one or two page report about your study. •  Also notice and report on any usability issues you encounter and on user experiences in this environment. www.id-book.com

Choosing and combining techniques •  Depends on –  The –  The –  The –  The

www.id-book.com

focus of the study participants involved nature of the technique resources available

www.id-book.com

Direct observation in a controlled environment •  Think-aloud technique

Indirect observation •  Diaries •  Interaction logs •  Web analytics www.id-book.com

Summary •  Three main data gathering methods: interviews, questionnaires, observation •  Five key issues of data gathering: goals, choosing participants, triangulation, participant relationship, pilot •  Interviews may be structured, semi-structured or unstructured •  Questionnaires may be on paper, online or telephone •  Observation may be direct or indirect, in the field or in controlled setting •  Techniques can be combined depending on study focus, participants, nature of technique and available resources www.id-book.com

1/10/13

Overview Chapter 8

•  Qualitative and quantitative

Data analysis, interpretation and presentation

•  Simple quantitative analysis •  Simple qualitative analysis •  Tools to support data analysis •  Theoretical frameworks: grounded theory, distributed cognition, activity theory •  Presenting the findings: rigorous notations, stories, summaries

www.id-book.com

Quantitative and qualitative

•  •

•

Simple quantitative analysis

Quantitative data – expressed as numbers Qualitative data – difficult to measure sensibly as numbers, e.g. count number of words to measure dissatisfaction Quantitative analysis – numerical methods to ascertain size, magnitude, amount Qualitative analysis – expresses the nature of elements and is represented as themes, patterns, stories Be careful how you manipulate data and numbers!

–  Mean: add up values and divide by number of data points –  Median: middle value of data when ranked –  Mode: figure that appears most often in the data

•  Percentages •  Graphical representations give overview of data Number of errors made

< once a day

once a day

6 4

once a week

2 or 3 times a week

0 5

once a month

User

Number of errors made

Internet use

www.id-book.com

•  Averages

Number of errors made

•  •

www.id-book.com

Number of errors made

www.id-book.com

4.5 4 3.5 3 2.5 2 1.5 1 0.5 0 1

User

Visualizing log data Interaction profiles of players in online game

Web analytics

Log of web page activity www.id-book.com

www.id-book.com

1/10/13

Tools to support data analysis

Simple qualitative analysis •  Recurring patterns or themes

•  Spreadsheet – simple to use, basic graphs

–  Emergent from data, dependent on observation framework if used

•  Statistical packages, e.g. SPSS •  Qualitative data analysis tools

•  Categorizing data –  Categorization scheme may be emergent or pre-specified

•  Looking for critical incidents

–  Categorization and theme-based analysis, e.g. N6 –  Quantitative analysis of text-based data

–  Helps to focus in on key events

•  CAQDAS Networking Project, based at the University of Surrey (http://caqdas.soc.surrey.ac.uk/) www.id-book.com

Theoretical frameworks for qualitative analysis

www.id-book.com

Grounded Theory •  Aims to derive theory from systematic analysis of data

•  Basing data analysis around theoretical frameworks provides further insight •  Three such frameworks are:

•  Based on categorization approach (called here ‘coding’)

–  Grounded Theory –  Distributed Cognition –  Activity Theory

•  Three levels of ‘coding’ –  Open: identify categories –  Axial: flesh out and link to subcategories –  Selective: form theoretical scheme

•  Researchers are encouraged to draw on own theoretical backgrounds to inform analysis www.id-book.com

www.id-book.com

Distributed Cognition

•  Explains human behavior in terms of our practical activity with the world •  Provides a framework that focuses analysis around the concept of an ‘activity’ and helps to identify tensions between the different elements of the system •  Two key models: one outlines what constitutes an ‘activity’; one models the mediating role of artifacts

•  Used for analyzing collaborative work •  Focuses on information propagation & transformation

Activity Theory

•  The people, environment & artefacts are regarded as one cognitive system

www.id-book.com

1/10/13

Engeström’s (1999) activity system model

Individual model

www.id-book.com

•  Only make claims that your data can support •  The best way to present your findings depends on the audience, the purpose, and the data gathering and analysis undertaken •  Graphical representations (as discussed above) may be appropriate for presentation •  Other techniques are: –  Rigorous notations, e.g. UML –  Using stories, e.g. to create scenarios –  Summarizing the findings 15

Summary

Presenting the findings

www.id-book.com

•  The data analysis that can be done depends on the data gathering that was done •  Qualitative and quantitative data may be gathered from any of the three main data gathering approaches •  Percentages and averages are commonly used in Interaction Design •  Mean, median and mode are different kinds of ‘average’ and can have very different answers for the same set of data •  Grounded Theory, Distributed Cognition and Activity Theory are theoretical frameworks to support data analysis •  Presentation of the findings should not overstate the evidence www.id-book.com

1/10/13

Overview Chapter 9

•  What is involved in Interaction Design?

The process of interaction design

–  –  –  –

Importance of involving users Degrees of user involvement What is a user-centered approach? Four basic activities

•  Some practical issues –  –  –  –

www.id-book.com

What is involved in Interaction Design?

–  –  –  –

Realistic expectations No surprises, no disappointments Timely training Communication, but no hype

–  Make the users active stakeholders –  More likely to forgive or accept problems –  Can make a big difference to acceptance and success of product

www.id-book.com

•  Member of the design team

What is a user-centered approach?

Degrees of user involvement

User-centered approach is based on:

Full time: constant input, but lose touch with users Part time: patchy input, and very stressful Short term: inconsistent across project life Long term: consistent, but lose touch with users

–  Early focus on users and tasks: directly studying cognitive, behavioral, anthropomorphic & attitudinal characteristics –  Empirical measurement: users reactions and performance to scenarios, manuals, simulations & prototypes are observed, recorded and analysed

•  Newsletters and other dissemination devices –  –

•  Ownership

•  Four approaches: user-centered design, activity-centered design, systems design, and genius design

–  –  –  –

•  Expectation management

–  a goal-directed problem solving activity informed by intended use, target domain, materials, cost, and feasibility –  a creative activity –  a decision-making activity to balance tradeoffs

www.id-book.com

Importance of involving users

•  It is a process:

www.id-book.com

Who are the users? What are ‘needs’? Where do alternatives come from? How do you choose among alternatives?

Reach wider selection of users Need communication both ways

–  Iterative design: when problems are found in user testing, fix them and carry out more tests

•  User involvement after product is released •  Combination of these approaches www.id-book.com

www.id-book.com

1/10/13

Four basic activities in Interaction Design

A simple interaction design lifecycle model

1.  Establishing requirements 2.  Designing alternatives 3.  Prototyping 4.  Evaluating www.id-book.com

Exemplifies a user-centered design approach 7

Some practical issues

•  Not as obvious as you think: –  –  –  –  –

•  What do we mean by needs ? •  How to generate alternatives •  How to choose among alternatives •  How to integrate interaction design activities with other models?

Who are the users/stakeholders?

•  Who are the users?

www.id-book.com

those those those those those

• Suppliers • Local shop owners

interact directly with the product manage direct users receive output from the product make the purchasing decision use competitor s products

•  Three categories of user (Eason, 1987): –  primary: frequent hands-on –  secondary: occasional or via someone else –  tertiary: affected by its introduction, or will influence its purchase

www.id-book.com

What do we mean by needs ?

Who are the stakeholders? Check-out operators

who who who who who

•  Users rarely know what is possible

•  Users can t tell you what they need to help them achieve their goals •  Instead, look at existing tasks: –  their context –  what information do they require? –  who collaborates to achieve the task? –  why is the task achieved the way it is?

•  Envisioned tasks: –  can be rooted in existing behaviour Managers and owners

www.id-book.com

Customers 11

–  can be described as future scenarios www.id-book.com

1/10/13

IDEO TechBox

How to generate alternatives •  Humans stick to what they know works •  But considering alternatives is important to break out of the box •  Designers are trained to consider alternatives, software people generally are not •  How do you generate alternatives? —  Flair and creativity : research and synthesis — Seek inspiration: look at similar products or look at very different products www.id-book.com

•  Library, database, website - all-in-one •  Contains physical gizmos for inspiration

From: www.ideo.com/ www.id-book.com

How to choose among alternatives

The TechBox

•  Evaluation with users or with peers, e.g. prototypes •  Technical feasibility: some not possible •  Quality thresholds: Usability goals lead to usability criteria set early on and check regularly — safety: how safe? — utility: which functions are superfluous? — effectiveness: appropriate support? task coverage, information available — efficiency: performance measurements

www.id-book.com

Testing prototypes to choose among alternatives

www.id-book.com

How to integrate interaction design in other models •  Lifecycle models from other disciplines •  Agile software development promising –  have development and design running in separate tracks –  maintain a coherent vision of the interface architecture

www.id-book.com

1/10/13

Summary Four basic activities in the design process 1.  2.  3.  4.

Establishing requirements Designing alternatives Prototyping Evaluating

User-centered design rests on three principles 1.  Early focus on users and tasks 2.  Empirical measurement using quantifiable & measurable usability criteria 3.  Iterative design

www.id-book.com

1/10/13

Overvie w

Chapter 10

Identifying needs and establishing requirements

•  The importance of requirements •  Different types of requirements •  Data gathering for requirements •  Task descriptions: Scenarios Use Cases Essential use cases •  Task analysis:

www.id-book.com

What, how and why?

www.id-book.com

Volere requirements template

Volere shell

www.id-book.com

What, how and why?

•  What Two aims: 1. Understand as much as possible about users, task, context 2. Produce a stable set of requirements •  How: Data gathering activities Data analysis activities Expression as ‘requirements’ All of this is iterative

www.id-book.com

HTA

www.id-book.com

1/10/13

Establishing requirements

Different kinds of requirements •  Functional: — What the system should do — Historically the main focus of requirements activities •  (Non-functional: memory size, response time...) •  Data: — What kinds of data need to be stored? — How will they be stored (e.g. database)?

•  What do users want? What do users need ? Requirements need clarification, refinement, completion, re-scoping Input: requirements document (maybe) Output: stable requirements •  Why ‘establish’? Requirements arise from understanding users’ needs Requirements can be justified & related to data www.id-book.com

www.id-book.com

Different kinds of requirements

An extreme example

Environment or context of use: —  physical: dusty? noisy? vibration? light? heat? humidity? …. (e.g. OMS insects, ATM) —  social: sharing of files, of displays, in paper, across great distances, work individually, privacy for clients —  organisational: hierarchy, IT department s attitude and remit, user support, communications structure and infrastructure, availability of training

www.id-book.com

Different kinds of requirements •  Users: Who are they? —  Characteristics: ability, background, attitude to computers —  System use: novice, expert, casual, frequent —  Novice: step-by-step (prompted), constrained, clear information —  Expert: flexibility, access/power —  Frequent: short cuts —  Casual/infrequent: clear instructions, e.g. menu paths

www.id-book.com

What are the users capabilities? Humans vary in many dimensions: —  size of hands may affect the size and positioning of input buttons —  motor abilities may affect the suitability of certain input and output devices —  height if designing a physical kiosk —  strength - a child s toy requires little strength to operate, but greater strength to change batteries —  disabilities (e.g. sight, hearing, dexterity)

www.id-book.com

1/10/13

Kinds of requirements

Personas

What factors (environmental, user, usability) would affect the following systems?

•  Capture user characteristics

•  Self-service filling and payment system for a petrol (gas) station

•  Fashion clothes website 13

•  Should not be idealised •  Bring them to life with a name, characteristics, goals, personal background

•  On-board ship data analysis system for geologists searching for oil www.id-book.com

•  Not real people, but synthesised from real user characteristics

•  Develop multiple personas

www.id-book.com

Data gathering for requirements

Personas

Interviews:

—  Props, e.g. sample scenarios of use, prototypes, can be used in interviews —  Good for exploring issues —  But are time consuming and may be infeasible to visit everyone Focus groups: —  Group interviews —  Good at gaining a consensus view and/or highlighting areas of conflict —  But can be dominated by individuals www.id-book.com

Data gathering for requirements Questionnaires:

Data gathering for requirements Direct observation:

—  Often used in conjunction with other techniques —  Can give quantitative or qualitative data —  Good for answering specific questions from a large, dispersed group of people

Researching similar products:

—  Gain insights into stakeholders tasks —  Good for understanding the nature and context of the tasks —  But, it requires time and commitment from a member of the design team, and it can result in a huge amount of data

Indirect observation:

—  Good for prompting requirements

www.id-book.com

—  Not often used in requirements activity —  Good for logging current tasks

www.id-book.com

1/10/13

Data gathering for requirements

Some examples

Studying documentation: —  Procedures and rules are often written down in manuals —  Good source of data about the steps involved in an activity, and any regulations governing a task —  Not to be used in isolation —  Good for understanding legislation, and getting background information —  No stakeholder time, which is a limiting factor on the other techniques www.id-book.com

Diary and interview

•  An approach to ethnographic study where user is expert, designer is apprentice •  A form of interview, but —  at users’ workplace (workstation) —  2 to 3 hours long •  Four main principles: —  Context: see workplace & what happens —  Partnership: user and developer collaborate —  Interpretation: observations interpreted by user and developer together —  Focus: project focus to understand what to look www.id-book.com 21 ©2011 for

Problems with data gathering (2)

www.id-book.com

Cultural probes

Problems with data gathering (1)

Contextual Inquiry

•  Requirements management: version control, ownership •  Communication between parties: — within development team — with customer/user — between users… different parts of an organisation use different terminology •  Domain knowledge distributed and implicit: — difficult to dig up and understand — knowledge articulation: how do you walk? •  Availability of key people

www.id-book.com

•  Identifying and involving stakeholders: users, managers, developers, customer reps?, union reps?, shareholders? •  Involving stakeholders: workshops, interviews, workplace studies, co-opt stakeholders onto the development team •  Real users, not managers: traditionally a problem in software engineering, but better now

www.id-book.com

Problems with data gathering (3) • Political problems within the organisation • Dominance of certain stakeholders • Economic and business environment changes • Balancing functional and usability demands ©2011

www.id-book.com

1/10/13

Some basic guidelines

Some basic guidelines •  Support the process with props such as

• Focus on identifying the stakeholders

prototypes and task descriptions

needs

•  Run a pilot session

• Involve all the stakeholder groups

•  You will need to compromise on the data you

• Involve more than one representative

collect and the analysis to be done, but before you can make sensible compromises, you need

from each stakeholder group

to know what you d really like

• Use a combination of data gathering

•  Consider carefully how to record the data

techniques www.id-book.com

www.id-book.com

Data interpretation and analysis • Initial interpretation before deeper analysis • Different approaches emphasize different elements e.g. class diagrams for objectoriented systems, entity-relationship diagrams for data intensive systems 27

Scenario for travel organizer The Thomson family enjoy outdoor activities and want to try their hand at sailing this year. There are four family members: Sky (10 years old), Eamonn (15 years old), Claire (35), and Will (40). One evening after dinner they decide to start exploring the possibilities. They all gather around the travel organizer and enter their initial set of requirements – a sailing trip for four novices in the Mediterranean. The console is designed so that all members of the family can interact easily and comfortably with it. The system s initial suggestion is a flotilla, where several crews (with various levels of experience) sail together on separate boats. Sky and Eamonn aren t very happy at the idea of going on vacation with a group of other people, even though the Thomsons would have their own boat. The travel organizer shows them descriptions of flotillas from other children their ages and they are all very positive, so eventually, everyone agrees to explore flotilla opportunities. Will confirms this recommendation and asks for detailed options. As it s getting late, he asks for the details to be printed so everyone can consider them tomorrow. The travel organizer prints out a summary of the different options available. www.id-book.com

Task descriptions •  Scenarios ― an informal narrative story, simple, ‘natural’, personal, not generalisable

• Start soon after data gathering session

www.id-book.com

•  Use cases — assume interaction with a system — assume detailed understanding of the interaction •  Essential use cases — abstract away from the details — does not have the same assumptions as use cases www.id-book.com

Use case for travel organizer 1. The system displays options for investigating visa and vaccination requirements. 2. The user chooses the option to find out about visa requirements. 3. The system prompts user for the name of the destination country. 4. The user enters the country s name. 5. The system checks that the country is valid. 6. The system prompts the user for her nationality. 7. The user enters her nationality. 8. The system checks the visa requirements of the entered country for a passport holder of her nationality. 9. The system displays the visa requirements. 30 10. The system displays the option to print out the visa

www.id-book.com

requirements. 11. The user chooses to print the requirements.

1/10/13

Alternative courses for travel organizer

Example use case diagram for travel organizer

Some alternative courses: 6. If the country name is invalid: 6.1 The system displays an error message. 6.2 The system returns to step 3. 8. If the nationality is invalid: 8.1 The system displays an error message. 8.2 The system returns to step 6. 9. If no information about visa requirements is found: 9.1 The system displays a suitable message. 9.2 The system returns to step 1.

www.id-book.com

SYSTEM RESPONSIBILITY request destination and nationality obtain appropriate visa info

obtain copy of visa info

offer info in different formats

choose suitable format

www.id-book.com

provide info in chosen format

•  Task descriptions are often used to envision new systems or devices

retrieveVisa

supply required information

Task analysis

Example essential use case for travel organizer USER INTENTION find visa requirements

www.id-book.com

•  Task analysis is used mainly to investigate an existing situation •  It is important not to focus on superficial activities What are people trying to achieve? Why are they trying to achieve it? How are they going about it? •  Many techniques, the most popular is Hierarchical Task Analysis (HTA) www.id-book.com

Example Hierarchical Task Analysis

Hierarchical Task Analysis •  Involves breaking a task down into subtasks, then sub-sub-tasks and so on. These are grouped as plans which specify how the tasks might be performed in practice

0. 1. 2. 3. 4. 5.

•  HTA focuses on physical and observable actions, and includes looking at actions not related to software or an interaction device

In order to buy a DVD locate DVD add DVD to shopping basket enter payment details complete address confirm order

plan 0:

•  Start with a user goal which is examined and the main tasks for achieving it are identified

If regular user do 1-2-5. If new user do 1-2-3-4-5.

•  Tasks are sub-divided into sub-tasks www.id-book.com

www.id-book.com

1/10/13

Example Hierarchical Task Analysis (graphical)

Summary •  Getting requirements right is crucial •  There are different kinds of requirement, each is significant for interaction design •  The most commonly-used techniques for data gathering are: questionnaires, interviews, focus groups, direct observation, studying documentation and researching similar products •  Scenarios, use cases and essential use cases can be used to articulate existing and envisioned work practices.

www.id-book.com

•  Task analysis techniques such as HTA help to investigate existing systems and 38 practices

www.id-book.com

1/10/13

Overview Chapter 11

•  Prototyping and construction

Design, prototyping and construction

•  Conceptual design •  Physical design •  Generating prototypes •  Support for design

www.id-book.com

What is a prototype?

Prototyping and construction •  What is a prototype? •  Why prototype? •  Different kinds of prototyping low fidelity high fidelity •  Compromises in prototyping vertical horizontal •  Construction

In other design fields a prototype is a small-scale model: • a miniature car • a miniature building or town • the example here comes from a 3D printer

www.id-book.com

What is a prototype?

Why prototype?

In interaction design it can be (among other things): •  a series of screen sketches •  a storyboard, i.e. a cartoon-like series of scenes •  a Powerpoint slide show •  a video simulating the use of a system •  a lump of wood (e.g. PalmPilot) •  a cardboard mock-up •  a piece of software with limited functionality written in the target language or in another language

•  Evaluation and feedback are central to interaction design •  Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing •  Team members can communicate effectively •  You can test out ideas for yourself •  It encourages reflection: very important aspect of design •  Prototypes answer questions, and support designers in choosing between alternatives

www.id-book.com

1/10/13

Filtering dimensions of prototyping

www.id-book.com

Manifestation dimensions of prototyping

What to prototype?

Low-fidelity Prototyping •  Uses a medium which is unlike the final medium, e.g. paper, cardboard

•  Technical issues •  Work flow, task design

•  Is quick, cheap and easily changed

•  Screen layouts and information display •  Difficult, controversial, critical areas

www.id-book.com

Storyboards

Sketching

•  Often used with scenarios, bringing more detail, and a chance to role play

•  Sketching is important to low-fidelity prototyping •  Don t be inhibited about drawing ability. Practice simple symbols

•  It is a series of sketches showing how a user might progress through a task using the device •  Used early in design

www.id-book.com

1/10/13

‘Wizard-of-Oz’ prototyping

Card-based prototypes

•  The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. •  Usually done early in design to understand users’ expectations •  What is ‘wrong’ with this approach?

• Index cards (3 X 5 inches) • Each card represents one screen or part of screen • Often used in website development

User >Blurb blurb >Do this >Why?

www.id-book.com

High-fidelity prototyping

Compromises in prototyping

•  Uses materials that you would expect to be in the

• All prototypes involve compromises • For software-based prototyping maybe there is a slow response? sketchy icons? limited functionality? • Two common types of compromise •  horizontal : provide a wide range of functions, but with little detail •  vertical : provide a lot of detail for only a few functions • Compromises in prototypes mustn t be ignored. Product needs engineering

final product. •  Prototype looks more like the final system than a low-fidelity version. •  For a high-fidelity software prototype common environments include Macromedia Director, Visual Basic, and Smalltalk. •  Danger that users think they have a full system…….see compromises www.id-book.com

Construction

www.id-book.com

Conceptual design: from requirements to design

• Taking the prototypes (or learning from them) and creating a whole • Quality must be attended to: usability (of course), reliability, robustness, maintainability, integrity, portability, efficiency, etc • Product must be engineered Evolutionary prototyping

•  Transform user requirements/needs into a conceptual model •  a description of the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended •  Don t move to a solution too quickly. Iterate, iterate, iterate •  Consider alternatives: prototyping helps

Throw-away prototyping www.id-book.com

www.id-book.com

1/10/13

Is there a suitable metaphor? •  Interface metaphors combine familiar knowledge with new knowledge in a way that will help the user understand the product.

•  Which interaction type? How the user invokes actions Instructing, conversing, manipulating or exploring

•  Three steps: understand functionality, identify potential problem areas, generate metaphors •  Evaluate metaphors: How much structure does it provide? How much is relevant to the problem? Is it easy to represent? Will the audience understand it? How extensible is it? www.id-book.com

•  Do different interface types provide insight? WIMP, shareable, augmented reality, etc

Expanding the conceptual model •  What functions will the product perform? What will the product do and what will the human do (task allocation)? •  How are the functions related to each other? Sequential or parallel? Categorisations, e.g. all actions related to telephone memory storage •  What information needs to be available? What data is required to perform the task? How is this data to be transformed by the system? www.id-book.com

www.id-book.com

Using scenarios in conceptual design • Express proposed or imagined situations • Used throughout design in various ways •  scripts for user evaluation of prototypes •  concrete examples of tasks •  as a means of co-operation across professional boundaries

Generate storyboard from scenario

www.id-book.com

Considering interaction types

• Plus and minus scenarios to explore 22 extreme cases

www.id-book.com

Generate card-based prototype from use case

www.id-book.com

1/10/13

Summary

Support for design

•  Different kinds of prototyping are used for different purposes and at different stages

•  Patterns for interaction design •  individual patterns •  pattern languages •  pattern libraries •  Open source systems and components

•  Prototypes answer questions, so prototype appropriately •  Construction: the final product must be engineered appropriately •  Conceptual design (the first step of design) •  Consider interaction types and interface types to prompt creativity

•  Tools and environments

www.id-book.com

1/10/13

The aims •  Explain the key concepts used in evaluation. •  Introduce different evaluation methods. •  Show how different methods are used for different purposes at different stages of the design process and in different contexts. •  Show how evaluators mix and modify methods. •  Discuss the practical challenges •  Illustrate how methods discussed in Chapters 7 and 8 are used in evaluation and describe some methods that are specific to evaluation.

Chapter 12

Introducing Evaluation

www.id-book.com

Why, what, where and when to evaluate •  •  •  •

Iterative design & evaluation is a continuous process that examines: Why: to check users’ requirements and that users can use the product and they like it. What: a conceptual model, early prototypes of a new system and later, more complete prototypes. Where: in natural and laboratory settings. When: throughout design; finished products can be evaluated to collect information to inform new products.

www.id-book.com

“Iterative design, with its repeating cycle of design and testing, is the only validated methodology in existence that will consistently produce successful results. If you don’t have user-testing as an integral part of your design process you are going to throw buckets of money down the drain.” See AskTog.com for topical discussions about design and evaluation. www.id-book.com

Usability lab

•  Controlled settings involving users, eg usability testing & experiments in laboratories and living labs. •  Natural settings involving users, eg field studies to see how the product is used in the real world. •  Any settings not involving users, eg consultants critique; to predict, analyze & model aspects of the interface analytics. 5

Bruce Tognazzini tells you why you need to evaluate

Types of evaluation

www.id-book.com

http://iat.ubalt.edu/usability_lab/! www.id-book.com

1/10/13

Usability testing & field studies can compliment

Living labs •  People’s use of technology in their everyday lives can be evaluated in living labs. •  Such evaluations are too difficult to do in a usability lab. •  Eg the Aware Home was embedded with a complex network of sensors and audio/video recording devices (Abowd et al., 2000). www.id-book.com

•  Physiological measures were used. •  Players were more engaged when playing against another person than when playing against a computer. •  What precautionary measures did the evaluators take?

•  Experiment to investigate a computer game •  In the wild field study of skiers •  Crowdsourcing

Challenge & engagement in a collaborative immersive game

Evaluation case studies

www.id-book.com

What does this data tell you?

www.id-book.com

Why study skiers in the wild ?

high values indicate more variation Playing against computer Boring Challenging Easy Engaging Exciting Frustrating Fun

Playing against friend

Mean

St. Dev.

Mean

St. Dev.

2.3 3.6 2.7 3.8 3.5 2.8 3.9

0.949 1.08 0.823 0.422 0.527 1.14 0.738

1.7 3.9 2.5 4.3 4.1 2.5 4.6

0.949 0.994 0.850 0.675 0.568 0.850 0.699 Jambon et al. (2009) User experience in the wild. In: Proceedings of CHI ’09, ACM Press, New York, ! p. 4070-4071.!

Source: Mandryk and Inkpen (2004). www.id-book.com

www.id-book.com

1/10/13

Crowdsourcing-when might you use it?

e-skiing system components

Jambon et al. (2009) User experience in the wild. In: Proceedings of CHI ’09, ACM Press, New York, ! p. 4072.! www.id-book.com

Evaluating an ambient system •  The Hello Wall is a new kind of system that is designed to explore how people react to its presence. •  What are the challenges of evaluating systems like this? www.id-book.com

www.id-book.com

Evaluation methods Method

Controlled Natural settings settings

Observing

Asking users

x x

Asking experts Testing

www.id-book.com

x x

Without users

The language of evaluation

Key points

Analytics In the wild evaluation Analytical evaluation Living laboratory Controlled Predictive evaluation experiment Summative Expert review or crit evaluation Field study Usability laboratory Formative User studies evaluation Usability testing Heuristic evaluation Users or participants

•  Evaluation & design are closely integrated in user-centered design. •  Some of the same techniques are used in evaluation as for establishing requirements but they are used differently (e.g. observation interviews & questionnaires). •  Three types of evaluation: laboratory based with users, in the field with users, studies that do not involve users •  The main methods are: observing, asking users, asking experts, user testing, inspection, and modeling users’ task performance, analytics. •  Dealing with constraints is an important skill for evaluators to develop.

www.id-book.com

1/10/13

A project for you …

•  “The Butterfly Ballot: Anatomy of disaster” was written by Bruce Tognazzini, and you can find it by going to AskTog.com and looking through the 2001 column. •  Alternatively go directly to: http:// www.asktog.com/columns/ 042ButterflyBallot.html www.id-book.com

continued

•  Read Tog’s account and look at the picture of the ballot card. •  Make a similar ballot card for a class election and ask 10 of your friends to vote using the card. After each person has voted ask who they intended to vote for and whether the card was confusing. Note down their comments. •  Redesign the card and perform the same test with 10 different people. •  Report your findings.

www.id-book.com

1/10/13

The aims are: Chapter 13

•  Introduce and explain the DECIDE framework. •  Discuss the conceptual, practical, and ethical issues involved in evaluation.

An evaluation framework

www.id-book.com

DECIDE: a framework to guide evaluation •  Determine the goals. •  Explore the questions. •  Choose the evaluation methods. •  Identify the practical issues. •  Decide how to deal with the ethical issues. •  Evaluate, analyze, interpret and present the data.

www.id-book.com

•  Questions help to guide the evaluation. •  The goal of finding out why some customers prefer to purchase paper airline tickets rather than e-tickets can be broken down into subquestions: –  What are customers’ attitudes to e-tickets? –  Are they concerned about security? –  Is the interface for obtaining them poor?

Determine the goals •  What are the high-level goals of the evaluation? •  Who wants it and why? •  The goals influence the methods used for the study. •  Goals vary and could be to: identify the best metaphor for the design check that user requirements are met check for consistency investigate how technology affects working practices   improve the usability of an existing product

www.id-book.com

•  The evaluation method influences how data is collected, analyzed and presented. •  E.g. field studies typically: –  Involve observation and interviews. –  Involve users in natural settings. –  Do not involve controlled tests. –  Produce qualitative data.

•  What questions might you ask about the design of a cell phone? 5

Choose the evaluation approach & methods

Explore the questions

www.id-book.com

1/10/13

Decide about ethical issues

Identify practical issues For example, how to:

•  Develop an informed consent form

• Select users • Find evaluators • Select equipment • Stay on budget • Stay on schedule www.id-book.com

•  Participants have a right to: - Know the goals of the study; - Know what will happen to the findings; - Privacy of personal information; - Leave when they wish; - Be treated politely.

Evaluate, interpret & present data •  Methods used influence how data is evaluated, interpreted and presented. •  The following need to be considered:

- Reliability: can the study be replicated? - Validity: is it measuring what you expected? - Biases: is the process creating biases? - Scope: can the findings be generalized? - Ecological validity: is the environment influencing the findings? i.e. Hawthorn effect.

www.id-book.com

Key points •  Many issues to consider before conducting an evaluation study. •  These include: goals of the study; involvment or not of users; the methods to use; practical & ethical issues; how data will be collected, analyzed & presented. •  The DECIDE framework provides a useful checklist for planning an evaluation study.

www.id-book.com

A project for you … •  Find an evaluation study from the list of URLs on this site or one of your own choice. •  Use the DECIDE framework to analyze it. •  Describe the aspects of DECIDE that are explicitly addressed in the report and which are not. •  On a scale of 1-5, where 1 = poor and 5 = excellent, how would you rate this study?