159353 human-computer interaction section 1
DESCRIPTION
159353 Human-Computer Interaction Section 1. T oday's B est E rror M essage. C OURTESY O F M ICROSOFT W INDOWS XP. C onceptual M odels. both have been used. A NALYSE T HE P ROBLEM S PACE F IRST. Starting with functional requirements can obscure usability considerations. - PowerPoint PPT PresentationTRANSCRIPT
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
WHAT GOES ON IN THE MIND?
MemoryReading, speaking and listeningProblem-solving, planning, reasoning & decision-making, learning
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>
<PL ‘HOLDER> Syntax
<middle>
<PL ‘HOLDER> Syntax
<bottom>
<PL ‘HOLDER> Syntax
<bottom>
<PL ‘HOLDER> Syntax
“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>
<PL ‘HOLDER> Syntax
<middle>
<PL ‘HOLDER> Syntax
<middle>
<PL ‘HOLDER> Syntax
<bottom>
<PL ‘HOLDER> Syntax
<bottom>
<PL ‘HOLDER> Syntax
“E”
TERMINAL>
Syntax
<top>HeaderNextAlt
<middle>Non-tmlNextAltNTptr
“B”TerminalNextAlt
”missed”
TERMINAL
Syntax
<middle>HeaderNextAlt
<bottom>Non-tmlNextAltNTptr
“MISSED”TerminalNextAlt
<bottom>HeaderNextAlt
“E”TerminalNextAlt
<top>
<PL ‘HOLDER> Syntax
<middle>
<PL ‘HOLDER> Syntax
<middle>
<PL ‘HOLDER> Syntax
<bottom>
<PL ‘HOLDER> Syntax
<bottom>
<PL ‘HOLDER> Syntax
“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-200837
Understanding Users
WHAT GOES ON IN THE MIND?
MemoryReading, speaking and listeningProblem-solving, planning, reasoning & decision-making, learning
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
Confirm file replace
incoming file isbigger and older
21Dec
2:43:24
2003
4Feb
19:33:12
2008
74MB
25MB74MB
CancelConfirm
Confirm file replace
incoming file issmaller and newer
21Dec
2:43:24
2003
4Feb
19:33:12
2008
74MB
25MB
25MB
CancelConfirm
Confirm file replace
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
MAKE THE MENTAL MODEL CLEAR
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
MAKE THE MENTAL MODEL CLEAR
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
MAKE THE MENTAL MODEL CLEAR
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
MAKE THE MENTAL MODEL CLEAR
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
WHAT'S THE MIND LIKE?
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
WHAT'S THE MIND LIKE?
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
WHAT'S THE MIND LIKE?
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
Designing For Collaboration And Communication
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
Designing For Collaboration And Communication
Interaction with and via computers has some aspects of a conversation Conversational structure
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
Designing For Collaboration And Communication
Conversational structure
ritualisedgreetings turn-taking
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
Designing For Collaboration And Communication
Conversational structure
ritualisedgreetings turn-taking
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
Designing For Collaboration And Communication
Interaction with and via computers has some aspects of a conversation Conversational structure
ritualisedgreetings turn-taking ritualised
farewells
BILL: Right thenBEN: Yeah, see yaBILL: Gotta get ma beauty sleep
HCI (158359) © P.Lyons 2007-200866
CONVERSATIONS
Designing For Collaboration And Communication
Interaction with and via computers has some aspects of a conversation Conversational structure
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
Designing For Collaboration And Communication
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
Designing For Collaboration And Communication
voice, typing, video
benefits
drawbacks
HCI (158359) © P.Lyons 2007-200869
G3 AND VIDEO COMMUNICATION
Designing For Collaboration And Communication
video was going to be the killer app for G3 phones
but
HCI (158359) © P.Lyons 2007-200870
ASYNCHRONOUS COMMUNICATION
Designing For Collaboration And 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
Designing For Collaboration And Communication
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
Designing For Collaboration And Communication
novel ways of interacting and talking
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
Designing For Collaboration And Communication
novel ways of interacting and talking
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
Designing For Collaboration And Communication
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"
Designing For Collaboration And Communication
HCI (158359) © P.Lyons 2007-200877
TECHNOLOGIES TO SUPPORT AWARENESS
Designing For Collaboration And Communication
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
build an interactive
versiondesign evaluate
identify needs/ establish
requirements
A COMMON LIFECYCLE MODEL FOR INTERACTION DESIGN
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
A COMMON LIFECYCLE MODEL FOR 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
build an interactive
versiondesign evaluate
identify needs/ establish
requirements(re)
HCI (158359) © P.Lyons 2007-200895
Interaction Design
A COMMON LIFECYCLE MODEL FOR INTERACTION DESIGN
build an interactive
versiondesign evaluate
identify needs/ establish
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
A COMMON LIFECYCLE MODEL FOR INTERACTION DESIGN
build an interactive
versiondesign evaluate
identify needs/ establish
requirements(re)
User Engineering Lifecyclea holistic view of usability engineeringhelpful to those with little usability experience
requirements analysis
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
A COMMON LIFECYCLE MODEL FOR INTERACTION DESIGN
build an interactive
versiondesign evaluate
identify needs/ establish
requirements(re)
User Engineering Lifecyclea holistic view of usability engineeringhelpful to those with little usability experience
requirements analysis
yes
installation
style guide
functionality complete?
all issues resolved?
doneyes
design/testing/development
no
no
Deborah Mayhew (1999)
HCI (158359) © P.Lyons 2007-200898
Interaction Design
A COMMON LIFECYCLE MODEL FOR INTERACTION DESIGN
doneyes
yes
installation
style guide
functionality complete?
all issues resolved?
design/testing/development
no
no
Deborah Mayhew (1999)
requirements analysis
HCI (158359) © P.Lyons 2007-200899
user profile task analysisplatform
characteristicsgeneral design
principles
usability goals
requirements analysis
Interaction DesignDeborah Mayhew (1999)
A COMMON LIFECYCLE MODEL FOR INTERACTION DESIGN
functionality complete?
style guide
design/testing/development
no
yes
installation
all issues resolved? no
doneyes
HCI (158359) © P.Lyons 2007-2008100
yesfunctionality complete?
installation
Interaction DesignDeborah Mayhew (1999)
A COMMON LIFECYCLE MODEL FOR INTERACTION DESIGN
requirements analysis
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
design/testing/development
all issues resolved?
doneyes
no
no
HCI (158359) © P.Lyons 2007-2008101
User Feedback
Interaction DesignDeborah Mayhew (1999)
A COMMON LIFECYCLE MODEL FOR INTERACTION DESIGN
requirements analysis
style guide
design/testing/development
no
yesfunctionality complete?
installation
all issues resolved?
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?
Needs And Requirements
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?
Needs And Requirements
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?
Needs And Requirements
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?
Needs And Requirements
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
Needs And Requirements
Needs And Requirements
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
Needs And Requirements
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
Needs And 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
Needs And Requirements
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
Needs And Requirements
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
Needs And Requirements
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)
Needs And Requirements
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
Needs And Requirements
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
Needs And Requirements
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
Needs And Requirements
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
Needs And Requirements
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
Needs And Requirements
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
Needs And Requirements
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
Needs And Requirements
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
Needs And Requirements
HCI (158359) © P.Lyons 2007-2008126
TASK ANALYSIS
Needs And Requirements
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,
Needs And Requirements
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
Design, Prototyping, And Construction
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
Design, 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?
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
• 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
Design, Prototyping, And Construction
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
DEVELOPING A CONCEPTUAL MODEL
Design, Prototyping, And Construction
3 dimensions(at least)
instructing
conversing
manipulating
navigating
exploring and browsing
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
DEVELOPING A CONCEPTUAL MODEL
Design, Prototyping, And Construction
3 dimensions(at least)
instructing
conversing
manipulating
navigating
exploring and browsing
interactionmode
interface metaphor
too many to list
desktop VR circus album ledger sheet
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
exploring and browsing
interactionmode
interface metaphor
too many to list
desktop VR circus album ledger sheet
interactionparadigm
WIMP
ubiquitous
wearable
command line
Design, Prototyping, And Construction
3 dimensions(at least)
DEVELOPING A CONCEPTUAL MODEL
overall design philosophymore all-embracing than interaction mode
HCI (158359) © P.Lyons 2007-2008147
COURTESY OF MICROSOFT FRONTPAGE
Today's Best Error Message
HCI (158359) © P.Lyons 2007-2008148
HCI (158359) © P.Lyons 2007-2008149
SCENARIOS IN CONCEPTUAL DESIGN
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
HCI (158359) © P.Lyons 2007-2008151
CASE STUDY – USING SCENARIOS THROUGH A DESIGN
A speech-recognition applicationno detailed set of user requirementsspeech-to-text (dictation)speech command
Design, Prototyping, And Construction
initial scenarios
basic directionfor the project
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
CASE STUDY – USING SCENARIOS THROUGH A DESIGN
Design, Prototyping, And Construction
A speech-recognition applicationno detailed set of user requirementsspeech-to-text (dictation)speech command
initial scenarios
basic directionfor the project
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
Use short, clear, unambiguous namese.g. calendar program
Add EntryEdit EntryMove EntryDelete Entry
Add ContactEdit ContactDelete Contact
HCI (158359) © P.Lyons 2007-2008159
ICONS
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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
Design, Prototyping, And Construction
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, Prototyping, And Construction
Design a website as a noticeboard for upcoming presentationsan adminstrator accepts offers of presentations, arranges rooms, confirms dates
HCI (158359) © P.Lyons 2007-2008164
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).
Dealing With Disabilities
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.
Dealing With Disabilities
HCI (158359) © P.Lyons 2007-2008168
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
Dealing With Disabilities
HCI (158359) © P.Lyons 2007-2008170
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.
Dealing With Disabilities
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.
Dealing With Disabilities
HCI (158359) © P.Lyons 2007-2008
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
HCI (158359) © P.Lyons 2007-2008175
HCI (158359) © P.Lyons 2007-2008176
HCI (158359) © P.Lyons 2007-2008177
Folksonomies user-generated taxonomies of photos, web pages, links, etc.