1. HCI (158359) © P.Lyons 2007-2008

2. 2 159353 Human-Computer Interaction Section 1

3. HCI (158359) © P.Lyons 2007-2008 3 T oday's B est E rror M essage C OURTESY O F M ICROSOFT W INDOWS XP

4. HCI (158359) © P.Lyons 2007-2008 4 What is a conceptual model? U nderlying C oncepts C onceptual M odels Why are conceptual models important? Poor conceptual models Good conceptual models From conceptual model to implementation

5. HCI (158359) © P.Lyons 2007-2008 5 A NALYSE T HE P ROBLEM S PACE F IRST Starting with functional requirements can obscure usability considerations Starting with an interface technology can lead to inappropriate interfaces consider GPS car navigation system VR heads-up display – obscure real items maps on LCD displays – distracting spoken instructions redress the balance both have been used Start with a more abstract analysis assumptions – reasons, often presented without empirical justification claims – have to be lived up to goals C onceptual M odels not bad practice, if they can be verified

6. HCI (158359) © P.Lyons 2007-2008 6 S TEPS I N A NALYSING T HE P ROBLEM S PACE C onceptual M odels Use experience with existing products learn reasons for problems design solutions to problems How to design an improved user experience?

7. HCI (158359) © P.Lyons 2007-2008 7 W HAT D ID T HE D EVELOPERS A SSUME? C onceptual M odels itunes users want to organise playlists users will organise their music files with itunes focus on individual songs? focus on albums? people will buy individual songs How do you rate importance of playing individual songs? playing playlists? when playing moreso when buying Were Apple's assumptions warranted?

8. HCI (158359) © P.Lyons 2007-2008 8 W HAT D ID T HE D EVELOPERS C LAIM ? C onceptual M odels With the integrated iTunes Store, you can buildiTunes Store a collection of digital music movies TV shows iPod games audiobooks podcasts from the comfort of your computer. http://www.apple.com/itunes/overview

9. HCI (158359) © P.Lyons 2007-2008 9 F ROM P ROBLEM S PACE T O D ESIGN S PACE C onceptual M odels Design benefits from good understanding of problem space providing the right functionality type of interface interface behaviour But first, it's important to develop a unifying model for the interface

10. HCI (158359) © P.Lyons 2007-2008 10 F ROM P ROBLEM S PACE T O D ESIGN S PACE C ONCEPTUAL M ODELS C onceptual M odels Design benefits from good understanding of problem space providing the right functionality type of interface interface behaviour But first, it's important to develop a unifying model for the interface

11. HCI (158359) © P.Lyons 2007-2008 11 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 C ONCEPTUAL M ODELS C onceptual M odels Model can help designers make decisions how the interface should look and feel even 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 list simple click clears the list and adds an item not the details of the design the colour of the buttons whether it uses buttons at all pull-down list or table What information do we present to the user? What information do we want to ge back from the user?

12. HCI (158359) © P.Lyons 2007-2008 12 B ENEFITS T O T HE D ESIGN T EAM C onceptual M odels Allows them to focus on user experience Gives them a common vocabularyif they talk to each other Delays commitment to detailed design Facilitates future developments model paves the way for future developments tho' it's understood that they won't be implemented just yet

13. HCI (158359) © P.Lyons 2007-2008 13 W HAT'S I N A C ONCEPTUAL M ODEL ? Metaphors and analogies assist users to understand the purpose of the product assist users to understand the usage of the product C onceptual M odels Concepts that underlie the product paint tools apply colour to a surface drawing tools construct geometric shapes photo editing tools apply filters to an image Relationships between the concepts objects can be grouped (drawing tools) objects contain other objects (drawing tools) images are "anchored" to text (Word) – very obscure relationship Concept ↔ user experience e.g. selection, but not necessarily tied to conventional menu, popup menu, oval menu need to be clear cf scribbler

14. HCI (158359) © P.Lyons 2007-2008 14 A N E ARLY, I NFLUENTIAL C ONCEPTUAL M ODEL VISICALC C onceptual M odels Calculation tool for financial modelling not based on a calculator showed many data items allowed many identical calculations Based on existing system ledger sheet familiar appearance known to be valuable Extended existing system real-time data entry real-time calculations www.bricklin.com - the new concept

15. HCI (158359) © P.Lyons 2007-2008 15 Benefits Familiarity C onceptual M odels Simplicity Saved drudgery calculators could perform same calculation, but with more effort Improved accuracy Surpassed the capabilities of existing systems

16. HCI (158359) © P.Lyons 2007-2008 16 X EROX STAR Bitmapped user interface each pixel stored as a bit in memory cf. text terminals less memory – ASCII characters built-in, so no memory mapping needed) less flexibility – no images (except ASCII images) C onceptual M odels Extensive research into an appropriate conceptual model led to the desktop metaphor to provide familiarity to minimise the need to understand how computers work Goal: a computer for users who didn’t use computers

17. HCI (158359) © P.Lyons 2007-2008 17 I NTERFACE M ETAPHORS Provide similarity to a real-world, physical object called an analogy if appearance is similar people do variety of clerical, drawing, etc. tasks at a desk computers that facilitate similar tasks should be similar to this C onceptual M odels Metaphor is not limited to properties of real-world object copying files or folders searching for files Replaces computer-related jargon with familiar terms easier to learn and talk about Metaphor may be quite abstract what 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

18. HCI (158359) © P.Lyons 2007-2008 18 B ENEFITS O F I NTERFACE M ETAPHORS Provides a clue to the underlying conceptual model C onceptual M odels Familiarity reduces difficulty of learning Empowers a wide variety of non-technical users of computers before the desktop metaphor, computer usage was hieratic Well-chosen metaphor can prompt new functionality shortcuts allow files to be in two places at once

19. HCI (158359) © P.Lyons 2007-2008 19 P ROBLEMS W ITH I NTERFACE M ETAPHORS Break conventional and cultural rules recycle bin on the desktop C onceptual M odels Can limit designers' exploration of the solution space cf. "well-chosen metaphor can prompt new functionality" Can conflict with interface design principles music software often has rotary knobs linear movements are easier with a mouse Can restrict users' understanding of the system to the metaphor variable names in programming languages hide reality of storage allocation

20. HCI (158359) © P.Lyons 2007-2008 20 C LASS A CTIVITY What type of interface interaction would be appropriate for a computer system that will encourage autistic children to communicate and express themselves better? C onceptual M odels 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.

21. HCI (158359) © P.Lyons 2007-2008 21 I NTERACTION T YPES Instructing (commanding) keyboard and function key commands menu selection C onceptual M odels Conversing cf. Eliza and the Turing Test Manipulating interacting with objects by handling them in a virtual or a physical environment Exploring searching for data by moving in a virtual or physical space

22. HCI (158359) © P.Lyons 2007-2008 22 I NSTRUCTING User tells the system what to do command-line interfaces menu selection, buttons C onceptual M odels Efficient and unambiguous by comparison with natural-language interface, for example Flexible easy to add parameters to a command (e.g. Unix commands)

23. HCI (158359) © P.Lyons 2007-2008 23 C ONVERSING Approaches human-human interaction in some respect spoken input (voice recognition) natural language input (Ask Jeeves – now defunct) C onceptual M odels Helps novices and technophobes feel at ease Implementation difficult distinguishing accents parsing natural language

24. HCI (158359) © P.Lyons 2007-2008 24 "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 C onceptual M odels

25. HCI (158359) © P.Lyons 2007-2008 25 Why was that funny? U nderstanding U sers "This is so cool! I'm flying this thing completely on my Palm Pilot!" Because we know that a Palm Pilot is an inappropriate tool because 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 not definitely not definitely not the reason, that is

