1

Human-Computer InteractionHuman-Computer Interaction

HCI GuidelinesHCI Guidelines

2

Lecture OverviewLecture Overview

• Software Ergonomics - definitionSoftware Ergonomics - definition

• Design principles, guidelines and rules - Design principles, guidelines and rules - definitiondefinition

• GuidelinesGuidelines• Dialogue organisationDialogue organisation

• Relating information to user’s needsRelating information to user’s needs

• On-screen presentationOn-screen presentation

3

Software Ergonomics in Software Ergonomics in EC Directive 90/270/EECEC Directive 90/270/EEC

• Suitable to the taskSuitable to the task

• Easy to use and adaptable to user’s level of Easy to use and adaptable to user’s level of expertiseexpertise

• Must provide feedbackMust provide feedback

• Format and speed of display must be appropriate Format and speed of display must be appropriate to operatorsto operators

• Principles of software ergonomics must be Principles of software ergonomics must be appliedapplied

Quality is built on details! When it comes to quality, Quality is built on details! When it comes to quality, the little things can make a big difference.the little things can make a big difference.

4

Design Principles,Guidelines and Design Principles,Guidelines and RulesRules

Design principlesDesign principles• Universally applicable high level design goals Universally applicable high level design goals

• Have evolved from a body of theoretical work Have evolved from a body of theoretical work and practical experienceand practical experience

• e.g. “design for human cognitive limitations”e.g. “design for human cognitive limitations”

5

Design Principles,Guidelines and RulesDesign Principles,Guidelines and Rules (Cont’d)(Cont’d)

Design guidelines (‘packaged Design guidelines (‘packaged experience’)experience’)

• More specific direct design relevance and the More specific direct design relevance and the context where they should be applied context where they should be applied

• Drawn from variety of contexts - limited scope of Drawn from variety of contexts - limited scope of applicabilityapplicability

• e.g. “minimize memorisation”. e.g. “minimize memorisation”.

• Can be used as usability checklistsCan be used as usability checklists

6

Design Principles,Guidelines and RulesDesign Principles,Guidelines and Rules (Cont’d)(Cont’d)

• Design RulesDesign Rules• Highly specific low-level design rules Highly specific low-level design rules

• Often found in corporate style guides and design Often found in corporate style guides and design manualsmanuals

• e.g. Maximum of 10 menu items per panele.g. Maximum of 10 menu items per panel

• Principles and guidelines (and even rules) Principles and guidelines (and even rules) must be selectively applied depending on must be selectively applied depending on current contextcurrent context

7

Design Principles,Guidelines and Rules (Cont’d)Design Principles,Guidelines and Rules (Cont’d) Freedom of InterpretationFreedom of Interpretation

• Design principlesDesign principles

• Design guidelines Design guidelines

• Design rulesDesign rules

Open to broad Open to broad interpretationinterpretation

Often unable to take into Often unable to take into account context in which account context in which the task is undertaken, the task is undertaken, but usability must but usability must include task-context include task-context dependent featuresdependent features

May only be suitable for May only be suitable for specific systems and specific systems and usersusers

HeuristicsHeuristics

C o

n t

i n

u u

mC

o n

t i

n u

u m

8

Guideline 1: ConsistencyGuideline 1: Consistency

• Internal consistency: with metaphor / mental model, Internal consistency: with metaphor / mental model, interaction style and presentationinteraction style and presentation

• External consistency: easier to move from one application External consistency: easier to move from one application to anotherto another

• User interface standards (Windows, Macintosh, OSF/Motif) User interface standards (Windows, Macintosh, OSF/Motif) specify ‘look and feel’ (but don’t guarantee usability)specify ‘look and feel’ (but don’t guarantee usability)

9

Example: Consistent ViewsExample: Consistent Views

Example: Consistent Views (?)Example: Consistent Views (?)

11

Guideline 2: Compatibility with Guideline 2: Compatibility with Users’ ExpectationsUsers’ Expectations

• Simple and natural dialogueSimple and natural dialogue

• User’s terminologyUser’s terminology

• Colour conventionsColour conventions

• Task sequencingTask sequencing

