introduction to hci

MMG3033 Human Computer Interaction1

Chapter 1 : Introduction to HCI

Contents :9 HCI Chronology9 Definition of HCI9 Background of HCI9 HCI & Other Discipline9 The Importance of HCI9 The Goals of HCI9 HCI Roles in Software Development9 Visibilty and Affordances9 Good or Bad Design?9 Summary

Chapter 1: Introduction to HCI

2

MMG3033 Human Computer Interaction

z Explain the terms of human-computer interaction

z Discuss the importance, scope and goals of HCI

z Explain the visibility and affordances of design.

z Discuss a good and bad design.

Learning Objectives


3



4



5



6

MMG3033 Human Computer Interactionz101 Unuseless Inventions by Kenji K k i


7


Useful Designs?

But not necessarily aesthetic.


8


HCI Chronology1950sChanges

In Computer Usage

1970sMan-

MachineInterface (MMI)

1990sHuman-Computer

Interaction(HCI)

z Changes in technology

z PC prices are decreasing

z Changes in visibility and affordance

z User-friendly

z GUIz Interface

z Human psychology

z CSCWz Ergonomicz Safety and security

z CHI (USA)


9


Evolution of HCI interfaces

z 50s - Interface at the hardware level for engineers - switch panels

z 60-70s - interface at the programming level - COBOL, FORTRAN

z 70-90s - Interface at the terminal level - command languages

z 80s - Interface at the interaction dialogue level - GUIs, multimedia

z 90s - Interface at the work setting - networked systems, groupware

z 00s - Interface becomes pervasivez RF tags, Bluetooth technology, mobile devices,

consumer electronics, interactive screens, embedded technology


10


z Human- the end-user of a program- the others in the organization

z Computer- the machine the program runs on

z Interaction- the user tells the computer what they want- the computer communicates results

What is H.. C.. I..


11


z Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.

(ACM SIGCHI, 1992, p.6)

z Human-Computer Interaction (HCI) is a study of the relationships which exist between human users and the computer systems they use in the performance of their various tasks.

(Christine Faulkner : 2001)

Definition of HCI


12


z Human-Computer Interaction (HCI) is about designing computer systems that support peopleso that they can carry out their activitiesproductively and safely.

(Preece, 2002)

z HCI in the context of organizational work is to understand and shape the way people interact with computers: the processes they engage in, the resources they use and the impact they accomplish.

(Teeni,Carey & Zhang, 2007)

Definition of HCI


13


Definition of HCI

z HCI studies human performance in the use of computer and information systems. This is a rapidly expanding research and development area.

z Thus, it is importance to design the well understood interface because human see the system through the human computer interface.


14


Background of HCI

z HCI provide better understanding of both human user and the computer system to make the interaction between the two; more easier and more satisfying.

z This is because:

z Computers are highly complex machines

z Human users are highly complex organisms

z The aim is to create computer applications that will make users more efficient and more satisfying.


15


Background of HCI


16


z To understand the users is to understand the processes, capabilities and predilections, that they might bring to the tasks they perform. This including:

z Human knowledgez Memory and cognitionz Vision, hearing, touch, haptic and motor skills

z To understand computer system is to understand what is computer, its relationship to other tasks and how it might best be accomplished using the computer system.

z Systems have to be designed for the needs and capabilitiesof the intended users, since it is impossible to design systems to accommodate all

Background of HCI


17


HCI & Other Discipline

A.I Psychology Sociology

Linguistics

Art

Design

Engineering

Computer SciencePhilosophy

Physiology

Anthropology

Ergonomics Help facilities

Understanding the user

Modelling the user

Groupware

Aesthetic appeal

User interface layout

Faster machinesFaster systemsMeans of building better interfaces

Language for commands

Physical capabilities

User body shape

Equipment design

Creating consistency

PresenterPresentation NotesSome practitioners view HCI as a branch of computer science and place the emphasis on the development of software.Some practitioners may see HCI as a branch of psychology and spend their time studying on people.Some may see HCI as a branch of ergonomics and will place the emphasis on human capabilities.depending on the subject area of the hosting discipline; the nature of the focus for HCI will differ


