1. CSCD 487/587 Human Computer Interface Winter 2013 Lecture 6 Human Cognition Continued more

2. Overview Look more in depth at models of cognition Visual details important for designers of interactive systems Other senses are not as important Look at that next time

3. 3 CONCEPTUAL MODELS Model can help designers make decisions how the interface should look and feel even what functions are important What information do we present to the user? What information do we want to ge back from the user? First step in Design 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

4. 4 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

5. 5 B ENEFITS T O T HE D ESIGN T EAM 1. Allows them to focus on user experience 2. Gives them a common vocabulary if they talk to each other 3.Delays commitment to detailed design 4. Facilitates future developments model paves the way for future developments tho' it's understood that they won't be implemented just yet

6. 6 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 product Concepts that underlie the product need to be clear Paint tools apply colour to a surface Drawing tools construct geometric shapes Photo editing tools apply filters to an image Ex.: cf scribbler

7. 7 A N E ARLY, I NFLUENTIAL C ONCEPTUAL M ODEL 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

8. 8 A NALYSE T HE P ROBLEM S PACE F IRST If We Don't Use Conceptual Models …. 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 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 Both have been used

9. 9 W HAT D ID T HE D EVELOPERS A SSUME? 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? What could you do to verify what users wanted? when playing moreso when buying Were Apple's assumptions warranted?

10. 10 W HAT D ID T HE D EVELOPERS C LAIM ? 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

11. 11 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 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?

12. 12 B ENEFITS O F I NTERFACE M ETAPHORS Provides a clue to the underlying conceptual model Familiarity reduces difficulty of learning Empowers a wide variety of non-technical users 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

13. 13 P ROBLEMS W ITH I NTERFACE M ETAPHORS 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

14. 14 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 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

15. 15 M AKE T HE M ENTAL M ODEL C LEAR 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.”

16. 16 W HAT'S T HE M IND L IKE ? 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

17. 17 GOMS Models

18. GOMS: Definition  Overview of GOMS http://www.cs.cmu.edu/~bej/CognitiveModelingFor UIDesign/2a_GOMS_Architectures.pdf  GOMS models user’s behavior in terms of: G oals  What the user wants to do. O perators  Specific steps a user is able to take and assigned a specific execution time. M ethods  Well-learned sequences of subgoals and operators that can accomplish a goal. S election Rules  Guidelines for deciding between multiple methods.

19. GOMS: A Family of Models  Keystroke-Level Model (KLM)  Card, Moran, and Newell (CMN-GOMS)  We will only look at first two  Natural GOMS Language (NGOMSL)  Cognitive-Perceptual-Motor GOMS (CPM-GOMS)

20. GOMS: Keystroke-Level Model (KLM)  Simplest GOMS technique Basis for all other GOMS techniques Predicts execution time  Requires analyst-supplied methods  Assumes that routine cognitive skills can be decomposed into a serial sequence of basic cognitive operations and motor activities, which are: K: A keystroke (280 msec) M: A single mental operator (1350 msec) P: Pointing to a target on a small display (1100 msec) H: Moving hands from the keyboard to a mouse (400 msec)

21. Top-level Goal:Edit Manuscript (move “quick brown” to before “fox”) Subgoal: Highlight text Operators: Move-mouse Click mouse-button Type characters (keyboard shortcuts) Methods: 1. Delete-word-and-retype (retype method) 2. Cut-and-paste-using-keyboard-shortcuts (shortcuts method) 3. Cut-and-paste-using menus (menus method) Selection Rules:If the text to be moved is one or two characters long, use retype method Else, if remember shortcuts, use shortcuts methodElse, use the menus method KLM Example

22. DescriptionOperatorDuration (sec) Mentally PrepareM1.35 Move cursor to “quick”P1.10 Double-click mouse buttonK0.40 Move cursor to “brown”P1.10 Shift-click mouse buttonK0.40 Mentally PrepareM1.35 Move cursor to Edit MenuP1.10 Click mouse buttonK0.20 Move cursor to Cut menu itemP1.10 Click mouse buttonK0.20 Mentally PrepareM1.35 Move cursor to before “fox”P1.10 Click mouse buttonK0.20 Mentally PrepareM1.35 Move cursor to Edit menuP1.10 Click mouse buttonK0.20 Move cursor to Paste menu itemP1.10 Click mouse buttonK0.20 TOTAL PREDICTED TIME 14.90 Method Used Cut-and-paste-using-menus 1 2 3 4 5 M=1.35 P=1.10 K=0.20

23. GOMS: Card, Moran, and Newell (CMN-GOMS)  Subgoal invocations and method selection are predicted by the model given the task situation  Predicts operator sequence and execution time  Based directly on the Model Human Processor

24. DescriptionDuration (sec) GOAL: MOVE-TEXT …….GOAL: CUT-TEXT ……………GOAL: HIGHLIGHT-TEXT ………………..MOVE-CURSOR-TO-BEGINNING1.10 ………………..CLICK-MOUSE-BUTTON0.20 ………………..MOVE-CURSOR-TO-END1.10 ………………..SHIFT-CLICK-MOUSE-BUTTON0.48 ………………..VERIFY-HIGHLIGHT1.35 ……….........GOAL: ISSUE-CUT-COMMAND …………………MOVE-CURSOR-TO-EDIT-MENU …………………PRESS-MOUSE-BUTTON0.10 …………………MOVE-MOUSE-TO-CUT-ITEM1.10 …………………VERIFY-HIGHLIGHT1.35 …………………RELEASE-MOUSE-BUTTON0.10 ………GOAL: PASTE-TEXT …………….GOAL: POSITION-CURSOR-AT-INSERTION-POINT …………………MOVE-CURSOR-TO-INSERTION-POINT1.10 …………………CLICK-MOUSE-BUTTON0.20 …………………VERIFY-POSITION1.35 …………….GOAL: ISSUE-PASTE-COMMAND …………………MOVE-CURSOR-TO-EDIT-MENU …………………PRESS-MOUSE-BUTTON0.10 …………………MOVE-MOUSE-TO-PASTE-ITEM …………………VERIFY-HIGHLIGHT1.35 …………………RELEASE-MOUSE-BUTTON0.10 TOTAL PREDICTED TIME 14.38 CMN-GOMS

25. Summary Models and knowledge of cognitive processes can only help with designing interfaces Should know what humans are thinking (in general) when they are presented with color, visual cues and complexity

26. The End Talk about assignment today.