159353 Human-Computer Interaction Section 1

HCI (158359) © P.Lyons 2007-2008

HCI (158359) © P.Lyons 2007-20082

159353

Human-Computer InteractionSection 1

HCI (158359) © P.Lyons 2007-20083

Today's Best Error Message

COURTESY OF MICROSOFT WINDOWS XP

HCI (158359) © P.Lyons 2007-20085

ANALYSE THE PROBLEM SPACE FIRST

Starting with functional requirementscan obscure usability considerations

Starting with an interface technologycan lead to inappropriate interfacesconsider GPS car navigation system

VR heads-up display – obscure real itemsmaps on LCD displays – distractingspoken instructions redress the balance

both have been used

Start with a more abstract analysisassumptions – reasons, often presented without empirical justificationclaims – have to be lived up togoals

Conceptual Models

not bad practice, if they can be verified

HCI (158359) © P.Lyons 2007-20086

STEPS IN ANALYSING THE PROBLEM SPACE

Conceptual Models

Use experience with existing productslearn reasons for problemsdesign solutions to problems

How to design an improved user experience?

HCI (158359) © P.Lyons 2007-20087

WHAT DID THE DEVELOPERS ASSUME? Conceptual Models

itunesusers want to organise playlistsusers will organise their music files with itunesfocus on individual songs?focus on albums?people will buy individual songs

How do you rate importance of

playing individual songs?

playing playlists?

when playingmoreso when buying

Were Apple's assumptions warranted?

HCI (158359) © P.Lyons 2007-20088

WHAT DID THE DEVELOPERS CLAIM?Conceptual ModelsConceptual Models

With the integrated iTunes Store, you can build a collection of

• digital music• movies• TV shows• iPod games• audiobooks• podcasts

from the comfort of your computer.

http://www.apple.com/itunes/overview

HCI (158359) © P.Lyons 2007-20089

FROM PROBLEM SPACE TO DESIGN SPACE

Conceptual Models

Design benefits from good understanding of problem spaceproviding the right functionalitytype of interfaceinterface behaviour

But first, it's important to develop a unifying model for the interface

HCI (158359) © P.Lyons 2007-200810

FROM PROBLEM SPACE TO DESIGN SPACECONCEPTUAL MODELS

Conceptual Models

Design benefits from good understanding of problem spaceproviding the right functionalitytype of interfaceinterface behaviour

But first, it's important to develop a unifying model for the interface

HCI (158359) © P.Lyons 2007-200811

But first, it's important to develop a unifying model for the interface• how it is organised• how it operates• the concepts modelled by the interface• the relationships between those concepts

CONCEPTUAL MODELS

Conceptual Models

Model can help designers make decisionshow the interface should look and feeleven what functions are important

E.g. what's the underlying model of selection in PowerPoint?simple click selects an item?shift click toggles an item's entry in a listsimple click clears the list and adds an item

not the details of the designthe colour of the buttonswhether it uses buttons at allpull-down list or table

What information do we present to the user?What information do we want to ge back from the user?

HCI (158359) © P.Lyons 2007-200812

BENEFITS TO THE DESIGN TEAM

Conceptual Models

Allows them to focus on user experience

Gives them a common vocabulary if they talk to each other

Delays commitment to detailed design

Facilitates future developmentsmodel paves the way for future developmentstho' it's understood that they won't be implemented just yet

HCI (158359) © P.Lyons 2007-200813

WHAT'S IN A CONCEPTUAL MODEL?

Metaphors and analogiesassist users to understand the purpose of the productassist users to understand the usage of the product

Conceptual Models

Concepts that underlie the productpaint tools apply colour to a surfacedrawing tools construct geometric shapesphoto editing tools apply filters to an image

Relationships between the conceptsobjects can be grouped (drawing tools)objects contain other objects (drawing tools)images are "anchored" to text (Word) – very obscure relationship

Concept ↔ user experiencee.g. selection, but not necessarily tied to conventional menu, popup menu, oval menu

need to be clear cf scribbler

HCI (158359) © P.Lyons 2007-200814

AN EARLY, INFLUENTIAL CONCEPTUAL MODEL

VISICALC

Conceptual Models

Calculation tool for financial modellingnot based on a calculatorshowed many data itemsallowed many identical calculations

Based on existing systemledger sheetfamiliar appearanceknown to be valuable

Extended existing systemreal-time data entryreal-time calculations

www.bricklin.com

- the new concept

HCI (158359) © P.Lyons 2007-200815

Benefits

Familiarity

Conceptual Models

Simplicity

Saved drudgerycalculators could perform same calculation, but with more effort

Improved accuracy

Surpassed the capabilities of existing systems

HCI (158359) © P.Lyons 2007-200816

XEROX STAR

Bitmapped user interfaceeach pixel stored as a bit in memorycf. text terminals

less memory – ASCII characters built-in, so no memory mapping needed)less flexibility – no images (except ASCII images)

Conceptual Models

Extensive research into an appropriate conceptual modelled to the desktop metaphorto provide familiarityto minimise the need to understand how computers work

Goal: a computer for users who didn’t use computers

HCI (158359) © P.Lyons 2007-200817

INTERFACE METAPHORS

Provide similarity to a real-world, physical objectcalled an analogy if appearance is similarpeople do variety of clerical, drawing, etc. tasks at a deskcomputers that facilitate similar tasks should be similar to this

Conceptual Models

Metaphor is not limited to properties of real-world objectcopying files or folderssearching for files

Replaces computer-related jargon with familiar termseasier to learn and talk about

Metaphor may be quite abstractwhat sort of engine is in a search engine - steam, gas turbine, internal combustion?the metaphor you have when you you're not having a metaphor

but the terms are often used interchangeably

HCI (158359) © P.Lyons 2007-200818

BENEFITS OF INTERFACE METAPHORS

Provides a clue to the underlying conceptual model

Conceptual Models

Familiarity reduces difficulty of learning

Empowers a wide variety of non-technical users of computersbefore the desktop metaphor, computer usage was hieratic

Well-chosen metaphor can prompt new functionalityshortcuts allow files to be in two places at once

HCI (158359) © P.Lyons 2007-200819

PROBLEMS WITH INTERFACE METAPHORS

Break conventional and cultural rulesrecycle bin on the desktop

Conceptual Models

Can limit designers' exploration of the solution spacecf. "well-chosen metaphor can prompt new functionality"

Can conflict with interface design principlesmusic software often has rotary knobslinear movements are easier with a mouse

Can restrict users' understanding of the system to the metaphorvariable names in programming languages hide reality of storage allocation

HCI (158359) © P.Lyons 2007-200820

CLASS ACTIVITY

What type of interface interaction would be appropriate for a computer system that will encourage autistic children to communicate and express themselves better?

Conceptual Models

No limits on technology employed

No limits on cost

Autism [is] diagnosed on the basis of […] three behavioral impairments or dysfunctions:

1. impaired social interaction, 2. impaired communication and 3. restricted and repetitive interests and activities.

HCI (158359) © P.Lyons 2007-200821

INTERACTION TYPES

Instructing (commanding)keyboard and function key commandsmenu selection

Conceptual Models

Conversingcf. Eliza and the Turing Test

Manipulatinginteracting with objects by handling them in a virtual or a physical environment

Exploringsearching for data by moving in a virtual or physical space

HCI (158359) © P.Lyons 2007-200822

INSTRUCTING

User tells the system what to docommand-line interfacesmenu selection, buttons

Conceptual Models

Efficient and unambiguousby comparison with natural-language interface, for example

Flexibleeasy to add parameters to a command (e.g. Unix commands)

HCI (158359) © P.Lyons 2007-200823

CONVERSING

Approaches human-human interaction in some respectspoken input (voice recognition)natural language input (Ask Jeeves – now defunct)

Conceptual Models

Helps novices and technophobes feel at ease

Implementation difficult distinguishing accentsparsing natural language

HCI (158359) © P.Lyons 2007-200824

"The most important thing to design is the user’s conceptual model. Everything else should be subordinated to making that model clear, obvious, substantial. That is almost exactly the opposite of how most software is designed"

Liddle, D., 1996 Design of the Conceptual Model, in Winograd, T. (ed) Bringing Design to Software Addison Wesley Conceptual Models

