Introduction to Human-Computer Interaction Guest Lectures in the - PowerPoint PPT Presentation

Principle 2: 8 Golden Rules – Shortcuts/ Universal Usability • shortcuts as example feature for expert users • shortcuts improve speed for experienced users • shortcuts on different levels – access to single commands, e.g. keyboard shortcuts (CTRL+S) or toolbar – customizing of commands and environments, e.g. printer preset (duplex, A4, … ) – reusing actions performed, e.g. history in command lines, macro functionality • shortcuts to single commands are related to consistency – CTRL+X, CTRL+C, CTRL+V in Microsoft applications for cut, copy and paste – however, CTRL+S (saving a document) is only implemented in some applications … 19 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

20 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Principle 2: 8 Golden Rules - Feedback • For any action performed the user should have appropriate and informative feedback • For frequent and minor actions the feedback should be modest and peripheral (e.g. at the bottom of the screen) • For infrequent and major actions it should be more substantial 21 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Principle 2: 8 Golden Rules - Closure • sequences (groups) of actions should have a beginning, middle, and end. • examples for closure: – in the large: web shops - it should be clear when I am in the shop, and when I have successfully check-out – in the small: a progress bar 22 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Principle 2: 8 Golden Rules – Prevent Errors • create UI that make it hard to make errors (e.g. menus instead of commands) • detect errors or possible errors • is related to “easy reversal of actions” • different options how to handle it: – involve the user (current practice) – prevent the error or its consequences on system level (e.g. create backups/versions when a file is overwritten, keep all files that have been created by the user) • examples – leaving a editor without saving – writing to a file that already exists 23 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Principle 2: 8 Golden Rules – Permit Easy Reversal of Actions • as a basic rule, all actions should be reversible • providing UNDO functions (possibly with infinite depth) • allow undo of groups of actions • example: undo is not trivial if user is not moving sequential through the user interface e.g. write a text, copy it into the clipboard, undo the writing à the text is still in the clipboard! • reversal of action becomes a usage concept: – browser back-button is used for navigation (for the user a conceptual reversal of action) – formatting of documents – e.g. “lets see how this look, … don’t like it, … go back to the old state” (done with “preview” in e.g. Microsoft Word 2007 – preview is better than undo!) 24 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Principle 2: 8 Golden Rules – Permit Easy Reversal of Actions • Example: Give Preview of Font Change (PowerPoint 2007) • while selecting the font, a preview is given – an error, e.g. changing to a font size that does not allow all text to be displayed, can quickly be detected 25 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Principle 2: 8 Golden Rules – Support Internal Locus of Control • users should “feel” to be in control of the system • user should initiate actions (initiator instead of responder) • avoid non-causality (support this e.g. by the underlying model) • the system should be predictable (e.g. do not change the order of buttons) • some current developments in computer science are in contrast to this rule: – proactive computing – intelligent agents 26 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

More about feeling in control • Urban Stress: Experiments on Noise and Social Stressors. DC Glass, JE Singer - 1972 - Academic Press • People have to complete tasks under noisy conditions – Group A can switch off the noise (remark: if the switch is used, the study results cannot be used) – Group B has no influence over the noise • What happens? 27 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

