1 / 32

Human-Computer Interaction and Prototype Demos

Human-Computer Interaction and Prototype Demos. Session 8 INFM 718N Web-Enabled Databases. Agenda. HCI Team meetings Prototype demos. (PC). Interface Design. (IE, Firefox). Client-side Programming. (JavaScript). Interaction Design. Interchange Language. (HTML, XML).

chakra
Download Presentation

Human-Computer Interaction and Prototype Demos

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Agenda • HCI • Team meetings • Prototype demos

  3. (PC) Interface Design (IE, Firefox) Client-side Programming (JavaScript) Interaction Design Interchange Language (HTML, XML) Server-side Programming (PHP) Business rules (MySQL) (PC, Unix) • 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. 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

  26. Starfield

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

  28. Dynamic Queries: • IVEE/Spotfire/Filmfinder (Ahlberg & Shneiderman 93)

  29. Putting It All Together • http://www.philipglass.com/

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

More Related