HCI (158359) © P.Lyons 2007-200825

Why was that funny?

Understanding Users

"This is so cool! I'm flying this thing completely on my Palm Pilot!"

Because we know that a Palm Pilot is an inappropriate toolbecause the processor couldn’t control a plane? because the interface can't generate the necessary commands?because the interface is too small to handle the complexity of the I/O?

plane

computer

interface

pilot

probably notdefinitely notdefinitely

not the reason, that is

HCI (158359) © P.Lyons 2007-200826

DESIGNING AN INTERFACE FOR HUMANS

What's good about the real plane control systems?

Understanding Users

They map much better onto human cognitive and physical capabilities

We need to know about human cognitive and physical capabilitiesextend human capabilties

strength to operate control surfaces – power assistance (planes)ability to draw smooth curves – Bézier curves (computers)

compensate for their weaknessescan't see through fog – radar (planes)

can't remember hundreds of commands – menus (computers)

Cognitiondefinition, importance, application to interaction designcognition research leads to more effective interactive productsmental models – how to use something, how something works

HCI (158359) © P.Lyons 2007-200827

COGNITION

What's going on in our heads?thinkingrememberinglearningdaydreamingdecision-makingwritingtalking

Understanding Users

Two modesExperiential mode

leads to the ability to perceive and react to events efficiently and effortlessly. It is the basis of expert behavior. It's essential for driving, for playing a musical instrument.

Reflective mode comparison and contrast, thought, and decision-making. leads to new ideas and novel responses.

A musician who's stuck in a section is using experiential, not reflective cognition

HCI (158359) © P.Lyons 2007-200828

WHY DO WE NEED TO UNDERSTAND USERS?

Interacting with technology is cognitive

Understanding Users

Users can only be expected to do certain thingsUnderstanding users gives insight into these

Users' cognitive processes have limitationsWe can allow for these if we understand users

We want to design better interactive productsUnderstanding users can help us by supplying

• theories • modelling tools • guidance• methods

Helps us understand problems that users encounter

HCI (158359) © P.Lyons 2007-200829

WHAT GOES ON IN THE MIND?perceivingthinking

rememberinglearning

understanding otherstalking with others

manipulating others

planning a mealimagining a trip

paintingwriting

composing

making decisionssolving problems

daydreaming

Understanding Users

HCI (158359) © P.Lyons 2007-200830

WHAT GOES ON IN THE MIND?

Cognitive processes

Understanding Users

MemoryReading, speaking and listeningProblem-solving, planning, reasoning & decision-making, learning

PerceptionAttention

HCI (158359) © P.Lyons 2007-200831

PerceptionMemoryReading, speaking and listeningProblem-solving, planning, reasoning & decision-making, learning

WHAT GOES ON IN THE MIND?Understanding Users

what we're focussing on at the momentgoal: searching for something in particulargoal: browsing for something that looks interestingdivided attention

allows us to handle multiple stimulimakes it difficult to handle all the information

information presentation perceptual boundaries (borders)coloursoundflashing lights

Cognitive processesAttention

in moderation!

HCI (158359) © P.Lyons 2007-200832

Understanding Users



Cognitive processes

PerceptionAttention

acquisition of information by sense organs and transformation into sensationstry to tap into perceptual mechanisms

make icons distinguishablecolour-codedon’t overemphasise with lines – solid areas of colour are often better

HCI (158359) © P.Lyons 2007-2008

HCI (158359) © P.Lyons 2007-200834

Is this interface a fake?Tooday's Best Tools/Options Dialog

HCI (158359) © P.Lyons 2007-200835

SHAPE PERCEPTION USES COLOUR INFORMATION<top>

<PL ‘HOLDER> Syntax

<middle>


<middle>


<bottom>


<bottom>


“E”

TERMINAL>

Syntax

<top>HeaderNextAlt

<middle>Non-tmlNextAltNTptr

“B”TerminalNextAlt

”missed”

TERMINAL

Syntax

<middle>HeaderNextAlt

<bottom>Non-tmlNextAltNTptr

“MISSED”TerminalNextAlt

<bottom>HeaderNextAlt

“E”TerminalNextAlt

HCI (158359) © P.Lyons 2007-200836

SHAPE PERCEPTION USES COLOUR INFORMATION<top>


<middle>


<middle>


<bottom>


<bottom>


“E”

TERMINAL>

Syntax

<top>HeaderNextAlt



”missed”

TERMINAL

Syntax






<top>


<middle>


<middle>


<bottom>


<bottom>


“E”

TERMINAL>

Syntax

<top>HeaderNextAlt



”missed”

TERMINAL

Syntax






HCI (158359) © P.Lyons 2007-200837

Understanding Users



Cognitive processes

PerceptionAttention

involves encoding and recalling knowledge to influence subsequent actionswe remember an enormous amount, but not everything

information is encoded (we don’t actually remember the things we see)information is filtered (emotion, multimodal encoding improve recall)

recognition (icons) is better than recall (commands); hence GUIs ruleimages easier to remember than wordscontext improves recognition

hence lecturers' lack of enthusiasm for handing out transcripts of

lectures!

HCI (158359) © P.Lyons 2007-200838

Therefore people can remember 5-9 chunks of general information

THE MAGICAL NUMBER 7 + 2Understanding UsersGeorge Miller (1956)

People can remember 5-9 numbers in short-term memory

standard lamphot chocolatehungry sharkinteresting bookwobbly cobblestonecomfortable armchairrotten wood

chocolate, wobbly, armchair, rotten, hot, cobblestone, wood, shark, comfortable, book, lamp, hungry, interesting, standard

HCI (158359) © P.Lyons 2007-200839

THE MAGICAL NUMBER 7 + 2Understanding Users

People can remember 5-9 numbers in short-term memory

Therefore people can remember 5-9 chunks of general information

Therefore menus should have no more than 7 options…only put 7 icons in a menu bar…never have more than 7 bullets in a list…put no more than 7 tabs at the top of a web page

All wrong because:not one of them involves short-term memorythey all require recognition, not recall

HCI (158359) © P.Lyons 2007-200840

A MORE SENSIBLE APPLICATION OF PSYCH RESEARCH

Understanding Users

Searching for items by nameprimary identification for a file is its nametyping a filename correctly (or worse, a URL) is a challenge

Bookmarks allow recognition to be used instead of recalleven if first bookmark loaded is incorrect, a couple of tries often suffices

Encode things to be found using a variety of modes namecolouricontimestamp

HCI (158359) © P.Lyons 2007-200841

READING, SPEAKING AND LISTENING

All three convey the same informationlistening has a lower cognitive load than readingreading allows repetition

but Microsoft Producer's go-back-10s button allows repetition of spoken sectionsreading can be faster than listening – serial input dominates but is not exclusivewriting is usually grammatical and concise;speaking is often poorly structured and ramblingpreferences fore reading, writing and listening vary widely within the populationdisabilities (dyslexia, hearing and vision impairment) affect modes differently

Understanding Users

HCI (158359) © P.Lyons 2007-200842

INTERPRET DATA FOR THE USER TO GUIDE DECISIONS

Copying one file over another requires confirmation

Why doesn’t it show filesizes graphicallyand a timeline to indicate relative ages of the files?

Or compare filesizes and dates for the userAfter all, it’s capable of determining whether or not 2 March is Today

Understanding Users

the existing file with this bigger, newer file

1.76MB3.57.50pmTuesday

8 March 2007

2.76MB3.49.44am

Today12 March 2007

CancelConfirm

incoming file isbigger and newer

Confirm file replace

21Dec

2:43:24

2003

4Feb

19:33:12

2008

74MB

25MB 74MB

CancelConfirm


incoming file isbigger and older

21Dec

2:43:24

2003

4Feb

19:33:12

2008

74MB

25MB74MB

CancelConfirm


incoming file issmaller and newer

21Dec

2:43:24

2003

4Feb

19:33:12

2008

74MB

25MB

25MB

CancelConfirm


21Dec

2:43:24

2003

4Feb2008

74MB

25MB

incoming file issmaller and older

25MB

HCI (158359) © P.Lyons 2007-200843

MAKE THE MENTAL MODEL CLEAR

Understanding Users