18


The Importance of HCI

z Quality of life : Important applications of computers in medicine are possible only if they are both useful and easy to use by doctors, nurses, and aides; similarly, use of computers in education requires that they be both useful and easy to use by students and teachers. Computers can assist disabled individuals; at the same time, special techniques are needed to allow computers to be used by some who are disabled.

z To develop a good human-computer system with the best interfaces that should feel nature, comfortable and fit without the user being aware of it.


19


z To build computer applications that are jargon free and easy to use by the user in terms of the task and not the computer system at all.

z To understand the centrality of the users task.z To build the best interface for a system that can give a

desirable edge over any competition in terms of software costs.

z To reduce the trauma of learning and maximize the ease of transition from the existing system to the new system.

z To understand legal legislation and theories behind usability engineering that can be applied to software and its fitness for purpose.

The Importance of HCI


20


z Preece (p.14-15) describes the goals of HCI are to produce usable and safe systems, as well as functional systems.

z Goals include:o Safety (eg safety-critical systems)o Utility (functionality)o Effectiveness (intuitive)o Efficiency (task achievement)o Usability (easy to learn and use)

The Goal of HCI


21


z HCI is important in the design process since the computer interface is the first point of contact the user has with the system and the user will judge the system on the basis of the interface.

z HCI has a role to play in helping to define and ensure fitness for purpose.

z Human error could be avoided or at least minimized.

z No matter how good an interface is, if the design of the job is at fault the user will inevitably make mistakes.

The Role of HCI in Software Development


22


z Visibility - what is seen.z Affordance - what operations and

manipulation can be done to a particular object.

z what is visible must have a good mapping to their effects.

z Perceived affordance - what a person thinks can be done to the object.

z Mapping - The set of possible relations between objects.

Visibility & Affordance


23


z This is a control panel for an elevator

z How does it work?

z Push a button for the floor you want?

z Nothing happens. Push any other button? Still nothing. What do you need to do?

z It is not visible as to what to do!

From: www.baddesigns.com

Visibility


24


you need to insert your room card in the slot by the buttons to get the elevator to work!

How would you make this action more visible?

make the card reader more obvious provide an auditory message, that says what to

do (which language?) provide a big label next to the card reader that

flashes when someone enters

make relevant parts visible make what has to be done obvious

Visibility


25


ccclichhk

Feedback

z Sending information back to the user about what has been done

z Includes sound, highlighting, animation and combinations of these

z e.g. when screen button clicked on provides sound or red highlight feedback:


26


Visible Constraintsz Limitations of the actions possible perceived from objects

appearancez provides people with a range of usage possibilities

Push or pull? Which side? Can only push, side to push clearly visible


27


Visible constraints: Entering a Date

z The more constraints, the less opportunity for errorz particularly important for managing user input

Controls constructed in Visual Basic


28


Affordances: to give a clue

z Refers to an attribute of an object that allows people to know how to use itz e.g. a mouse button invites pushing, a door handle

affords pulling

z Norman (1988) used the term to discuss the design of everyday objects

z Since has been much popularised in interaction design to discuss how to design interface objectsz e.g. scrollbars to afford moving up and down, icons to

afford clicking on


29


What does affordance have to offer interaction design?z Interfaces are virtual and do not have affordances

like physical objects

z Norman argues it does not make sense to talk about interfaces in terms of real affordances

z Instead interfaces are better conceptualized as perceived affordancesz Learned conventions of arbitrary mappings

between action and effect at the interfacez Some mappings are better than others


30


Activity

z Physical affordances:How do the following physical objects afford? Are

they obvious?


31


Activity

z Virtual affordancesHow do the following screen objects afford?What if you were a novice user?Would you know what to do with them?


32


Perceived Affordancez The perceived properties of the object that suggest how one

could use it

chairs are for sittingtable for placing things on

knobs are for turning

buttons are for pressing

slots are for insertinghandles are for turning

computer forswitch for toggling


33


Perceived Affordances

sliders for sliding

dials for turning

music console for controlling

music


34


Perceived Affordance Problems

are these buttons?

is this equalizer control a toggle or button?

