Blah

CS3240 - Human Computer InteractionLecture 3 : Managing Design ProcessesLecture 3 : Managing Design Processes

Lecturer : Dr Bimlesh Wadhwadcsb @n s ed [email protected]

Content

• Development Methodologiesp g– Rapid Contextual Design & Ease of Use

Method• Four pillars of Design

– 1 User Interface Requirements1 User Interface Requirements• Users, Requirements, Collection methods

– 2 Guidelines, Documents & Process,• Refer previous Lecture • Interface and Interaction Styles

1-2

3-2

Development Methodologies

• Rapid Contextual Design - RCDRapid Contextual Design RCD – Holzblatt et al 2005

• Ease of Use Method– IBM

• Others– GUIDE, STUDIO, OVID

1-3

, ,

3-3

Rapid Contextual Design

Contextual Inquiry

Model Consolidation and Affinity diagram Building

Interpretation Sessions and work modeling

Visioning

Personas

Model Consolidation and Affinity diagram Building

U E i t D i

Storyboarding

Visioning

Paper prototypes and mock-up interviews

User Environment Design

1-4

3-4

Rapid Contextual Design

I t t th d t t h d ti

Talk to customers, while they work

Consolidate; create visual representation of work

Interpret the data; create a shared perspective

Develop Personas

U i d h t d ib t t b di

Review & ‘walk’ the consolidated vision

Single representation of users and the work; built from from storyboards

Use pics and graphs to describe concepts; storyboarding

1-5Conduct interviews and tests with actual users; provide verification of design before committing to code

storyboards

3-5

Ease of Use Method

1-6

3-6

The Four Pillars of Design

1-7

3-7

Users or Stakeholders

• Who are they?Who are they?• What are their abilities ?

Th i t k d E i t ?• Their tasks and Environment ?

1-8

3-8

Users or StakeholdersUsers or Stakeholders

Check-out operatorsCheck out operators

• SuppliersL l h• Local shop owners

1-9CustomersManagers and owners

Users - categories

• primary: frequent hands-on• secondary: occasional or via someone else• tertiary: affected by its introduction, or will

finfluence its purchase

1-10

Users - capabilities

•size of hands may affect the size and positioning of i t b tt t biliti ff t thinput buttons motor abilities may affect the suitability of certain input and output devices

height if designing a physical kiosk• height if designing a physical kiosk • strength - a child’s toy requires little strength to operate but greater strength to change batteriesoperate, but greater strength to change batteries• disabilities(e.g. sight, hearing, dexterity)

1-11

Personas

• Generally personas are synthesized fromGenerally, personas are synthesized from data collected from interviews with users. – a name and picture p– demographics (age, education, ethnicity,

family status) – job title and major responsibilities – goals and tasks in relation to your site