Internal construction of some aspect of the external worldenabling predictions to be made

?

“The designer has a clear (mental) model of how the system works, but the ‘system image’ does not convey it and the user gets lost.”

HCI (158359) © P.Lyons 2007-200844

• after a concert at an outside venue in the winter you get back to the car• what thermostat setting do you choose?

Internal construction ofenabling predictions to be made


Understanding Users

Deep models

Shallow models

Erroneous models

15

2025

30

35

thermostat is an on/off switch not a continuously varying valveheat isn’t delivered any faster when the setting is high

(though modern cars turn the fan up when ΔT is large)

HCI (158359) © P.Lyons 2007-200845

Internal construction ofenabling predictions to be made


Understanding Users

Deep models

Shallow models

Erroneous models

We want to matchit isn’t the user's responsibilitycomputer literacy courses are an acknowledgement of failure

are surprisingly common

HCI (158359) © P.Lyons 2007-200847

Understanding Users


We want the user’s mental model to match the designer’s conceptual modelit isn’t the user’s responsibility to learn the conceptual model computer literacy courses are an acknowledgement of failure

[People's mental models of technology are…]• • • •

Donald Norman, 1983 Some Observations on Mental ModelsGentner, D. & Stevens, A.l. (eds) (Mental Models)

is the goal

HCI (158359) © P.Lyons 2007-200849

Understanding Users


is the goalgive

deviseno thought required

devisesome thought required

provide instructions

provide help and tutorials

provide suitable

easy

difficultAre you a beginner, an improving intermediate, or an expert? often, all three

HCI (158359) © P.Lyons 2007-200850

WHAT'S THE MIND LIKE?

like the most recent technological inventionsteam enginetelephone exchangedigital computer

Understanding Users

Information processing modeldata enterssuccessive processing stages

imagesmental modelsrules

delaysenables predictions of times required to perform specific tasks

Internal and external information"external cognition" uses

input

encoding

comparison

responseselection

responseexecution

output

HCI (158359) © P.Lyons 2007-200852


Internal and external information complement each other "external cognition" uses information representation & manipulation tools)

Understanding Users

external representations of information

tools for manipulating information

+

external cognitionexternalises tooffloadsfacilitated by

HCI (158359) © P.Lyons 2007-200854


external cognitionexternalises to reduce memory loadoffloads computational loadfacilitated by annotation and cognitive tracing

Understanding Users

diaries, calendars, sticky noteslocation is important (note written on the hand, briefcase by the front door)