More about feeling in control • Urban Stress: Experiments on Noise and Social Stressors. DC Glass, JE Singer - 1972 - Academic Press • People have to complete tasks under noisy conditions – the group A that got told that they could switch off the noise (though it would be preferable if they did not) performed significantly better than the group B that felt that they have no influence over the noise. 28 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Principle 2: 8 Golden Rules – Reduce Short- Term Memory Load • 3-4 chunks of information (see HIP lecture slides) • the system should remember, not the user (the system can remember more easily!) • examples that create problems – multi-page forms where the user has to know at form N what she filled in in form N-1 – abbreviations introduced in one step and used in the following (e.g. user selects a destination – as the name of a city – and the system does the following steps by showing only the airport code) • helpful: – make information that is required visible – use memory aids (visual or audio) – rather overprovide information – the user will ignore it if not needed (when implemented properly) 29 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Principle 3: Automation and Human Control Humans generally better ... Machines generally better.. sense low-level stimuli sense stimuli outside human’s range detect stimuli in noisy background count or measure physical quantities recognize constant patterns in varying store quantities of coded information situations sense unusual and unexpected events monitor pre-specified events, esp. infrequent ones remember principles and strategies make rapid and consistent responses to input signals retrieve pertinent details without a-priori recall quantities of detailed information connection accurately draw on experience and adapt decisions to process quantitative data in pre-specified situation ways ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 2 30 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Principle 3: Automation and Human Control Humans generally better ... Machines generally better.. make subjective evaluations perform several activities simultaneously develop new solutions maintain operations under heavy information load concentrate on important tasks when maintain performance over extended overload occurs periods of time adapt physical response to changes in situation select alternatives if original approach fails reason deductively: infer from a general principle reason inductively: generalize from perform repetitive pre-programmed actions observations reliably act in unanticipated emergencies and novel exert great, highly controlled physical force situations ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 2 31 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Principle 3: Automation and Human Control • Successful integration: – users can avoid: • routine, tedious, and error prone tasks – users can concentrate on: • making critical decisions, coping with unexpected situations, and planning future actions • Supervisory control needed to deal with real world open systems – e.g. air-traffic controllers with low frequency, but high consequences of failure – FAA: design should place the user in control and automate only to improve system performance, without reducing human involvement ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 2 32 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Guidelines, Principles and Models for HCI • Design Guidelines & Design Principles – Style guides – 3 Principles & – 8 Golden Rules – 10 Usability Heuristics of Jakob Nielsen – 7 Amendments – Hix and Hartson’s Guidelines • Applied Design Guidelines & Principles • Models for Human-Computer Interaction (Selection) – Fitts’s law – Hick’s law – GOMS – KLM 33 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Jakob Nielsen’s Ten Usability Heuristics (1 – 4) 1. Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. 2. Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real- world conventions, making information appear in a natural and logical order. 3. User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. 4. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. ü www.cvc.sunysb.edu/323/slides/interaction_design.ppt, last visited 20.03.2012 34 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Jakob Nielsen’s Ten Usability Heuristics (5 – 7) 5. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. 6. Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. 7. Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. ü www.cvc.sunysb.edu/323/slides/interaction_design.ppt, last visited 20.03.2012 35 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Jakob Nielsen’s Ten Usability Heuristics (8 – 10) 8. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. 9. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. 10. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. ü www.cvc.sunysb.edu/323/slides/interaction_design.ppt, last visited 20.03.2012 36 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Example: 1. Visibility of system status • constructive feedback and error messages • descriptive • explanative • goal-/solution-oriented • example: “please enter the date in the form dd.mm.yyyy” instead of “wrong date format” 37 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Example: 2. Match between system and the real world • the user determines the terminology used – not the developer! • use the slang of the user and his application area for naming of objects and function • example: website for “young people” vs. neutral website for “grown ups” 38 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Example: 3 User control and freedom • After the begin of an action initiated by a user, he shall be provided with timeley feedback. • For longer actions, provide e.g. progress bars, give information on the time remaining, … 39 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Example: 4. Consistency and standards • similar/the same things should always be named and depicted in the same way! • same defaults on dialogs (always aborting/not saving/not losing data/back/ abort/not completing the action” or always the opposite) 40 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Example: 5. Error prevention • error prevention by – hints – good defaults / values chosen – drop down lists vs. manual input fields – visualization of the mode used (if modes are used at all) – consistency – … 41 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Example: 6. Recognition rather than recall • remember: the user might also be in a real world situation and might not have time to focus on your great user interface/interactive system/technology • reduce mental load • always reduce to the absolute minimum (recognition wise, selection wise, … ) • iconic depictions, grouping and e.g. coloring of selections only help to a certain extent 42 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Example: 7. Flexibility and efficiency of use • allow diverse users to use different ways -> allow shortcuts, allow more proficient users to use the “fast path” • examples: – keyboard shortcuts – function keys – history functions (e.g. for last filenames or commands, e.g. like the bash history) • allow for faster task completion • ensure error minimization • 43 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Example: 8. Aesthetic and minimalist design • adopt dialogs to the “natural” way of things, of the solution path of the user • simple: only necessary information are visible, no more, no less • necessary prerequisite: know thy user and his context of use when designing the user interface (know the domain expert your user is) 44 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Example: 9. Help users recognize, diagnose, and recover from errors • allow for undo (potentially unlimited undo) • allow to recover from situations to the start • for long lasting/time consuming tasks: how can they be canceled? 45 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Example: 10. Help and documentation • help texts matches software versions and existing functions • completeness and soundness of the documentation 46 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Nielson‘s Heuristics ü http://www.youtube.com/watch?v=hWc0Fd2AS3s 47 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Discussion on Nielsen’s Heuristics Negative Comments: • heuristics are good – but lack theoretical foundation • “only” „Discount Usability“ • absolute and bare minimum on usability – not more! (not enough!) Positive Comments: • better a minimum on usability than nothing? • door opener for “more” in a company/development team? 48 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Guidelines, Principles and Models for HCI • Design Guidelines & Design Principles – Style guides – 3 Principles & – 8 Golden Rules – 10 Usability Heuristics of Jakob Nielsen – 7 Amendments – Hix and Hartson’s Guidelines • Applied Design Guidelines & Principles • Models for Human-Computer Interaction (Selection) – Fitts’s law – Hick’s law – GOMS – KLM 49 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: Constraints Error Avoidance Design Guidelines: • E5: Exploit the power of constraints, both natural and artificial. Constraints • guide the user to the next appropriate action or decision. Human Error: design implications: • minimize the chance to make errors (constraints) • physical constraints (dial vs. button) • semantic constraints (assumption that create something meaningful) • cultural constraints (borders provided by cultural conventions, e.g. traffic signs, colours, ..) • logical constraints (restrictions due to reasoning) ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 20 50 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: Constraints • technical constraints in UIs: • processing power (mobile vs. desktop) • access time and RAM size • graphic capabilities (mobile phone screen vs. desktop monitor) • available media (text vs. film) • network • ... ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 20 51 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: Constraints Example 1 Date unconstrained Date constrained Which design will be more error-prone? Why? ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 20 52 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: Constraints Example 2 • Dials vs. Buttons vs. Sliders – Dials are turned – Buttons are pressed – Sliders are pushed 53 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: Constraints • redundant: colors outlet - plug! • constraints: square plug – round plug 54 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: Constraints • Constraints vs. redundancy: • constraints limit the user • potential problem: (feeling of) lack of control • redundancy is potentially more convenient • (e.g. colour, fonts, text, ...) • constraints only work on their respective level • not above or below! ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 20 55 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: Mapping Error Avoidance Design Guidelines: • E4: Exploit natural mappings between intentions and possible actions, between actions and their effects on the system state and what is perceivable, and between the system state and the needs, intentions and expectations of the user Principles of good design (Don Norman): • interface should include good mappings that show the relationship between stages ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 20 56 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: Mapping • Relationship between controls and action • Mappings should be – Understandable (e.g. moving the mouse up move the slider up) – Consistent – Recognizable or at least quickly learnable and easy to recall – Natural, meaning to be consistent with knowledge the user already has • Example: cooker (for these issues see also Gestalt theory) 57 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: Mapping – Example 1 • Relationship • between • controls and • action 58 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: Mapping – Example 2 • Relationship • between • controls and • action 59 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: Mapping good start for a solution for good mappings and constraints: • determine the user’s skill level – obvious – but hard to do – different users will have different requirements (diversity!) and knowledge when encountering the UI – helpful: usage profiles • demographic data delivers background information ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 20 60 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: Consistency • Lexical Consistency • Syntactic Consistency – Coding consistent with – Error messages placed at common usage, e.g. same (logical) place • red = bad, green = good – Always give command first - or last • left = less, right = more – Apply selection consistently, – Consistent abbreviation rules e.g. select text then apply tool – equal length or first set of or select tool and then apply to unambiguous chars. a text – Devices used same way in all – Menu items always at same phases place in menu (muscle – character delete key is always memory) the same 61 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Applied Design Guidelines & Principles: INConsistency • Dragging file operations? – folder on same disk vs. folder on different disk – file to trashcan vs. disk to trashcan • Sometimes inconsistency is wanted – E.g. Getting attention for a dangerous operation – Use inconsistency very carefully! • Inconsistency at one level may be consistent at another – moving icon to file cabinet, mailbox, or trash causes icon to disappear (Xerox Star) – choices for when dragging file icon to printer icon: • delete the icon (and thus the file) • disappears “in” the printer from where it can be retrieved • return icon to original location 62 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Guidelines, Principles and Models for HCI • Design Guidelines & Design Principles – Style guides – 3 Principles & – 8 Golden Rules – 10 Usability Heuristics of Jakob Nielsen – 7 Amendments – Hix and Hartson’s Guidelines • Applied Design Guidelines & Principles • Models for Human-Computer Interaction (Selection) – Fitts’s law – Hick’s law – GOMS – KLM 63 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Theories and Models for HCI • beyond the specifics of guidelines (such as: user interface design guidelines) • principles are used to develop theories • descriptions/explanatory or predictive • motor task, perceptual, or cognitive • Example theories: – Fitts’s law – Hick’s law – Goals, Operators, Methods, Selection rules (GOMS) – a cognitive model of procedural knowledge – KLM 64 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Theories and Models for HCI • Explanatory theories: – observing behavior – describing activity – conceiving of designs – comparing high-level concepts of two designs – training • Predictive theories: – enable designers to compare proposed designs for execution time or error rates 65 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Guidelines, Principles and Models for HCI • Design Guidelines & Design Principles – Style guides – 3 Principles & – 8 Golden Rules – 10 Usability Heuristics of Jakob Nielsen – 7 Amendments – Hix and Hartson’s Guidelines • Applied Design Guidelines & Principles • Models for Human-Computer Interaction (Selection) – Fitts’s law – Hick’s law – GOMS – KLM 66 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Proving your intuition: Which circle could you hit fastest and easiest - and why? + + + + + + 1. The larger the distance to move, the + longer it takes. + 2. The larger a target, + the easier it is to hit it (and not to overshoot) + + BUT : What about far away big targets compared to closer small targets ? 67 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Motivation and Intuition Motivation : • ‘ Fitts’s Law ’ as one of the very few ‘hard’ facts in HCI (such as ‘Hick’s Law’, or models such as GOMS or KLM) • Predict how long an action takes before implementing anything! (assess performance before implementation - instead of post-evaluation) • 1D/2D movement: mouse still as the dominant interaction device on desktop computers following the WIMP (Windows, Icons, Menus, Pointer) paradigm! à Extension of Fitts’s Law from 1D to 2D movement: ‘ Accot-Zhai Steering Law ’ Intuition on movement times: • The larger the distance to move, the longer it takes. • The larger a target, the easier it is to hit it (and not to overshoot) Restrictions : • No accelerated mouse cursor; pure movement tasks! • untrained movements (modeling is so low-level, it applies to mouse usage, too) � Paul M. Fitts (1954). The information capacity of the human motor system in controlling the amplitude of movement. 68 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction Journal of Experimental Psychology, volume 47, number 6, June 1954, pp. 381–391