26. HCI (158359) © P.Lyons 2007-2008 26 D ESIGNING A N I NTERFACE F OR H UMANS What's good about the real plane control systems? U nderstanding U sers They map much better onto human cognitive and physical capabilities We need to know about human cognitive and physical capabilities extend human capabilties strength to operate control surfaces – power assistance (planes) ability to draw smooth curves – B é zier curves (computers) compensate for their weaknesses can't see through fog – radar (planes) can't remember hundreds of commands – menus (computers ) Cognition definition, importance, application to interaction design cognition research leads to more effective interactive products mental models – how to use something, how something works

27. HCI (158359) © P.Lyons 2007-2008 27 C OGNITION What's going on in our heads? thinking remembering learning daydreaming decision-making writing talking U nderstanding U sers Two modes Experiential 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

28. HCI (158359) © P.Lyons 2007-2008 28 W HY D O W E N EED T O U NDERSTAND U SERS ? Interacting with technology is cognitive U nderstanding U sers Users can only be expected to do certain things Understanding users gives insight into these Users' cognitive processes have limitations We can allow for these if we understand users We want to design better interactive products Understanding users can help us by supplying theories modelling tools guidance methods Helps us understand problems that users encounter

29. HCI (158359) © P.Lyons 2007-2008 29 W HAT G OES O N I N T HE M IND ? perceiving thinking remembering learning understanding others talking with others manipulating others planning a meal imagining a trip painting writing composing making decisions solving problems daydreaming U nderstanding U sers

30. HCI (158359) © P.Lyons 2007-2008 30 W HAT G OES O N I N T HE M IND ? Cognitive processes U nderstanding U sers Memory Reading, speaking and listening Problem-solving, planning, reasoning & decision-making, learning Perception Attention

31. HCI (158359) © P.Lyons 2007-2008 31 Perception Memory Reading, speaking and listening Problem-solving, planning, reasoning & decision-making, learning W HAT G OES O N I N T HE M IND ? U nderstanding U sers what we're focussing on at the moment goal: searching for something in particular goal: browsing for something that looks interesting divided attention allows us to handle multiple stimuli makes it difficult to handle all the information information presentation perceptual boundaries (borders) colour sound flashing lights Cognitive processes Attention in moderation!

32. HCI (158359) © P.Lyons 2007-2008 32 U nderstanding U sers W HAT G OES O N I N T HE M IND ? Memory Reading, speaking and listening Problem-solving, planning, reasoning & decision-making, learning Cognitive processes Perception Attention acquisition of information by sense organs and transformation into sensations try to tap into perceptual mechanisms make icons distinguishable colour-code don’t overemphasise with lines – solid areas of colour are often better

33. HCI (158359) © P.Lyons 2007-2008

34. 34 Is this interface a fake? T ooday's B est T ools /O ptions D ialog

35. HCI (158359) © P.Lyons 2007-2008 35 S HAPE P ERCEPTION U SES C OLOUR I NFORMATION Syntax Syntax Syntax Syntax Syntax “E” TERMINAL> Syntax Header Next Alt Non-tml Next Alt NTptr “B” Terminal Next Alt ”missed” TERMINAL Syntax Header Next Alt Non-tml Next Alt NTptr “MISSED” Terminal Next Alt Header Next Alt “E” Terminal Next Alt

36. HCI (158359) © P.Lyons 2007-2008 36 S HAPE P ERCEPTION U SES C OLOUR I NFORMATION Syntax Syntax Syntax Syntax Syntax “E” TERMINAL> Syntax Header Next Alt Non-tml Next Alt NTptr “B” Terminal Next Alt ”missed” TERMINAL Syntax Header Next Alt Non-tml Next Alt NTptr “MISSED” Terminal Next Alt Header Next Alt “E” Terminal Next Alt Syntax Syntax Syntax Syntax Syntax “E” TERMINAL> Syntax Header Next Alt Non-tml Next Alt NTptr “B” Terminal Next Alt ”missed” TERMINAL Syntax Header Next Alt Non-tml Next Alt NTptr “MISSED” Terminal Next Alt Header Next Alt “E” Terminal Next Alt

37. HCI (158359) © P.Lyons 2007-2008 37 U nderstanding U sers W HAT G OES O N I N T HE M IND ? Memory Reading, speaking and listening Problem-solving, planning, reasoning & decision-making, learning Cognitive processes Perception Attention involves encoding and recalling knowledge to influence subsequent actions we 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 rule images easier to remember than words context improves recognition hence lecturers' lack of enthusiasm for handing out transcripts of lectures!

38. HCI (158359) © P.Lyons 2007-2008 38 Therefore people can remember 5-9 chunks of general information T HE M AGICAL N UMBER 7 + 2 U nderstanding U sers George Miller (1956) People can remember 5-9 numbers in short-term memory standard lamp hot chocolate hungry shark interesting book wobbly cobblestone comfortable armchair rotten wood chocolate, wobbly, armchair, rotten, hot, cobblestone, wood, shark, comfortable, book, lamp, hungry, interesting, standard

39. HCI (158359) © P.Lyons 2007-2008 39 T HE M AGICAL N UMBER 7 + 2 U nderstanding U sers 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 memory they all require recognition, not recall

40. HCI (158359) © P.Lyons 2007-2008 40 A M ORE S ENSIBLE A PPLICATION O F P SYCH R ESEARCH U nderstanding U sers Searching for items by name primary identification for a file is its name typing a filename correctly (or worse, a URL) is a challenge Bookmarks allow recognition to be used instead of recall even if first bookmark loaded is incorrect, a couple of tries often suffices Encode things to be found using a variety of modes name colour icon timestamp

41. HCI (158359) © P.Lyons 2007-2008 41 R EADING, S PEAKING A ND L ISTENING All three convey the same information listening has a lower cognitive load than reading reading allows repetition but Microsoft Producer's go-back-10s button allows repetition of spoken sections reading can be faster than listening – serial input dominates but is not exclusive writing is usually grammatical and concise; speaking is often poorly structured and rambling preferences fore reading, writing and listening vary widely within the population disabilities (dyslexia, hearing and vision impairment) affect modes differently U nderstanding U sers

42. HCI (158359) © P.Lyons 2007-2008 42 I NTERPRET D ATA F OR T HE U SER T O G UIDE D ECISIONS Copying one file over another requires confirmation Why doesn’t it show filesizes graphically and a timeline to indicate relative ages of the files? Or compare filesizes and dates for the user After all, it’s capable of determining whether or not 2 March is Today U nderstanding U sers the existing file with this bigger, newer file 1.76MB 3.57.50pm Tuesday 8 March 2007 2.76MB 3.49.44am Today 12 March 2007 Cancel Confirm incoming file is bigger and newer Confirm file replace 21 Dec 2:43:24 2003 4 Feb 19:33:12 2008 74MB 25MB74MB Cancel Confirm Confirm file replace incoming file is bigger and older 21 Dec 2:43:24 2003 4 Feb 19:33:12 2008 74MB 25MB74MB Cancel Confirm Confirm file replace incoming file is smaller and newer 21 Dec 2:43:24 2003 4 Feb 19:33:12 2008 74MB 25MB Cancel Confirm Confirm file replace 21 Dec 2:43:24 2003 4 Feb 2008 74MB 25MB incoming file is smaller and older 25MB

43. HCI (158359) © P.Lyons 2007-2008 43 M AKE T HE M ENTAL M ODEL C LEAR U nderstanding U sers Internal construction of some aspect of the external world enabling 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.”

44. HCI (158359) © P.Lyons 2007-2008 44 after a concert at an outside venue in the winter you get back to the car what thermostat setting do you choose? Internal construction of enabling predictions to be made M AKE T HE M ENTAL M ODEL C LEAR U nderstanding U sers Deep models Shallow models Erroneous models 15 20 25 30 35 thermostat is an on/off switch not a continuously varying valve heat isn’t delivered any faster when the setting is high (though modern cars turn the fan up when ΔT is large)