reminder to do something (remember Mum's birthday)reminder of what needs to be done (buy her a card)reminder of when to to it (before her birthday!)

HCI (158359) © P.Lyons 2007-200855

external cognitionexternalises to reduce memory loadoffloads computational load

Understanding Users


external cognitionexternalises to reduce memory load

well-chosen representation facilitates computatione.g., multiplication with arabic numerals vs. Roman numerals

HCI (158359) © P.Lyons 2007-200856

external cognitionexternalises to reduce memory loadoffloads computational load

WHAT'S THE MIND LIKE?Understanding Users

external cognitionexternalises to reduce memory loadoffloads computational loadfacilitated by annotation and cognitive tracing

annotation – e.g. writing to-do lists (IDEs) shopping lists (life) – crossing items off a list cf. wizards that keep a running record of things done

cognitive tracingmanipulating items into different orders or structures

cards in a game of bridge or pokercutouts of furniture in a room plan

HCI (158359) © P.Lyons 2007-200857

DESIGN IMPLICATIONS

Use interface representations that • reduce memory load • facilitate computational offloading

Understanding Users

HCI (158359) © P.Lyons 2007-200858

KEY POINTS

Understanding Users

Cognition involves many processes including

The conceptual framework of andprovide ways ofwhich can lead to

The way an interface is designed can greatly affect how well users can

how to do their tasks

HCI (158359) © P.Lyons 2007-200859

HCI (158359) © P.Lyons 2007-200860

HOT TOPIC

Designing For Collaboration And Communication

Email staid, adult conversations; spamCSCW working in groups with the enabling technology of computer networking

Chat rooms teenage bonding?WWW CSCW && commerce && academia &, &, &

Singshot karaokeWikis discussionsOnline games

Social networking sitesMySpace PiczoBeboFlickrYouTubeLinkedIndozens more?

photo-sharing

video sharingmaking business contacts

: A NEW AREA OF SOCIAL DEVELOPMENT?

HCI (158359) © P.Lyons 2007-200861

CONVERSATIONS


Interaction with and via computers has some aspects of a conversation Conversational structure

ritualisedgreetings

BILL: Ah, giddayBEN: 'Sup?BILL: Not much. What u up to, bro?BEN: Not muchBILL: Good on ya mate.

HCI (158359) © P.Lyons 2007-200862

CONVERSATIONS



ritualisedgreetings turn-taking

SUE: Can you get there for 8?PRUE: No problem.SUE: You sure?PRUE: When am I ever late?SUE: When aren’t you?

Human conversations often use subtle control-transfer cues

"Conversations" with computers tend towards the formal

HCI (158359) © P.Lyons 2007-200863

Interaction with and via computers has some aspects of a conversation

CONVERSATIONS


Conversational structure


MARMADUKE: When's the soup gonna be ready?PENELOPE: Don’t worry, we've got plenty of time.MARMADUKE: It was standing room only last timePENELOPE: And you're blaming me for the breakdown?

Humans are good at dealing with non sequiturs

HCI (158359) © P.Lyons 2007-200864

CONVERSATIONS

Interaction with and via computers has some aspects of a conversation


Conversational structure


MUM: and then she said ……YOU: uh huhMUM: and it's not as if she's a saint herself. Why, I remember …YOU: Oh, that's terribleMUM: and all because I said…. Well, it's true, she can’t deny it.YOU: [with resignation] yes, yes, no, that's absolutely right

Humans use

(possibly feigned)

HCI (158359) © P.Lyons 2007-200865

CONVERSATIONS



ritualisedgreetings turn-taking ritualised

farewells

BILL: Right thenBEN: Yeah, see yaBILL: Gotta get ma beauty sleep

HCI (158359) © P.Lyons 2007-200866

CONVERSATIONS



ritualisedgreetings turn-taking ritualised

farewells

GEORGE W. [looks at watch]TONY: Well, it's time I made a moveGEORGE W. Bin great talkin' to ya, TerryTONY: Yes, George, and may I say….GEORGE W. [looks at watch]TONY: Oh, well, I really should make a move GEORGE W. Bin real great talkin' to ya, TimmyTONY: [leaves]GEORGE W: [to an aide] Don’t tell me, don't tell me.

Who was that?

HCI (158359) © P.Lyons 2007-200867

TECHNOLOGY-MEDIATED CONVERSATIONS


What rules apply?emailphoneMSNtexting

Are breakdowns more common?

Are there special techniques for repairing them?

What's different?fewer cues;

no body language more opportunities for misunderstandingshumour more difficult

different timing; overlapping, more time to plan & re-read

distance; "free" communication, wider choice of correspondents

Are there richer interactions than with conventional communication?

HCI (158359) © P.Lyons 2007-200868

SYNCHRONOUS COMPUTER-MEDIATED COMMUNICATION


voice, typing, video

benefits

drawbacks

HCI (158359) © P.Lyons 2007-200869

G3 AND VIDEO COMMUNICATION


video was going to be the killer app for G3 phones

but

HCI (158359) © P.Lyons 2007-200870

ASYNCHRONOUS COMMUNICATION


emaildiscussion boardscomputer conferencing

can be read anywhere, anytimecan be sent to many peoplecan be easier to say things

flamingspammingmessage overloadfalse expectations about people's ability or willingness to replysubtle concepts can be difficult to express in writing

HCI (158359) © P.Lyons 2007-200871

NEW COMMUNICATION TECHNOLOGIES


novel ways of interacting and talking

SMS textingonline chat in chatroomscollaborative environmentsmedia spaces

setting in which groups of people can work together, even when they are not present in the same place and time.

create and control replay of real-time visual and acoustic environments, spanning physically separate areas.

HCI (158359) © P.Lyons 2007-200872

COLLABORATIVE VIRTUAL ENVIRONMENTS



BowieWorldinteractive, real-time, virtual site

"enter, explore, and chat in nine different and exciting BowieWorlds -- and over 100 exciting additional 3D worlds."

"an eerie garden, a breathtaking Chaos space, an incredibly creative virtual theatre, an art gallery showing David's original works, a 3D David Bowie store, the church, plus a Bowie inspired street maze and Decade Alley"

users assume a persona by "wearing" an avatar

walk around the worlds, explore the different worlds

see, chat, and interact with people, send email, animate yourself - all in 3D!

www.worlds.com

humans, animals, characters and strange creatures

HCI (158359) © P.Lyons 2007-200873

VIDEOWINDOW



1m x 2.5m picture window between two sitespermanently-onintended to resemble

technical problemswhen people wanted to have conversations

wide-area microphones

people talked

HCI (158359) © P.Lyons 2007-200874

HYPERMIRROR

Designing For Collaboration And CommunicationMirokawa & Maesako, 1998

HCI (158359) © P.Lyons 2007-200875

HYPERMIRROR


HCI (158359) © P.Lyons 2007-200876

COMPUTER-MEDIATED COORDINATION

Project management systems for organisations offer

Solely computer-mediated project management not completely successfulspecially withnumerous

specially in companies thatuse

users became desensitised to machine-generated reminders

allowed high-priority info to be displayed prominently outside of continuous stream of computer reminders"turned the technology inside out"


HCI (158359) © P.Lyons 2007-200877

TECHNOLOGIES TO SUPPORT AWARENESS


Awareness

Inverse of

strictly; the ability to focus on a single speaker amidst a babble of conversations at a party

Study of two London Underground controllersA responsible forB responsible foractionsB would while A wasboth

Heath and Luff (1992)

Diverse information sources available to humans

HCI (158359) © P.Lyons 2007-200878

A PRACTICAL SKILL

Interaction Design

Four basic activities

Some practical issues

Three characteristics

HCI (158359) © P.Lyons 2007-200879

CHARACTERISING INTERACTION DESIGN

Interaction Design

A process

Constraints

Focus

HCI (158359) © P.Lyons 2007-200880

DEVELOPING ALTERNATIVE DESIGNS

Interaction Design

Suggesting ideas for meeting requirements core activity

conceptual design

physical design

HCI (158359) © P.Lyons 2007-200881

BUILDING INTERACTIVE VERSIONS OF THE DESIGN

Interaction Design

How can an interactive design be tested?

Building interactive testbeds is essential

Paper-based prototypes

HCI (158359) © P.Lyons 2007-200882

EVALUATING DESIGNS

Interaction Design

How usable is the product?

How acceptable is the product?

HCI (158359) © P.Lyons 2007-200883

COMMUNICATING THE DESIGN

Interaction design and implementation rarely involves just one person is essentialsome form of is neccesary

should allow

Possible representations

Users should be involved

Interaction Design

HCI (158359) © P.Lyons 2007-200884

ACTIVITY

Design an interface for the search screen for a library catalogue

called

by (author(s)/artist(s))

published by

or with title keywordsabout

between andcoloured

no need tocannonote that

Show mebooksnewspapersjournalsvideosCDs/DVDspaintings

matches

Interaction Design

more criteria

is this technically feasible?

HCI (158359) © P.Lyons 2007-200885

IDENTIFYING NEEDS & ESTABLISHING REQUIREMENTS

Interaction Design

Identify target usersnot as obvious as you might think:

those who those who those who those who those who

Three categories of user (Eason, 1987): primary: secondary: tertiary:

Perhaps more usefully referred to as stakeholders?

HCI (158359) © P.Lyons 2007-200886

STAKEHOLDERS FOR A CHECKOUT SYSTEM

managerscheckout operators customers

Interaction Design

HCI (158359) © P.Lyons 2007-200887

WHAT ARE "NEEDS"?

Difficult question to answerfor most of us,wireless modem? who did the inventors of consult about requirements?

Interaction Design

in 1950?

Humans vary in many dimensions: hand size affectsmotor abilities canheightstrength and dexterity

Netpliance (software to perform a task in the internet seamlessly) usedavoidedprompted developers to

HCI (158359) © P.Lyons 2007-200888

GENERATING ALTERNATIVE DESIGNS

may provide clueshence cars with tillers, hulls (like boats), open driver positions (like carriages)but customers' "non-electronic" behaviours can give clues to enhancing e-commerce

Interaction Design

Whence a new design?natural talent, flair?cross-fertilisation of ideas from other areassteam engine resulted from observation of a kettle lidearly word processors just captured typed input

browsing other designs can stimulate creativity

HCI (158359) © P.Lyons 2007-200889

CHOOSING AMONGST ALTERNATIVE DESIGNS

Two categories of decisionthose based on

those based on

Interaction Design

Usability is concerned withdiscuss with stakeholders aboutmeasure

no of , time to , evaluation specifying, recording and measuring

HCI (158359) © P.Lyons 2007-200890

IDENTIFYING MEASUREABLE CHARACTERISTICS

Measuringdoes the interfaceis it

Interaction Design

Measuringwhat is the

Measuringhow often does

Measuringwhat proportion of what is the relationship between

Measuringhow long do

Measuringat what rate dohow long does it take to

What about

HCI (158359) © P.Lyons 2007-200891

Microsoft’s “synch and stabilise” processplanning phase; product “vision”, specs and schedule

vision statement; identify and prioritise features with extensive customer inputspec document; features, architecture, component interdependenciesschedule and team formation; 1 manager, 3-8 developers, 3-8 testers

development phase; 3 or 4 sub-phases with milestone release after eachevolution of specification3 subprojects; most critical 1/3 of features in #1, least in # 3

stabilisation phase; internal and external testing, stabilisation, shippinginternal and external testing preparation of “golden master” release disks

Microsoft’s “synch and stabilise” process phase

vision statementspec document; schedule and team formation;

development phase

subprojectsstabilisation phase

testing preparation of

LIFECYCLE MODELS

Software Engineering hasallowallowallowallow

Interaction Design

Provide

HCI (158359) © P.Lyons 2007-200892

A COMMON LIFECYCLE MODEL FOR INTERACTION DESIGN

Interaction Design

final product

build an interactive

versiondesign evaluate(re)

identify needs/ establish

requirements

This has evolved from less user-centred lifecycle models

requirements analysis

design

code

test

maintenance

Waterfall lifecycle

less organiceach step completes before next is startedlimited feedback freezes requirements (possibly for years)no user evaluation

, but no iteration

HCI (158359) © P.Lyons 2007-200893

Interaction Design


versiondesign evaluate


requirements


Spiral model iterative - for risk analysis

spiral model uses prototypinglater (1998) WinWin version

incorporated stakeholder "win" conditions

(re)

HCI (158359) © P.Lyons 2007-200894

Interaction Design


RADmore user -centred

introduced time-boxingincremental system implementation

first principle of design methodologyactive user involvement is imperative

project initiation

Joint App. Dvlpt. workshops

iterative design & build

evaluate final system

implementation review




requirements(re)

HCI (158359) © P.Lyons 2007-200895

Interaction Design





requirements(re)

evaluation

implementation task/functionalanalysis

prototyping

design

requirements/specification

Star modelbased on observationentry at any pointno ordering of stages evaluation at every stepnot widely used too much flexibility?

HCI (158359) © P.Lyons 2007-200896

Interaction Design





requirements(re)

User Engineering Lifecyclea holistic view of usability engineeringhelpful to those with little usability experience


yes

installation

style guide

functionality complete?

all issues resolved?

doneyes

design/testing/development

no

no

Deborah Mayhew (1999)

HCI (158359) © P.Lyons 2007-200897

Interaction Design





requirements(re)

User Engineering Lifecyclea holistic view of usability engineeringhelpful to those with little usability experience


yes

installation

style guide



doneyes


no

no


HCI (158359) © P.Lyons 2007-200898

Interaction Design


doneyes

yes

installation

style guide




no

no



HCI (158359) © P.Lyons 2007-200899

user profile task analysisplatform

characteristicsgeneral design

principles

usability goals


Interaction DesignDeborah Mayhew (1999)



style guide


no

yes

installation

all issues resolved? no

doneyes

HCI (158359) © P.Lyons 2007-2008100

yesfunctionality complete?

installation




work re-engineering

conceptual model

CM mockups

Iterative CM evaluation

major flaws eliminated?N

Screen Design Standards

SDS prototyping

Iterative SDS evaluation

met usability goals?Y N

Detailed UI Design

iterative DUID evaluation

met usability goals?

style guide

Y

style guide N

style guide

style guide



doneyes

no

no

HCI (158359) © P.Lyons 2007-2008101

User Feedback




style guide


no

yesfunctionality complete?

installation


done

no

HCI (158359) © P.Lyons 2007-2008102

THE PRELIMINARY STAGE

Needs And Requirements

The taskto produce a set of requirements

What sorts of requirements exist?

How do we identify requirements of a particular interface?

How do we choose an appropriate way to gather requirements data?

How do we develop scenarios, use cases and essential use cases?

How do we perform hierarchical task analysis on a simple description?

HCI (158359) © P.Lyons 2007-2008103

WHAT ARE WE TRYING TO DO?


To understand the users

To understand the task

To understand the context of the task

To produce a (stable) set of requirements

HCI (158359) © P.Lyons 2007-2008104

HOW WILL WE DO IT?


while not finished do

gather data

interpret data (less formal) and analyse data (more formal)

express results as a formal set of requirements

HCI (158359) © P.Lyons 2007-2008105

WHY DO WE DO IT?


Why do IT projects fail?No single cause of IT project failure

butIT professionals identify:

most frequent failure stage as "requirements definition"most common cause of failure as "unclear objectives and requirements"

Taylor (2000) IT Projects: Sink or Swim The Computer Bulletin, January, 24-26

If the requirements are wrong, the product won't succeedeven if the imeplemntation is perfecteven if it's delivered under budgeteven if it's delivered ahead of time

because people won’t want to use it

Taking users' opinions and needs into accountincreases the probability of meeting their needs and expectations

HCI (158359) © P.Lyons 2007-2008106

REQUIREMENTS NEED TO BE ESTABLISHEDNeeds And Requirements

Various titles have been given to establishing what a product should do:

Requirements

gathering

capture

elicitation

analysis

engineering

suggest that requirements exist ready-made

suggests that users or clients can tell usbut they may not know them all or know them in detailreally a second-stage, post-"gathering" activity

recognises that establishing requirements is a carefully controlled process

analytic and syntheticiterativeevolutionaryinvolving negotiation

HCI (158359) © P.Lyons 2007-2008107

WHAT EXACTLY IS A REQUIREMENT?


A statement of what an intended product should do, or how it should perform

It should be• specific• unambiguous• clear• measureable

"The website should be streamlined" "Pages should load fast""All pages should load in under 5s"

meaninglessvagueprecise & measureable

HCI (158359) © P.Lyons 2007-2008108

TYPES OF REQUIREMENT



Functional requirementsthe actions that the product should performe.g. a word processor should support <some list of> formatting styles

list may be decomposed at various levels; paragraph, character, inter-character (kerning)

Non-functional requirementse.g. memory size, response time, maximum delivery time, physical sizedata requirements

types of data to be stored (type, volatility,size, persistence, accuracy)environmental requirements

context in which the product must operate; physical (lighting, temperature, shock, users wearing proctective clothing)social (collaboration, real-time data sharing, location of collaborators, privacy)organisational (user support and training facilites, IT dept's attitude)technological (compatability with other products, speed requirements)

user requirementsabilities and skillsnovice (losta training, clear instructions), expert (flexibility & short cuts)

HCI (158359) © P.Lyons 2007-2008109


TYPES OF REQUIREMENT

Non-functional requirementse.g. memory size, response time, maximum delivery time, physical sizedata requirements

types of data to be stored (type, volatility,size, persistence, accuracy)environmental requirements

context in which the product must operate; physical (lighting, temperature, shock, users wearing proctective clothing)social (collaboration, real-time data sharing, location of collaborators, privacy)organisational (user support and training facilites, IT dept's attitude)technological (compatability with other products, speed requirements)

user requirementsabilities and skillsnovice (losta training, clear instructions), expert (flexibility & short cuts)

usability requirementseffectiveness, efficiency, safety, utility, learnability, memorabilityfun to use, aesthetically pleasing, motivating

can be difficult to measure…

HCI (158359) © P.Lyons 2007-2008110

DETERMINING REQUIREMENTS


Determining requirements & evaluating systems both involve data gatheringcollect sufficient, relevant, and appropriate dataexpands, clarifies & confirms initial requirements

Possible types of informationtasks that users currently performusers goalstask contextsrationale for current arrangements

Data gathering techniquesquestionnairesinterviewsfocus groupsworkshopsnaturalistic observationstudying documentation

and various combinationsof these

data gatherer can augment these with suitable props

HCI (158359) © P.Lyons 2007-2008111

uncertainty (external event)

COMBINING DATA GATHERING AND PROPS

Needs And RequirementsRudman & Engelbeck (1996) Lessons for choosing methods for designing complex Graphical User Interfaces

in Rudsill, Lewis, Polson and McKay (eds) HCI Design, Success Stories, Emergins

Methods, Real World Context

Ruman and Engelbeck gathered data for a complex GUI for a phone companyThey used

on-site observation to undertand the nature of the current businessparticipatory prototyping involving employeesinterviews to establish background business and complexities of the wider domain

information captured as semantic netsinterviews to understand employees' decision sequences (supports dialog design)

decision trees to understand decisions made when dealing with customersrole-playing prototype walkthroughs using simulated scenarioscat

mammal

is a

bearis a

furhas

has

whale

is a

vertebrateis a

waterlives in

fishlives in

animal is an

is an

is a

1

A

B

decision

C

2

outcome 1

outcome 2

outcome 3

outcome 4

outcome 5

outcome 6

outcome 7

HCI (158359) © P.Lyons 2007-2008112


DATA GATHERING TECHNIQUES

questionnaires

interviews

focus groupsand

workshops

naturalisticobservation

studyingdocumentation

technique suits kind of data advantages disadvantages

answering specific questions

quantitative and qualitative

cheap to reach many people

design crucial;low response rate;

results may not be useful

exploring issues mostly qualitative some quantitative

can guide interviewees;

contact with users

time consuming;can be intimidating

collectingmultiple

viewpoints

mostly qualitative some quantitative

find consensus & conflicts;

contact with users

some may dominate

understanding context of user

activityqualitative

insights that are otherwise

unavailable

very time-consuming;

mountains of data

procedures, regulations,standards

quantitative users not requiredinnaccurate

representation of reality

HCI (158359) © P.Lyons 2007-2008113

CHOOSING BETWEEN TECHNIQUES


type of information required

resources required

accessibility of stakeholders

Relevant criteria

nature of the task to be performedsequential steps or rapidly overlapping series of subtasks?information-rich, needing complex visual displays or information-lite, simple signals?oriented towards untrained lay person or skilled professional?

properties of the data gathering techniquetime requiredknowledge of cognitive processes required (we aren't all psychologists)

HCI (158359) © P.Lyons 2007-2008114

SOME GUIDELINES


identify stakeholders' needsobserve existing behaviour, support tools, competitor's tools

involve all stakeholder groupseasy to forget someonee.g, distribution company that interviewed all possible affected groups in the company - but not the suppliers

involve representative selection of stakeholdersall have individual perspectives, responsibilitiesbosses' opinions of how the company works may be inacccurate

combine different data-gathering techniquesdifferent types of informationdifferent perspectivescorroborrate findings from other techniques

use props prototypes, task descriptions, storyboardsyou can re-use props at later discussions (requirements-gathering is iterative)

HCI (158359) © P.Lyons 2007-2008115

SOME GUIDELINES

combine different data-gathering techniquesdifferent types of informationdifferent perspectivescorroborrate findings from other techniques

use props prototypes, task descriptions, storyboardsyou can re-use props at later discussions (requirements-gathering is iterative)


pilot the data gathering activityespecially with questionnaires – ambiguity and no chance to explaindon’t treat the pilot data as validmay need to fix the activity after running the pilot

pragmatic considerations may constrain the activitybut decide what you'd really like to know so you make the right compromises

use suitable data recording techniques for user-contact sessionsvideo/audio most accurate, but vast quantities of data, needs video production skillsnote-taking reduces data, but is difficult, and impartiality can be hard to achieve

HCI (158359) © P.Lyons 2007-2008116

ACTIVITY


A mobile system for a roading company for recording status of roading projects

potholes, deviations, new roadswhat requirements should be gathered?

who are the stakeholders?managers?clerks of works?workers?union reps?others???

what sort of information gathering techniques?interviews?questionnaires?focus groups?documentation (roading regulations)?naturalistic observation (do they follow the rules) ?

HCI (158359) © P.Lyons 2007-2008117

DATA INTERPRETATION AND ANALYSIS


Don't wait till the experience has gone stale

Initial interpretation before deeper analysis

Choose suitable tools for analysing different elementsdata flow diagrams, state charts, work-flow charts for functional requirementsentity-relationship diagrams for data requirements class diagrams combine these for OO implementations

HCI (158359) © P.Lyons 2007-2008118

EXAMPLE SYSTEMS

Library catalogue


Shared diary

allows patrons to search for books by authorto search for books by titleto search for books bysubjectto determine location of a bookto discover their own current status (loans/overdues, etc)

replaces central papers calendar for a cooperating groupshould prevent central calendar from getting out of stepcollaborative/social questions

people don't like others setting their appointmentsneeds to allow users to block times

HCI (158359) © P.Lyons 2007-2008119

TASK DESCRIPTIONS


Scenariosinformal narrative story describing human activities or taskscontexts, needs and requirements; not technological support for the taskuser-oriented vocab. means scenarios are comprehensible (or produced) by stakeholdersexplores constraints, contexts, irritations, facilitators of human tasks identifies important tools, stakeholderstestbook has several useful examples (pps 224 and 225)

HCI (158359) © P.Lyons 2007-2008120

TASK DESCRIPTIONS

Use Casesfocus is on user-system interactionspecific path through the system by a specific "actor"Main Use Case describes the "normal course" through the use casealternative courses list below Main Use Case


1. the user chooses the option to arrange a meeting2. the system prompts user for names of attendees3. the user types in a list of names4. the system checks that the list is valid5. the system prompts the user for meeting constraints6. the user types in meeting constraints7. the system searches the calendars for a date that satisfies the constraints8. the system displays a list of potential dates9. the user chooses one of the dates10. the system writes the meeting into the calendar11. the system emails the time of the meeting to the other participants 5. Alternative Course if the list of people is invalid5.1 the system displays an error message5.2 the system returns to step 58. Alternative Course if no potential times are found8.1 the system displays a suitable message8.2 the system returns to step 5

HCI (158359) © P.Lyons 2007-2008121

TASK DESCRIPTIONSNeeds And Requirements

Typical sections include:Use Case Name Iteration Summary Preconditions Triggers Basic course of events Alternative paths Postconditions Business rules Notes Author and date

There may also be additional sectionsassumptionsexceptionsrecommendationstechnical requirements.

HCI (158359) © P.Lyons 2007-2008122

TASK DESCRIPTIONS


Actors may participate in more than one use case

arrange a meeting

retrieve contact details

updatecalendar

entry

With use cases, focus is on how the user uses the systemmore suited to conceptual design than requirements gatheringbut helps some stakeholders express their requirements

Steps in developing a use caseIdentify actorsfor each actor, for each goal, produce a use case

library patron has locates books u.c., librarian has update catalogue u.c.

administrator departmentmember

HCI (158359) © P.Lyons 2007-2008123

Title: arrangeMeetingUSER INTENTION SYSTEM RESPONSIBILITYarrange a meeting

request meeting attendees and constraintsidentify meeting attendeesand constraints

suggest potential dateschoose preferred date

book meeting

TASK DESCRIPTIONS

Essential Use Cases deal with problems with scenarios and use casesscenarios concentrate on realistic and specific activities – don't give an overviewuse cases make assumptions; there is techology, interface is of a particular type


EUCs are abstractions from scenariosmore general than a scenario, try to avoid assumptions of a use casea structured narrative

• a name that expresses the overall user intention• a stepped description of user actions (at the level of intentions, not interactions)• a stepped description of system responsibilities (but not interaction components)

meaning "the essence of", rather than "obligatory"

focus on user roles, not actors

HCI (158359) © P.Lyons 2007-2008124

HCI (158359) © P.Lyons 2007-2008125

THE VOLERE REQUIREMENTS SHELL

REQUIREMENT #: Unique id REQUIREMENT TYPE: template

section

EVENT/USE CASE #:Origin of the requirement

DESCRIPTION: A one-sentence statement of the intention of the requirement

RATIONALE: Why is the requirement considered important or necessary?

SOURCE: Who raised this requirement?

FIT CRITERION: A quantification of th requirment used to determine whether the

solution meets the requirement

CUSTOMER SATISFACTION: Measures the desire to have the requirement

implemented

CUSTOMER DISSATISFACTION: Unhappiness if it is not implemented

DEPENDENCIES: Other requirements with a change effect

CONFLICTS: Requirements that contradict this one

SUPPORTING MATERIALS: Pointer to supporting information

HISTORY: Origin and changes to the requirements


HCI (158359) © P.Lyons 2007-2008126

TASK ANALYSIS


Used for analysing existing systemsto determine rationale, purpose behind people’s actions and methods of achieving itidentifies existing practices that can act as the basis for new requirementsinvolves techniques that expose both cognitive and physical processescan work at high level of abstraction or low level of detail

Hierarchical Task Analysisbreaks task into subtasks, subtasks into sub-subtasks etc.plans are then formulated for achieving groups of subtasks

physical and observable actions that are performedincludes non-software, non-interaction device actions

start by determining and examining a user goaltreat this as a task and analyse hierarchically

HCI (158359) © P.Lyons 2007-2008127

HIERARCHICAL TASK ANALYSIS – AN EXAMPLE

User goal: borrowing a book from the librarytask analysis:0: borrow a book from the library

1. go to the library2. find the desired book

2.1 access library catalogue2.2 access the search screen2.3 enter search criteria2.4 identify required book2.5 note location

3. retrieve the book4. get book issued

plan 0: do 1-3-4. plan 2: do 2.1, 2.4, 2.5,


As stated, the analysis is inflexibleplans add some flexibility to the process

analysis can be expressed as a tree diagramplans are annotations atparticular places on the diagram

plan 0…

plan 2…If book isn’t on the shelf, do 2-3-4If book not identified, do 2.2, 2.3, 2.4, 2.5

HCI (158359) © P.Lyons 2007-2008128

TWO DESIGN CATEGORIES

Design, Prototyping, And Construction

Conceptual Designwhat the product doeshow it behaves

Physical Designscreensmenusiconsgraphicsetc.

evaluation

Lo-fi designs in the early stages

Polished designs later

HCI (158359) © P.Lyons 2007-2008129

TWO DESIGN CONTEXTS


Modifying an existing designinvestigation, prototyping, and evaluation essential

Designing from scratchinvestigation, prototyping, and evaluation essential

HCI (158359) © P.Lyons 2007-2008130

TOPICSDesign, Prototyping, And Construction

Prototyping

Conceptual models

Physical design

Scenarios and prototypes in conceptual design

Standards, guidelines and rules

Support tools

HCI (158359) © P.Lyons 2007-2008131

PROTOTYPING AND CONSTRUCTION


A physical scale model? A piece of (unreliable) software?

A paper-based storyboard

A PowerPoint presentationa static sequence of slidesa hyperlinked sequence of slidesan electronic "picture"a video simulation of a taska 3D mockup of a workstation

An electronic "picture"

A video simulation of a task

A 3D mockup of a workstation

Jeff Hawkin (Founder of Palm)carved a wooden prototype Palm Pilotcarried it with him everywherepretended to enter information into it

Ehn & Kyng in 1982labelled a cardboard box "Desktop Laser Printer"to give insight to users, journos, typographers

Prototyping photocopierscovered a box with velcro"buttons" could be stuck on & shifted elsewhere

HCI (158359) © P.Lyons 2007-2008132

WHY PROTOTYPE?


Prototypes facilitate communicationstakeholders can see, hold, interact with ideasyou can test ideas for yourselfprototypes encourage reflectionprototypes answer questionsprototypes support choices

Prototypes are cheaper than implementation

HCI (158359) © P.Lyons 2007-2008133


PAPER PROTOTYPE

A handheld deviceto support an autistic child

lightweight,rubberized

case

battery indicator

20 cm

20 cm

BISCUIT

CAKEDINNERDRINK

TOILETEXAMPLEBUTTON

battery indicator

Communication Mate

ring attachment for belt loop

pressing one of these buttonsproduces a recordedmessage

high-output speaker

can testsuitability of buttonssuitability of imagessufficiency of functions

can't testspeech volumeresponse fast enough

HCI (158359) © P.Lyons 2007-2008134

LO-FI PROTOTYPES


not meant to look like a final productlow cost materialseasily formed materialsrestricted or no functionalitymakes it easy to say: "let's change this"

quick to modifycan go through more generations of evaluation & redesign before final prototypemore likely to represent users' needs and requirements

intended to encourage iterative evolutionsupport for throw-away, exploratory, fast turn-around brainstorming

low financial investmentlow construction investmentlow aesthetic investmentlow emotional & ego investment

HCI (158359) © P.Lyons 2007-2008135

Often used as part of scenariosa series of sketches showing a user progressing through a taskthe sketches don't have to be high-quality – though comprehensibility is a plus

STORYBOARDINGDesign, Prototyping, And Construction

Often used as part of scenariosa series of sketches showing a user progressing through a taskthe sketches don't have to be high-quality

Often complemented by on-the-spot sketchingto give form to the designer's own ideasto confirm user's ideasit can be worth practicing standard symbols

HCI (158359) © P.Lyons 2007-2008136

STORYBOARDING


Often used as part of scenariosa series of sketches showing a user progressing through a task the sketches don't have to be high-quality – though comprehensibility is a plus

A fairly formal storyboard for a lighting control system:

http://tinyurl.com/3978ds

numbered ovals linkactions specified in commentary tocomponents in the interface

user sees a pictorial version of the interface and can follow the stepsof a task – also called a cognitivewalkthrough

This storyboard was based on screenshotsit could have used sketcheswhich would have felt much easier to criticise

HCI (158359) © P.Lyons 2007-2008137

INDEX CARDS


75mm x 1255mm cards A pre-database technology for organising informationtypically used by

researchers for recording referencescooks for recording recipesgenealogists for recording family relationshipslibraries for recording catalogue information

Well-suited for organising interfaces with sequential properties

websites 1 card per screenwizards 1 card per screen

multi-tab interfaces 1 card per tab

HCI (158359) © P.Lyons 2007-2008138

"There is a tide in the affairs of men, which, Taken at the flood, leads on to fortune

WIZARD OF OZ PROTOTYPING


In the story, Dorothy goes to Oz to meet the powerful Wizardhe turns out to be wizened, not wizardhe produces grandiose effects by amplification and pulling levers

In interface prototyping,users are Dorothies the interface is the projection of the wizardsystem designers are the real wizard

generating interface responses in real time,at a computer out of sight of the user

originally allowed experiments with speech-recognition interfaces

Omitted, all the voyage

of their lifeIs bound

in shallows and in miseries.

typetty, typetty, type

HCI (158359) © P.Lyons 2007-2008139

HI-FI PROTOTYPING


Prototypes designed to look like the final productmoulded plastic, aluminuim, not woodDelphi, VB, PowerPoint, Macromedia Director

LO-FIadvantages & strengths

low costquick (multiple evaulations)

aids communicationcan change screen layouts

requirementsproof-of-concept

disadvantages & weaknesseslimited error checking

doesn’t produce a good detailed specfacilitator-driven

mostly restricted to requirements phasenot good for usability testing

HI-FIadvantages & strengths

fully functionaluser-driven

navigational scheme clearcan use for exploration and testhas look and feel of final product

a "living specification"marketing and sales tool

disadvantages & weaknessesmore expensive

slow (one evaulation only)ineffiecient for proof-of-concept

not good for requirment gatheringelicits comments about superficial aspects

any bugs halt testing

gathering requirements,

exploring content & structure

selling ideas, driving product development,

evaluation platform

HCI (158359) © P.Lyons 2007-2008140

COMPROMISES IN PROTOTYPING


Prototypes are modelsnon-functional, or limited functionalityhorizontal prototyping (many functions, little detail) gives breadth vertical prototyping (few functions in detail) gives depthoften poorly codedmust use proper SE methodology for real system, & not copy structure of prototype

different quality considerations when there are millions of users

Evolutionary prototypingprototype gradually becomes the productapplies to hi-fi prototypesrequires more rigorous testing product is likely to be less robust

increased maintenance costproduct is likely to get to the market faster

captures the market

Throwaway prototypingsuccessive flaky prototypes, finally fully engineered product applies to lo-fi prototypesdifficult to start work on throwaway itemdifficult to let go of development worktesting is a clearly defined phasefinal product is a big effortslower developmentmore reliable, more usable product

HCI (158359) © P.Lyons 2007-2008141

CONCEPTUAL DESIGN


Transforming requirements to conceptual modelConceptual model

description of the system integrated set of ideas and conceptsdefining behaviours , functions, look and feel that are comprehensible to users

How to get a good conceptual model?analyse the requirements data rigorously

meetings of the development team to review requirementsreveals different perspectivesideas emerge from this process

practice empathising with the usersdesigners of an automatic defibrillator couldn’t be fitted with a defibrillator

fitted with pagers that received Defibrillate Now messages at randomarrived at difficult times (while holding a child, operating power tools)arrived in difficult situations (how to explain what was happening in a social situation)

producers of systems for older people were fitted with a "Third Age Suit"restricted movement to simulate the feeling of being old (in the Third Age)

Oh, if only this feeling were nothing but a simulation!

HCI (158359) © P.Lyons 2007-2008142

GUIDING PRINCIPLES


• keep your mind open and focused on the users

• discuss ideas with stakeholders at every opportunity

• test ideas with lo-fi prototyping to get rapid feedback

• iterate, iterate, iterate

• to get a good idea, get lots of ideas

HCI (158359) © P.Lyons 2007-2008143

DEVELOPING A CONCEPTUAL MODEL


instructing

conversing

manipulating

navigating

exploring and browsing

interactionmode

3 dimensions(at least)

best choice depends on application domaina computer game?a drawing package?a photo organiser?

HCI (158359) © P.Lyons 2007-2008144




instructing

conversing

manipulating

navigating


interactionmode

interface metaphor

too many to list

desktop VR circus album ledger sheet

base model on familiar knowedgedesign functionalityidentify difficult areasgenerate metaphors that clarify them

check out users' task descriptionscheck out manual approaches

HCI (158359) © P.Lyons 2007-2008145




instructing

conversing

manipulating

navigating


interactionmode

interface metaphor

too many to list


evaluating a metaphor does it structure the task? (it should)is it relevant? (it should all be)is it easy to represent?is it easy to understand?is it extensible?

HCI (158359) © P.Lyons 2007-2008146

instructing

conversing

manipulating

navigating


interactionmode

interface metaphor

too many to list


interactionparadigm

WIMP

ubiquitous

wearable

command line




overall design philosophymore all-embracing than interaction mode

HCI (158359) © P.Lyons 2007-2008149

SCENARIOS IN CONCEPTUAL DESIGN


informal stories capture realistic properties of user tasks and activitiespowerful communication mechanismadd realism to proposed or imagined situationsstakeholders often involved in producing and checking through scenarios

can be usedas a basis for the overall designto guide technical implementation to facilitate cooperation within design teamsto facilitate communcation between members of multidisciplinary teamsto define user tasks for user evaluation of prototypesto sell ideas to users, managers, customersto give insight into positive and negative consequences of a design solution

HCI (158359) © P.Lyons 2007-2008150

used as basis for screen sketches and a user guidewhat information should be on the screen at a given time?what components should be built?how might the device be used?

e.g."imagine taking away the keyboard and mouse from your present workstation and doing everything through voice commands"

CASE STUDY – USING SCENARIOS THROUGH A DESIGN

A speech-recognition applicationno detailed set of user requirementsspeech-to-text (dictation)speech command

Basic direction fixed, more scenarios to decide system components

initial scenarios

basic directionfor the project

later scenarios

systemcomponents


HCI (158359) © P.Lyons 2007-2008151




initial scenarios


later scenarios

systemcomponents

task: open editor

find file <name>

change font to Times 16

save changesexit editor

voice scenario: "system editor"

"open""open""file""find"

"r" "e" "p" (1st 3 letters of filename)"open""font"

"times""16""OK"

"save""close"

to help choose appropriate vocabulary

HCI (158359) © P.Lyons 2007-2008152




initial scenarios


later scenarios

systemcomponents

additional taskscenarios user tests

e.g. "change the background colour of thecommunication folder icon to red"But users found a problem: what could they say?System's "what can I say?" module was hard to use

videoscenarios user feedback

feedbackscenarios

furtherdesign

"I would like to walk around while I dictate"Benito Mussolini

more scenario-based feedback later in the design

HCI (158359) © P.Lyons 2007-2008153

USING PROTOTYPES IN CONCEPTUAL DESIGN


Prototypes are tools for evaluation different types of evaluator

feedback from users about usabilityfeedback from technical staff about feasibilitytune prototypes to each stakeholder group

different types of evaluationlo-fi for early tests to generate user feedback

informal "quick and dirty" evaluation sessionspaper-based prototypesget suggestions about a range of aspects

hi-fi for people who make superficial judgements (managers!)a different sort of evaluationdecisions about buying (external) or adopting (internal)more-or-less functional software

HCI (158359) © P.Lyons 2007-2008154

PHYSICAL DESIGN


Concrete detailsscreen layoutchoice of iconsmen structure

Try to defer physical details till after conceptual designthough inevitably there's some mixing, because design is iterative

Physical constraints may limit conceptual designcell phones designers have to map much functionality onto small screens

Physical design should support & not interfere with user's cognitive processesattention, perception, memory, problem-solving, planning, reasoning & decision-making

HCI (158359) © P.Lyons 2007-2008155

SHNEIDERMAN'S 8 RULES OF INTERFACE DESIGN


Strive for consistencyFile menu always at top leftalways ask for confirmation before destroying dataEnable frequent users to use shortcutsaugment menus with shortcuts and hotkeys

Offer informative feedbackerror 404 means "The URL couldn’t be found" so why not say so?

Design dialogs to yield closuremake it clear when an action (e.g. printing) has completed

Offer error prevention and simple error handlingbetter if the user can't make errorserrors shouldn't be catastrophic; provide support for correctionPermit easy reversal of actionsundo stack (command pattern)

Support internal locus of controllet users feel in control, not controlled

Reduce short-term memory loadoffer options instead of getting them to remember information between screens

HCI (158359) © P.Lyons 2007-2008156

WIDGETS


Embodiment of design rulesmay be selected from librarymay be designed according to style guide

specifies interface's look and feelsize and shape, relative positions of buttonsicons to use throughout the applicationfonts

commercial style guidein-house style guide to promote corporate identity (Massey's website guidelines)

Menu design

Icon design

Screen layout

HCI (158359) © P.Lyons 2007-2008157

MENU DESIGN


Choice of actions related to the current taskbased on task structuredrop-down, pop-up, single-dialog menus

How long is the menu to be?In what order will the items appear?How is the menu to be structured, e.g. when to use sub-menus, dialog boxes?What categories will be used to group menu items?

ISO 9241 style guide for menu items 5.2 Group menu items to reflect user expectations and facilitate option search 5.2.1 if many (n>7) items if meaningfully groupable, group into categories – customise, edit, print else // not meaningfully groupable group into categories of √n members

HCI (158359) © P.Lyons 2007-2008158

MENU DESIGN


Use short, clear, unambiguous namese.g. calendar program

Add EntryEdit EntryMove EntryDelete Entry

Add ContactEdit ContactDelete Contact

HCI (158359) © P.Lyons 2007-2008159

ICONS


Difficult to find unambiguous iconsstandardised ladies' and gents' toilet icons caused confusion

Draw on existing traditions or standardsNouns are easier to iconise than verbs

search icon: magnifying glass (but also zoom tool)binoculars

meeting icon:

Would these work if they were smaller?

HCI (158359) © P.Lyons 2007-2008160

DEVELOPMENT TOOLS


Too many to catalogueguidelines instead• help design interface given a specification of end users tasks• help implement the interfaces given a specification of the design• create easy-to-use interfaces• allow the designer to investigate different designs rapidly • allow non-programmers to design and implement the user interface• automatically evaluate the interface and propose improvements• allow the end user to customise the interface• provide portability• be easy to use

HCI (158359) © P.Lyons 2007-2008161

SCREEN DESIGN


Two aspectssplitting task across multiple screens (or tabs)

refer to task analysis – one screen per task1 step per screen – can be too simplisticmultiple simultaneously active screensmain screen + taskbars

design of individual screensdraw user's attention to the main pointuse colour, motion, boxing and grouping to clarify relationships

HCI (158359) © P.Lyons 2007-2008162

WHICH TYPES OF TOOLS WORKED?

Successful toolswindow managers & toolkits

event languagesinteractive interface builders (VB, Delphi)

component systemsscripting languages

OO programming

Less successful toolsUIMS

formal language tools (state machines etc)tools for maintaining constraintsautomatic interface generators


overlapping windows use screen space effectivelymap well onto mouse-based inputmake it easy to design visual layoutreduce the programming, modularallow for fast prototypinggood for representing buttons and other widgets

separate business rules and UI - too abstractsuitable for sequential dialogs; unpopular paradigmunpredictable; which constraint will be obeyed?also unpredictable

HCI (158359) © P.Lyons 2007-2008163

ACTIVITY


Design a website as a noticeboard for upcoming presentationsan adminstrator accepts offers of presentations, arranges rooms, confirms dates

HCI (158359) © P.Lyons 2007-2008165

TYPES OF DISABILITY

Visual impairments: blindness

blind people rely on hearing and touch to use computers.low vision

people with low vision may be able to read text and distinguish forms, objects and pictures under specific conditions (e.g., very large fonts, high contrast, particular lighting conditions) but usually also rely on other senses, such as hearing and touch.

colour blindness people with colour blindness have inability to discriminate differences in colours, mainly between red and green.

Dealing With Disabilities

HCI (158359) © P.Lyons 2007-2008166

TYPES OF DISABILITY

Motor or dexterity impairments: total absence of limbs or digitsparalysislack of fine controlinstability or pain in the use of fingers, hands, wrists, or arms.

difficulties with standard input devices, (keyboard and mouse).


HCI (158359) © P.Lyons 2007-2008167

TYPES OF DISABILITY

Hearing disabilities: total deafness (inability to hear at all),

slight loss of hearingability to sense sounds and speechdifficulty in identifying their content

Deaf people communicate using sign and written language, while hard of hearing individuals may rely on lip-reading and hearing-aids.


HCI (158359) © P.Lyons 2007-2008169

TYPES OF DISABILITY

Cognitive disabilities: a very broad category, which roughly includes difficulties in the performance of mental tasks. These can range from limited and focused problems affecting a very specific cognitive function (e.g., the ability to understand math), to severe cases (e.g., brain damage) where the individual is unable to take care of daily living activities.

most common typesmental retardationlanguage and learning disabilities (e.g., dyslexia)head injury and strokeAlzheimer's disease (i.e., memory retention problems)dementia


HCI (158359) © P.Lyons 2007-2008171

TYPES OF DISABILITY

Speech impairmentsquite rare and sometimes are combined with other disabilities but they do not indicate limited intelligence.

articulation problems (e.g., stuttering)inability to speak loudly or clearly, or even to speak at all

problems in using speech recognition systems. Depending on the severity of their case, they may use communication aids, to substitute speech.


HCI (158359) © P.Lyons 2007-2008172

TYPES OF DISABILITY

IlliteracyIlliteracy is the lack of ability to read and write in any language.

not a physical disability, but creates considerable barriers to computer accessibility is often treated in the overall context of computer accessibility.


HCI (158359) © P.Lyons 2007-2008174

CSCW conventions for yielding control of floorprevent multiple people from working on the same part of an image simultaneously

159353 Human-Computer Interaction Section 1

Documents

Transcript of 159353 Human-Computer Interaction Section 1