1D Movement task: move from start to target with different devices, e.g. a pen, a slider , … original experiment: “serially tapping task” + Start Direction of motion Target 69 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

1D Movement + + 70 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

1D Movement + 71 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

1D Movement + 72 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

1D Movement + 73 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

1D Movement Error Tolerance D: Distance to Move W: width of target + 74 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Formulation of Fitts’s Law (originally published 1954) Original formulation (by Fitts) Shannon form (by MacKenzie, see reference for details) “fits” better with parameters, ensures always a non-negative ‘Index of Difficulty’ Parameter Meaning of Parameter Parameter Meaning of Parameter T (in s) (movement) time D (in cm) distance to target (center) a (in s) time to start/stop device W (in cm) width of target (total) b (in s/bit) device speed ID (in bit) index of difficulty a, b: empirically determined parameters; Width: ± W / 2 around center of target along the axis of motion, mouse: a=50ms, b=150ms � Scott MacKenzie (1992). Fitts' law as a research and design tool in human–computer interaction. Human–Computer 75 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction Interaction, volume 7, 1992, pp. 91–139. http://www.yorku.ca/mack/hci1992.pdf

Consequences of Fitts’s Law? Take a normal 2D monitor screen, and a mouse as input device. What are direct consequences of Fitts’s Law in practice? 76 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Consequences of Fitts’s Law: Golden Pixel and Hot Corners • 5 ‘regions’ (of size 1x1 pixels, visualized as ) are easier to ‘hit’ than others • current position (no movement) and corners (large ’off-screen’ target areas) 77 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Consequences of Fitts’s Law: Pie Menus pie menus (with are limited number of options) have advantages: • pie menus are selected faster (1 pixel movement and you are “on target”) • wedge-shaped target areas are very large, thus have a lower error rate 78 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Consequences of Fitts’s Law: Real World Example: Hot Corner (Word 2007) � Image source: http://www.baycongroup.com/word2007/images/01_Word2007Screen.gif 79 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Consequences of Fitts’s Law: Real World Example: Hot Corner (Word 2007) � Image source: http://www.baycongroup.com/word2007/images/01_Word2007Screen.gif 80 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Consequences of Fitts’s Law: Real World Example Movement Distance and Target Size (PPT 2010) 81 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Consequences of Fitts’s Law: Real World Example Movement Distance and Target Size (PPT 2010) Improvements from left to right: • position of context menu(s) • improved distance to targets • improved size of targets 82 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Consequences of Fitts’s Law: Real World Example: Windows vs. Mac OS � Image source: http://www.guidebookgallery.org/pics/gui/desktop/firstrun/macosx103.png 83 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Consequences of Fitts’s Law: Real World Example: Windows vs. Mac OS � Image source: http://www.guidebookgallery.org/pics/gui/desktop/firstrun/macosx103.png 84 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Consequences of Fitts’s Law: Real World Example: Windows vs. Mac OS Attention: multi-monitor set ups! � Image source: http://www.guidebookgallery.org/pics/gui/desktop/firstrun/macosx103.png 85 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Fitts’s Law • “old” but still important with WIMP-based interaction (Windows, Icons, Menu, Pointers)! • models the speed-accuracy trade-off in human motor tasks • is characterized by the following components: Error Tolerance D: Distance to Move W: width of target + 86 12.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Fitts’s Law • predictive model of time to point at an object • the time for hand movements is dependent on the distance to move (D) and the target size (W) (in 1 dimension, width) – doubling the distance increases the time, but does not double it – increasing the target size enables more rapid pointing • Fitts’s law predicts that the time to acquire a target is logarithmically related to the distance over the target size. • Movement Time (MT) for “gross-movement tasks”: – MT = a + b log 2 (D/W + 1) – where a = time to start and stop in seconds for a device – and b = inherent speed of the device, e.g. a mouse • Movement Time (MT) for “precision pointing tasks”: – PPMT = a + b log 2 (D/W + 1) + c log 2 (d/W) – where c = added constant, dependent on the user’s context – and d = distance between hand location and spot where the user first touched the screen 87 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Fitts’s Law – Motivation Video ü http://www.youtube.com/watch?v=EpBa3VzD5xY 88 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Windows vs. Mac: Fitts’s Law in Practice ü http://www.youtube.com/watch?v=nBBJ5xDr4y4 89 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Mini-Exercise Fitts’s Law: Difference in motion-time http://www.omnicronelectronics.com A A W W D2 =42 mm D1 = 42 mm W2 = 6 mm W1 =14 mm MT = a + b log 2 (D/W + 1) and let a=50ms, b=150ms/bit MT2 - MT1 = ? 90 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Mini-Exercise Fitts’s Law: Difference in motion-time + W A A 0 + W 0 A2=70 mm A1=30 mm W2=10 mm W1=10 mm MT = a + b log 2 (D/W + 1) and let a=50ms, b=150ms/bit MT2 - MT1 = ? 29.10.2012 91 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Guidelines, Principles and Models for HCI • Design Guidelines & Design Principles – Style guides – 3 Principles & – 8 Golden Rules – 10 Usability Heuristics of Jakob Nielsen – 7 Amendments – Hix and Hartson’s Guidelines • Applied Design Guidelines & Principles • Models for Human-Computer Interaction (Selection) – Fitts’s law – Hick’s law – GOMS – KLM 92 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Hick’s Law • The time needed for a person to make a selection is proportional to the log number of alternatives given Note: Hick’s law does not apply • n alternatives of equal probability H = b * log2(n + 1). if it requires linear search (b empirically determined constant) (e.g. a randomly ordered list of commands in a • Alternatives of unequal probability menu). pi = the probability of alternative i It applies if the user can H = Σ pi log2(1/pi + 1). search by sub-divisioning. Note: Thus, an unsorted start menu makes no sense … ü http://www.usabilityfirst.com 93 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Hick’s Law • Hick's law is similar in form to Fitts‘s law. Intuitively, one can reason that Hick's law has a logarithmic form because people subdivide the total collection of choices into categories, eliminating about half of the remaining choices at each step , rather than considering each and every choice one-by-one, requiring linear time. • Hick's law has been shown to apply in experiments where the user is presented with n buttons, each having a light bulb beside them. One light bulb is randomly lit up, after which the user must press the corresponding button as quickly as possible. Obviously, the decision to be made here is very simple, requiring little conscious thought. 94 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Hick’s Law Hick's law is sometimes cited to justify menu design decisions. However, applying the model to menus must be done with care. • For example, to find a given word (e.g. the name of a command) in a randomly ordered word list (e.g. a menu), scanning of each word in the list is required, consuming linear time, so Hick's law does not apply. • However, if the list is alphabetical and the user knows the name of the command, he or she may be able to use a subdividing strategy that works in logarithmic time. ü http://en.wikipedia.org/wiki/Hick's_law 95 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Hick‘s Law • The selection of complex alternatives is more costly than with „easy“/“simple“ alternatives. • Selecting simultaneously from a large number of alternatives is faster than selection sequentially from a small number of alternatives. • Limits: screen size and short term memory (chunks!) 96 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Guidelines, Principles and Models for HCI • Design Guidelines & Design Principles – Style guides – 3 Principles & – 8 Golden Rules – 10 Usability Heuristics of Jakob Nielsen – 7 Amendments – Hix and Hartson’s Guidelines • Applied Design Guidelines & Principles • Models for Human-Computer Interaction (Selection) – Fitts’s law – Hick’s law – GOMS – KLM 97 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