45. HCI (158359) © P.Lyons 2007-2008 45 Internal construction of enabling predictions to be made M AKE T HE M ENTAL M ODEL C LEAR U nderstanding U sers Deep models Shallow models Erroneous models We want to match it isn’t the user's responsibility computer literacy courses are an acknowledgement of failure are surprisingly common

46. HCI (158359) © P.Lyons 2007-2008 46 M AKE T HE M ENTAL M ODEL C LEAR U nderstanding U sers We want the user’s mental model to match the designer’s conceptual model it isn’t the user’s responsibility to learn the conceptual model computer literacy courses are an acknowledgement of failure

47. HCI (158359) © P.Lyons 2007-2008 47 U nderstanding U sers M AKE T HE M ENTAL M ODEL C LEAR We want the user’s mental model to match the designer’s conceptual model it 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 Models Gentner, D. & Stevens, A.l. (eds) ( Mental Models) is the goal

48. HCI (158359) © P.Lyons 2007-2008 48 M AKE T HE M ENTAL M ODEL C LEAR "Transparency" is the goal U nderstanding U sers We want the user’s mental model to match the designer’s conceptual model it 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… ] poor often incomplete easily confusable based on inappropriate analogies and superstition Donald Norman, 1983 Some Observations on Mental Models Gentner, D. & Stevens, A.l. (eds) ( Mental Models)

49. HCI (158359) © P.Lyons 2007-2008 49 U nderstanding U sers M AKE T HE M ENTAL M ODEL C LEAR is the goal give devise no thought required devise some thought required provide instructions provide help and tutorials provide suitable easy difficult Are you a beginner, an improving intermediate, or an expert ? often, all three

50. HCI (158359) © P.Lyons 2007-2008 50 W HAT'S T HE M IND L IKE ? like the most recent technological invention steam engine telephone exchange digital computer U nderstanding U sers Information processing model data enters successive processing stages images mental models rules delays enables predictions of times required to perform specific tasks Internal and external information "external cognition" uses input encoding comparison response selection response execution output

51. HCI (158359) © P.Lyons 2007-2008 51 The most recent technological invention steam engine telephone exchange digital computer W HAT'S T HE M IND L IKE ? U nderstanding U sers Information processing model data enters via sensory system successive processing stages convert it to knowledge images mental models rules delays at various stages have been modelled enables predictions of times required to perform specific tasks model is internally focused Internal and external information complement each other "external cognition" uses information representation & manipulation tools) input encoding comparison response selection response execution output

52. HCI (158359) © P.Lyons 2007-2008 52 W HAT'S T HE M IND L IKE ? Internal and external information complement each other "external cognition" uses information representation & manipulation tools) U nderstanding U sers external representations of information tools for manipulating information +  external cognition externalises to offloads facilitated by

53. HCI (158359) © P.Lyons 2007-2008 53 W HAT'S T HE M IND L IKE ? U nderstanding U sers Internal and external information complement each other "external cognition" uses information representation & manipulation tools) external representations of information books, maps, diagrams, graphs, music etc tools for manipulating information pens and paper, slide rules, Enigma machine, calculators external representations + manipulation tools  extended cognitive abilities external cognition externalises to reduce memory load offloads computational load facilitated by annotation and cognitive tracing

54. HCI (158359) © P.Lyons 2007-2008 54 W HAT'S T HE M IND L IKE ? external cognition externalises to reduce memory load offloads computational load facilitated by annotation and cognitive tracing U nderstanding U sers diaries, calendars, sticky notes location 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!)

55. HCI (158359) © P.Lyons 2007-2008 55 external cognition externalises to reduce memory load offloads computational load U nderstanding U sers W HAT'S T HE M IND L IKE ? external cognition externalises to reduce memory load well-chosen representation facilitates computation e.g., multiplication with arabic numerals vs. Roman numerals

56. HCI (158359) © P.Lyons 2007-2008 56 external cognition externalises to reduce memory load offloads computational load W HAT'S T HE M IND L IKE ? U nderstanding U sers external cognition externalises to reduce memory load offloads computational load facilitated 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 tracing manipulating items into different orders or structures cards in a game of bridge or poker cutouts of furniture in a room plan

57. HCI (158359) © P.Lyons 2007-2008 57 D ESIGN I MPLICATIONS Use interface representations that reduce memory load facilitate computational offloading U nderstanding U sers

58. HCI (158359) © P.Lyons 2007-2008 58 K EY P OINTS U nderstanding U sers Cognition involves many processes including The conceptual framework of and provide ways of which can lead to The way an interface is designed can greatly affect how well users can how to do their tasks

59. HCI (158359) © P.Lyons 2007-2008 59

60. HCI (158359) © P.Lyons 2007-2008 60 H OT T OPIC D esigning F or C ollaboration A nd C ommunication Email staid, adult conversations; spam CSCW working in groups with the enabling technology of computer networking Chat rooms teenage bonding? WWW CSCW && commerce && academia&, &, & Singshot karaoke Wikis discussions Online games Social networking sites MySpace Piczo Bebo Flickr YouTube LinkedIn dozens more? photo-sharing video sharing making business contacts : A N EW A REA O F S OCIAL D EVELOPMENT?

61. HCI (158359) © P.Lyons 2007-2008 61 C ONVERSATIONS D esigning F or C ollaboration A nd C ommunication Interaction with and via computers has some aspects of a conversation Conversational structure ritualised greetings BILL: Ah, gidday BEN: 'Sup? BILL: Not much. What u up to, bro? BEN: Not much BILL: Good on ya mate.

62. HCI (158359) © P.Lyons 2007-2008 62 C ONVERSATIONS D esigning F or C ollaboration A nd C ommunication Interaction with and via computers has some aspects of a conversation Conversational structure ritualised greetings 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

63. HCI (158359) © P.Lyons 2007-2008 63 Interaction with and via computers has some aspects of a conversation C ONVERSATIONS D esigning F or C ollaboration A nd C ommunication Conversational structure ritualised greetings 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 time PENELOPE: And you're blaming me for the breakdown? Humans are good at dealing with non sequitur s

64. HCI (158359) © P.Lyons 2007-2008 64 C ONVERSATIONS Interaction with and via computers has some aspects of a conversation D esigning F or C ollaboration A nd C ommunication Conversational structure ritualised greetings turn-taking MUM: and then she said …… YOU: uh huh MUM: and it's not as if she's a saint herself. Why, I remember … YOU: Oh, that's terrible MUM: 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)

65. HCI (158359) © P.Lyons 2007-2008 65 C ONVERSATIONS D esigning F or C ollaboration A nd C ommunication Interaction with and via computers has some aspects of a conversation Conversational structure ritualised greetings turn-taking ritualised farewells BILL: Right then BEN: Yeah, see ya BILL: Gotta get ma beauty sleep

66. HCI (158359) © P.Lyons 2007-2008 66 C ONVERSATIONS D esigning F or C ollaboration A nd C ommunication Interaction with and via computers has some aspects of a conversation Conversational structure ritualised greetings turn-taking ritualised farewells GEORGE W. [looks at watch] TONY: Well, it's time I made a move GEORGE W. Bin great talkin' to ya, Terry TONY: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, Timmy TONY: [leaves] GEORGE W: [to an aide] Don’t tell me, don't tell me. Who was that?

67. HCI (158359) © P.Lyons 2007-2008 67 T ECHNOLOGY- M EDIATED C ONVERSATIONS D esigning F or C ollaboration A nd C ommunication What rules apply? email phone MSN texting Are breakdowns more common? Are there special techniques for repairing them? What's different? fewer cues; no body language more opportunities for misunderstandings humour 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?

68. HCI (158359) © P.Lyons 2007-2008 68 S YNCHRONOUS C OMPUTER- M EDIATED C OMMUNICATION D esigning F or C ollaboration A nd C ommunication voice, typing, video benefits drawbacks