button for pressing, but action unknown


35


Perceived Affordance Problems

z Handles are for lifting, but these are for scrolling!

z Complex things may need explaining but simple things should notz when simple things need labels & instructions, then design

has failed


36


Bad interfaces may cause users to :

need more time for performing their tasks make more errors feel dissatisfied need more time for learning how to use the software not learn/use the full functionality of the software (if given a choice:) refrain from using the software

Consequences of Bad UI


37


Bad Designsz This picture shows the locks on our

front door. To unlock the dead bolt lock (above), you turn the key to the right. To unlock the door knob lock (below), you turn the key to the left! That's pretty confusing!

z Suggestion : Controls that have the same function should be operated in the same way. For example, both locks should be unlocked by turning the key in the same direction. This is an example of what is meant in human factors by "consistency" in design.


38


Logical or ambiguous design?

z Where do you plug the mouse?

z Where do you plug the keyboard?

z top or bottom connector?

z Do the color coded icons help?



39


How to design them more logically

(i) A provides direct adjacent mapping between icon and connector

(ii) B provides color coding to associate the connectors with the labels



40


Consistency

z Design interfaces to have similar operations and use similar elements for similar tasks

z For example:z always use ctrl key plus first initial of the

command for an operation ctrl+C, ctrl+S, ctrl+Oz Main benefit is consistent interfaces are easier to

learn and use


41


When consistency breaks down

z What happens if there is more than one command starting with the same letter?z e.g. save, spelling, select, style

z Have to find other initials or combinations of keys, thereby breaking the consistency rulez e.g. ctrl+S, ctrl+Sp, ctrl+shift+L

z Increases learning burden on user, making them more prone to errors


42


Internal and external consistency

z Internal consistency refers to designing operations to behave the same within an applicationz Difficult to achieve with complex interfaces

z External consistency refers to designing operations, interfaces, etc., to be the same across applications and devicesz Very rarely the case, based on different

designers preference


43


Keypad numbers layout

z A case of external inconsistency

1 2 34 5 6

7 8 9

7 8 9

1 2 3

4 5 6

0 0

(a) phones, remote controls (b) calculators, computer keypads


44


Bad Designs


45


z What is wrong with the Apex remote?

z Why is the TiVo remote so much better designed?

Good and Bad Designs

TiVo remote

Apex remote

PresenterPresentation NotesWhy is it easier?big button easier to hit (Fitts Law)visually distinctive (color)reasonably different from other buttonsshape and central position means its easy to find by feel in zero light conditions


46


z How does making a call differ when using a:z Cell phonez Public phone box?

z Consider the kinds of user, type of activity and context of use

Activity


47


z HCI examines the relationships between humans and the computer systems they use.

z HCI is not a static area of study because it is evolving and concerns people.

z HCI is important in the design process since the computer interface is the first point of contact the user has with the system and the user will judge the system on the basis of the interfaces.

z HCI has a role to play in helping to define and ensure fitness for purpose.

Summary

Chapter 1 : Introduction to HCISlide Number 2Slide Number 3Slide Number 4Slide Number 5Slide Number 6Slide Number 7HCI ChronologyEvolution of HCI interfacesWhat is H.. C.. I..Definition of HCIDefinition of HCIDefinition of HCIBackground of HCIBackground of HCIBackground of HCIHCI & Other DisciplineThe Importance of HCIThe Importance of HCIThe Goal of HCIThe Role of HCI in Software DevelopmentVisibility & AffordanceVisibilityVisibilityFeedbackVisible ConstraintsVisible constraints: Entering a DateAffordances: to give a clueWhat does affordance have to offer interaction design?Activity Activity Slide Number 32Perceived AffordancesPerceived Affordance ProblemsPerceived Affordance ProblemsConsequences of Bad UIBad DesignsLogical or ambiguous design?How to design them more logicallyConsistencyWhen consistency breaks downInternal and external consistencyKeypad numbers layoutBad DesignsGood and Bad DesignsActivitySummary

introduction to hci

Documents

hci13mmg3033 human computer

computer systems

organizationz computer

terms of human

human users

s interface

goals of hci9 hci roles

groupware z