Human Computer Interface

1
Human Computer Interface

• Shneidermans Principles of HCI Design

2
Eight Golden Rules

• Strive for consistency
• Enable experts to use shortcuts
• Offer feedback rollover buttons, highlighting
• Completion dialog or sound
• Error prevention and handling data fields
• Easy undo
• User control
• Do not rely on users short-term memory

3
Strive for Consistency
4
Enable Experts to Use Shortcuts
5
Offer Feedback
6
Completion Dialogs
7
Error Handling

• Can be a dialog box or a sound.

8
Easy Undo

• Original PrintShop for the Apple II
• 6 steps to create greeting cards
• Could not go back a step
• Had no save function
• Had to start over to correct an error
• New Photoshop
• multiple undo levels, revert, history, brush
  history, eraser history, cancel

9
User Control - a little history

• DEL c\COM597\ginny\documents\homework\design.doc

10
HCI Improvements
WIMP or WIMPI Windows-Icons-Mice-Pointers
Interface
You only have two hands.
11
Original Windows drop down menus
12
Icon Based Menus
13
Desktop Icons
14
Users Short-Term Memory

• Drop down menus, icons, and internal/external
  consistency all contribute to less reliance on
  memory.

15
Gestalt Theory and HCI

• Similarity - sharing visual characteristics
• Icons have similar design, related commands in
  same color (nav bar, hyperlinks)
• Proximity or Contiguity - close together belong
  together
• Navigation bar, index/contents
• Figure and ground - separation of elements
• Distinctly different to prevent camouflage,
  i.e. avoid red text on black

16
Affordance

• Invented by the perceptual psychologist J.J.
  Gibson in 1977
• It refers to the actionable properties between
  the world and an actor (a person or animal)
• Moreover, in Gibsons opinion, affordence are a
  relationship. They are a part of nature and they
  do not have to be visible, known, or desirable.

17
Perceived Affordance

• In graphical, screen-based interfaces, all that
  the designer has available is control over
  perceived affordance
• For example
• However, most of this affordance is of no value
• Why?

18
Culture Convention

• For example Scroll bar
• Position always right hand side
• Usage move the cursor to it, hold down a mouse
  button, and drag it down
• Function to see subjects located below the
  current visible set
• Only move vertically, not horizontally

19
Cultural Convention

• Outside-in v.s. Inside-out
• Time
• Function

20
Principles for screen interfaces

• How new users understand what to do
• Follow conventional usage
• Use words to describe the desired action
• Use metaphor
• Follow a coherent conceptual model

21
More on Affordance, Conventions and Design

• Principle of Affordance
• - Refers to the actionable properties between the
  world and an actor (a person or animal).
• - Not really possible on the web

22
Perceived Affordance

• The designer cares more about what actions the
  user perceives to be possible than what is true.
• In graphical, screen-based interfaces, the
  designer primarily can only control perceived
  affordances.

23
Is Clicking affordance? NO!

• Although you can click on an object, you can
  also click anywhere on a page.
• The object provides a target and it helps the
  user know where to click but those aren't
  affordances.

24
Three types of constraints

• Physical constraints are closely related to real
  affordances For example, it is not possible to
  move the cursor outside the screen this is a
  physical constraint.
• Logical constraints use reasoning to determine
  the alternatives. Thus, if we ask the user to
  click on five locations and only four are
  immediately visible, the person knows, logically,
  that there is one location off the screen.
• Cultural constraints are conventions shared by a
  cultural group. The fact that the graphic on the
  right-hand side of a display is a "scroll bar"

25
What is a convention?

• It is a constraint in that it prohibits some
  activities and encourages others.
• A convention is a cultural constraint, one that
  has evolved over time
• Conventions are not arbitrary they evolve, they
  require a community of practice.

26
What is a convention?

• They are slow to be adopted, and once adopted,
  slow to go away. So although the word implies
  voluntary choice, the reality is that they are
  real constraints upon our behavior.
• Use them with respect. Violate them only with
  great risk.

27
Concluding comments

• Sloppy thinking about the concepts and tactics
  often leads to sloppiness in design and confusion
  for users.
• The most important design tool is that of
  coherence and understandability which comes
  through an explicit, perceivable conceptual
  model.

28
Concluding comments

• Affordances specify the range of possible
  activities, but affordances are of little use if
  they are not visible to the users. Hence, the art
  of the designer is to ensure that the desired,
  relevant actions are readily perceivable.

29
Concluding comments

• Designers can invent new real and perceived
  affordances, but they cannot so readily change
  established social conventions. Know the
  difference and exploit that knowledge. Skilled
  design makes use of all.