52

Click here to load reader

Nota sendiri hci-HCI

Embed Size (px)

Citation preview

Page 1: Nota sendiri hci-HCI

Donald Norman’s modelSeven stages

◦ user establishes the goal◦ formulates intention◦ specifies actions at interface◦ executes action◦ perceives system state◦ interprets system state◦ evaluates system state with respect to goal

Norman’s model concentrates on user’s view of the interface

shafyHCI/sem5_KSS

Page 2: Nota sendiri hci-HCI

execution/evaluation loop

user establishes the goal formulates intention specifies actions at interface executes action perceives system state interprets system state evaluates system state with respect to goal

system

evaluationexecution

goal

shafyHCI/sem5_KSS

Page 3: Nota sendiri hci-HCI

ErgonomicsStudy of the physical characteristics of

interaction

Also known as human factors – but this can also be used to mean much of HCI!

Ergonomics good at defining standards and guidelines for constraining the way we design certain aspects of systems

shafyHCI/sem5_KSS

Page 4: Nota sendiri hci-HCI

Ergonomics - examplesarrangement of controls and displays

e.g. controls grouped according to function or frequency of use, or sequentially

surrounding environmente.g. seating arrangements adaptable to cope with

all sizes of userhealth issues

e.g. physical position, environmental conditions (temperature, humidity), lighting, noise,

use of coloure.g. use of red for warning, green for okay,

awareness of colour-blindness etc.

shafyHCI/sem5_KSS

Page 5: Nota sendiri hci-HCI

Common interaction stylescommand line interfacemenusnatural languagequestion/answer and query

dialogueform-fills and spreadsheetsWIMPpoint and clickthree–dimensional interfaces

shafyHCI/sem5_KSS

Page 6: Nota sendiri hci-HCI

Command line interfaceWay of expressing instructions to the

computer directly◦ function keys, single characters, short

abbreviations, whole words, or a combination

suitable for repetitive tasksbetter for expert users than novicesoffers direct access to system functionalitycommand names/abbreviations should be

meaningful!

Typical example: the Unix system

shafyHCI/sem5_KSS

Page 7: Nota sendiri hci-HCI

MenusSet of options displayed on the screenOptions visible

◦ less recall - easier to use◦ rely on recognition so names should be meaningful

Selection by: ◦ numbers, letters, arrow keys, mouse◦ combination (e.g. mouse plus accelerators)

Often options hierarchically grouped◦ sensible grouping is needed

Restricted form of full WIMP system

shafyHCI/sem5_KSS

Page 8: Nota sendiri hci-HCI

Natural languageFamiliar to userspeech recognition or typed natural

languageProblems

◦ vague◦ ambiguous◦ hard to do well!

Solutions◦ try to understand a subset◦ pick on key words

shafyHCI/sem5_KSS

Page 9: Nota sendiri hci-HCI

Query interfacesQuestion/answer interfaces

◦ user led through interaction via series of questions◦ suitable for novice users but restricted functionality◦ often used in information systems

Query languages (e.g. SQL)◦ used to retrieve information from database◦ requires understanding of database structure and

language syntax, hence requires some expertise

shafyHCI/sem5_KSS

Page 10: Nota sendiri hci-HCI

Form-fillsPrimarily for data entry or data retrievalScreen like paper form.Data put in relevant placeRequires

◦ good design◦ obvious correction

facilities

shafyHCI/sem5_KSS

Page 11: Nota sendiri hci-HCI

Spreadsheetsfirst spreadsheet VISICALC,

followed by Lotus 1-2-3MS Excel most common today

sophisticated variation of form-filling.◦grid of cells contain a value or a

formula◦formula can involve values of other

cellse.g. sum of all cells in this column

◦user can enter and alter data spreadsheet maintains consistencyshafyHCI/sem5_KSS

Page 12: Nota sendiri hci-HCI

WIMP Interface Windows Icons Menus Pointers … or windows, icons, mice, and pull-down menus!

default style for majority of interactive computer systems, especially PCs and desktop machines

shafyHCI/sem5_KSS

Page 13: Nota sendiri hci-HCI

Physical designmany constraints:

◦ergonomic – minimum button size◦physical – high-voltage switches are big◦legal and safety – high cooker controls◦context and environment – easy to

clean◦aesthetic – must look good◦economic – … and not cost too much!

shafyHCI/sem5_KSS

Page 14: Nota sendiri hci-HCI

Personal computing1970s – Papert's LOGO language for simple