69. HCI (158359) © P.Lyons 2007-2008 69 G3 A ND V IDEO C OMMUNICATION D esigning F or C ollaboration A nd C ommunication video was going to be the killer app for G3 phones but

70. HCI (158359) © P.Lyons 2007-2008 70 A SYNCHRONOUS C OMMUNICATION D esigning F or C ollaboration A nd C ommunication email discussion boards computer conferencing can be read anywhere, anytime can be sent to many people can be easier to say things flaming spamming message overload false expectations about people's ability or willingness to reply subtle concepts can be difficult to express in writing

71. HCI (158359) © P.Lyons 2007-2008 71 N EW C OMMUNICATION T ECHNOLOGIES D esigning F or C ollaboration A nd C ommunication novel ways of interacting and talking SMS texting online chat in chatrooms collaborative environments media 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.

72. HCI (158359) © P.Lyons 2007-2008 72 C OLLABORATIVE V IRTUAL E NVIRONMENTS D esigning F or C ollaboration A nd C ommunication novel ways of interacting and talking BowieWorld interactive, 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

73. HCI (158359) © P.Lyons 2007-2008 73 V IDEO W INDOW D esigning F or C ollaboration A nd C ommunication novel ways of interacting and talking 1m x 2.5m picture window between two sites permanently-on intended to resemble technical problems when people wanted to have conversations wide-area microphones people talked

74. HCI (158359) © P.Lyons 2007-2008 74 H YPERMIRROR D esigning F or C ollaboration A nd C ommunication Mirokawa & Maesako, 1998

75. HCI (158359) © P.Lyons 2007-2008 75 H YPERMIRROR D esigning F or C ollaboration A nd C ommunication

76. HCI (158359) © P.Lyons 2007-2008 76 C OMPUTER- M EDIATED C OORDINATION Project management systems for organisations offer Solely computer-mediated project management not completely successful specially with numerous specially in companies that use 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" D esigning F or C ollaboration A nd C ommunication

77. HCI (158359) © P.Lyons 2007-2008 77 T ECHNOLOGIES T O S UPPORT A WARENESS D esigning F or C ollaboration A nd C ommunication 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 controllers A responsible for B responsible for actions B would while A was both Heath and Luff (1992) Diverse information sources available to humans

78. HCI (158359) © P.Lyons 2007-2008 78 A P RACTICAL S KILL I nteraction D esign Four basic activities Some practical issues Three characteristics

79. HCI (158359) © P.Lyons 2007-2008 79 C HARACTERISING I NTERACTION D ESIGN I nteraction D esign A process Constraints Focus

80. HCI (158359) © P.Lyons 2007-2008 80 D EVELOPING A LTERNATIVE D ESIGNS I nteraction D esign Suggesting ideas for meeting requirements core activity conceptual design physical design

81. HCI (158359) © P.Lyons 2007-2008 81 B UILDING I NTERACTIVE V ERSIONS O F T HE D ESIGN I nteraction D esign How can an interactive design be tested? Building interactive testbeds is essential Paper-based prototypes

82. HCI (158359) © P.Lyons 2007-2008 82 E VALUATING D ESIGNS I nteraction D esign How usable is the product? How acceptable is the product?

83. HCI (158359) © P.Lyons 2007-2008 83 C OMMUNICATING T HE D ESIGN Interaction design and implementation rarely involves just one person is essential some form of is neccesary should allow Possible representations Users should be involved I nteraction D esign

84. HCI (158359) © P.Lyons 2007-2008 84 A CTIVITY Design an interface for the search screen for a library catalogue called by (author(s)/artist(s)) published by or with title keywords about betweenand coloured no need to can no note that Show me books newspapers journals videos CDs/DVDs paintings matches I nteraction D esign more criteria is this technically feasible?

85. HCI (158359) © P.Lyons 2007-2008 85 I DENTIFYING N EEDS & E STABLISHING R EQUIREMENTS I nteraction D esign Identify target users not as obvious as you might think: those who Three categories of user (Eason, 1987): primary: secondary: tertiary: Perhaps more usefully referred to as stakeholders?

86. HCI (158359) © P.Lyons 2007-2008 86 S TAKEHOLDERS F OR A C HECKOUT S YSTEM managers checkout operatorscustomers I nteraction D esign

87. HCI (158359) © P.Lyons 2007-2008 87 W HAT A RE "N EEDS"? Difficult question to answer for most of us, wireless modem? who did the inventors of consult about requirements? I nteraction D esign in 1950? Humans vary in many dimensions: hand size affects motor abilities can height strength and dexterity Netpliance (software to perform a task in the internet seamlessly) used avoided prompted developers to

88. HCI (158359) © P.Lyons 2007-2008 88 G ENERATING A LTERNATIVE D ESIGNS may provide clues hence cars with tillers, hulls (like boats), open driver positions (like carriages) but customers' "non-electronic" behaviours can give clues to enhancing e-commerce I nteraction D esign Whence a new design? natural talent, flair? cross-fertilisation of ideas from other areas steam engine resulted from observation of a kettle lid early word processors just captured typed input browsing other designs can stimulate creativity

89. HCI (158359) © P.Lyons 2007-2008 89 C HOOSING A MONGST A LTERNATIVE D ESIGNS Two categories of decision those based on I nteraction D esign Usability is concerned with discuss with stakeholders about measure no of, time to, evaluation specifying, recording and measuring

90. HCI (158359) © P.Lyons 2007-2008 90 I DENTIFYING M EASUREABLE C HARACTERISTICS Measuring does the interface is it I nteraction D esign Measuring what is the Measuring how often does Measuring what proportion of what is the relationship between Measuring how long do Measuring at what rate do how long does it take to What about

91. HCI (158359) © P.Lyons 2007-2008 91 Microsoft’s “synch and stabilise” process planning phase; product “vision”, specs and schedule vision statement; identify and prioritise features with extensive customer input spec document; features, architecture, component interdependencies schedule and team formation; 1 manager, 3-8 developers, 3-8 testers development phase; 3 or 4 sub-phases with milestone release after each evolution of specification 3 subprojects; most critical 1/3 of features in #1, least in # 3 stabilisation phase; internal and external testing, stabilisation, shipping internal and external testing preparation of “golden master” release disks Microsoft’s “synch and stabilise” process phase vision statement spec document; schedule and team formation; development phase subprojects stabilisation phase testing preparation of L IFECYCLE M ODELS Software Engineering has allow I nteraction D esign Provide

92. HCI (158359) © P.Lyons 2007-2008 92 A C OMMON L IFECYCLE M ODEL F OR I NTERACTION D ESIGN I nteraction D esign final product build an interactive version designevaluate (re) identify needs/ establish requirements This has evolved from less user-centred lifecycle models requirements analysis design code test maintenance Waterfall lifecycle less organic each step completes before next is started limited feedback freezes requirements (possibly for years) no user evaluation, but no iteration

93. HCI (158359) © P.Lyons 2007-2008 93 I nteraction D esign build an interactive version designevaluate identify needs/ establish requirements A C OMMON L IFECYCLE M ODEL F OR I NTERACTION D ESIGN Spiral model iterative - for risk analysis spiral model uses prototyping later (1998) WinWin version incorporated stakeholder "win" conditions (re)

94. HCI (158359) © P.Lyons 2007-2008 94 I nteraction D esign A C OMMON L IFECYCLE M ODEL F OR I NTERACTION D ESIGN RAD more user -centred introduced time-boxing incremental system implementation first principle of design methodology active user involvement is imperative project initiation Joint App. Dvlpt. workshops iterative design & build evaluate final system implementation review build an interactive version designevaluate identify needs/ establish requirements (re)

