WPI Worcester Polytechnic Institute

Computer Science Department
------------------------------------------

The Story So Far ...
HCI Course Contents

* * * Under Gradual Construction * * *


... plus a healthy dose of Dilbert.


------------------------------------------
http://www.cs.wpi.edu/~dcb/courses/CS3041/the-story.html


[WPI] [CS] [CS3041]

dcb at cs wpi edu / Tue Jan 11 18:28:30 EST 2011 -- typing leads to errors
-- can train user with (NL) feedback
-- users make incorrect assumptions about system abilities

Direct manipulation

  • WIMP interfaces (Windows, Icons, Menus and Pointing device)
    -- WIMP may not be Direct Manipulation
  • Direct Manipulation
    • visible actions and objects
    • manipulate directly
    • emphasize task, minimize computer concepts
    • minimize syntax (and typing)
    • natural cursor control (for task)
      -- hands, eyes, fingers
      -- eyetracking
    • Metaphors (to suggest a similarity with a real thing/process)
    • Affordances (principle)
    • reinforce conceptual model (affecting users mental model)

    • Extreme Direct Manipulation: BumpTop desktop
    • Tangibles: Toy blocks that "think"

    • why it works
      • user in the task: tool vanishes
      • representation of reality
      • direct involvement
      • physical/graphical representations can enhance p-s.
      • visual representations encourage retention
    • its problems
      • icons/diagrams may be confusing
      • abstracted reality isn't real (behavior)
        • e.g., users may infer incorrect properties
          -- what's on real desk top?
          -- trash can has weight
      • text has higher density of information
      • typing often faster
      • best for few objects & actions
      • bad match for looping/searching

Ch.10
  • Direct Manip.: Impact of video games
    • sophisticated sound & graphics
    • challenging tasks (more "interesting")
    • significant user base
    • abstractions of reality (expectations)
    • use of natural controls (special devices)
    • immediate feedback (high involvement)
    • learning by doing
  • games vs. applications!

Icon Design

  • what is an icon ???
  • icon examples
  • Icon design
    • lexical
    • syntactic
    • semantic
    • pragmatic
    • dynamics
  • icon design schemes
    • resemblance
    • symbolic
    • exemplar (typical example)
    • analogy (cut = scissors)
  • more icon examples
  • icon guidelines
  • international aspects

  • Summary: Designing Direct Manipulation Interfaces

  • Dialog styles (reminder)
Ch.16

Device evaluation

  • Interaction Devices
    Key question -- how do we know that they are any good?
  • What are the interaction devices ???
    • for "normal" computer applications?
    • for games?
    • for VR?
    • for life? (ubiquitous)
  • How to Evaluate
    • what are the evaluation factors for comparison ????
      -- in addition to basic metrics
  • Role of Fitts' Law ???
  • Pointing device tasks
    -- how does each device do each task ????
    • Select
    • Position
    • Orient
    • Path
    • Quantify
    • Text manipulation
  • Direct vs. Indirect
    • direct
      • touch screen, pen/stylus (on screen only)
      • strengths & weaknesses ????
        -- e.g., touch screen
    • indirect
      • mouse, trackball, joystick, graphics tablet (off screen)
      • strengths & weaknesses ????
        -- e.g., mouse
  • What type is keyboard? (strengths & weaknesses?)
    -- arrow keys
Ch.12

Keyboards

  • Consider a device we know a lot about
      ...what can we learn about device design issues from it?
  • What do we know: left handed typists?
  • Keyboard history
  • Keyboard design
  • Fn keys
    • types
    • cursor keys
    • grouping/labelling
--

Error messages & Color

  • Errors due to
    • lack of knowledge (what to do??)
    • incorrect understanding (what to do??)
    • inadvertent slips (what to do??)
  • Errors lead to feelings of ....??
  • What type of use makes errors??
  • In what situations??
  • Prevent Errors
    User's make lots of mistakes! (30%?)
    • Constructive error msgs
    • Undo, Cancel
    • Avoid "modes"
    • Consistency
    • Provide feedback
    • Reduce typing
    • Reduce ambiguity
    • Reduce memory load
    • Avoid distractions.
    • Require confirmation.
    • Help with "standard forms" (e.g., date, SS#)
    • Reinforce Conceptual Model
    • Make computers/people do what each does better!

  • Error messages
    • guidelines for error msgs
      • clear, precise, soothing, helpful
        -- i.e., what does the user need?
      • specificity (what, where) (mark error)
      • guidance (how to fix)
          -- might need to describe the "rule" being violated
      • tone (be positive, not alarmist)
      • good language (based on TA&UA)
      • user centered: user in control
        -- e.g., avoid imperatives
        -- e.g., variable verbosity
      • format (not all caps)(indicate error msg type)
      • placement (standard place)(near error)
    • when to present (disturbing?)(after closure??)
        (N.B. The memory release sense of "closure")
    • quality control (guidelines/standards)(usability tests)
    • avoid anthropomorphism (system isn't a person)
    • analyse error frequencies & distribution!

  • Color
    • intro: color examples and confusions (slides)
    • uses for color
      -- emphasis, warning, grouping, distinctions, attractiveness
    • color wheels
    • color schemes
    • color deficiency / blindness
    • Color pairs
      -- Red and Blue
      -- Red and Red?
      -- Red and Green
      -- Color in context
    • Grouping methods -- line, white space, color, shape.
    • Contrast for readability
      • use black with light colors, and white with dark colors.
      • color/color contrasts can be increased by adding white to make a tint, or adding black to make a shade.
    • color meanings
      e.g., Red for {heat, anger, power, danger, emotion, importance}
      or other meanings (Red)
    • use of color -- Guidelines
    • Asian Color Symbolism (cultural impact)
        Red: Happiness, marriage, prosperity
        Pink: Marriage
        Yellow: Against evil, for the dead, geomantic blessings
        Green: Eternity, family, harmony, health, peace, posterity
        Blue: Self-cultivation, wealth
        Purple: Wealth
        White: Children, marriage, mourning, peace, purity, ...
        Gold: Strength, wealth
        Gray: Helpful people, travel
        Black: Career, evil influences, knowledge, mourning, penance, ...
Ch.3, 9, 13, 16


... plus a healthy dose of Dilbert.


------------------------------------------
http://www.cs.wpi.edu/~dcb/courses/CS3041/the-story.html


[WPI] [CS] [CS3041]

dcb at cs wpi edu / Fri Sep 30 12:57:38 EDT 2011