graphics programming by children

A system is more powerful as it becomes easier to user

Future of computing in small, powerful machines dedicated to the individual

Kay at Xerox PARC – the Dynabook as the ultimate personal computer

shafyHCI/sem5_KSS

Page 15: Nota sendiri hci-HCI

Window systems and the WIMP interfacehumans can pursue more than one task at a

time

windows used for dialogue partitioning, to “change the topic”

1981 – Xerox Star first commercial windowing system

windows, icons, menus and pointers now familiar interaction mechanisms

shafyHCI/sem5_KSS

Page 16: Nota sendiri hci-HCI

Metaphor relating computing to other real-world

activity is effective teaching technique◦ LOGO's turtle dragging its tail◦ file management on an office desktop◦ word processing as typing◦ financial analysis on spreadsheets◦ virtual reality – user inside the metaphor

Problems◦ some tasks do not fit into a given metaphor◦ cultural bias

shafyHCI/sem5_KSS

Page 17: Nota sendiri hci-HCI

the software lifecycleSoftware engineering is the discipline for

understanding the software design process, or life cycle

Designing for usability occurs at all stages of the life cycle, not as a single isolated activity

shafyHCI/sem5_KSS

Page 18: Nota sendiri hci-HCI

The waterfall modelRequirementsspecification

Architecturaldesign

Detaileddesign

Coding andunit testing

Integrationand testing

Operation andmaintenance

shafyHCI/sem5_KSS

Page 19: Nota sendiri hci-HCI

Activities in the life cycleRequirements specification

designer and customer try capture what the system is expected to provide can be expressed in natural language or more precise languages, such as a task analysis would provide

Architectural designhigh-level description of how the system will provide the services required factor system into major components of the system and how they are interrelated needs to satisfy both functional and nonfunctional requirements

Detailed designrefinement of architectural components and interrelations to identify modules to be implemented separately the refinement is governed by the nonfunctional requirements

shafyHCI/sem5_KSS

Page 20: Nota sendiri hci-HCI

Verification and validation

Verificationdesigning the product right

 Validationdesigning the right product

 The formality gap

validation will always rely to some extent on subjective means of proof

Management and contractual issuesdesign in commercial and legal contexts

Real-worldrequirementsand constraints The formality gap

shafyHCI/sem5_KSS

Page 21: Nota sendiri hci-HCI

The life cycle for interactive systems

cannot assume a linearsequence of activities

as in the waterfall model

lots of feedback!

Requirementsspecification

Architecturaldesign

Detaileddesign

Coding andunit testing

Integrationand testing

Operation andmaintenance

shafyHCI/sem5_KSS

Page 22: Nota sendiri hci-HCI

Usability engineeringThe ultimate test of usability based on measurement of user

experience

Usability engineering demands that specific usability measures be made explicit as requirements

Usability specification◦ usability attribute/principle◦ measuring concept◦ measuring method◦ now level/ worst case/ planned level/ best case

Problems◦ usability specification requires level of detail that may not be◦ possible early in design satisfying a usability specification◦ does not necessarily satisfy usability

shafyHCI/sem5_KSS

Page 23: Nota sendiri hci-HCI

ISO usability standard 9241adopts traditional usability

categories:effectiveness

◦can you achieve what you want to?efficiency

◦can you do it without wasting effort?satisfaction

◦do you enjoy the process?

shafyHCI/sem5_KSS

Page 24: Nota sendiri hci-HCI

Iterative design and prototyping Iterative design overcomes inherent problems of incomplete

requirements

Prototypes◦ simulate or animate some features of intended system◦ different types of prototypes

throw-away incremental evolutionary

Management issues◦ time◦ planning◦ non-functional features◦ contracts

shafyHCI/sem5_KSS

Page 25: Nota sendiri hci-HCI

Techniques for prototypingStoryboards

need not be computer-basedcan be animated

Limited functionality simulationssome part of system functionality provided by designerstools like HyperCard are common for these Wizard of Oz technique

Warning about iterative designdesign inertia – early bad decisions stay baddiagnosing real usability problems in prototypes….

…. and not just the symptoms

shafyHCI/sem5_KSS

Page 26: Nota sendiri hci-HCI

Design rationaleDesign rationale is information that explains why a computer system is the way it is.

Benefits of design rationale◦ communication throughout life cycle◦ reuse of design knowledge across products◦ enforces design discipline◦ presents arguments for design trade-offs◦ organizes potentially large design space◦ capturing contextual information

