PERTEMUAN KEDUA

User Interface Design

1
A Cognitive perspective
 Cognition: How we gain knowledge
 These includes:
 Understanding (memahami)
 Remembering (Mengingat)
 Reasoning (Memikirkan)
 Attending (Menghindari)
 Being Aware (Menyadari)
 Acquiring Skills (Mendapatkan Keterampilan)
 Creating New Ideas

2
Human Information Processing
 Tahapan Human Information
Processing:
 Encoding
 Comparison
 Response Selection
 Response Execution

3
Information Processing and HCI
 Human Processor Model (Card et al, 1983):
 The Perceptual System (penglihatan)
 The Motor System
 The Cognitive System (pengertian)
 Human Processor Model provides a means of
characterizing the various cognitive processes that
are assumed to underlie the performance of a task.

4
Human’s Memory
There are three types of memory function:
Sensory Memory

Short-term / Working Memory

Long-term Memory

Selection of stimuli governed by level of arousal

5
Sensory Memory
 Menyimpan sementara rangsangan yang diterima
melalui akal
 Iconic memory: visual stimuli
 Echoic memory: aural stimuli
 Haptic memory: tactile stimuli
 Continuously overwritten

6
Short-term Memory (STM)
 Scratch-pad for temporary recall
 Rapid access ~ 70 ms
 Rapic decay ~ 200 ms
 Batas kapasitas ~ 7 ± 2 blok (Miller, 1956)
 Example
 2126985697
 212 698 5697

7
Long-term Memory (LTM)
 Repository for all our knowledge
 Slow access ~ 1/10 second
 Slow decay, if any
 Huge or unlimited capacity
 Two types
 Episodic – serial memory of events
 Semantic – Structured memory of facts, concepts, skills
 Semantic LTM berasal dari episodic LTM

8
Vision
 Two stages in vision
 Physical reception of stimulus
 Processing and interpretation of stimulus

9
Visual Perception
 Bagaimana persepsi user
 Ada 2 teori:
 Pendekatan Constructivist: dibentuk dari
representasi obyek yang dilihat & pengetahuan yang
kita punya.
 Pendekatan Ecological: affordance

10
Optical Illusions

the Ponzo Illusion the Muller Lyer Illusion

11
Graphical Coding
 Jangan menggunakan terlalu banyak warna (karena
akan menimbulkan polusi warna)
 Effectiveness of color coding in cognitive tasks:
searching and Identifying targets (Davidoff, 1987):
 Segmentation (region division).
 Amount of color (more color, more search time).
 Task demand (best for search task, not categorization and
memorization of objects).
 Experience of user (color is more useful for inexperienced
than for experienced users.

 warna digunakan untuk membedakan, tetapi jangan

sampai terlalu banyak sehingga tambah membingungkan

12
Color Coding (Travis, 1991)
 Color is a useful coding mechanism for grouping: use
different colors to distinguish layers (e.g. front and back
layers).
 Color makes things stand out: use color to make features
prominent (e.g. currently active files could be colored in
orange).
 Figure/background: Dark or dim backgrounds should be
used, such as deep blue, and bright colors for the
foreground.

13
Hearing
 Provides information about environment:
distances, directions, objects, etc.
 Physical apparatus:
 Outer ear – protects inner and amplifies sound
 Middle ear – transmits sound waves as vibrations
to inner ear
 Inner ear – chemical transmitters are released and
cause impulses in auditory nerve
 Sound
 Pitch – sound frequency
 Loudness – amplitude
 Timbre – type of quality

14
Hearing (cont.)
 Frequensi yang dapat diterima manusia 20 Hz to 15
kHz

 Auditory system memfilter suara

 Kita dapat mendengarkan suara meskipun ada noise

15
Focusing Attention
 Manusia mampu memfokuskan perhatian pada suatu
even meskipun banyak hal lain dalam lingkungan kita
 Contoh:
Cocktail Party phenomenon (Cherry, 1953).

16
Divided Attention
 When we attempt to attend to more than one thing at
a time.
 For example:
 being able to drive while holding a conversation with a
passenger.
 Being distracted from working when we can hear music
or voices in the next room.

17
Focusing attention at the interface
 Structuring Information so that it is easy to
navigate through:
 Presenting not too much information and not too little
on a screen.
 Grouping and Ordering.
 Other Techniques for guiding attention:
 Spatial and Temporal Cues.
 Color.
 Alerting Techniques (flashing, reverse video, auditory
warnings).

18
Automatic Processing
 Automatic Cognitive Processes are identified as:
 Fast.
 Demanding Minimal Attention and hence not
interfering with other activities.
 Unavailable to consciousness.
 Example:
 Reading, Writing, Speaking in Native Language, Riding
a bike.

19
Automatic Cognitive Process (Example)
The Stroop Effect (Gleitman, 1991): See how long it takes you to name the colors
of the items in the two lists of words below. Try to say them as quickly as
possible:
 ZYP  RED
 QLEKF  BLACK
 SUWRG  YELLOW
 XCIDB  BLUE
 WOPR  RED
 ZYP  GREEN
 QLEKF  YELLOW

20
Emotion
 Various theories of how emotion works
 James-Lange: emotion is our interpretation of a
physiological response to a stimuli
 Cannon: emotion is a psychological response to a stimuli
 Schacter-Singer: emotion is the result of our evaluation
of our physiological responses, in the light of the whole
situation we are in
 Emotion clearly involves both cognitive and
physical responses to stimuli

21
Emotion (cont.)
 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)

22
Emotion (cont.)
 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

23
Designing meaningful command names
 Trend: pemberian nama yang abstrak dan susah
dimengerti
 Nama dipilih untuk efisiensinya (e.g. Function keys)
 Petunjuk umum: berdasarkan kontex, kultur dan
karakteristik user.

24
Designing meaningful icon
 Icon Classification (Rogers, 1989):
 Resemblance Icons: analogous image
 Exemplar Icons: typical example
 Symbolic Icons: higher level of abstraction
 Arbitrary Icons: association has to be learned

25
Icon Examples

a. Resemblance Icon Example

b. Exemplar Icon Example
c. Symbolic Icon Example
d. Arbitrary Icon Example

26