320 likes | 332 Views
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).
E N D
Human-Computer Interactionand 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) 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
Human-Computer Communication Human Mental Models Sight Sound System Task Hands Voice Software Models Keyboard Mouse Task User Display Speaker 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
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?