shafyHCI/sem5_KSS

Page 27: Nota sendiri hci-HCI

Design rationale (cont’d)Types of DR:Process-oriented

◦ preserves order of deliberation and decision-makingStructure-oriented

◦ emphasizes post hoc structuring of considered design alternatives

Two examples:◦ Issue-based information system (IBIS)◦ Design space analysis

shafyHCI/sem5_KSS

Page 28: Nota sendiri hci-HCI

Issue-based information system (IBIS)basis for much of design rationale research process-orientedmain elements:

issues– hierarchical structure with one ‘root’ issue

positions– potential resolutions of an issue

arguments– modify the relationship between positions and issues

gIBIS is a graphical version

shafyHCI/sem5_KSS

Page 29: Nota sendiri hci-HCI

structure of gIBIS

Sub-issue

Issue

Sub-issue

Sub-issue

Position

Position

Argument

Argument

responds to

responds toobjects to

supports

questions

generalizes

specializes

shafyHCI/sem5_KSS

Page 30: Nota sendiri hci-HCI

Design space analysisstructure-orientedQOC – hierarchical structure:

questions (and sub-questions) – represent major issues of a design

options– provide alternative solutions to the question

criteria – the means to assess the options in order to make a

choice

DRL – similar to QOC with a larger language and more formal semantics

shafyHCI/sem5_KSS

Page 31: Nota sendiri hci-HCI

the QOC notation

Question

Option

Option

Option

Criterion

Criterion

Criterion

Question … ConsequentQuestion

shafyHCI/sem5_KSS

Page 32: Nota sendiri hci-HCI

Psychological design rationale to support task-artefact cycle in which user tasks are

affected by the systems they use aims to make explicit consequences of design for

users designers identify tasks system will support scenarios are suggested to test task users are observed on system psychological claims of system made explicit negative aspects of design can be used to improve

next iteration of design

shafyHCI/sem5_KSS

Page 33: Nota sendiri hci-HCI

SummaryThe software engineering life cycle

◦ distinct activities and the consequences for interactive system design

Usability engineering◦ making usability measurements explicit as

requirementsIterative design and prototyping

◦ limited functionality simulations and animationsDesign rationale

◦ recording design knowledge◦ process vs. structure

shafyHCI/sem5_KSS

Page 34: Nota sendiri hci-HCI

chapter 2design rules

shafyHCI/sem5_KSS

Page 35: Nota sendiri hci-HCI

design rulesDesigning for maximum usability

– the goal of interaction design

Principles of usability◦ general understanding

Standards and guidelines◦ direction for design

Design patterns◦ capture and reuse design knowledge

shafyHCI/sem5_KSS

Page 36: Nota sendiri hci-HCI

types of design rulesprinciples

◦ abstract design rules◦ low authority◦ high generality

standards◦ specific design rules◦ high authority◦ limited application

guidelines◦ lower authority◦ more general application

increasing authorityin

crea

sing

gen

eral

ity

Standards

Guidelines

increasing authorityin

crea

sing

gen

eral

ity

shafyHCI/sem5_KSS

Page 37: Nota sendiri hci-HCI

Principles to support usabilityLearnability

the ease with which new users can begin effective interaction and achieve maximal performance

Flexibilitythe multiplicity of ways the user and system exchange information

Robustnessthe level of support provided the user in determining successful achievement and assessment of goal-directed behaviour

shafyHCI/sem5_KSS

Page 38: Nota sendiri hci-HCI

Principles of learnabilityPredictability

◦ determining effect of future actions based on past interaction history

◦ operation visibility

Synthesizability◦ assessing the effect of past actions◦ immediate vs. eventual honesty

shafyHCI/sem5_KSS

Page 39: Nota sendiri hci-HCI

Principles of learnability (ctd)Familiarity

◦ how prior knowledge applies to new system◦ guessability; affordance

Generalizability◦ extending specific interaction knowledge to new

situations

Consistency◦ likeness in input/output behaviour arising from

similar situations or task objectives

shafyHCI/sem5_KSS

Page 40: Nota sendiri hci-HCI

Principles of flexibilityDialogue initiative

◦ freedom from system imposed constraints on input dialogue

◦ system vs. user pre-emptiveness

Multithreading◦ ability of system to support user interaction for

more than one task at a time◦ concurrent vs. interleaving; multimodality

Task migratability◦ passing responsibility for task execution between

user and system

shafyHCI/sem5_KSS

