159353 Human-Computer Interaction Section 1

2. 159353Human-Computer InteractionSection 1

3. Today's Best Error Message COURTESY OF MICROSOFT WINDOWS XP

4. Conceptual Models both have been used ANALYSE THE PROBLEM SPACE FIRST • 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 • Start with a more abstract analysis • assumptions – reasons, often presented without empirical justification • claims – have to be lived up to • goals not bad practice, if they can be verified

5. Conceptual Models STEPS IN ANALYSING THE PROBLEM SPACE • Use experience with existing products • learn reasons for problems • design solutions to problems How to design an improved user experience?

6. Conceptual Models WHAT DID THE DEVELOPERS ASSUME? • 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 when playing moreso when buying • How do you rate importance of • playing individual songs? • playing playlists? Were Apple's assumptions warranted?

7. Conceptual Models Conceptual Models http://www.apple.com/itunes/overview WHAT DID THE DEVELOPERS CLAIM? • 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.

8. Conceptual Models FROM PROBLEM SPACE TO DESIGN SPACE • 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

9. Conceptual Models FROM PROBLEM SPACE TO DESIGN SPACE CONCEPTUAL MODELS • 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. Conceptual Models CONCEPTUAL MODELS • 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 • 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? • 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 • Model can help designers make decisions • how the interface should look and feel • even what functions are important

11. Conceptual Models BENEFITS TO THE DESIGN TEAM 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 developments • model paves the way for future developments • tho' it's understood that they won't be implemented just yet

12. Conceptual Models WHAT'S IN A CONCEPTUAL MODEL? • Metaphors and analogies • assist users to understand the purpose of the product • assist users to understand the usage of the product • 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 need to be clear cf scribbler • 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

13. Conceptual Models www.bricklin.com AN EARLY, INFLUENTIAL CONCEPTUAL MODEL • VISICALC • 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 - the new concept

14. Conceptual Models Benefits • Familiarity Simplicity • Saved drudgery • calculators could perform same calculation, but with more effort Improved accuracy Surpassed the capabilities of existing systems

15. Conceptual Models XEROX 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) Goal: a computer for users who didn’t use computers • Extensive research into an appropriate conceptual model • led to the desktop metaphor • to provide familiarity • to minimise the need to understand how computers work

16. Conceptual Models INTERFACE METAPHORS • 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 but the terms are often used interchangeably • 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

17. Conceptual Models BENEFITS OF INTERFACE METAPHORS • Provides a clue to the underlying conceptual model 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

18. Conceptual Models PROBLEMS WITH INTERFACE METAPHORS • Break conventional and cultural rules • recycle bin on the desktop • 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

19. Conceptual Models 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? • 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. No limits on technology employed No limits on cost

20. Conceptual Models INTERACTION TYPES • Instructing (commanding) • keyboard and function key commands • menu selection • 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

21. Conceptual Models INSTRUCTING • User tells the system what to do • command-line interfaces • menu selection, buttons • Efficient and unambiguous • by comparison with natural-language interface, for example • Flexible • easy to add parameters to a command (e.g. Unix commands)

22. Conceptual Models CONVERSING • Approaches human-human interaction in some respect • spoken input (voice recognition) • natural language input (Ask Jeeves – now defunct) Helps novices and technophobes feel at ease • Implementation difficult • distinguishing accents • parsing natural language

23. Conceptual Models Liddle, D., 1996 Design of the Conceptual Model, in Winograd, T. (ed) Bringing Design to Software Addison Wesley • "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"

24. Understanding Users "This is so cool! I'm flying this thing completely on my Palm Pilot!" plane computer interface pilot • Why was that funny? not the reason, that is • 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? probably not definitely not definitely

25. Understanding Users DESIGNING AN INTERFACE FOR HUMANS • What's good about the real plane control systems? 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

26. Understanding Users COGNITION • What's going on in our heads? • thinking • remembering • learning • daydreaming • decision-making • writing • talking • 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

27. Understanding Users WHY DO WE NEED TO UNDERSTAND USERS? Interacting with technology is cognitive • Users' cognitive processes have limitations • We can allow for these if we understand users • Users can only be expected to do certain things • Understanding users gives insight into these Helps us understand problems that users encounter • We want to design better interactive products • Understanding users can help us by supplying • theories • modelling tools • guidance • methods

28. Understanding Users WHAT GOES ON IN THE MIND? understanding others talking with others manipulating others perceiving thinking remembering learning making decisions solving problems daydreaming planning a meal imagining a trip painting writing composing

29. Understanding Users WHAT GOES ON IN THE MIND? • Cognitive processes Attention Perception Memory Reading, speaking and listening Problem-solving, planning, reasoning & decision-making, learning

30. Understanding Users in moderation! WHAT GOES ON IN THE MIND? • Cognitive processes Attention • 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 Perception Memory Reading, speaking and listening Problem-solving, planning, reasoning & decision-making, learning

31. Understanding Users WHAT GOES ON IN THE MIND? • Cognitive processes Attention Perception 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 Memory Reading, speaking and listening Problem-solving, planning, reasoning & decision-making, learning

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

34. <top> <PL ‘HOLDER> Syntax <middle> <PL ‘HOLDER> Syntax <top> Header Next Alt <middle> Non-tml Next Alt NTptr “B” Terminal Next Alt <middle> <PL ‘HOLDER> Syntax <bottom> <PL ‘HOLDER> Syntax ”missed” TERMINAL Syntax <bottom> Non-tml Next Alt NTptr “MISSED” Terminal Next Alt <middle> Header Next Alt <bottom> <PL ‘HOLDER> Syntax “E” TERMINAL> Syntax “E” Terminal Next Alt <bottom> Header Next Alt SHAPE PERCEPTION USES COLOUR INFORMATION

