HumanComputer Interaction and Prototype Demos

1
Human-Computer Interactionand Prototype Demos

• Session 8
• INFM 718N
• Web-Enabled Databases

2
Agenda

• HCI
• Team meetings
• Prototype demos

3

• Relational normalization
• Structured programming
• Software patterns
• Object-oriented design
• Functional decomposition

Client Hardware
Web Browser
Database
Server Hardware
4
Human-Computer Communication
Human
Mental Models
Sight Sound
System
Task
Hands Voice
Software Models
Keyboard Mouse
Task
User
Display Speaker
Computer
5
Mental Models

• How the user thinks the machine works
• What actions can be taken?
• What results are expected from an action?
• How should system output be interpreted?
• Mental models exist at many levels
• Hardware/operating system/network
• Application programs
• Information resources

6
Interaction Design

• Play to the strengths of machine and human
• Place the locus of control with the user
• Make it easy to do the right thing
• Support multiple interaction styles

7
Strengths

• Machine
• Speed
• Storage
• Repeatability
• Human
• Initiative
• Flexibility
• Recognition

8
Taylors Information Needs

• Visceral
• What you really want to know
• Conscious
• What you recognize that you want to know
• Formalized
• How you articulate what you want to know
• Compromised
• How you express what you want to know to a system

Taylor 68
9
Belkins ASK model

• Users are concerned with a problem
• But do not clearly understand
• the problem itself
• the information need to solve the problem
• ? Anomalous State of
  Knowledge
• Need clarification process to form a query

Belkin 80, Belkin, Oddy, Brooks 82
10
Query Formulation Interaction Styles

• Command Language
• Form Fill-in
• Menu Selection
• Direct Manipulation
• Natural Language

Credit Marti Hearst
11
WIMP Interfaces

• Windows
• Spatial context
• Icons
• Direct manipulation
• Menus
• Hierarchy
• Pointing devices
• Spatial interaction

12
GUI Components

• Windows (and panels)
• Resize, drag, iconify, scroll, destroy
• Selectors
• Menu bars, pulldown lists
• Buttons
• Labeled buttons, radio buttons, checkboxes
• Icons
• Text, images

13
Direct Manipulation

• Select a metaphor
• Desktop, CD player, map,
• Use icons to represent conceptual objects
• Watch out for cultural differences
• Manipulate those objects
• Select (e.g., left click, right click, double
  click)
• Move (e.g., drag and drop)

14
Menus

• Conserve screen space by hiding functions
• Menu bar, pop-up
• Can hierarchically structured
• By applications logic
• By convention (e.g., where is the print
  function?)
• Tradeoff between breadth and depth
• Too deep ? can become hard to find things
• Too broad ? becomes direct manipulation

15
Dynamic Queries

• What to do when menus become too deep?
• Merge keyboard and direct manipulation
• Select menu items by typing part of a word
• After each letter, update the menu
• Once the word is displayed, user can click on it
• Example Google Suggest

16
Uses of Result Sets

• Find the answer to a question
• Learn what you are really looking for
• Learn things that can yield improved the queries
• Learn about query language through probing
• Learn that what you are looking for doesnt exist

17
Display Modalities

• Graphical
• 1-D vs. 2-D vs. 3-D vs. immersive
• Depicting objects
• Size, color, orientation, motion, mouseover
• Coupled views
• Jump vs. pan/zoom/fisheye
• Spoken
• Auditory

18
Color

• Design for monochrome displays
• Provides assured access for color blind users
• Add muted colors where they help
• Useful for rapid recognition of categories
• Limit to 4 colors per screen (7 per application)
• Pay attention to readability
• Similar colors look different on another
  display
• Different systems may have different defaults

19
Size

• Dont make icons too small
• Fitts Law Time f(distance, size)
• Size can be used to illustrate quantity
• Scale size coding by at least 1.5
• No more than 4 font sizes

20
Animation

• Drill down
• Mouseover tool tips, menu expansion
• Illustration
• Change over time, icon behavior (on mouseover)
• Display space reuse
• Ticker tape, slide show
• Visible transitions
• 3-D visualization
• E-archivarius demo
• Attention management (once!)

21
Bens Seamless Interface Principles

• Informative feedback
• Easy reversal
• User in control
• Anticipatable outcomes
• Explainable results
• Browsable content
• Limited working memory load
• Query context
• Path suspension
• Alternatives for novices and experts
• Scaffolding

22
Dougs Synergistic Interaction Principles

• Interdependence with process
• Co-design with search strategy
• Importance of response time
• System initiative
• Guided process
• Exposing the structure of knowledge
• Support for reasoning
• Meaningful dimensions
• Representation of uncertainty
• Synergy between querying and browsing
• Strength of language
• Easily learned
• Familiar metaphors (timelines, ranked lists, maps)

23
Things That Help

• Show the query in the selection interface
• It provides context for the display
• Explain what the system has done
• It is hard to control a tool you dont understand
• Complement what the system has done
• Users add value by doing things the system cant
• Expose the information users need to do this

24
Form-Based Query Specification (Melvyl)
Credit Marti Hearst
25
Form-based Query Specification (Infoseek)
Credit Marti Hearst
26
(No Transcript)
27
(No Transcript)
28
Starfield
29
Constructing Starfield Displays

• Two attributes determine the position
• Can be dynamically selected from a list
• Numeric position attributes work best
• Date, length, rating,
• Other attributes can affect the display
• Displayed as color, size, shape, orientation,
• Each point can represent a cluster

30
Dynamic Queries

• IVEE/Spotfire/Filmfinder (Ahlberg Shneiderman
  93)

31
Putting It All Together

• http//www.philipglass.com/

32
Graphical Design Critique

• Select any 3 GUIs you know and can use here
• e.g., Windows XP, Google, USMAI catalog
• Work in in groups of 3 to critique each
• Using IBM design guidelines
• http//www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/
  6
• What are the 3 best features of each?
• What are the 3 principal weaknesses of each?