Human-Computer Interaction and Prototype Demos

Human-Computer Interactionand Prototype Demos

Session 8

INFM 718N

Web-Enabled Databases

Agenda

• HCI

• Team meetings

• Prototype demos

Database

Server-side Programming

Interchange Language

Client-side Programming

Web Browser

Client Hardware

Server Hardware (PC, Unix)

(MySQL)

(PHP)

(HTML, XML)

(JavaScript)

(IE, Firefox)

(PC)

Bus

ines

sru

les

Inte

ract

ion

Des

ign

Inte

rfac

eD

esig

n

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

Human-Computer Communication

Task System

Mental Models SightSound

HandsVoice

Task User

Software Models KeyboardMouse

DisplaySpeaker

Human

Computer

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

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

Strengths

• Machine– Speed

– Storage

– Repeatability

• Human– Initiative

– Flexibility

– Recognition

Taylor’s 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]

Belkin’s 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]

Query Formulation Interaction Styles

• Command Language

• Form Fill-in

• Menu Selection

• Direct Manipulation

• Natural Language

Credit: Marti Hearst

WIMP Interfaces

• Windows– Spatial context

• Icons– Direct manipulation

• Menus– Hierarchy

• Pointing devices– Spatial interaction

GUI Components

• Windows (and panels)– Resize, drag, iconify, scroll, destroy

• Selectors – Menu bars, pulldown lists

• Buttons– Labeled buttons, radio buttons, checkboxes

• Icons– Text, images

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)

Menus• Conserve screen space by hiding functions

– Menu bar, pop-up

• Can hierarchically structured– By application’s 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

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

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 doesn’t exist

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

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

Size

• Don’t 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

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!)

Ben’s “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

Doug’s 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)

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 don’t understand

• Complement what the system has done– Users add value by doing things the system can’t– Expose the information users need to do this

Form-Based Query Specification (Melvyl)

Credit: Marti Hearst

Form-based Query Specification (Infoseek)

Credit: Marti Hearst

Starfield

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

Dynamic Queries:• IVEE/Spotfire/Filmfinder (Ahlberg &

Shneiderman 93)

Putting It All Together

• http://www.philipglass.com/

Graphical Design Critique

• Select any 3 GUI’s 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?