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

introduction to human computer interaction
SMART_READER_LITE
LIVE PREVIEW

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

Introduction to Human-Computer Interaction Guest Lectures in the Course Software Engineering (D7025E) Matthias Kranz Department of Computer Science, Electrical and Space Engineering, Lule University of Technology, Sweden


slide-1
SLIDE 1

1

Introduction to Human-Computer Interaction

Matthias Kranz Department of Computer Science, Electrical and Space Engineering, Luleå University of Technology, Sweden matthias.kranz@ltu.se Guest Lectures in the Course Software Engineering (D7025E)

slide-2
SLIDE 2

2

Overview

Introduction and Motivation, History & Future of HCI Designing and Engineering Interactive Systems Guidelines, Principles and Models for HCI (selected topics)

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

slide-3
SLIDE 3

3

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

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

slide-4
SLIDE 4

4

Styleguides

  • rules for design, for doing things, for implementing things, for structuring
  • goal: consistency (of the user interface, of the code structure, …)
  • prerequisite: knowledge and application of the style guide
  • Style guides define:

– look and feel of individual interaction elements – placement and orderung of interaction elements e.g. in dialogs and forms – logic of dialogs – usage of terms and naming conventions – usage of icons and iconic descriptions – usage of colors and shapes – order and sequence of interaction steps – partioning of contents, structure, functionality, ..

  • well-known representatives: Apple, Google, Microsoft (though not enforcing it

– with results in inconstent applications on the user’s system)

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

slide-5
SLIDE 5

5

Guidelines, Principles and Theories for HCI

  • guideline: specific and practical rules for solving problems of UI design
  • principles: help for analyzing and comparing design alternatives
  • theories and models: describe objects and actions with consistent terminology

and give a comprehensible explanation of connections

formal

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

slide-6
SLIDE 6

6

Guidelines

  • guidelines record “best practices” and provide hands on solutions
  • guidelines provide “common language” and help ensure consistency across

applications

  • problem: guidelines are very specific to the problem domain
  • examples:

– Apple User Interface Guidelines

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

slide-7
SLIDE 7

7

Example: Introduction to Apple Human Interface Guidelines

  • Following the guidelines is to your advantage because:
  • Users will learn your application faster if the interface looks and behaves like

applications they’re already familiar with.

  • Users can accomplish their tasks quickly, because well-designed applications don’t get

in the user’s way.

  • Users with special needs will find your product more accessible.
  • Your application will have the same modern, elegant appearance as other Mac OS X

applications.

  • Your application will be easier to document, because an intuitive interface and standard

behaviors don’t require as much explanation.

  • Customer support calls will be reduced (for the reasons cited above).
  • Your application will be easier to localize, because Apple has worked through many

localization issues in the Aqua design process.

  • Media reviews of your product will be more positive; reviewers easily target software

that doesn’t look or behave the way “true” Macintosh applications do.

  • The implementation of Apple’s human interface principles make the Macintosh what it

is: intuitive, friendly, elegant, and powerful.

direct indiect

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

ü http://developer.apple.com/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIntro/chapter_1_section_1.html

slide-8
SLIDE 8

8

Example Guidelines: Getting the User’s attention

  • exceptional conditions or time-dependent information must be presented

to the user and attract his attention

  • marking: underline the item, enclose it in a box, point to it with an arrow, or

use and indicator such as an asterisk, bullet, dash, plus sign, or X

  • size: use up to four sizes, with larger sizes attracting more attention
  • choice of fonts: use up to three fonts
  • blinking: use blinking displays (2-4 Hz) or blinking color changes with great

care and in limited areas

  • color: use up to four standard colors, with additional color changes reserved

for the occasional use

  • audio: use soft tones for positive feedback and harsh sounds for rare

emergency conditions

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

slide-9
SLIDE 9

9

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

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

slide-10
SLIDE 10

10

Principles

  • principles are more fundamental and more widely applicable than guidelines
  • principles may need more clarification to be applicable though
  • example principle: recognize user diversity

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

slide-11
SLIDE 11

11

Principle 1: Recognize User Diversity

  • Users are “different” (skills, knowledge, expertise, cultural and social

background, experiences, ...)

  • Simple and obvious - nevertheless in reality extremely difficult
  • Basic concepts to structure the problem

– Usage profiles – Task profiles

  • Example: consider a online travel agent

– travel agent booking many flights a day – everyday – a teacher organizing a field trip (once a year) and making bookings for a large group – a business person changing bookings while travelling – a family looking for a package holiday

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

slide-12
SLIDE 12

12