Page 41: Nota sendiri hci-HCI

Principles of flexibility (ctd)Substitutivity

◦ allowing equivalent values of input and output to be substituted for each other

◦ representation multiplicity; equal opportunity

Customizability◦ modifiability of the user interface by

user (adaptability) or system (adaptivity)

shafyHCI/sem5_KSS

Page 42: Nota sendiri hci-HCI

Principles of robustnessObservability

◦ ability of user to evaluate the internal state of the system from its perceivable representation

◦ browsability; defaults; reachability; persistence; operation visibility

Recoverability◦ ability of user to take corrective action once an error

has been recognized◦ reachability; forward/backward recovery;

commensurate effort

shafyHCI/sem5_KSS

Page 43: Nota sendiri hci-HCI

Principles of robustness (ctd)Responsiveness

◦ how the user perceives the rate of communication with the system

◦ Stability

Task conformance◦ degree to which system services

support all of the user's tasks◦ task completeness; task adequacy

shafyHCI/sem5_KSS

Page 44: Nota sendiri hci-HCI

Using design rules

Design rules suggest how to increase usability differ in generality and authority

increasing authority

incr

easi

ng g

ener

ality

Standards

Guidelines

increasing authority

incr

easi

ng

gene

ralit

y

shafyHCI/sem5_KSS

Page 45: Nota sendiri hci-HCI

Standardsset by national or international bodies to

ensure compliance by a large community of designers standards require sound underlying theory and slowly changing technology

hardware standards more common than software high authority and low level of detail

ISO 9241 defines usability as effectiveness, efficiency and satisfaction with which users accomplish tasks

shafyHCI/sem5_KSS

Page 46: Nota sendiri hci-HCI

Guidelinesmore suggestive and generalmany textbooks and reports full of guidelinesabstract guidelines (principles) applicable

during early life cycle activitiesdetailed guidelines (style guides) applicable

during later life cycle activitiesunderstanding justification for guidelines

aids in resolving conflicts

shafyHCI/sem5_KSS

Page 47: Nota sendiri hci-HCI

Golden rules and heuristics“Broad brush” design rulesUseful check list for good designBetter design using these than using

nothing!Different collections e.g.

◦Nielsen’s 10 Heuristics (see Chapter 9)

◦Shneiderman’s 8 Golden Rules◦Norman’s 7 Principles

shafyHCI/sem5_KSS

Page 48: Nota sendiri hci-HCI

Shneiderman’s 8 Golden Rules1. Strive for consistency 2. Enable frequent users to use shortcuts3. Offer informative feedback 4. Design dialogs to yield closure 5. Offer error prevention and simple error

handling 6. Permit easy reversal of actions 7. Support internal locus of control 8. Reduce short-term memory load

shafyHCI/sem5_KSS

Page 49: Nota sendiri hci-HCI

Norman’s 7 Principles1. Use both knowledge in the world and

knowledge in the head.2. Simplify the structure of tasks.3. Make things visible: bridge the gulfs of

Execution and Evaluation.4. Get the mappings right.5. Exploit the power of constraints, both

natural and artificial.6. Design for error.7. When all else fails, standardize.

shafyHCI/sem5_KSS

Page 50: Nota sendiri hci-HCI

HCI design patternsAn approach to reusing knowledge about

successful design solutionsOriginated in architecture: AlexanderA pattern is an invariant solution to a

recurrent problem within a specific context.Examples

◦ Light on Two Sides of Every Room (architecture)◦ Go back to a safe place (HCI)

Patterns do not exist in isolation but are linked to other patterns in languages which enable complete designs to be generated

shafyHCI/sem5_KSS

Page 51: Nota sendiri hci-HCI

HCI design patterns (cont.)

Characteristics of patterns◦ capture design practice not theory◦ capture the essential common properties of good examples

of design◦ represent design knowledge at varying levels: social,

organisational, conceptual, detailed◦ embody values and can express what is humane in

interface design◦ are intuitive and readable and can therefore be used for

communication between all stakeholders◦ a pattern language should be generative and assist in the

development of complete designs.

shafyHCI/sem5_KSS

Page 52: Nota sendiri hci-HCI

SummaryPrinciples for usability

◦ repeatable design for usability relies on maximizing benefit of one good design by abstracting out the general properties which can direct purposeful design

◦ The success of designing for usability requires both creative insight (new paradigms) and purposeful principled practice

Using design rules◦ standards and guidelines to direct design activity

shafyHCI/sem5_KSS