HCI Notes

1
HCI Notes

• Evans Adams
• November 2006

2
The Desktop

• Image displayed on the monitor when a PC starts
  up
• Colored or patterned background
• Information displayed on top, bottom, or side
• Three types of icons
• Applications (programs)
• Folders (directories)
• Files (documents)

3
The Desktop (cont'd)

• "Desktop" is a metaphor
• An analogy for computation
• Working at PC is analogous to working at a desk
• Work goes in files
• Files go in folders
• Tools (a program or a calculator) are used to
  perform tasks

4
Playing Recorded Music

• Example of metaphoric user interface
• Software that plays CDs on computer has graphical
  user interface (GUI)
• This GUI resembles a familiar music player
• Buttons resemble an ordinary CD player
• User can apply knowledge of CD player to learn to
  use this GUI without special instruction because
  the metaphor is familiar

5
(No Transcript)
6
(No Transcript)
7
(No Transcript)
8
(No Transcript)
9
(No Transcript)
10
(No Transcript)
11
Understanding the Designer's Intent

• Software designers should try to pick
  easy-to-understand user interfaces
• We can expect good software to be well crafted
  so we can "brain out" how it works
• We use this idea every time we use new software

12
Consistent Interfaces

• Designers use metaphors similarly
• When we see an icon or metaphor we have seen
  before, we know how it works
• There are standard metaphors found in all GUIs

13
Command Buttons

• May look like a 3D rectangle or circle, with an
  icon or text centered on the button
• We click mouse to "press" the button and the
  command is invoked
• Tells the software to perform the operation
• We receive feedback to confirm the button has
  been clicked
• Color change, shadow, highlight, or audible click

14
Slider Control

• Sets a value from a "continuous" range, like
  volume
• Move slider by placing mouse pointer on it and
  dragging in the direction of change
• Scroll bars are a type of slider control

15
(No Transcript)
16
Triangle Pointers

• Indicates presence of hidden or alternative
  information
• Clicking on triangle reveals the information
• Triangles at the ends of slide bars shift the
  contents of the window
• Experienced users look for familiar metaphors and
  learn new ones when they are encountered

17
Anatomy of an Interface

• Menu
• List of operations the software can perform
• Grouped by similarity of operations
• Listed in menu bar
• All operations performed by the software are
  listed in the menu

18
(No Transcript)
19
(No Transcript)
20
Expecting Feedback

• Feedback is any indication that the computer is
  still working, or has completed task
• For editing change, proof of completion is that
  the revision is visible
• For button click, software provides an indication
  like highlighting, shading, graying, underlining,
  changing color, or audible click

21
Expecting Feedback (cont'd)

• Most common feedback Indication that computer
  is working on time-consuming task
• Cursor is replaced with icon like hourglass
  (Windows) or rainbow spinner (Mac)
• Other forms of feedback busy spinner, running
  dog (Fetch), time-estimating "fills", completion
  count

22
Human Computer Interaction

• HCI involves
• the design, implementation and evaluation of
  interactive systems
• in the context of the user's task and work.
• HCI is both an art and a science.

23
Computer Systems must be usable

• Interfaces should
• be suitable for task
• easy to use - adapts to user's knowledge and
  experience
• provides feedback on performance
• displays info in a format and pace adapted to the
  user
• conforms to principles of software ergonomics

24
We want systems to be

• useful - accomplish a task
• usable - do it easily and naturally without
  danger of error
• used - make people want to use it, be attractive,
  engaging, fun

25
Interacting with a machine

• Can use five senses site, hearing, touch, smell,
  taste
• With a computer we use site, hearing and touch

26
Human Vision

• Peripheral vision can perceive movement but is
  poor at perceiving patterns
• the Fovea (center of retina (back part of the
  eye)) has a high concentration of X-cells which
  are used to see patterns
• retina has two types of photo-receptors rods and
  cones
• rods are very sensitive to light - good for
  seeing in low light
• mainly found on the edge of the retina
• poor for seeing detail
• cones - concentrated in fovea - good for color
  detection
• (see http//thalamus.wustl.edu/course/eyeret.html)

27
IMPLICATIONS

• Error messages, away from the main focus of the
  page (at the bottom) should move in some way
  (blink?)

28
Design Issues

• Our perception does not always match reality
• We tend to perceive horizontal lines longer than
  they are and reduce vertical
• Horizontal lines also appear thicker
• For a rectangle to appear square it has to be
  higher than it is wide
• We also tend to see the center of a page a little
  above the actual center - called the optical
  center

29
Reading

• First, the visual pattern of word is perceived
• Next, the pattern is decoded with reference to an
  internal representation of the language
• During reading the eyes' motion is jerky (called
  saccades) then fixated.
• Perception occurs during fixation (fixation is
  94 of the time)
• There are times of regression too (backward eye
  movement)

30
Reading

• adults read 250 words a minute
• words are not read character by character
• a word can be recognized as quickly as a
  character
• probably recognized by shape
• weird fonts and capitalization can hamper this
  shape recognition

31
Reading

• Aoccdrnig to a rsecheearr at an Elingsh
  uinervtisy, it deosn't mttaer in waht oredr the
  ltteers in a wrod are, the olny iprmoetnt tihng
  is that frist and lsat ltteer is at the rghit
  pclae. The rset can be a toatl mses and you can
  sitll raed it wouthit a porbelm. Tihs is bcuseae
  we do not raed ervey lteter by itslef but the
  wrod as a wlohe.
• Source http//www.microsoft.com/typography/ctfon
  ts/WordRecognition.aspx

32
Reading

• font size and line length can affect reading
  speed
• fonts 9 - 12 are equally legible.
• line lengths between 2.3 and 5.2 inches are best
• reading from a monitor is slower than reading
  from a book.
• line length? fewer words/page? orientation?
  familiarity with medium?
• negative contrast (dark character, light
  background) provides higher luminance and
  increase acuity (though can lead to flicker)
• negative contrast is preferred by most

33
Hearing

• processing sound
• people can hear sounds from 20HZ to 15kHz
• frequency changes of less than 1.5Hz can be
  detected (for low frequencies)
• we filter sounds (conversation in a noisy
  restaurant) but have trouble if they are too
  similar
• sound's potential not fully taken advantage of in
  user interfaces

34
Touch (haptic perception)

• Feedback
• It helps users when buttons provide haptic
  feedback
• virtual reality users often have trouble picking
  things up because feedback is missing

35
(No Transcript)
36
Ecommerce Implications

• People buy CDs and computers via the Web
• But, people want to touch clothes, see how they
  feel, judge the quality, ...
• see http//www.novint.com/

37
Human Memory

• Three types of components
• sensory buffers
• short-term memory
• long-term memory

38
Sensory buffers

• buffers for stimuli - one for each sense
• iconic memory for vision (move finger in front of
  eye - see in gt 1 place?)
• stays in buffer for 0.5 seconds
• echoic memory for sound
• allows two ears to be coordinated as sound hits
  them at different times
• can ascertain direction of sound based on the
  delay
• haptic memory for touch

39
Sensory buffers

• info passed from sensory buffers to short-term
  memory by attention
• attention is the mind's concentration on a
  specific stimulus
• if not attended to, info is lost

40
Short-term memory

• acts as a scratch pad for temporary recall of
  info
• can be accessed in 70ms
• decays quickly (in about 200ms)
• capacity limit 7 2
• can be raw info or chunks of info

41
Implications

• only expect users to remember about 7 chunks of
  information
• as in unix command-line command arguments
• when all are shown can have gt 7 (as in menus)

42
Long-term Memory

• slow access time (100 ms)
• huge (unlimited?) capacity
• forgetting is minimal (if it happens at all)
• information placed there through rehearsal amount
  learned is directly proportional to time spent
  learning
• most effective if distributed over time
• learning is improved if information is meaningful
• sentences easier to learn than a series of
  unrelated words or nonsense words

43
Information Retrieval

• Recall and Recognition
• recall
• information reproduced from memory
• can be assisted by use of categories
• recognition
• the information provides the knowledge it has
  been seen before

44
Errors and Mental Models

• Why do we make mistakes
• behavior has become automatic and some aspect
  changes
• old behavior might break through
• EX decide to stop on the way to work
• incorrect model (mental model) for current
  situation
• might be partial
• might be internally inconsistent
• unstable and subject to change
• may not understand workings of full system
• might be unscientific
• might be based on an incorrect interpretation of
  evidence

45
Errors and Mental Models

• errors occur when mental model differs from
  reality
• Implications for HCI
• try to match user's mental model
• stick to convention (or supply support when
  convention is violated)

46
Techniques for Learning New Software

• Clicking Around
• Exploring a user interface
• Noting basic GUI features
• Checking each menu to see what operations are
  available
• Helps user figure out what operations are
  available without being taught
• Clicking around works because consistent
  metaphors and interfaces make new software
  predictable

47
"Blazing Away"

• The next step after clicking around
• Assertively exploring features even without a
  clear idea of their functions
• Nothing will break
• Only risk is losing time spent and having to
  re-start or reboot
• Concentrate on operations related to whatever
  task needs to be done

48
Watching Others

• Complicated software systems usually have
  features that are not obvious, too advanced, or
  too specialized to learn by clicking around
• Shift-Select Operation
• Allows you to select non-adjacent pieces
• Many obscure features, tricks, and shortcuts can
  be learned by watching others

49
A Basic Principle Form Follows Function

• Fundamental operations of a software system and
  the way they work are determined by the task
  being solved
• GUIs may look different, but two software systems
  for the same task will have same basic operations
  and will work similarly

50
Similar Operations Have Similar Features

• Text processing applications all
• Use a cursor to mark your place
• Have operations for typing, deleting, selecting,
  copying, searching, replacing, etc.
• These operations work similarly
• e.g., backspace key removes character to the left
  of the cursor
• So how do vendors compete?
• Add non-fundamental features
• Make systems more convenient, friendlier, faster,
  less error-prone, etc.

51
Learning About Technology

• People do not have any innate technological
  abilities
• Our experience using (related) devices, including
  software, shows us what to expect
• Designers who create devices, including software,
  know about this experience and design products to
  match what we already know
• Reference - Donald A. Norman, The Design of
  Everyday Things, MIT Press

52
Technology Take IT Personally

• We have learned we can expect intuitive
  interfaces
• To learn to use new software, we should ask
  ourselves
• What do I have to learn about this software to do
  my task?
• What does the designer of this software expect me
  to know?
• What does the designer expect me to do?
• What metaphor is the software showing me?
• What additional information does the software
  need to do its task?

53
(No Transcript)