i t ( h i l i l– environment (physical, social, technological)

1-12

Users -Tasks

• Tasks:

– their context– what information do they require?y q

– who collaborates to achieve the task?

h i th t k hi d th it i ?– why is the task achieved the way it is?

1-13

Users - Environment

Environment or context of use:— physical: dusty, noisy, vibration, light, heat, humidity, ..

f f f— social: sharing of files, of displays, in paper, across great distances, work individually, privacy for clientsfor clients— organisational: hierarchy, IT department’s attitude and remit user support communicationsattitude and remit, user support, communications structure and infrastructure, availability of training

1-14

g

ExamplesInteractive system for food stalls in a university’s self-service cafeteria

Users : under 25 , comfortable dealing with technology

Function : calculates total cost of purchases.

E i t l i d b lik l t b t lkiEnvironmental : noisy and busy; users likely to be talking with friends and colleagues while using the system.

1-15

Interactive system for control of functioning of nuclear power plantnuclear power plant.

Users : well trained engineer or scientist competent to handle technology

Function : monitors the temperature of the reactorsp

Environmental : uncluttered restrictive might need toEnvironmental : uncluttered, restrictive , might need to wear protective clothing

1-16

Interactive system to support distributed design teams f d ie.g. for car design

Users : professional designer, prepared to learn system to g ymake his job better; likely to be multi-lingual

Functional : communicates information between remoteFunctional : communicates information between remote sites

E i t l h i ll di t ib t d id filEnvironmental : physically distributed over wide area, files to be shared, product to comply with network technologies and communication protocols

1-17

Methods to collect User Information

QuestionnairesInterviews Questionnaires(Survey )

Interviews(Personal, Focus

Group)

Observation(Ethnographic)

Participatory Design

1-18Qualitative and Quantitative

Interviews

Personal & Focus Group interviews

• Immediate responses• Allows users to express themselves in own wordsAllows users to express themselves in own words• Allows collection of a large volume of rich data• Allows discussion, probing and unexpected insights• Useful in Investigating problems

1-19

Interviews - guidelines

• Prepare and distribute agenda, outline of topic and p g pquestions that will be asked

• Ensure that each question is open ended, unambiguous and contains only one ideaand contains only one idea

• Use skilled interviewers with good listening skills• Ensure interviews last no longer than 30‐60 minutes,

depending on type• Select a comfortable and neutral setting and ensure

participation by allp p y• Include highest level of management available if possible• Record interviews rather than relying on memory

1-20

Questionnaires

• Qualitative & quantitative sections• Manual or electronic distribution• Quick & Cheap distribution• Good reachability• Relatively low resource consumption - human and

financialfinancial

1-21

Questionnaires - guidelines• “Sell” importance before distribution and provide an incentive.• Keep them short, structured and grouped according to purpose.• Let respondents know the number of questions.• Give clear instructions, appropriate time and due date for return.• Use terminology or language familiar to your usersUse terminology or language familiar to your users.• Use “satisfactory,”“unsatisfactory” scale, rather than

“1,2,3”ranking.• Allow flexibility to go back change “skip” or “save” responses• Allow flexibility to go back, change, skip or save responses.• Avoid surveying for information you can find another way.• Test or pilot to a sample group before distribution

www.surveymonkey.com , www.polldaddy.com , www.zoomerang.comwww.statpac.com, www.vovici.com, www.researchexec.comwww snapsurveys com www surveycrafter com www coolsurveys com

1-22

www.snapsurveys.com, www.surveycrafter.com, www.coolsurveys.comwww.objectplanet.com, www.pollpro.com, www.esurveyspro.com, www.questionpro.comhttp://oldwww.acm.org/perlman/question.html

Observation

• Think-aloud technique• Diaries• Interaction logsInteraction logs

1-23

Observation - guidelines

• Segment the groups from which you want feedback g g p y• Try to understand each group’s goals and interests

thoroughly.• Record your observations. Take careful note of all

informal information gathering.• Use open‐ended questions when you interview verbally• Use open‐ended questions when you interview verbally.• Avoid putting your own bias on observations. Consider a

neutral third party if impossible• Allow sufficient time for observation.

1-24

Ethnographic Observation

• PreparationField Study• Field Study

• AnalysisR ti• Reporting

1-25

3-25

Ethnographic Observation

1-26

3-26


• Origin: ScandinaviaOrigin: Scandinavia,– named Cooperative Design.

‘Good systems cannot be built by design experts who proceed with only limited input fromwho proceed with only limited input from users…’

1-27

3-27


D i ’ d l f th f l l f ti i ti1-28

3-28

Durin’s model of the four levels of user participation

Scenario Development

Day-in-the-life scenarios:• characterize what happens when users perform typical

tasks can be acted out as a form of walkthrough• can be acted out as a form of walkthrough

• may be used as basis for videotape • useful tools• useful tools

– table of user communities & tasks – table of task sequencestable of task sequences – flowchart or transition diagram

1-29

3-29

Data RecordingData Recording

• Notes, audio, video, photographs

1-30

Data CollectionPotential pitfallsPotential pitfalls

• Representative Samplep p–Small, good enough, wrong

• Bias-Outside consultant or third party

• Wrong methodologyQ– Qualitative or quantitative data

•TimelineBe realistic–Be realistic.

1-31

Data Analysis

–Manual –Desk top tools (spreadsheets & databases)–Survey software programmes–Statistical packages

1-32

Data Analysis

• Data processing or preparation planT i ti f i t i d b ti fi di–Transcription of interviews and observation findings

–Editing responsesCoding responses–Coding responses

•Data entryy

•Data analysis

1-33

Data Analysis• Recording and Presenting Survey Results

Descriptive summary•Text or tabular (including cross‐tabulation)( g )

Descriptive statistics•Frequency counts, ranges, measures of central tendency

G hi l t tiGraphical representation•Charts, graphs, histograms

1-34

Quantitative Data Analysis

• Averages • Mean: add up values and divide by number of• Mean: add up values and divide by number of

data points• Median: middle value of data when ranked• Median: middle value of data when ranked• Mode: figure that appears most often in the data

• Percentages• Percentages• Graphical representations give overview of data

N b f d Number of errors made

11.5

22.5

33.5

44.5

mbe

r of e

rror

s m

ade

Internet use

< once a day

once a day

once a week

Number of errors made

2

4

6

8

10

mbe

r of e

rror

s m

ade

1-350

0.5

1 3 5 7 9 11 13 15 17

UserN

um2 or 3 times a week

once a month

00 5 10 15 20

User

Num

Qualitative Data Analysis

“ I am thinking it’s just a lot of information to absorb

Qualitative Data Analysis

g jfrom the screen. I just I don’t concentrate very well when I’m looking at the screen . I have a very clear idea of what I ‘ve read so far but it’s because ofidea of what I ve read so far… but it s because of the headings I know OK ….there is so much reference to all those previously said like ……maybe it would be nice to have this navigation, extra links …”Verbalisations show evidence of dissatisfaction, confusions, , ,

and that user is having problem in achieving overall task goal.

1-36

Summary –Development MethodologiesUser Interface RequirementsUser Interface Requirements

• Development methodologies help offer validated• Development methodologies help offer validated processes with predictable schedules and meaningful deliverables.

• Collecting User Interface Requirements can be notoriously difficult but well-documented success stories inform and inspireinform and inspire.

• Ethnographic observation can provide information to guide task analysis.

• Scenarios are useful for managerial and customer presentations, and helps to plan usability tests.

1-37

3-37

Guidelines documents and processes

– Terminology (objects and actions), abbreviations, and capitalizationcapitalization

– Words, icons and graphics– Screen-layout issuesy– Input and output devices– Direct-manipulation clicking, dragging, dropping, and

gestures g– Error handling and recovery procedures – Online help and tutorials – Training and reference materials

1-38

3-38

Conceptualize InteractionInteraction

Interface Metaphor Interaction Type Metaphor Type

Interaction Types

Interface TypesInterface Types

1-40

Interaction Types

1-41

Instructing

• Users give instructions to a systemUsers give instructions to a system– Typing commands– Selecting options from menug p– Speaking aloud commands– Pressing buttons– Using fn-keys

ff• quick, efficient, repetitive action

1-42

Instructing - examples

1-43

Manipulating

The central ideas of user control:• Visibility of Object and Actions• Visibility of Object and Actions• Rapid, reversible, incremental actions• Replacement of complex command-language syntaxReplacement of complex command language syntax

with direct, visual manipulation of the object of interest.

1-44

Manipulating - examples

1-45

Conversing

• User & system as dialog partners

• Good for cases where user needs to find information or discuss issuesor discuss issues– Advisory systems– Help facilities

• Simple Voice recognition, menu-driven to natural language based systemslanguage based systems

1-46

Conversing-Examples

Ik h l t• Ikea help centre

…… ………. An unedited conversation Ben: no one does. i hate you.Anna: If I have unintentionally offended you then I apologise If Anna: If I have unintentionally offended you then I apologise. If you think that I am not providing you with useful information about IKEA you can contact the Customer Service at your nearest IKEA Store.Ben: and what will they do? hmm? they can’t sack someone that’s not real. you get away with murder. who do you answer to? is there a virtual boss somewhere sitting in his virtual office?Anna: As I am only an advanced computer program, I cannot answer more than one sentence at a time. Please simplify and repeat the most important question within your previous input and

1-47

repeat the most important question within your previous input, and I will try to reply as accurately as possible. I am opening a page now which you can use if you wish to contact Customer Services. Thank you very much!

Conversing - Examples

A k A k j kid A k Kid• Ask , Ask jeeves – kids, Ask Kids

1-48

Exploring

• Enables users to explore and interact with penvironment

• Users move through virtual or physical environments

Context aware systems based on location and/or• Context-aware systems – based on location and/or presence of people in the vicinity of sensing device.

1-49

Exploring - example

CAVE projectp jhttp://graphics.cs.brown.edu/research/cave/home.html

1-50

Exploring - exampleAmbient Wood projecthttp://www.informatics.sussex.ac.uk/research/groups/interact/projects/Equator/ambient_wood.htm

1-51

1-52

Interface Paradigms

80 i l 1980s interfaces• 80s – single user desktop apps

1980s interfacesCommand WIMP/GUI

1990s interfaces

• 90s – multimedia apps, web interface

Advanced graphical (multimedia, virtual reality, information visualization)

Web Speech (voice) Pen, gesture, and touch

• 2000s– robotics,

Appliance

2000s interfacesMobile Multimodal

mobile interfaces Shareable Tangible Augmented and mixed reality Wearable Robotic

1-53

Recent shifts

• How to enable people to access and interact with p pinformation in their work, social, and everyday lives

• Designing user experiences for people using interfaces• Designing user experiences for people using interfacesthat are part of the environment with no controlling devices.

• What form to provide contextually-relevant information to people at appropriate times and places

• Ensuring that information, that is passed around via interconnected displays devices and objects is secure

1-54

interconnected displays, devices, and objects, is secure and trustworthy.

Command interfaces

• Efficient, precise, and fast, p ,• Large overhead to learning set of commands.

1-55

55

WIMP/GUI interfaces

• Windows

• Icons

• Menus

• Pointing device

1-56

Windows

• Windows were invented to overcomeWindows were invented to overcome physical constraints of a computer display, enabling more information to be p y gviewed and tasks to be performed.

• Scroll bars within windows also enable more information to be viewed.

1-57

MenusFlat , drop-down, pop-up, contextual, and expanding.Flat , drop down, pop up, contextual, and expanding.

• Flat menus– good at displaying a small number of options

at the same time and where the size of the display is small

– Nested lists of options require several steps to get to the desired option

1-58

Menus

• Contextual menuP id t ft d d th t k– Provides access to often-used commands that make sense in the context of a current task.

• right-click

1-59

Menus• Expanding menus

– Enables more options to be shown on a single th i ibl ith i l fl tscreen than is possible with a single flat menu .

– More flexible navigation, allowing for selection ofMore flexible navigation, allowing for selection of options to be done in the same window

M t l di– Most popular are cascading ones • primary, secondary and even tertiary menus • downside is that they require precise mousedownside is that they require precise mouse

control • can result in overshooting or selecting wrong

options1-60

options

Icons

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

• very detailed and animated -> visually attractive and i f ti i iti ti ll li d f l liinformative, inviting, emotionally appealing, and feel alive

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

file)file), – analogical (e.g., a picture of a pair of scissors to

represent ‘cut’)1-61

