+ human-computer interaction chapter 1- an introduction
TRANSCRIPT
![Page 1: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/1.jpg)
+
Human-Computer Interaction
Chapter 1- An Introduction
![Page 2: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/2.jpg)
+Learning outcomes
To define the HCI concept.
To identify what a human can do, perceive, feel and response.
To describe the effect of system interface design to a human or user.
![Page 3: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/3.jpg)
+
3
Why Bother?
![Page 4: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/4.jpg)
+
4
Why Systems Fail?
Inadequate requirements 13%
Lack of user participation 12%
Inadequate resources 11%
Unrealistic expectations 10%
Lack of support at senior level 9%
Changing specification 8%
Lack of planning 8%
![Page 5: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/5.jpg)
+The Perfect User (every designer ‘s wish)
![Page 6: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/6.jpg)
+Why Study HCI?
People now expect “easy to use” systems
- generally they are not tolerant of poorly
designed systems
- if a product is hard to use, they will seek
other products
![Page 7: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/7.jpg)
+What is HCI?
Short for human-computer Interaction.A discipline concerned with the study, design, construction and implementation of human-centric interactive computer systems.
![Page 8: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/8.jpg)
+HCI Definitions
From www.pcmag.com:
The design and implementation of computer systems that people interact with. It includes desktop systems as well as embedded systems in all kinds of devices.
HCI is a large discipline that deals not only with the interface design but with the reasoning for building the functionality into the system in the first place.
It is also concerned with the consequences of using the system over time and its effects on the individual, group and company.
![Page 9: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/9.jpg)
+HCI Definitions
From ACM SIGCHI (http://old.sigchi.org/cdg/cdg2.html):
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.
Wikipedia (http://en.wikipedia.org/wiki/Human computer_interaction):
HCI involves the study, planning, and design of the interaction between people and computer.
![Page 10: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/10.jpg)
+HCI Disciplines
Fig 1: HCI disciplines ( source: cs3240hci.wordpress.com)
![Page 11: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/11.jpg)
+HCI Disciplines Cognitive Psychology: Understanding human behavior
and mental processes
Neuroscience: Neuroscience enables us to build more accurate and robust models of human cognitive functions. These models may allow us to evaluate usability and predict user behavior. Has potential to close the gap between human and computers.
Ergonomics or Human Factors: User- Equipment Design- Environment
Engineering & Computer Science: faster machines, faster systems, building better interfaces.
Design: Interface layout
![Page 12: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/12.jpg)
+HCI Disciplines
Anthropology: User body shape
Sociology: Groupware.Considers introduction of IT in society
Philosophy: Philosophy of technology. Create consistency.
Linguistics: language for commands
Artificial Intelligence: simulating human behaviour
![Page 13: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/13.jpg)
+
Physical aspects of interfaces
Study of the physical characteristics of interaction
Ergonomics good at defining standards and guidelines for constraining the way we design certain aspects of systems – to suit the environments/users
Ergonomics13
![Page 14: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/14.jpg)
+
arrangement of controls and displayse.g. controls grouped according to function or frequency of use, or sequentially
(mapping)
surrounding environmente.g. seating arrangements adaptable to cope with all sizes of user (movie theatre)
health issuese.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.
Ergonomics - examples 14
![Page 15: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/15.jpg)
+HCI Interrelationships
Fig 2: HCI interrelationship (source: sigchi.org)
![Page 16: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/16.jpg)
+
16
Understanding Users
Who are they? Individual user A group of users working
together or a sequence of user in organization each dealing with some part of the task or process.
Limited in their capacity to process information
In order to design, it is important to understand the capabilities and limitations of those we are designing for.
![Page 17: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/17.jpg)
+The Human How do you interact with the outside world?
Input-Output channel – Vision, Audio, Touch and Movement
How do you remember things? Human memory – sensory, short term and long term memory
Example???
How do you processed and applied information? Learning, problem solving, reasoning, skill, error, experience, etc.
Sensory memories
IconicEchoicHaptic
Short term memory
Or Working memory
Long term memoriesattention rehearsal
Fig 3: A model of the structure of memory (source Dix, et al. 2009)
![Page 18: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/18.jpg)
+The Human: Human Memory-Sensory Memory1. Sensory Memory
Buffers for stimuli received through senses iconic memory: visual stimuli echoic memory: aural stimuli haptic memory: tactile stimuli/touch
Examples “sparkler” trail stereo sound
Continuously overwritten
![Page 19: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/19.jpg)
+The Human: Human Memory-LTM3. Long Term Memory
Repository for all our knowledge huge or unlimited capacity
Two types episodic – serial memory of events semantic – structured memory of fact,
concepts, skills semantic LTM derived from episodic LTM
![Page 20: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/20.jpg)
+The Human: Human Memory-LTM
Three main activities related to LTM:
Storage/Remembering of Information Forgetting Information Retrieval
![Page 21: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/21.jpg)
+
21
Human Factors
We look at the human factors that affect how people interact with computers and computer programs:
Physiology - physical make-up, capabilities
Cognition - thinking, reasoning, problem-solving, memory
Perception - how a person perceives what input they get through their senses
Emotions – feelings that affect the human behaviour
![Page 22: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/22.jpg)
+
22
Human Factors : Physiology
The design of devices are often be affected by the human physiology
Some constraints can be introduced and applied based on the physical built up of the users
Examples:
Keyboard keys cannot be smaller than finger size
Smaller machines must use different input facilities
Toilet for toddlers
Specific door widths and heights (home, hospitals)
Anymore?
![Page 23: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/23.jpg)
+Human Factors : Physiology: Reaction Time
Human reaction times: Audio signal - 150ms Visual signal - 200ms Pain - 700ms
Examples of use: Design of video games Traffic lights Phone
![Page 24: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/24.jpg)
+
24
Human Factors : Physiology: Movement
Speed or accuracy of movement are important for interactive
systems.
Examples:
Mouse - keyboard movement (affects choice of which devices/controls operate which actions of the system)
Time taken to move to a target on screen
Careful arrangement of menu
items so that frequent choices
are placed first
![Page 25: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/25.jpg)
+
25
Human Factors : Physiology: Disabilities
Designers must design so that disabled users can achieve maximum functionality and usability from computer systems
Examples:
Speech input and output systems (useful for blind people and those with severe motor impairment)
Keyboard pressing devices
Eye movement detection devices
![Page 26: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/26.jpg)
+
26
Human Factors : Cognition
The processes by which we become acquainted with things, how we gain knowledge, familiarity
What goes in our heads when we carry out our everyday activities
Involves understanding, thinking, remembering, reasoning, memorizing, attending, awareness, acquiring skills, creating new ideas.
![Page 27: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/27.jpg)
27
Human factors : Cognition
Managing Attention• Process of selecting things to concentrate on at a point in
time • Depends on:
1. Users’ goalsIf we know exactly what we want to find out, we
try to match this with the information that is available
2. Information presentationGreatly influence how easy or difficult it is to
digest appropriate pieces of information
![Page 28: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/28.jpg)
Human factors : Cognition : User’s Goals
Everyday my sister goes to shooclMy two cats lvoe fishI am a Klua Lmpr University graduateThey are sudtying at UNITEN
Try to read the sentences below…
Interface designers need to focus attention on the users’ goals(If we know exactly what we want to find out, we will try to match this with the information that is available)
![Page 29: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/29.jpg)
+
Interface designers need to focus attention on the right place – plan and structure the information presentation to allow for usability and to suit the task flow :
Structured information
Human factors : Cognition : Information Presentation
VS
![Page 30: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/30.jpg)
+
Interface designers need to focus attention on the right place
avoid too much/little information:
Read the following lists and then try to recall as many of the items as possible
3, 12, 6, 20, 15, 49, 81, 76, 8, 97, 13, 56
Cat, house, paper, laugh, people, red, yes, number, shadow, broom, rain, plant, lamp, chocolate, radio, one, coin
t, k, y, w, n, o, c, d, e, q, p, r
Human factors : Cognition : Information Presentation
![Page 31: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/31.jpg)
+Human factors : Cognition : Information presentation
• According to George Miller’s (1956) theory, 7 ± 2 chunks of information can be held in short – term memory at any time.
• How to apply this in interface design?
•Design tips…– Have only 7 options on a menu– Display only 7 icons on a menu bar– Place only 7 items on a pull down menu
![Page 32: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/32.jpg)
+ Human factors : Perception
• How a person perceives what input they get through their senses
• Capabilities and limitation of visual processing and understand how we perceive size and depth, brightness and colour
![Page 33: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/33.jpg)
+
33
Human Factors : Perception
Input from the different senses
Auditory Perception (sound effects)
Haptic (Touch) Perception (game controller)
Visual Perception (pictures/images)
We need to understand how the input information is perceived by humans.
![Page 34: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/34.jpg)
+
34
Human factors - Perception
![Page 35: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/35.jpg)
+Human factors - Perception
![Page 36: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/36.jpg)
+The Human-Emotion
Emotion involves both cognitive and physical responses to stimuli
James-Lange: emotion is our interpretation of a physiological response to a stimuli
![Page 37: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/37.jpg)
+The Human-Emotion
The biological response to physical stimuli is called affect
Affect influences how we respond to situations positive creative problem solving negative narrow thinking
“Negative affect can make it harder to do even easy tasks; positive affect can make it easier to do difficult tasks”
(Donald Norman)
![Page 38: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/38.jpg)
+The Human-Emotion
Implications for interface design stress will increase the difficulty of problem solving relaxed users will be more forgiving of shortcomings
in design aesthetically pleasing and rewarding interfaces will
increase positive affect
![Page 39: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/39.jpg)
+The Human- Errors & mental modelTypes of error
slips right intention, but failed to do it right causes: poor physical skill, inattention etc. change to aspect of skilled behaviour can
cause slip
mistakes wrong intention cause: incorrect understanding
humans create mental models to explain behaviour.
if wrong (different from actual system) errors can occur
![Page 40: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/40.jpg)
+The Computer
A computer system is made up of various elements
Each of these elements affects the interaction input devices – text entry and pointing output devices – screen (small & large), digital paper virtual reality – special interaction and display devices physical interaction – e.g. sound, haptic, bio-sensing paper – as output (print) and input (scan) memory – RAM & permanent media, capacity & access processing – speed of processing, networks
![Page 41: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/41.jpg)
+The Computer
When we interact with computers or other electronic devices, what are we trying to achieve?
![Page 42: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/42.jpg)
+The Interaction
Interaction -> in this context, is a process of information transfer, from the user to a computer and from a computer to the user
input
output
![Page 43: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/43.jpg)
+Understanding interaction
• User centric design is the formula for usability
• The key to User-centered Design is to understand Interaction
• We need to understand :
– What Interaction is
– What are the elements involved
![Page 44: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/44.jpg)
+
44
Interaction Model
• The most influential model of interaction is Donald Norman’s (http://www.jnd.org/) :
Execution-Evaluation cycle• Norman divides interaction into :
– Execution • User activities aimed at making the system do
something– Evaluation
• Evaluating whether the system did actually do what the user wanted
![Page 45: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/45.jpg)
+
45
Understanding Interaction
Execution
– If User cannot make system do what they want
• e.g. cannot understand how to do it, unclear icons, unclear indication etc.
– Will result in the Gulf of Execution
![Page 46: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/46.jpg)
+
46
Understanding interactionEvaluation
– If user cannot see what happened to system
• e.g. if system has done what they want but no feedback is given to the users etc.
– Will result in the Gulf of Evaluation
• i.e. difference between the representation of the system state/result and the expectations of the user
• E.g ATM
Good Design aims to reduce these gulfs
![Page 47: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/47.jpg)
+The Interaction Model
Donald Norman’s model
Seven 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
![Page 48: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/48.jpg)
+The Interaction Model: 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
![Page 49: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/49.jpg)
+
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
The Interaction Model: execution/evaluation loop
![Page 50: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/50.jpg)
+
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
The Interaction Model: execution/evaluation loop
![Page 51: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/51.jpg)
+ Common interaction styles
command line interface
menus
natural language
question/answer and query dialogue
form-fills and spreadsheets
WIMP
three–dimensional interfaces
51
![Page 52: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/52.jpg)
+ Command line interface
Way of expressing instructions to the computer directly function keys, single characters, short abbreviations, whole
words, or a combination
suitable for repetitive tasks
better for expert users than novices
offers direct access to system functionality
command names/abbreviations should be meaningful!
Typical example: the Unix system, DOS prompts
52
![Page 53: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/53.jpg)
+ Menus
Set of options displayed on the screen
Options visible less recall - easier to use, use of images/icons to help rely on recognition so names should be meaningful to reflect the tasks to be
executed
Selection by: numbers, letters, arrow keys, mouse combination (e.g. mouse plus accelerators)
Often options hierarchically grouped sensible grouping is needed
53
![Page 54: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/54.jpg)
+ Query interfaces
Question/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
54
![Page 55: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/55.jpg)
+ Form-fills
Primarily for data entry or data retrieval
Screen like paper form
Data put in relevant place
Requires good design Sequential/suitable information
structure obvious correction
facilities
55
![Page 56: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/56.jpg)
+ Spreadsheets
first spreadsheet VISICALC, followed by Lotus 1-2-3.
MS Excel most common today
Sophisticated variation of form-filling. grid of cells contain a value or a formula formula can involve values of other cells
e.g. sum of all cells in this column user can enter and alter data spreadsheet maintains
consistency
56
![Page 57: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/57.jpg)
+ Three dimensional interfaces
virtual reality
‘ordinary’ window systems highlighting visual affordance indiscriminate use
just confusing!
3D workspaces use for extra virtual space light and occlusion give depth distance effects
flat buttons …
… or sculptured
click me!
57
![Page 58: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/58.jpg)
+ 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
58
![Page 59: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/59.jpg)
+ Windows
Areas of the screen that behave as if they were independent can contain text or graphics can be moved or resized can overlap and obscure each other,
or can be laid out next to one another (tiled)
scrollbars allow the user to move the contents
of the window up and down or from side to side
title bars describe the name of the window
59
![Page 60: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/60.jpg)
+ Icons
small picture or image
represents some objects in the interface often a window or action
windows can be closed down (iconised) small representation fi many accessible
windows
icons can be many and various highly stylized realistic representations.
60
![Page 61: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/61.jpg)
+ Pointers
important component WIMP style relies on pointing and
selecting things
uses mouse, track pad, joystick, trackball, cursor keys or keyboard shortcuts
wide variety of graphical images
Relies on learnability and then cognition
61
![Page 62: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/62.jpg)
+ Kinds of Menus
Menu Bar at top of screen (normally), menu drags down pull-down menu - mouse hold and drag down menu drop-down menu - mouse click reveals menu fall-down menus - mouse just moves over bar!
Contextual menu appears where you are pop-up menus - actions for selected object pie menus - arranged in a circle easier to select item (larger target area) quicker (same distance to any option)
… but not widely used!
62
![Page 63: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/63.jpg)
+ Menus extras
Cascading menus hierarchical menu structure menu selection opens new menu and so in ad infinitum
Keyboard accelerators key combinations - same effect as menu item two kinds active when menu open – usually first letter active when menu closed – usually Ctrl + letter
usually different !!!
63
![Page 64: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/64.jpg)
+Menus design issues
which kind to use
what to include in menus at all
words to use (action or description)
how to group items
choice of keyboard accelerators/short keys
64
![Page 65: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/65.jpg)
+ Buttons
individual and isolated regions within a display that can be selected to invoke an action
Special kinds radio buttons
– set of mutually exclusive choices check boxes
– set of non-exclusive choices
65
![Page 66: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/66.jpg)
+ Toolbars
long lines of icons …… but what do they do?
fast access to common actions
often customizable:choose which toolbars to seechoose what options are on it
66
![Page 67: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/67.jpg)
+ Dialogue boxes
information windows that pop up to inform of an important event or request information.
e.g: when saving a file, a dialogue box is displayed to allow the user to specify the filename and location. Once the file is saved, the box disappears.
67
![Page 68: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/68.jpg)
+Summary
We have covered the concept of HCI.
The human characteristics.
The importance to understand the effect of interface design to its user.
The interaction model which help to analyse how easy or difficult for users to express their needs and get what they want .
![Page 69: + Human-Computer Interaction Chapter 1- An Introduction](https://reader030.vdocuments.site/reader030/viewer/2022032802/56649dea5503460f94ae55e6/html5/thumbnails/69.jpg)
+Assignment 1
Go to:
metalab.uniten.edu.my/~rubi
Folder: HCI