Average User?

  • There is no such thing as an average user!
  • Usage of Persona: reason: Typical users but not the average
  • Creating a software that is appropriate for a very specific target group (e.g.

0,1% of the population) may still find a large user base, e.g. in Europe and the US this may be more than half a million people

  • Designing for 95% of German users will leave 4 million users out

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

slide-13
SLIDE 13

13

Usage Profiles “Know Thy User”

  • What is the background of the user?
  • Different people have different requirements for their interaction with

computers.

  • Issues to take into account:

– goals, motivation, personality – education, cultural background, training – age, gender, physical abilities, …

  • Experience:

– Novice users – Knowledgeable intermittent users – Expert frequent users

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

ü Wilfred J. Hansen, User Engineering Principles for Interactive Systems, 1971

slide-14
SLIDE 14

14

User vs. Customer

  • Customer is often not the user!
  • Creating awareness with the customer for the user
  • Design for the user not to please the customer (this is a difficult one)
  • Clear assessment of target group and personas will help to convince the

customer

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

slide-15
SLIDE 15

15

User-Needs and Task Profiles

  • Find out what the user is trying to do! The Goal!
  • Needs of users, goals and resulting tasks
  • Supported tasks should be determined before the design starts
  • Functionality should only be added if identified to help solving tasks

– Temptation: If additional functionality is cheap to include it is often done – this can seriously compromise the user interface concept (and potentially the whole software system)!

  • Frequency of tasks related to user profiles

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

slide-16
SLIDE 16

16

Principle 2: Follow the 8 Golden Rules

  • strive for consistency
  • enable frequent users to use shortcuts
  • ffer informative feedback
  • design dialogues to yield closure
  • error prevention/handling
  • permit easy reversal of actions
  • support internal locus of control
  • reduce short-term memory load

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

ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 2

slide-17
SLIDE 17

17

Principle 2: 8 Golden Rules - Consistency

  • Within an application it is the developer’s job
  • In a specific environment it is defined

by guidelines (e.g. for GNOME, for KDE, for Mac OSX, for Win XP, for JAVA Swing, ...)

  • In an open environment like the WWW it gets pretty hard!

– no real guidelines and no authority – how are links represented? – where is the navigation? – styles and “fashion” change quickly…

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

slide-18
SLIDE 18

18

Principle 2: 8 Golden Rules - Consistency

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

slide-19
SLIDE 19

19

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…

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

slide-20
SLIDE 20

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

slide-21
SLIDE 21

21

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

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

slide-22
SLIDE 22

22

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

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

slide-23
SLIDE 23

23

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

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

slide-24
SLIDE 24

24

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!)

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

slide-25
SLIDE 25

25

  • 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

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

Principle 2: 8 Golden Rules – Permit Easy Reversal of Actions

slide-26
SLIDE 26

26

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

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

slide-27
SLIDE 27

27

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?

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

slide-28
SLIDE 28

28

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.

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

slide-29
SLIDE 29

29

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.10.2012 Software Engineering (D7025E) - Guest Lecture: Human-Computer Interaction

slide-30
SLIDE 30

30

Principle 3: Automation and Human Control

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

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 situations store quantities of coded information 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 connection recall quantities of detailed information accurately draw on experience and adapt decisions to situation process quantitative data in pre-specified ways

ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 2

slide-31
SLIDE 31

31

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

  • verload occurs

maintain performance over extended 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

  • bservations

perform repetitive pre-programmed actions reliably act in unanticipated emergencies and novel situations exert great, highly controlled physical force

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

ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 2

slide-32
SLIDE 32

32

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

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

ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 2

slide-33
SLIDE 33

33

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

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

slide-34
SLIDE 34

34

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.

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

ü www.cvc.sunysb.edu/323/slides/interaction_design.ppt, last visited 20.03.2012

slide-35
SLIDE 35

35

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.

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

ü www.cvc.sunysb.edu/323/slides/interaction_design.ppt, last visited 20.03.2012

slide-36
SLIDE 36

36

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

  • f 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.

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

ü www.cvc.sunysb.edu/323/slides/interaction_design.ppt, last visited 20.03.2012

slide-37
SLIDE 37

37

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”

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

slide-38
SLIDE 38

38

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”

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

slide-39
SLIDE 39

39

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, …

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

slide-40
SLIDE 40

40

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)

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

slide-41
SLIDE 41

41

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 – …

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

slide-42
SLIDE 42

42

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

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

slide-43
SLIDE 43

43

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
  • 29.10.2012

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

slide-44
SLIDE 44

44

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)

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

slide-45
SLIDE 45

