MI1392
User Interface Design
3rd Topic, Week #3
GTR
Agenda
• History of User Interface (windows based)
• Human abilities
 Senses
 Motor systems
• I/O devices
• Memory
• Information Processing
Key Historical Event (PC)
90
80
Mouse, pointing dev, GUI, 1970
XEROX patented mouse, 1974
Double click, overlapping windws, 1024x768 monochrom,1981
Drag & drop, Desktop Metaphora, 1983
Affordable GUI, LIsa 83, 84, 85
Windows & Amiga, 1985
Colored Mac; X Window 1987
Sim 3D screen, 1988
1989, GUI (Unix), Motif of OSF, Open Look
1990-...,Microsoft dan Apple
Key Historical Event (PC)
• 1970, Xerox Palo
Alto Research
Center
• Introducing:
mouse, pointing
and selecting, and
GUI as the main
method for
interaction
PCs with GUIs
• Xerox PARC - mid 1970’s
 Alto
local processor, bitmap
display, mouse
Precursor to modern GUI,
windows, menus, scrollbars
LAN - ethernet
• 1974: Xerox has
patented
mouse
Xerox Star - ‘81
• 1981: Star (Xerox) double click,
overlapping windows, 1024x768
monochrome
• First commercial PC designed for “business
professionals”
 desktop metaphor, pointing, WYSIWYG, high
degree of consistency and simplicity
• First system based on usability engineering
 Paper prototyping and analysis
 Usability testing and iterative refinement
Star
• Commercial flop
 $15k cost
 closed architecture
 lacking key functionality
(spreadsheet)
Apple Lisa - ‘82
• Based on ideas of Star
• More personal rather
than office tool
 Still $$$
• Failure
Apple Macintosh - ‘84
•
•
•
•
•
Aggressive pricing - $2500
Not trailblazer, smart copier
Good interface guidelines
3rd party applications
High quality graphics and
laser printer
Key Historical Event (PC)
• 1983: Macintosh (Apple) with a revolution in
interfacing
 Usingdesktop metaphor:
Files consider as papers
Directories consider as folders
 Drag and drop
Key Historical Event (PC)
• Lisa 1 (Jan ‘83 – Jan ‘84)
• The first affordable GUI
• Lisa 2 (Jan ‘84 – Apr ‘85)
Lisa-1
Lisa-2 Interface
Lisa-2
Key Historical Event (UI)
•
•
1985: Windows 1.0 (Microsoft) dan Amiga 100 (Commodore)
1987: Macintosh II (Apple) Colored Macintosh; X Window become
famous
Key Historical Event (UI)
•
•
1988: NeXTStep (NeXT), simulated 3D screen.
1989: Some GUIs based on UNIX has released: Open Look (AT&T and
Sun), Motif for the Open Software Foundation (DEC dan HP)
Key Historical Event (UI)
•
During 1990-Now: So many products from Microsoft dan Apple
Human Capabilities
-Senses
-Memory
-Motor Systems
Human Capabilities
• Why do we care?  better design!
• Want to improve user performance
Time and effort expended
• Knowing the user informs the designto complete tasks
 Senses (I/O Channel)
 Information processing
Memorizing
Learning
Apply
 Physical responding
Movement
I. Senses
• Sight, hearing, touch important for
current HCI
 smell, taste ???
• Abilities and limitations
affect design
Vision
• Visual System
 Eye
 Retina
 Neural pathway
~ 80% of brain’s operation
Visual Abilities
• Sensitivity





Luminance: 10-6~107 mL
Absolute threshold: 10-6 mL
Comfortable reading: 1~100 mL
Colorless vision 10-6 ~ 10-1 mL
Color vision 1 ~ 107 mL
• Acuity
 detection, alignment, recognition (visual angle)
 Ability to sense the details
• Foveal vision
 retinal position: fovea has best acuity
• Peripheral vision
 Senses the area surrounding the location we looking at
Visual Abilities
• Movement
 tracking, reading, vibrations
• Note: Vision decreases with age
• Implications (??)
 Font size & location depends on task
 Much done by context & grouping
Hearing
• Capabilities (best-case scenario)




pitch - frequency (20 - 20,000 Hz)
loudness - amplitude (30 - 100dB)
location (5° source & stream separation)
timbre - type of sound (lots of instruments)
• Often take for granted how good it is
(disk whirring)
• Implications (??)
Touch
• Three main sensations handled
by different types of receptors:
 Pressure (normal)
 Intense pressure (heat/pain)
 Temperature (hot/cold)
• Sensitivity, Dexterity,
Flexibility, Speed
• Where important?
 Mouse, Other I/O, VR, surgery
II. Motor System
• Capabilities
 Range of movement, reach, speed,
strength, dexterity, accuracy
• Often cause of errors
 Wrong button
 Double-click vs. single click
• Principles
 Feedback is important
 Minimize eye movement
Interaction Devices
• “…are the mechanism or devices through which
people communicate their needs and
desires to the computer, and the output
mechanism or devices through which the
computer responds to people.”
Input Devices
• Keyboard
• Mouse, and its cousins:
 Trackball
 Joystick
