1. Human-Computer Interaction and Prototype Demos Session 8 INFM 718N Web-Enabled Databases

2. Agenda HCI Team meetings Prototype demos

3. 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) Business rules Interaction Design Interface Design Relational normalization Structured programming Software patterns Object-oriented design Functional decomposition

4. Human-Computer Communication Task System Mental ModelsSight Sound Hands Voice TaskUser Software ModelsKeyboard Mouse Display Speaker Human 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. 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]

9. 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]

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

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

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. 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

22. 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)

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

24. Form-Based Query Specification (Melvyl) Credit: Marti Hearst

25. Form-based Query Specification (Infoseek) Credit: Marti Hearst

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 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?