35. <top> <PL ‘HOLDER> Syntax <middle> <PL ‘HOLDER> Syntax <top> Header Next Alt <middle> Non-tml Next Alt NTptr “B” Terminal Next Alt <middle> <PL ‘HOLDER> Syntax <bottom> <PL ‘HOLDER> Syntax ”missed” TERMINAL Syntax <bottom> Non-tml Next Alt NTptr “MISSED” Terminal Next Alt <middle> Header Next Alt <bottom> <PL ‘HOLDER> Syntax “E” TERMINAL> Syntax “E” Terminal Next Alt <bottom> Header Next Alt SHAPE PERCEPTION USES COLOUR INFORMATION <top> <PL ‘HOLDER> Syntax <middle> <PL ‘HOLDER> Syntax <top> Header Next Alt <middle> Non-tml Next Alt NTptr “B” Terminal Next Alt <middle> <PL ‘HOLDER> Syntax <bottom> <PL ‘HOLDER> Syntax ”missed” TERMINAL Syntax <bottom> Non-tml Next Alt NTptr “MISSED” Terminal Next Alt <middle> Header Next Alt <bottom> <PL ‘HOLDER> Syntax “E” TERMINAL> Syntax “E” Terminal Next Alt <bottom> Header Next Alt

36. Understanding Users WHAT GOES ON IN THE MIND? Cognitive processes Attention Perception • 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! Memory Reading, speaking and listening Problem-solving, planning, reasoning & decision-making, learning

37. Understanding Users George Miller (1956) THE MAGICAL NUMBER 7 +2 People can remember 5-9 numbers in short-term memory Therefore people can remember 5-9 chunks of general information • chocolate, • wobbly, • armchair, • rotten, • hot, • cobblestone, • wood, • shark, • comfortable, • book, • lamp, • hungry, • interesting, • standard • standard lamp • hot chocolate • hungry shark • interesting book • wobbly cobblestone • comfortable armchair • rotten wood

38. Understanding Users THE MAGICAL NUMBER 7 +2 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

39. Understanding Users AMORESENSIBLEAPPLICATIONOFPSYCHRESEARCH • 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

40. Understanding Users READING, SPEAKING AND LISTENING • 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

41. Understanding Users Confirm file replace Confirm file replace Confirm file replace Confirm file replace incoming file is bigger and newer incoming file is smaller and newer incoming file is smaller and older incoming file is bigger and older 25MB 25MB 25MB 25MB 25MB 25MB the existing file with this bigger, newer file 74MB 74MB 74MB 74MB 74MB 74MB 1.76MB 3.57.50pm Tuesday 8 March 2007 2.76MB 3.49.44am Today 12 March 2007 19:33:12 2:43:24 4 21 19:33:12 19:33:12 2:43:24 2:43:24 2:43:24 Dec Feb 4 4 4 21 21 21 2008 2003 Dec Dec Dec Feb Feb Feb 2008 2008 2008 2003 2003 2003 Cancel Confirm Cancel Cancel Cancel Confirm Confirm Confirm INTERPRET DATA FOR THE USER TO GUIDE DECISIONS • 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

42. Understanding Users MAKE THE MENTAL MODEL CLEAR • 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.”

43. Understanding Users 25 20 30 15 35 MAKE THE MENTAL MODEL CLEAR • Internal construction of • enabling predictions to be made Deep models Shallow models • after a concert at an outside venue in the winter you get back to the car • what thermostat setting do you choose? Erroneous models • 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)

44. Understanding Users MAKE THE MENTAL MODEL CLEAR • Internal construction of • enabling predictions to be made Deep models Shallow models are surprisingly common Erroneous models • Wewantto match • it isn’t the user's responsibility • computer literacy courses are an acknowledgement of failure

45. Understanding Users Donald Norman, 1983 Some Observations on Mental Models Gentner, D. & Stevens, A.l. (eds) (Mental Models) MAKE THE MENTAL MODEL CLEAR • Wewanttheuser’smentalmodelto matchthedesigner’sconceptualmodel • 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…] is the goal

46. Understanding Users easy difficult MAKE THE MENTAL MODEL CLEAR is the goal give • devise • no thought required • devise • some thought required provide instructions provide help and tutorials provide suitable often, all three Are you a beginner, an improving intermediate, or an expert?

47. Understanding Users input encoding comparison response selection response execution output WHAT'S THE MIND LIKE? • like the most recent technological invention • steam engine • telephone exchange • digital computer • 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

48. Understanding Users WHAT'S THE MIND LIKE? • Internal and external information complement each other • "external cognition" uses information representation & manipulation tools) external representations of information tools for manipulating information +  • external cognition • externalises to • offloads • facilitated by

49. Understanding Users WHAT'S THE MIND LIKE? • external cognition • externalises to reduce memory load • offloads computational load • facilitated by annotation and cognitive tracing 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!)

50. Understanding Users WHAT'S THE MIND LIKE? • external cognition • externalises to reduce memory load • offloads computational load • external cognition • externalises to reduce memory load well-chosen representation facilitates computation e.g., multiplication with arabic numerals vs. Roman numerals