•
•
•
•
Light pen
Graphic tablet or track pad
Touch screen
Voice
Pointing devices
Characteristic of Input
Devices
• To point at an object on the screen.
• To select the object or identify it as the focus of
attention.
• To drag an object across the screen.
• To draw something free-form on the screen.
• To track or follow a moving object.
• To orient or position an object.
• To enter or manipulate data or information.
Characteristic of Input
Devices
• Two important factor to consider:
 Mechanism
 Relationship between hand-operated device
and the pointer movement
direction, distance, speed.
Mechanism
• Direct
 Operated in the screen itself
• Indirect
 Operated in a location other than the screen, most often on the
desktop
• Discrete
 Used to enter individual bits of information (letter, numbers, or
commands)
• Continuous
 Operate sequentially in nature (dragging or drawing)
Relationship…
• Direction – Distance – Speed
• Devices possessing all three aspects
require less psychomotor skill learning
Up Next...
• There will be an assessment
• Topic: 1st slide until today’s slide
• Reading: Chapter 2, page 45-58
• Topics for project will be announced next
week (after assessment)
See you next week!
(be prepared...)
MI1392
User Interface Design
3rd Topic, Week #5
GTR
III. Memory
Information Processing
• Three major systems of human
information processing:
 Perceptual (read-scan)
 Cognitive (think)
 Motor system (respond)
1. Perceptual
• “…is our awareness and understanding of the elements and
environment through the physical sensation of our various sense”
• Memory structures
 Sensory buffer - Holds fixed image of outside world long enough for
some analysis
• Our sensing mechanism are bombarded by many stimuli
 Signal: important stimuli
 Noise: not important or unwanted stimuli
• Processes - Info goes to brain for more processing
 e.g. Pattern recognition
 Uses context & knowledge
• Could be different with others… try these:
2. Cognitive
• Cognitive model
How does it work?
Memory
Chess
• Four “types”
 Perceptual “buffers” (sensory storage)
Brief impressions
 Short-term memory
Conscious thought, calculations
 Intermediate
Storing intermediate results, future plans
 Long-term
Permanent, remember everything ever
happened to us
Perceptual / Sensory Store
• Visual and auditory impressions
 visuospatial sketchpad, phonological loop
• Very brief, but veridical representation of
what was perceived
 Details decay quickly (~.5 sec)
 Rehearsal prevents decay
 Another task prevents rehearsal
Short-term memory
• Use “chunks”: 4-5 units (Koyani et al.
Piece of information
2004)
 Previous research by Miller (1956), human can
handle 7±2 units of chunks  gradually lowered
• Display format should match memory
system used to perform task
• New info can interfere with old info
Short-term memory
• Format depends on peoples characteristics
• V-K-A-D
 Visual: sensing as an image
 Kinematic: sensing through touch
 Auditory: sensing through audio/voice
 Digital auditory: imaginary conversation
Long-term Memory
• Seemingly permanent & unlimited
File system full
• Access is harder, slower
 -> Activity helps (we have a cache)
LT Memory Structure
• Episodic memory
 Events & experiences in serial form
Helps us recall what occurred
• Semantic memory
 Structured record of facts, concepts & skills
One theory says it’s like a network
Another uses frames & scripts (like record
structs)
Memory Characteristics
• Things move from STM to LTM by
rehearsal & practice and by use in context
Unclear if we ever
really forget something
Lack of use
• We “forget” things due to decay and
interference
Similar gets in
way of old
Exercise
Exercise
•
•
•
•
Put a number 1000 into your memory
We’ll do a simple math operation: add
Speak out loud every result you’ve count
Get ready…
Do it quick!!!
1000
40 +
1000 +
30 +
1000 +
20 +
1000 +
10 +
???
Processes
• Four main processes of cognitive system:
 Selective Attention
 Learning
 Problem Solving
 Language
Selective Attention
• We can focus on one particular thing
 Cocktail party chit-chat
• Salient visual cues can facilitate s.a.
 Examples?
Boldface, blinking and beeping
Learning
• Two types:
 Procedural – How to do something
 Declarative – Facts about something
• Involves





Understanding concepts & rules
Memorization
Acquiring motor skills
Automotization
-> Tennis
Learning
• Facilitated
 By analogy
 By structure & organization
 If presented in incremental units
 Repetition
•  Use user’s previous knowledge in
interface
Problem Solving
• Storage in LTM, then application
• Reasoning
 Deductive-
If A, then B
 Inductive-
Generalizing from previous
cases to learn about new ones
 Abductive-
Reasons from a fact to the
action or state that caused it
Implications
• Allow flexible shortcuts
 Forcing plans will bore user
• Have active rather than passive help
 Recognize waste
People
• Good
 Infinite capacity LTM
 LTM duration &
complexity
 High-learning
capability
 Powerful attention
mechanism
 Powerful pattern
recognition
• Bad
 Limited capacity STM
 Limited duration STM
 Unreliable access to
LTM
 Error-prone processing
 Slow processing
QUESTIONS ???