– arbitrary (e.g., the use of an X to represent ‘delete’)

Multimedia

• Combines different media within aCombines different media within a single interface with various forms of interactivityy– graphics, text, video, sound, and animations

1-62

BioBlast multimedia learning environment

1-63

Multimedia - Characteristics

• Facilitates rapid access to multiple representations of p p pinformation.

• Provide better ways of presenting information than can either one alone.either one alone.

• Enable easier learning, better understanding, more engagement, and more pleasure.E t l diff t t f• Encourage users to explore e.g. different parts of a game or story.

• Users develop tendency to play video clips and y yanimations, while skimming through accompanying text or diagrams.

1-64

Virtual reality and virtual environments

• Computer-generated graphical simulations providing: p g g p p g– “the illusion of participation in a synthetic environment

rather than external observation of such an environment” (Gigante, 1993)environment (Gigante, 1993)

• provide new kinds of experience, enabling users to i t t ith bj t d i t i 3Dinteract with objects and navigate in 3D space

• Create highly engaging user experiencesCreate highly engaging user experiences

1-65

65

http://www.openskies.net/gorilla/

Web interfaces

• Early websites were largely text-based,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.

1-66

Useit.com

1-67

SwimStudio

1-68

http://www.swimstudio.com/

Usability versus attractiveness

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