• Simple things simpleSimple things simple

• ‘‘WYSIWYG’WYSIWYG’• What you see is what you getWhat you see is what you get

12

Guideline Usage: The Art of Compromise

MicrosofMicrosoft Wordt Word

Microsoft Microsoft PowerpointPowerpoint

Aldus Aldus PageMakePageMake

rr

13

Guideline 3: Flexibility and ControlGuideline 3: Flexibility and Control

• Meet needs of range of users Meet needs of range of users

• Sequence of commands/actionsSequence of commands/actions• User should control main sequenceUser should control main sequence

• Interleaving of tasks desirableInterleaving of tasks desirable

• Provide shortcutsProvide shortcuts• E.g. Ctrl V for ‘Paste’E.g. Ctrl V for ‘Paste’

• Easy reversal of actions - undo/redoEasy reversal of actions - undo/redo

• Minimize modal interactionMinimize modal interaction

• Tailorability Tailorability • E.g. Window size, colour, shortcut commandsE.g. Window size, colour, shortcut commands

14

Guideline 4: Explicit StructureGuideline 4: Explicit Structure

• Design dialogues to yield closureDesign dialogues to yield closure

• Avoid ‘featuritis’ - leads to ‘bloatware’Avoid ‘featuritis’ - leads to ‘bloatware’• Makes structure more (over ?) complexMakes structure more (over ?) complex

15

Guideline 5: Continuous Guideline 5: Continuous and Informative Feedbackand Informative Feedback

• Where, what, whenWhere, what, when• e.g Cursor stylee.g Cursor style• e.g progress bare.g progress bar

• Completion Completion successful?successful?

• Direct viewDirect view• Message boxMessage box

• Available Available commands / commands / actionsactions

• Minimize user Minimize user memory loadmemory load

FeedbackFeedback

• Establish presence quickly at start e.g. ‘splash screen’ – Establish presence quickly at start e.g. ‘splash screen’ – although in web design splash screens are although in web design splash screens are veryvery passé passé even if option to Skip Intro is offeredeven if option to Skip Intro is offered

• Very simple tasks - nearly instantaneousVery simple tasks - nearly instantaneous

• Simple frequent tasks - under 1 secondSimple frequent tasks - under 1 second

• If response time over about 2 seconds - provide status If response time over about 2 seconds - provide status indicatorindicator

• Provide more detailed progress indication for longer Provide more detailed progress indication for longer delays delays

• Displaying enough to read - 2 secondsDisplaying enough to read - 2 seconds

• Should disappear automatically when task finishesShould disappear automatically when task finishes

17

Types of FeedbackTypes of Feedback

• Lexical feedback (‘Message received’)Lexical feedback (‘Message received’)• Response to show that the action has been accepted Response to show that the action has been accepted

• e.g on click, a menu item is highlightede.g on click, a menu item is highlighted

• e.g. shape of cursor changes to indicate tool in usee.g. shape of cursor changes to indicate tool in use

• e.g. indicate which menu selections are currently possiblee.g. indicate which menu selections are currently possible

• Syntactic feedbackSyntactic feedback• e.g. Second menu in a ‘walking menu’ appearse.g. Second menu in a ‘walking menu’ appears

• Semantic feedback (‘Message understood’)Semantic feedback (‘Message understood’)• e.g. object can be ‘dragged’ by mouse movemente.g. object can be ‘dragged’ by mouse movement

• Will involve a change to a data structureWill involve a change to a data structure

Guideline 6: ErrorGuideline 6: ErrorPrevention and CorrectionPrevention and Correction

• Reduce possibility of errorReduce possibility of error• e.g. limit typing requirede.g. limit typing required

• Provide clearly marked exitsProvide clearly marked exits

• Undo / escapeUndo / escape

Undo

Exit

Escape

Operating System

Application

Task

19

Guideline 7: User Documentation Guideline 7: User Documentation and Supportand Support

• On-lineOn-line• e.g. Hypertexte.g. Hypertext

• PrintedPrinted• Introductory tutorialIntroductory tutorial

• Command referenceCommand reference

• Quick review cardQuick review card

• TrainingTraining