95. HCI (158359) © P.Lyons 2007-2008 95 I nteraction D esign A C OMMON L IFECYCLE M ODEL F OR I NTERACTION D ESIGN build an interactive version designevaluate identify needs/ establish requirements (re) evaluation implementation task/functional analysis prototyping design requirements/ specification Star model based on observation entry at any point no ordering of stages evaluation at every step not widely used too much flexibility?

96. HCI (158359) © P.Lyons 2007-2008 96 I nteraction D esign A C OMMON L IFECYCLE M ODEL F OR I NTERACTION D ESIGN build an interactive version designevaluate identify needs/ establish requirements (re) User Engineering Lifecycle a holistic view of usability engineering helpful to those with little usability experience requirements analysis yes installation style guide functionality complete? all issues resolved? done yes design/testing/development no Deborah Mayhew (1999)

97. HCI (158359) © P.Lyons 2007-2008 97 I nteraction D esign A C OMMON L IFECYCLE M ODEL F OR I NTERACTION D ESIGN build an interactive version designevaluate identify needs/ establish requirements (re) User Engineering Lifecycle a holistic view of usability engineering helpful to those with little usability experience requirements analysis yes installation style guide functionality complete? all issues resolved? done yes design/testing/development no Deborah Mayhew (1999)

98. HCI (158359) © P.Lyons 2007-2008 98 I nteraction D esign A C OMMON L IFECYCLE M ODEL F OR I NTERACTION D ESIGN done yes installation style guide functionality complete? all issues resolved? design/testing/development no Deborah Mayhew (1999) requirements analysis

99. HCI (158359) © P.Lyons 2007-2008 99 user profiletask analysis platform characteristics general design principles usability goals requirements analysis I nteraction D esign Deborah Mayhew (1999) A C OMMON L IFECYCLE M ODEL F OR I NTERACTION D ESIGN functionality complete? style guide design/testing/development no yes installation all issues resolved? no done yes

100. HCI (158359) © P.Lyons 2007-2008 100 yes functionality complete? installation I nteraction D esign Deborah Mayhew (1999) A C OMMON L IFECYCLE M ODEL F OR I NTERACTION D ESIGN 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? YN Detailed UI Design iterative DUID evaluation met usability goals? style guide Y style guide N style guide design/testing/development all issues resolved? done yes no

101. HCI (158359) © P.Lyons 2007-2008 101 User Feedback I nteraction D esign Deborah Mayhew (1999) A C OMMON L IFECYCLE M ODEL F OR I NTERACTION D ESIGN requirements analysis style guide design/testing/development no yes functionality complete? installation all issues resolved? done no

102. HCI (158359) © P.Lyons 2007-2008 102 T HE P RELIMINARY S TAGE N eeds A nd R equirements The task to 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?

103. HCI (158359) © P.Lyons 2007-2008 103 W HAT A RE W E T RYING T O D O? N eeds A nd R equirements To understand the users To understand the task To understand the context of the task To produce a (stable) set of requirements

104. HCI (158359) © P.Lyons 2007-2008 104 H OW W ILL W E D O I T? N eeds A nd R equirements while not finished do gather data interpret data (less formal) and analyse data (more formal) express results as a formal set of requirements

105. HCI (158359) © P.Lyons 2007-2008 105 W HY D O W E D O I T? N eeds A nd R equirements Why do IT projects fail? No single cause of IT project failure but IT 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 succeed even if the imeplemntation is perfect even if it's delivered under budget even if it's delivered ahead of time because people won’t want to use it Taking users' opinions and needs into account increases the probability of meeting their needs and expectations

106. HCI (158359) © P.Lyons 2007-2008 106 R EQUIREMENTS N EED T O B E E STABLISHED N eeds A nd R equirements 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 us but they may not know them all or know them in detail really a second-stage, post-"gathering" activity recognises that establishing requirements is a carefully controlled process analytic and synthetic iterative evolutionary involving negotiation

107. HCI (158359) © P.Lyons 2007-2008 107 W HAT E XACTLY I S A R EQUIREMENT? N eeds A nd R equirements 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" meaningless vague precise & measureable

108. HCI (158359) © P.Lyons 2007-2008 108 T YPES O F R EQUIREMENT N eeds A nd R equirements Functional requirements the actions that the product should perform e.g. a word processor should support formatting styles list may be decomposed at various levels; paragraph, character, inter-character (kerning) Non-functional requirements e.g. memory size, response time, maximum delivery time, physical size data 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 requirements abilities and skills novice (losta training, clear instructions), expert (flexibility & short cuts)

109. HCI (158359) © P.Lyons 2007-2008 109 N eeds A nd R equirements T YPES O F R EQUIREMENT Non-functional requirements e.g. memory size, response time, maximum delivery time, physical size data 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 requirements abilities and skills novice (losta training, clear instructions), expert (flexibility & short cuts) usability requirements effectiveness, efficiency, safety, utility, learnability, memorability fun to use, aesthetically pleasing, motivating can be difficult to measure…

110. HCI (158359) © P.Lyons 2007-2008 110 D ETERMINING R EQUIREMENTS N eeds A nd R equirements Determining requirements & evaluating systems both involve data gathering collect sufficient, relevant, and appropriate data expands, clarifies & confirms initial requirements Possible types of information tasks that users currently perform users goals task contexts rationale for current arrangements Data gathering techniques questionnaires interviews focus groups workshops naturalistic observation studying documentation and various combinations of these data gatherer can augment these with suitable props

111. HCI (158359) © P.Lyons 2007-2008 111 uncertainty (external event) C OMBINING D ATA G ATHERING A ND P ROPS N eeds A nd R equirements Rudman & 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 company They used on-site observation to undertand the nature of the current business participatory prototyping involving employees interviews to establish background business and complexities of the wider domain information captured as semantic nets interviews to understand employees' decision sequences (supports dialog design) decision trees to understand decisions made when dealing with customers role-playing prototype walkthroughs using simulated scenarios cat mammal is a bear is a fur has whale is a vertebrate is a water lives in fish lives in animal is an is a 1 A B decision C 2 outcome 1 outcome 2 outcome 3 outcome 4 outcome 5 outcome 6 outcome 7

112. HCI (158359) © P.Lyons 2007-2008 112 N eeds A nd R equirements D ATA G ATHERING T ECHNIQUES questionnaires interviews focus groups and workshops naturalistic observation studying documentation techniquesuitskind of dataadvantagesdisadvantages 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 collecting multiple viewpoints mostly qualitative some quantitative find consensus & conflicts; contact with users some may dominate understanding context of user activity qualitative insights that are otherwise unavailable very time- consuming; mountains of data procedures, regulations, standards quantitativeusers not required innaccurate representation of reality

113. HCI (158359) © P.Lyons 2007-2008 113 C HOOSING B ETWEEN T ECHNIQUES N eeds A nd R equirements type of information required resources required accessibility of stakeholders Relevant criteria nature of the task to be performed sequential 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 technique time required knowledge of cognitive processes required (we aren't all psychologists)

114. HCI (158359) © P.Lyons 2007-2008 114 S OME G UIDELINES N eeds A nd R equirements identify stakeholders' needs observe existing behaviour, support tools, competitor's tools involve all stakeholder groups easy to forget someone e.g, distribution company that interviewed all possible affected groups in the company - but not the suppliers involve representative selection of stakeholders all have individual perspectives, responsibilities bosses' opinions of how the company works may be inacccurate combine different data-gathering techniques different types of information different perspectives corroborrate findings from other techniques use props prototypes, task descriptions, storyboards you can re-use props at later discussions (requirements-gathering is iterative)

115. HCI (158359) © P.Lyons 2007-2008 115 S OME G UIDELINES combine different data-gathering techniques different types of information different perspectives corroborrate findings from other techniques use props prototypes, task descriptions, storyboards you can re-use props at later discussions (requirements-gathering is iterative) N eeds A nd R equirements pilot the data gathering activity especially with questionnaires – ambiguity and no chance to explain don’t treat the pilot data as valid may need to fix the activity after running the pilot pragmatic considerations may constrain the activity but decide what you'd really like to know so you make the right compromises use suitable data recording techniques for user-contact sessions video/audio most accurate, but vast quantities of data, needs video production skills note-taking reduces data, but is difficult, and impartiality can be hard to achieve

116. HCI (158359) © P.Lyons 2007-2008 116 A CTIVITY N eeds A nd R equirements A mobile system for a roading company for recording status of roading projects potholes, deviations, new roads what 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) ?