enjoyable experience

• Users read the web like a:– “billboard going by at 60 miles an hour” (Krugbillboard going by at 60 miles an hour (Krug,

2000)

• Need to determine how to brand a web page to catch and keep ‘eyeballs’

1-69

Speech interfaces

• Where a person talks with a system that has a spoken language application, e.g., timetable, travel

lplanner

• Used most for inquiring about very specific• 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 disabilitiesh iti d– e.g., speech recognition word processors, page

scanners, web readers, home control systems

1-70

70

Speech interfaces• Directed dialogs

– where the system is in control of the conversationwhere the system is in control of the conversation– Ask specific questions and require specific responses

• Flexible systems allow the user to take the initiative:– e.g., “I’d like to go to Paris next Monday or two

weeks.”weeks.– 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?”next Monday?

1-71

Mobile interfaces

• Handheld devices intended to be used whileHandheld devices intended to be used while on the move, e.g., PDAs, cell phones

• Applications running on handhelds have greatly expanded, e.g.,– used in restaurants to take orders – car rentals to check in car returns

k t f h ki t k– supermarkets for checking stock– in the streets for multi-user gaming

1-72

Mobile interfaces

• Small screens, small number of keys and restricted ynumber of controls.

• Innovative designs including:• Innovative designs including:– roller wheels, rocker dials, 2-way and 4-way

directional keypads, softkeys

• Usability and preference for these control devices varies– depends on the dexterity and commitment of the user– depends on the dexterity and commitment of the user

1-73

Shareable interfaces

• Shareable interfaces are designed for more than one gperson to use – provide multiple inputs and sometimes allow

simultaneous input by co-located groupssimultaneous input by co located groups– large wall displays where people use their own pens

or gestures i t ti t bl t h ll i t t– interactive tabletops where small groups interact with information using their fingertips, e.g., Mitsubishi’s DiamondTouch and Sony’s Smartskin

1-74

A smartboard

1-75

DiamondTouch Tabletop

1-76

Tangible interfaces

• Type of sensor-based interaction, where physical yp , p yobjects, 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 animationg g

• Digital effects can take place in a number of media d l b b dd d i th h i land places or can be embedded in the physical

object

1-77

Tangible interfacesExamplesExamples

• Chromarium cubes when turned over digital animations of color are mixed– when turned over digital animations of color are mixed on an adjacent wall

• Flow Blocks – depict changing numbers and lights embedded in the

blocksblocks

• Urp– physical models of buildings moved around on

tabletop

1-78Beat Blocks : http://www.youtube.com/watch?v=Jug3iYAuJes&feature=relatedCandy Sequencer :http://www.youtube.com/watch?v=ziIdjrR_MRs&feature=related

Wearable interfaces• First developments was head- and eyewear-mounted

cameras that enabled user to record what seen and to access digital information.

• Since jewelery head mounted caps smart fabrics• Since, jewelery, 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 moveinformation while on the move

http://www.youtube.com/watch?v=LoyNqCsksdg&feature=related

1-79http://www.youtube.com/watch?v=zr1kqL08uj4&p=F6267412D11E8EC9&playnext=1&index=19

Steve Mann - pioneer of wearables

1-80http://www.youtube.com/watch?v=DiFtmrpuwNY&p=F282F7FBBB11F57E&playnext=1&index=2

Robotic interfaces

• Four typesyp– 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

1-81

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 mono-

modal interface?modal interface? • Will wearable interfaces be better than mobile interfaces

for helping people find information in foreign cities? p g p p g• Are virtual environments the ultimate interface for

playing games? • Will shareable interfaces be better at supporting

communication and collaboration compared with using networked desktop PCs?

1-82

et o ed des top Cs

Summary • Much system development for the PC platform will

continue to use advanced GUIs, in the form of multimedia, web-based interfaces, and virtual 3D environments

• Mobile interfaces have come of age– Increasing number of applications and software toolkits

available• Speech interfaces also being used much more for a

variety of commercial services• Appliance and vehicle interfaces becoming more pp g

important• Shareable and tangible interfaces entering our homes,

schools, public places, and workplacesp p p• 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

1-83

y y g g ytask.