45

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?

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

slide-46
SLIDE 46

46

Example: 10. Help and documentation

  • help texts matches software versions and existing functions
  • completeness and soundness of the documentation

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

slide-47
SLIDE 47

47

Nielson‘s Heuristics

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

ü http://www.youtube.com/watch?v=hWc0Fd2AS3s

slide-48
SLIDE 48

48

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?

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

slide-49
SLIDE 49

49

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

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

slide-50
SLIDE 50

50

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)

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

ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 20

slide-51
SLIDE 51

51

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

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

ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 20

slide-52
SLIDE 52

52

Applied Design Guidelines & Principles: Constraints Example 1

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

Date constrained Date unconstrained Which design will be more error-prone? Why?

ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 20

slide-53
SLIDE 53

53

Applied Design Guidelines & Principles: Constraints Example 2

  • Dials vs. Buttons vs. Sliders

– Dials are turned – Buttons are pressed – Sliders are pushed

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

slide-54
SLIDE 54

54

Applied Design Guidelines & Principles: Constraints

  • redundant: colors outlet - plug!
  • constraints: square plug – round plug

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

slide-55
SLIDE 55

55

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!

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

ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 20

slide-56
SLIDE 56

56

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

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

ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 20

slide-57
SLIDE 57

57

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)

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

slide-58
SLIDE 58

58

Applied Design Guidelines & Principles: Mapping – Example 1

  • Relationship
  • between
  • controls and
  • action

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

slide-59
SLIDE 59

59

Applied Design Guidelines & Principles: Mapping – Example 2

  • Relationship
  • between
  • controls and
  • action

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

slide-60
SLIDE 60

60

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

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

ü Designing the user interface, B. Shneiderman and C. Plaisant, 4th edition, Addison-Wesley, 2004, chapter 20

slide-61
SLIDE 61

61

Applied Design Guidelines & Principles: Consistency

  • Lexical Consistency

– Coding consistent with common usage, e.g.

  • red = bad, green = good
  • left = less, right = more

– Consistent abbreviation rules – equal length or first set of unambiguous chars. – Devices used same way in all phases – character delete key is always the same

  • Syntactic Consistency

– Error messages placed at same (logical) place – Always give command first - or last – Apply selection consistently, e.g. select text then apply tool

  • r select tool and then apply to

a text – Menu items always at same place in menu (muscle memory)

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

slide-62
SLIDE 62

62

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

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

slide-63
SLIDE 63

63

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

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

slide-64
SLIDE 64

64

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

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

slide-65
SLIDE 65

65

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

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

slide-66
SLIDE 66

66

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

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

slide-67
SLIDE 67

67

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? +

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

slide-68
SLIDE 68

68

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. Journal of Experimental Psychology, volume 47, number 6, June 1954, pp. 381–391

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

slide-69
SLIDE 69

69

1D Movement

task: move from start to target with different devices, e.g. a pen, a slider, …

  • riginal experiment: “serially tapping task”

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

Start Target Direction of motion +

slide-70
SLIDE 70

70

1D Movement

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

+ +

slide-71
SLIDE 71

71

1D Movement

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

+

slide-72
SLIDE 72

72

1D Movement

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

+

slide-73
SLIDE 73

73

1D Movement

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

+

slide-74
SLIDE 74

74

1D Movement

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

+ D: Distance to Move Error Tolerance W: width of target

slide-75
SLIDE 75

75

Formulation of Fitts’s Law (originally published 1954)

Original formulation (by Fitts) 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

Shannon form (by MacKenzie, see reference for details) “fits” better with parameters, ensures always a non-negative ‘Index of Difficulty’

Scott MacKenzie (1992). Fitts' law as a research and design tool in human–computer interaction. Human–Computer Interaction, volume 7, 1992, pp. 91–139. http://www.yorku.ca/mack/hci1992.pdf

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

slide-76
SLIDE 76

76

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?

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

slide-77
SLIDE 77

77

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)

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

slide-78
SLIDE 78

78

Consequences of Fitts’s Law: Pie Menus

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

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
slide-79
SLIDE 79

79

Consequences of Fitts’s Law: Real World Example: Hot Corner (Word 2007)

Image source: http://www.baycongroup.com/word2007/images/01_Word2007Screen.gif

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

slide-80
SLIDE 80

80

Consequences of Fitts’s Law: Real World Example: Hot Corner (Word 2007)

Image source: http://www.baycongroup.com/word2007/images/01_Word2007Screen.gif

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

slide-81
SLIDE 81

81