117. HCI (158359) © P.Lyons 2007-2008 117 D ATA I NTERPRETATION A ND A NALYSIS N eeds A nd R equirements Don't wait till the experience has gone stale Initial interpretation before deeper analysis Choose suitable tools for analysing different elements data flow diagrams, state charts, work-flow charts for functional requirements entity-relationship diagrams for data requirements class diagrams combine these for OO implementations

118. HCI (158359) © P.Lyons 2007-2008 118 E XAMPLE S YSTEMS Library catalogue N eeds A nd R equirements Shared diary allows patrons to search for books by author to search for books by title to search for books bysubject to determine location of a book to discover their own current status (loans/overdues, etc) replaces central papers calendar for a cooperating group should prevent central calendar from getting out of step collaborative/social questions people don't like others setting their appointments needs to allow users to block times

119. HCI (158359) © P.Lyons 2007-2008 119 T ASK D ESCRIPTIONS N eeds A nd R equirements Scenarios informal narrative story describing human activities or tasks contexts, needs and requirements; not technological support for the task user-oriented vocab. means scenarios are comprehensible (or produced) by stakeholders explores constraints, contexts, irritations, facilitators of human tasks identifies important tools, stakeholders testbook has several useful examples (pps 224 and 225)

120. HCI (158359) © P.Lyons 2007-2008 120 T ASK D ESCRIPTIONS Use Cases focus is on user-system interaction specific path through the system by a specific "actor" Main Use Case describes the "normal course" through the use case alternative courses list below Main Use Case N eeds A nd R equirements 1.the user chooses the option to arrange a meeting 2.the system prompts user for names of attendees 3.the user types in a list of names 4.the system checks that the list is valid 5.the system prompts the user for meeting constraints 6.the user types in meeting constraints 7.the system searches the calendars for a date that satisfies the constraints 8.the system displays a list of potential dates 9.the user chooses one of the dates 10.the system writes the meeting into the calendar 11.the system emails the time of the meeting to the other participants 5. Alternative Course if the list of people is invalid 5.1 the system displays an error message 5.2 the system returns to step 5 8. Alternative Course if no potential times are found 8.1 the system displays a suitable message 8.2 the system returns to step 5

121. HCI (158359) © P.Lyons 2007-2008 121 T ASK D ESCRIPTIONS N eeds A nd R equirements 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 sections assumptions exceptions recommendations technical requirements.

122. HCI (158359) © P.Lyons 2007-2008 122 T ASK D ESCRIPTIONS N eeds A nd R equirements Actors may participate in more than one use case arrange a meeting retrieve contact details update calendar entry With use cases, focus is on how the user uses the system more suited to conceptual design than requirements gathering but helps some stakeholders express their requirements Steps in developing a use case Identify actors for each actor, for each goal, produce a use case library patron has locates books u.c., librarian has update catalogue u.c. administratordepartment member

123. HCI (158359) © P.Lyons 2007-2008 123 Title: arrangeMeeting USER INTENTIONSYSTEM RESPONSIBILITY arrange a meeting request meeting attendees and constraints identify meeting attendees and constraints suggest potential dates choose preferred date book meeting T ASK D ESCRIPTIONS Essential Use Cases deal with problems with scenarios and use cases scenarios concentrate on realistic and specific activities – don't give an overview use cases make assumptions; there is techology, interface is of a particular type N eeds A nd R equirements EUCs are abstractions from scenarios more general than a scenario, try to avoid assumptions of a use case a 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

124. HCI (158359) © P.Lyons 2007-2008 124

125. HCI (158359) © P.Lyons 2007-2008 125 T HE V OLERE R EQUIREMENTS S HELL R EQUIREMENT #: Unique id R EQUIREMENT T YPE : template section E VENT/ U SE C ASE #:Origin of the requirement D ESCRIPTION: A one-sentence statement of the intention of the requirement R ATIONALE: Why is the requirement considered important or necessary? S OURCE: Who raised this requirement? F IT C RITERION: A quantification of th requirment used to determine whether the solution meets the requirement C USTOMER S ATISFACTION: Measures the desire to have the requirement implemented C USTOMER D ISSATISFACTION: Unhappiness if it is not implemented D EPENDENCIES: Other requirements with a change effect C ONFLICTS: Requirements that contradict this one S UPPORTING M ATERIALS: Pointer to supporting information H ISTORY: Origin and changes to the requirements N eeds A nd R equirements

126. HCI (158359) © P.Lyons 2007-2008 126 T ASK A NALYSIS N eeds A nd R equirements Used for analysing existing systems to determine rationale, purpose behind people’s actions and methods of achieving it identifies existing practices that can act as the basis for new requirements involves techniques that expose both cognitive and physical processes can work at high level of abstraction or low level of detail Hierarchical Task Analysis breaks task into subtasks, subtasks into sub-subtasks etc. plans are then formulated for achieving groups of subtasks physical and observable actions that are performed includes non-software, non-interaction device actions start by determining and examining a user goal treat this as a task and analyse hierarchically

127. HCI (158359) © P.Lyons 2007-2008 127 H IERARCHICAL T ASK A NALYSIS – A N E XAMPLE User goal: borrowing a book from the library task analysis: 0:borrow a book from the library 1.go to the library 2.find the desired book 2.1access library catalogue 2.2access the search screen 2.3enter search criteria 2.4identify required book 2.5note location 3.retrieve the book 4.get book issued plan 0: do 1-3-4. plan 2: do 2.1, 2.4, 2.5, N eeds A nd R equirements As stated, the analysis is inflexible plans add some flexibility to the process analysis can be expressed as a tree diagram plans are annotations at particular places on the diagram plan 0… plan 2… If book isn’t on the shelf, do 2-3-4 If book not identified, do 2.2, 2.3, 2.4, 2.5

128. HCI (158359) © P.Lyons 2007-2008 128 T WO D ESIGN C ATEGORIES D esign, P rototyping, A nd C onstruction Conceptual Design what the product does how it behaves Physical Design screens menus icons graphics etc. evaluation Lo-fi designs in the early stages Polished designs later

129. HCI (158359) © P.Lyons 2007-2008 129 T WO D ESIGN C ONTEXTS D esign, P rototyping, A nd C onstruction Modifying an existing design investigation, prototyping, and evaluation essential Designing from scratch investigation, prototyping, and evaluation essential

130. HCI (158359) © P.Lyons 2007-2008 130 T OPICS D esign, P rototyping, A nd C onstruction Prototyping Conceptual models Physical design Scenarios and prototypes in conceptual design Standards, guidelines and rules Support tools

131. HCI (158359) © P.Lyons 2007-2008 131 P ROTOTYPING A ND C ONSTRUCTION D esign, P rototyping, A nd C onstruction A physical scale model? A piece of (unreliable) software? A paper-based storyboard A PowerPoint presentation a static sequence of slides a hyperlinked sequence of slides an electronic "picture" a video simulation of a task a 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 Pilot carried it with him everywhere pretended to enter information into it Ehn & Kyng in 1982 labelled a cardboard box "Desktop Laser Printer" to give insight to users, journos, typographers Prototyping photocopiers covered a box with velcro "buttons" could be stuck on & shifted elsewhere