GOMS: Goals, Operators, Methods, Selection Rules • GOMS techniques produce quantitative and qualitative predictions of how people will use a proposed system • Basics: – Goals – goal a user wants to accomplish (in real scenarios hierarchical) – Operators – operation (at a basic level) that are used to achieve a goal – Methods – sequence of operators to achieve a goal – Selection Rules – selection of method for solving a goal (if alternatives are given) • Further reading: John, B. & Kieras, D. (1996). Using GOMS for user interface design and evaluation: which technique? ACM Transactions on Computer- Human Interaction, 3, 287-319. 98 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

Quantified User Interface Assessment using GOMS Operator Short Time name Tastatureingabe Keying K 0.2 seconds (0.08 – 1.2 seconds Mauszeigen Pointing P 1.1 seconds (refer to Fitts‘s Law) Modality change Homing H 0.4 seconds mouse <-> keyb. Preparation Mentally M 1.35 seconds to reflect on the Prepare curent goal and the application of a selection rule (refer to Hick‘s Law) Waiting Responding R N seconds waiting time until the computer has completed the task 99 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

GOMS Example „Copy a word from a paragraph to another paragraph 3 pages down.“ With mouse (8 seconds): H (change to mouse) + P(start) + K(click) + P(mark) + P(menu) + P(select „copy“) + P(scrollbar) + K(click) + K(click) + K(click) + P(Anfang) + K(right click) + P(selection: paste) = H + 5xK +6xP = 0.4 + 1 + 6.6 seconds With keyboard (10.2 seconds): 20xK(Cursor to start) + K(„shift“) + 7xK(„right arrow“) + K(„control“) + K(„C“) + 3xK(„page down“) + 10xK(Cursor to start) + 7xK(„right arrow“) + K(„right arrow“) + K(„right arrow“) = 51xK (example from Markus Dahm, Grundlagen der Mensch-Computer-Interaktion, 2006, S.104). 100 29.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction