Title: HumanComputer Interaction and Prototype Demos
1Human-Computer Interactionand Prototype Demos
- Session 8
- INFM 718N
- Web-Enabled Databases
2Agenda
- HCI
- Team meetings
- Prototype demos
3- Relational normalization
- Structured programming
- Software patterns
- Object-oriented design
- Functional decomposition
Client Hardware
Web Browser
Database
Server Hardware
4Human-Computer Communication
Human
Mental Models
Sight Sound
System
Task
Hands Voice
Software Models
Keyboard Mouse
Task
User
Display Speaker
Computer
5Mental 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
6Interaction 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
7Strengths
- Machine
- Speed
- Storage
- Repeatability
- Human
- Initiative
- Flexibility
- Recognition
8Taylors 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
9Belkins 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
10Query Formulation Interaction Styles
- Command Language
- Form Fill-in
- Menu Selection
- Direct Manipulation
- Natural Language
Credit Marti Hearst
11WIMP Interfaces
- Windows
- Spatial context
- Icons
- Direct manipulation
- Menus
- Hierarchy
- Pointing devices
- Spatial interaction
12GUI Components
- Windows (and panels)
- Resize, drag, iconify, scroll, destroy
- Selectors
- Menu bars, pulldown lists
- Buttons
- Labeled buttons, radio buttons, checkboxes
- Icons
- Text, images
13Direct 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)
14Menus
- 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
15Dynamic 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
16Uses 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
17Display 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
18Color
- 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
19Size
- 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
20Animation
- 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!)
21Bens 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
22Dougs 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)
23Things 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
24Form-Based Query Specification (Melvyl)
Credit Marti Hearst
25Form-based Query Specification (Infoseek)
Credit Marti Hearst
26(No Transcript)
27(No Transcript)
28Starfield
29Constructing 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
30Dynamic Queries
- IVEE/Spotfire/Filmfinder (Ahlberg Shneiderman
93)
31Putting It All Together
- http//www.philipglass.com/
32Graphical 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?