• Help deskHelp desk

20

Aim: Reduce the visual search timeAim: Reduce the visual search time

Guideline 8: Visual ClarityGuideline 8: Visual Clarity

• Logical sequencingLogical sequencing• Visual density and balanceVisual density and balance• Visual codingVisual coding

Covered laterCovered later

21

Logical SequencingLogical Sequencing

• Start in the upper left cornerStart in the upper left corner

• Consistent use of specific areasConsistent use of specific areas• e.g dialogue boxes, error messages - centrale.g dialogue boxes, error messages - central

• Instructions - often on lowest lineInstructions - often on lowest line

• Include title Include title

• Page/Screen numbers may helpPage/Screen numbers may helpe.g. Screen 3 of 4 e.g. Screen 3 of 4

22

RelevanceRelevance

• Avoid redundant informationAvoid redundant information

• Show ‘relevant’ information only Show ‘relevant’ information only • Essential to making a decision or performing an actionEssential to making a decision or performing an action

• Maximum screen information is not the same as Maximum screen information is not the same as maximum information transfer ratemaximum information transfer rate

23

Relevance Relevance (Cont’d)(Cont’d)

Please choose the data to be displayed

CODE DATA TYPE

1 Summary

2 Detailed list3 Sequences

Please choose the data to be displayedCODE DATA TYPE DATE IMPLEMENTED

1 Summary 5/16/79

2 Detailed list 6/18/79

3 Sequences 11/28/83

UseUse

e.g. Assuming that implementation date is irrelevant to userse.g. Assuming that implementation date is irrelevant to users

Don’t useDon’t use

Jakob Nielsen’sJakob Nielsen’sTen Usability CharacteristicsTen Usability Characteristics

• Visibility of system status Visibility of system status • The system should always keep users informed about what is going The system should always keep users informed about what is going

on, through appropriate feedback within reasonable time. on, through appropriate feedback within reasonable time.

• Match between system and the real world Match between system and the real world • The system should speak the users' language, with words, phrases The system should speak the users' language, with words, phrases

and concepts familiar to the user, rather than system-oriented terms. and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural Follow real-world conventions, making information appear in a natural and logical order. and logical order.

• User control and freedom User control and freedom • Users often choose system functions by mistake and will need a Users often choose system functions by mistake and will need a

clearly marked "emergency exit" to leave the unwanted state without clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. having to go through an extended dialogue. Support undo and redo.

• Consistency and standards Consistency and standards • Users should not have to wonder whether different words, situations, Users should not have to wonder whether different words, situations,

or actions mean the same thing. Follow platform conventions. or actions mean the same thing. Follow platform conventions.

Jakob Nielsen’sJakob Nielsen’sTen Usability CharacteristicsTen Usability Characteristics

• Error prevention Error prevention • Even better than good error messages is a careful design which prevents a 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 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 or check for them and present users with a confirmation option before they commit to the action. commit to the action.

• Recognition rather than recall Recognition rather than recall • Minimize the user's memory load by making objects, actions, and options visible. 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 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 to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. retrievable whenever appropriate.

• Flexibility and efficiency of use Flexibility and efficiency of use • Accelerators -- unseen by the novice user -- may often speed up the interaction 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 for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. experienced users. Allow users to tailor frequent actions.

• Aesthetic and minimalist design Aesthetic and minimalist design • Dialogues should not contain information which is irrelevant or rarely needed. 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 Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.information and diminishes their relative visibility.

Jakob Nielsen’sJakob Nielsen’sTen Usability CharacteristicsTen Usability Characteristics

• Help users recognize, diagnose, and recover Help users recognize, diagnose, and recover from errors from errors

• Error messages should be expressed in plain language (no Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively codes), precisely indicate the problem, and constructively suggest a solution. suggest a solution.

• Help and documentation Help and documentation • Even though it is better if the system can be used without Even though it is better if the system can be used without

documentation, it may be necessary to provide help and documentation, it may be necessary to provide help and documentation. Any such information should be easy to documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be search, focused on the user's task, list concrete steps to be carried out, and not be too large.carried out, and not be too large.