132. HCI (158359) © P.Lyons 2007-2008 132 W HY P ROTOTYPE? D esign, P rototyping, A nd C onstruction Prototypes facilitate communication stakeholders can see, hold, interact with ideas you can test ideas for yourself prototypes encourage reflection prototypes answer questions prototypes support choices Prototypes are cheaper than implementation

133. HCI (158359) © P.Lyons 2007-2008 133 D esign, P rototyping, A nd C onstruction P APER P ROTOTYPE A handheld device to support an autistic child lightweight, rubberized case battery indicator 20 cm BISCUIT CAKE DINNER DRINK TOILET EXAMPLE BUTTON battery indicator Communication Mate ring attachment for belt loop pressing one of these buttons produces a recorded message high-output speaker can test suitability of buttons suitability of images sufficiency of functions can't test speech volume response fast enough

134. HCI (158359) © P.Lyons 2007-2008 134 L O- F I P ROTOTYPES D esign, P rototyping, A nd C onstruction not meant to look like a final product low cost materials easily formed materials restricted or no functionality makes it easy to say: "let's change this" quick to modify can go through more generations of evaluation & redesign before final prototype more likely to represent users' needs and requirements intended to encourage iterative evolution support for throw-away, exploratory, fast turn-around brainstorming low financial investment low construction investment low aesthetic investment low emotional & ego investment

135. HCI (158359) © P.Lyons 2007-2008 135 Often used as part of scenarios a series of sketches showing a user progressing through a task the sketches don't have to be high-quality – though comprehensibility is a plus S TORYBOARDING D esign, P rototyping, A nd C onstruction Often used as part of scenarios a series of sketches showing a user progressing through a task the sketches don't have to be high-quality Often complemented by on-the-spot sketching to give form to the designer's own ideas to confirm user's ideas it can be worth practicing standard symbols

136. HCI (158359) © P.Lyons 2007-2008 136 S TORYBOARDING D esign, P rototyping, A nd C onstruction Often used as part of scenarios a 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 link actions specified in commentary to components in the interface user sees a pictorial version of the interface and can follow the steps of a task – also called a cognitive walkthrough This storyboard was based on screenshots it could have used sketches which would have felt much easier to criticise

137. HCI (158359) © P.Lyons 2007-2008 137 I NDEX C ARDS D esign, P rototyping, A nd C onstruction 75mm x 1255mm cards A pre-database technology for organising information typically used by researchers for recording references cooksfor recording recipes genealogists for recording family relationships libraries for recording catalogue information Well-suited for organising interfaces with sequential properties websites 1 card per screen wizards1 card per screen multi-tab interfaces1 card per tab

138. HCI (158359) © P.Lyons 2007-2008 138 "There is a tide in the affairs of men, which, Taken at the flood, leads on to fortune W IZARD O F O Z P ROTOTYPING D esign, P rototyping, A nd C onstruction In the story, Dorothy goes to Oz to meet the powerful Wizard he turns out to be wizened, not wizard he produces grandiose effects by amplification and pulling levers In interface prototyping, users are Dorothies the interface is the projection of the wizard system 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 life Is bound in shallows and in miseries. typetty, typetty, type

139. HCI (158359) © P.Lyons 2007-2008 139 H I- F I P ROTOTYPING D esign, P rototyping, A nd C onstruction Prototypes designed to look like the final product moulded plastic, aluminuim, not wood Delphi, VB, PowerPoint, Macromedia Director LO-FI advantages & strengths low cost quick (multiple evaulations) aids communication can change screen layouts requirements proof-of-concept disadvantages & weaknesses limited error checking doesn’t produce a good detailed spec facilitator-driven mostly restricted to requirements phase not good for usability testing HI-FI advantages & strengths fully functional user-driven navigational scheme clear can use for exploration and test has look and feel of final product a "living specification" marketing and sales tool disadvantages & weaknesses more expensive slow (one evaulation only) ineffiecient for proof-of-concept not good for requirment gathering elicits comments about superficial aspects any bugs halt testing gathering requirements, exploring content & structure selling ideas, driving product development, evaluation platform

140. HCI (158359) © P.Lyons 2007-2008 140 C OMPROMISES I N P ROTOTYPING D esign, P rototyping, A nd C onstruction Prototypes are models non-functional, or limited functionality horizontal prototyping (many functions, little detail) gives breadth vertical prototyping (few functions in detail) gives depth often poorly coded must use proper SE methodology for real system, & not copy structure of prototype different quality considerations when there are millions of users Evolutionary prototyping prototype gradually becomes the product applies to hi-fi prototypes requires more rigorous testing product is likely to be less robust increased maintenance cost product is likely to get to the market faster captures the market Throwaway prototyping successive flaky prototypes, finally fully engineered product applies to lo-fi prototypes difficult to start work on throwaway item difficult to let go of development work testing is a clearly defined phase final product is a big effort slower development more reliable, more usable product

141. HCI (158359) © P.Lyons 2007-2008 141 C ONCEPTUAL D ESIGN D esign, P rototyping, A nd C onstruction Transforming requirements to conceptual model Conceptual model description of the system integrated set of ideas and concepts defining 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 requirements reveals different perspectives ideas emerge from this process practice empathising with the users designers of an automatic defibrillator couldn’t be fitted with a defibrillator fitted with pagers that received Defibrillate Now messages at random arrived 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!

142. HCI (158359) © P.Lyons 2007-2008 142 G UIDING P RINCIPLES D esign, P rototyping, A nd C onstruction 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

143. HCI (158359) © P.Lyons 2007-2008 143 D EVELOPING A C ONCEPTUAL M ODEL D esign, P rototyping, A nd C onstruction instructing conversing manipulating navigating exploring and browsing interaction mode 3 dimensions (at least) best choice depends on application domain a computer game? a drawing package? a photo organiser?

144. HCI (158359) © P.Lyons 2007-2008 144 D EVELOPING A C ONCEPTUAL M ODEL D esign, P rototyping, A nd C onstruction 3 dimensions (at least) instructing conversing manipulating navigating exploring and browsing interaction mode interface metaphor too many to list desktopVRcircusalbumledger sheet base model on familiar knowedge design functionality identify difficult areas generate metaphors that clarify them check out users' task descriptions check out manual approaches

145. HCI (158359) © P.Lyons 2007-2008 145 D EVELOPING A C ONCEPTUAL M ODEL D esign, P rototyping, A nd C onstruction 3 dimensions (at least) instructing conversing manipulating navigating exploring and browsing interaction mode interface metaphor too many to list desktopVRcircusalbumledger 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?

146. HCI (158359) © P.Lyons 2007-2008 146 instructing conversing manipulating navigating exploring and browsing interaction mode interface metaphor too many to list desktopVRcircusalbumledger sheet interaction paradigm WIMP ubiquitous wearable command line D esign, P rototyping, A nd C onstruction 3 dimensions (at least) D EVELOPING A C ONCEPTUAL M ODEL overall design philosophy more all-embracing than interaction mode

147. HCI (158359) © P.Lyons 2007-2008 147 C OURTESY O F M ICROSOFT F RONTPAGE T oday's B est E rror M essage

148. HCI (158359) © P.Lyons 2007-2008 148

149. HCI (158359) © P.Lyons 2007-2008 149 S CENARIOS I N C ONCEPTUAL D ESIGN D esign, P rototyping, A nd C onstruction informal stories capture realistic properties of user tasks and activities powerful communication mechanism add realism to proposed or imagined situations stakeholders often involved in producing and checking through scenarios can be used as a basis for the overall design to guide technical implementation to facilitate cooperation within design teams to facilitate communcation between members of multidisciplinary teams to define user tasks for user evaluation of prototypes to sell ideas to users, managers, customers to give insight into positive and negative consequences of a design solution