Consequences of Fitts’s Law: Real World Example Movement Distance and Target Size (PPT 2010)

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

slide-82
SLIDE 82

82

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

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

slide-83
SLIDE 83

83

Consequences of Fitts’s Law: Real World Example: Windows vs. Mac OS

Image source: http://www.guidebookgallery.org/pics/gui/desktop/firstrun/macosx103.png

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

slide-84
SLIDE 84

84

Consequences of Fitts’s Law: Real World Example: Windows vs. Mac OS

Image source: http://www.guidebookgallery.org/pics/gui/desktop/firstrun/macosx103.png

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

slide-85
SLIDE 85

85

Consequences of Fitts’s Law: Real World Example: Windows vs. Mac OS

Image source: http://www.guidebookgallery.org/pics/gui/desktop/firstrun/macosx103.png

Attention: multi-monitor set ups!

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

slide-86
SLIDE 86

86

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:

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

+ D: Distance to Move Error Tolerance W: width of target

slide-87
SLIDE 87

87

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 log2(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 log2(D/W + 1) + c log2(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

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

slide-88
SLIDE 88

88

Fitts’s Law – Motivation Video

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

ü http://www.youtube.com/watch?v=EpBa3VzD5xY

slide-89
SLIDE 89

89

Windows vs. Mac: Fitts’s Law in Practice

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

ü http://www.youtube.com/watch?v=nBBJ5xDr4y4

slide-90
SLIDE 90

90

http://www.omnicronelectronics.com

D2 =42 mm W2 = 6 mm A W A W D1 = 42 mm W1 =14 mm

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

Mini-Exercise Fitts’s Law: Difference in motion-time

MT = a + b log2(D/W + 1) and let a=50ms, b=150ms/bit MT2 - MT1 = ?

slide-91
SLIDE 91

91

Mini-Exercise Fitts’s Law: Difference in motion-time

A2=70 mm W2=10 mm

+

A W

+

A W A1=30 mm W1=10 mm

MT = a + b log2(D/W + 1) and let a=50ms, b=150ms/bit MT2 - MT1 = ? 29.10.2012

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

slide-92
SLIDE 92

92

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

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

slide-93
SLIDE 93

93

Hick’s Law

  • The time needed for a person to make a selection is proportional to the log

number of alternatives given

  • n alternatives of equal probability

H = b * log2(n + 1). (b empirically determined constant)

  • Alternatives of unequal probability

pi = the probability of alternative i H = Σ pi log2(1/pi + 1).

Note: Hick’s law does not apply if it requires linear search (e.g. a randomly ordered list of commands in a menu). It applies if the user can search by sub-divisioning. Note: Thus, an unsorted start menu makes no sense…

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

ü http://www.usabilityfirst.com

slide-94
SLIDE 94

94

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.

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

slide-95
SLIDE 95

95

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.

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

ü http://en.wikipedia.org/wiki/Hick's_law

slide-96
SLIDE 96

96

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!)

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

slide-97
SLIDE 97

97

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

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

slide-98
SLIDE 98

98

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.

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

slide-99
SLIDE 99

99

Quantified User Interface Assessment using GOMS

Operator Short name Time Tastatureingabe Keying K 0.2 seconds (0.08 – 1.2 seconds Mauszeigen Pointing P 1.1 seconds (refer to Fitts‘s Law) Modality change mouse <-> keyb. Homing H 0.4 seconds Preparation Mentally Prepare M 1.35 seconds to reflect on the 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

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

slide-100
SLIDE 100

100

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

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

slide-101
SLIDE 101

101

Heuristic Rules for Applying the GOMS Model (Card, Moran, Newell)

Rule Description Rule 0: Insertion of Ms (M=Mentally Prepare) One M before all Ks One M before all Ps that select a command, but not before Ps that select arguments Rule 1: Deletion of anticipated Ms Anticipated Ms are superflous preparation steps as the cognitive preparation has happened in a previous step. Example: mouse movement to click target M P M K à M P K Rule 2: Deletion of Ms in cognitive units Extension of rule 1 to longer, connected activities Example: connected strings M only at the beginning MKMKMKMK à MKKKK

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

slide-102
SLIDE 102

102

Heuristic Rules for Applying the GOMS Model (Card, Moran, Newell)

Rule Description Rule 3: Deletion of Ms in successive limiters Limiters are characters marking the end of a word. Example: „ „ . , : Rule 4: Deletion of Ms that are limiters of commands Limiters that always have to be given – e.g. „Enter“. These are added automatically and do not need mental preparation for experienced users. Rule 5: Deletion of layered Ms Is an M overlaid by a R (waiting for respond), the M can be deleted.

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

slide-103
SLIDE 103

103

Potential Implications of a GOMS Analysis

  • Large number of Ms (mentally preparing):
  • Large number of Hs (homing):
  • Many Ps (pointing), but little Ks (keyboard):

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

slide-104
SLIDE 104

104

Potential Implications of a GOMS Analysis

  • Large number of Ms (mentally preparing):

à why does the user have to „think“ ?

  • Large number of Hs (homing):

à why does the user have to change between mouse and keyboard so

  • ften?
  • Many Ps (pointing), but little Ks (keyboard):

à overloaded control/overloaded GUI ?

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

slide-105
SLIDE 105

105

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

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

slide-106
SLIDE 106

106

Keystroke-Level Model (KLM)

  • simplified Analysis
  • nly operators on keystroke-level
  • no goals, no methods, no selection rules
  • list of basic operators to do a task

– keystrokes or button presses (K), – pointing with the mouse to a target (P), – hand movement between mouse an keyboard (H) – mental operators (M) – placed by heuristics – Drawing (D) – System response (R)

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

ü Card, S. K., Moran, T. P., and Newell, A. 1980. The keystroke-level model for user performance time with interactive

  • systems. Commun. ACM 23, 7 (Jul. 1980), 396-410.
slide-107
SLIDE 107

107

Times for basic operators

  • Prof. Dr. Matthias Kranz

107

  • Experimentally

measured

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

ü Card, S. K., Moran, T. P., and Newell, A. 1980. The keystroke-level model for user performance time with interactive

  • systems. Commun. ACM 23, 7 (Jul. 1980), 396-410.
slide-108
SLIDE 108

108

Basic time estimation

  • Prof. Dr. Matthias Kranz

108

Operator Remarks Time(sec) K Press Key good typist(90wpm) 0.12 poor typist(40wpm) 0.28 non-typist 1.20 B Mouse button press down or up 0.10 click 0.20 P Point with mouse Fitts's law 0.1lg(D/S +0.5) Average movement 1.10 H Home hands to and from keyboard 0.40 D Drawing- domain-dependent __ M Mentally prepare 1.35 R Response from sytem - measure __

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

ü http://www.cc.gatech.edu/classes/cs6751_97_winter/Topics/user-model/, last visited 20.03.2012 ü Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale: Human-Computer Interaction (3rd Edition), Prentice Hall, 2003

slide-109
SLIDE 109

109

Calculate overall time required

  • Ttask = Tacquire + Texecute
  • Texecute = TK + TB + TP + TH + TD + TM + TR

– TK = time for key presses – TB = time for button presses / clicks – TP = time for pointing – TH = time moving hand between mouse and keyboard – TD = time for drawing – TM = time for mentally preparing – TR = time for system response

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

slide-110
SLIDE 110

110

Example

  • Start the command shell in

windows

  • What to do?

– Click ‘Start’ – Click ‘Execute’ – Think of command – Type ‘cmd’ – hit ‘return key’

  • KLM

– P[to start] 1,10s – B[left click] 0,20s – P[to execute] 1,10s – B[left click] 0,20s – H 0,40s – M 1,35s – K[c] 0,28s – K[m] 0,28s – K[d] 0,28s – K[return] 0,28s 5,47s

  • T = 2*P+2*B+4*K+H+M

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

slide-111
SLIDE 111

111

KLM - Example

  • Convert 712 GBP into EUR
  • Hand is on the mouse to start with

http://www.xe.com/ucc/

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

slide-112
SLIDE 112

112

KLM – Example: result

  • P[to input field]
  • B[click]
  • H[to keyboard]
  • M[consider number]
  • 4K[BSP-7-1-2]
  • H[to mouse]
  • M[consider currency]
  • P[to GBP]
  • B[click]
  • M[consider currency]
  • P[to EUR]
  • B[click]
  • P[to convert]
  • B[click]
  • R[show page with result]
  • 4*P =

4,40s

  • 4*B =

0,80s

  • 2*H =

0,80s

  • 3*M =

4,05s

  • 4*K =

1,12s

  • 1*R =

1,00s

  • Summe=

12,17s

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

slide-113
SLIDE 113

113

Overview

Introduction and Motivation, History & Future of HCI Designing and Engineering Interactive Systems Guidelines, Principles and Models for HCI (selected topics)

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

slide-114
SLIDE 114

114

matthias.kranz@ltu.se

29.10.2012 Thank you very much for your kind attention!

slide-115
SLIDE 115

115

Questions?

? ? ?

?

?

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