User ClassificationUser Classification• There are 3 main types of userThere are 3 main types of user

• Novice Novice

• Knowledgeable / intermittent user Knowledgeable / intermittent user

• Expert / frequent user Expert / frequent user

• Users can however, be classified in any other way that is Users can however, be classified in any other way that is appropriate to the system being built. appropriate to the system being built.

• Some users may have keyboard skills, others not. Some users may have keyboard skills, others not.

• Some users may have knowledge of other similar systems, others not. Some users may have knowledge of other similar systems, others not.

• The advantages of classification mean that generalisations can The advantages of classification mean that generalisations can be made about users and their needs. be made about users and their needs.

• This doesn’t necessarily mean that the best system has been This doesn’t necessarily mean that the best system has been designed for every individual. designed for every individual.

• It means that the system has been designed to fit the It means that the system has been designed to fit the generalisations for each user group. generalisations for each user group.

User ClassificationUser Classification

Novice Novice • For the novice user of a system, progress is For the novice user of a system, progress is

slow because of the limitations of working slow because of the limitations of working memory. memory.

• Chunking is almost entirely absent. Chunking is almost entirely absent.

• Systems used by novices require more Systems used by novices require more feedback and more opportunities for closure. feedback and more opportunities for closure.

User ClassificationUser Classification

Guidelines for Novice Users Guidelines for Novice Users • All initiatives should come from the computer – the novice may not know what is to All initiatives should come from the computer – the novice may not know what is to

be done be done

• Each required input should be brief – the shorter it is the more likely it is to be Each required input should be brief – the shorter it is the more likely it is to be remembered remembered

• Input procedures should be consistent with user expectations – humans search for Input procedures should be consistent with user expectations – humans search for patterns and will generalise patterns and will generalise

• No special training should be necessary – especially true in the case of web or No special training should be necessary – especially true in the case of web or multimedia where the user is ‘on their own’ multimedia where the user is ‘on their own’

• All system messages should be clear – in the language of the user, not the designer All system messages should be clear – in the language of the user, not the designer

• User decision should be made from a small set of options – the more of a selection User decision should be made from a small set of options – the more of a selection you offer, the harder it is to choose you offer, the harder it is to choose

• Users should control the pace of interaction - they need to understand the system Users should control the pace of interaction - they need to understand the system and feel that they can control it, and not the reverse and feel that they can control it, and not the reverse

• User decision making should be a response to a specific request for action – save - User decision making should be a response to a specific request for action – save - y/n? y/n?

• Help should always be available – tutor / book / online Help should always be available – tutor / book / online

• There should be sufficient feedback - closure There should be sufficient feedback - closure

User ClassificationUser Classification

Knowledgeable / Intermittent Users Knowledgeable / Intermittent Users • These users need consistent structures, good help facilities, These users need consistent structures, good help facilities,

good documentation. good documentation.

Expert Users Expert Users • These users have fast response time and will require brief These users have fast response time and will require brief

feedback. feedback.

• Experts organise their knowledge according to a higher Experts organise their knowledge according to a higher conceptual structure. conceptual structure.

• They can recall more than novices because their knowledge is They can recall more than novices because their knowledge is chunked. chunked.

• Expert users will look for keyboard shortcuts, abbreviated Expert users will look for keyboard shortcuts, abbreviated sequences. sequences.

• Experts can find constant confirmation screens irritating - use Experts can find constant confirmation screens irritating - use these only when important. these only when important.

31

Lecture ReviewLecture Review• Software Ergonomics - definitionSoftware Ergonomics - definition• Design principles, guidelines and rules - definitionDesign principles, guidelines and rules - definition• GuidelinesGuidelines

• ConsistencyConsistency• Compatibility with users’ expectationsCompatibility with users’ expectations• Flexibility and controlFlexibility and control• Explicit structureExplicit structure• Continuous and informative feedbackContinuous and informative feedback• Error prevention and correctionError prevention and correction• User documentation and supportUser documentation and support• Visual clarityVisual clarity

• Jakob Nielsen’s Ten Usability CharacteristicsJakob Nielsen’s Ten Usability Characteristics• User ClassificationUser Classification