150. HCI (158359) © P.Lyons 2007-2008 150 used as basis for screen sketches and a user guide what 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" C ASE S TUDY – U SING S CENARIOS T HROUGH A D ESIGN A speech-recognition application no detailed set of user requirements speech-to-text (dictation) speech command Basic direction fixed, more scenarios to decide system components initial scenarios basic direction for the project later scenarios system components D esign, P rototyping, A nd C onstruction

151. HCI (158359) © P.Lyons 2007-2008 151 C ASE S TUDY – U SING S CENARIOS T HROUGH A D ESIGN A speech-recognition application no detailed set of user requirements speech-to-text (dictation) speech command D esign, P rototyping, A nd C onstruction initial scenarios basic direction for the project later scenarios system components task: open editor find file change font to Times 16 save changes exit editor voice scenario: "system editor" "open" "file" "find" "r" "e" "p" (1 st 3 letters of filename) "open" "font" "times" "16" "OK" "save" "close" to help choose appropriate vocabulary

152. HCI (158359) © P.Lyons 2007-2008 152 C ASE S TUDY – U SING S CENARIOS T HROUGH A D ESIGN D esign, P rototyping, A nd C onstruction A speech-recognition application no detailed set of user requirements speech-to-text (dictation) speech command initial scenarios basic direction for the project later scenarios system components additional task scenarios user tests e.g. "change the background colour of the communication folder icon to red" But users found a problem: what could they say? System's "what can I say?" module was hard to use video scenarios user feedback feedback scenarios further design "I would like to walk around while I dictate" Benito Mussolini more scenario-based feedback later in the design

153. HCI (158359) © P.Lyons 2007-2008 153 U SING P ROTOTYPES I N C ONCEPTUAL D ESIGN D esign, P rototyping, A nd C onstruction Prototypes are tools for evaluation different types of evaluator feedback from users about usability feedback from technical staff about feasibility tune prototypes to each stakeholder group different types of evaluation lo-fi for early tests to generate user feedback informal "quick and dirty" evaluation sessions paper-based prototypes get suggestions about a range of aspects hi-fi for people who make superficial judgements (managers!) a different sort of evaluation decisions about buying (external) or adopting (internal) more-or-less functional software

154. HCI (158359) © P.Lyons 2007-2008 154 P HYSICAL D ESIGN D esign, P rototyping, A nd C onstruction Concrete details screen layout choice of icons men structure Try to defer physical details till after conceptual design though inevitably there's some mixing, because design is iterative Physical constraints may limit conceptual design cell phones designers have to map much functionality onto small screens Physical design should support & not interfere with user's cognitive processes attention, perception, memory, problem-solving, planning, reasoning & decision-making

155. HCI (158359) © P.Lyons 2007-2008 155 S HNEIDERMAN'S 8 R ULES O F I NTERFACE D ESIGN D esign, P rototyping, A nd C onstruction Strive for consistency File menu always at top left always ask for confirmation before destroying data Enable frequent users to use shortcuts augment menus with shortcuts and hotkeys Offer informative feedback error 404 means "The URL couldn’t be found" so why not say so? Design dialogs to yield closure make it clear when an action (e.g. printing) has completed Offer error prevention and simple error handling better if the user can't make errors errors shouldn't be catastrophic; provide support for correction Permit easy reversal of actions undo stack (command pattern) Support internal locus of control let users feel in control, not controlled Reduce short-term memory load offer options instead of getting them to remember information between screens

156. HCI (158359) © P.Lyons 2007-2008 156 W IDGETS D esign, P rototyping, A nd C onstruction Embodiment of design rules may be selected from library may be designed according to style guide specifies interface's look and feel size and shape, relative positions of buttons icons to use throughout the application fonts commercial style guide in-house style guide to promote corporate identity (Massey's website guidelines) Menu design Icon design Screen layout

157. HCI (158359) © P.Lyons 2007-2008 157 M ENU D ESIGN D esign, P rototyping, A nd C onstruction Choice of actions related to the current task based on task structure drop-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

158. HCI (158359) © P.Lyons 2007-2008 158 M ENU D ESIGN D esign, P rototyping, A nd C onstruction Use short, clear, unambiguous names e.g. calendar program Add Entry Edit Entry Move Entry Delete Entry Add Contact Edit Contact Delete Contact

159. HCI (158359) © P.Lyons 2007-2008 159 I CONS D esign, P rototyping, A nd C onstruction Difficult to find unambiguous icons standardised ladies' and gents' toilet icons caused confusion Draw on existing traditions or standards Nouns are easier to iconise than verbs search icon: magnifying glass (but also zoom tool) binoculars meeting icon: Would these work if they were smaller?

160. HCI (158359) © P.Lyons 2007-2008 160 D EVELOPMENT T OOLS D esign, P rototyping, A nd C onstruction Too many to catalogue guidelines 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

161. HCI (158359) © P.Lyons 2007-2008 161 S CREEN D ESIGN D esign, P rototyping, A nd C onstruction Two aspects splitting task across multiple screens (or tabs) refer to task analysis – one screen per task 1 step per screen – can be too simplistic multiple simultaneously active screens main screen + taskbars design of individual screens draw user's attention to the main point use colour, motion, boxing and grouping to clarify relationships

162. HCI (158359) © P.Lyons 2007-2008 162 W HICH T YPES O F T OOLS W ORKED? Successful tools window managers & toolkits event languages interactive interface builders (VB, Delphi) component systems scripting languages OO programming Less successful tools UIMS formal language tools (state machines etc) tools for maintaining constraints automatic interface generators D esign, P rototyping, A nd C onstruction overlapping windows use screen space effectively map well onto mouse-based input make it easy to design visual layout reduce the programming, modular allow for fast prototyping good for representing buttons and other widgets separate business rules and UI - too abstract suitable for sequential dialogs; unpopular paradigm unpredictable; which constraint will be obeyed? also unpredictable

163. HCI (158359) © P.Lyons 2007-2008 163 A CTIVITY D esign, P rototyping, A nd C onstruction Design a website as a noticeboard for upcoming presentations an adminstrator accepts offers of presentations, arranges rooms, confirms dates

164. HCI (158359) © P.Lyons 2007-2008 164

165. HCI (158359) © P.Lyons 2007-2008 165 T YPES O F D ISABILITY 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. D ealing W ith D isabilities

166. HCI (158359) © P.Lyons 2007-2008 166 T YPES O F D ISABILITY Motor or dexterity impairments: total absence of limbs or digits paralysis lack of fine control instability or pain in the use of fingers, hands, wrists, or arms. difficulties with standard input devices, (keyboard and mouse). D ealing W ith D isabilities

167. HCI (158359) © P.Lyons 2007-2008 167 T YPES O F D ISABILITY Hearing disabilities: total deafness (inability to hear at all), slight loss of hearing ability to sense sounds and speech difficulty 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. D ealing W ith D isabilities

168. HCI (158359) © P.Lyons 2007-2008 168

169. HCI (158359) © P.Lyons 2007-2008 169 T YPES O F D ISABILITY 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 types mental retardation language and learning disabilities (e.g., dyslexia) head injury and stroke Alzheimer's disease (i.e., memory retention problems) dementia D ealing W ith D isabilities

170. HCI (158359) © P.Lyons 2007-2008 170

171. HCI (158359) © P.Lyons 2007-2008 171 T YPES O F D ISABILITY Speech impairments quite 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. D ealing W ith D isabilities

172. HCI (158359) © P.Lyons 2007-2008 172 T YPES O F D ISABILITY Illiteracy Illiteracy 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. D ealing W ith D isabilities

173. HCI (158359) © P.Lyons 2007-2008

174. 174 CSCW conventions for yielding control of floor prevent multiple people from working on the same part of an image simultaneously

175. HCI (158359) © P.Lyons 2007-2008 175

176. HCI (158359) © P.Lyons 2007-2008 176

177. HCI (158359) © P.Lyons 2007-2008 177 Folksonomies user-generated taxonomies of photos, web pages, links, etc.