Human-Computer Interaction and Prototype Demos
description
Transcript of Human-Computer Interaction and Prototype Demos
![Page 1: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/1.jpg)
Human-Computer Interactionand Prototype Demos
Session 8
INFM 718N
Web-Enabled Databases
![Page 2: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/2.jpg)
Agenda
• HCI
• Team meetings
• Prototype demos
![Page 3: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/3.jpg)
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
![Page 4: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/4.jpg)
Human-Computer Communication
Task System
Mental Models SightSound
HandsVoice
Task User
Software Models KeyboardMouse
DisplaySpeaker
Human
Computer
![Page 5: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/5.jpg)
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
![Page 6: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/6.jpg)
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
![Page 7: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/7.jpg)
Strengths
• Machine– Speed
– Storage
– Repeatability
• Human– Initiative
– Flexibility
– Recognition
![Page 8: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/8.jpg)
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]
![Page 9: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/9.jpg)
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]
![Page 10: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/10.jpg)
Query Formulation Interaction Styles
• Command Language
• Form Fill-in
• Menu Selection
• Direct Manipulation
• Natural Language
Credit: Marti Hearst
![Page 11: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/11.jpg)
WIMP Interfaces
• Windows– Spatial context
• Icons– Direct manipulation
• Menus– Hierarchy
• Pointing devices– Spatial interaction
![Page 12: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/12.jpg)
GUI Components
• Windows (and panels)– Resize, drag, iconify, scroll, destroy
• Selectors – Menu bars, pulldown lists
• Buttons– Labeled buttons, radio buttons, checkboxes
• Icons– Text, images
![Page 13: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/13.jpg)
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)
![Page 14: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/14.jpg)
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
![Page 15: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/15.jpg)
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
![Page 16: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/16.jpg)
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
![Page 17: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/17.jpg)
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
![Page 18: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/18.jpg)
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
![Page 19: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/19.jpg)
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
![Page 20: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/20.jpg)
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!)
![Page 21: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/21.jpg)
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
![Page 22: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/22.jpg)
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)
![Page 23: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/23.jpg)
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
![Page 24: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/24.jpg)
Form-Based Query Specification (Melvyl)
Credit: Marti Hearst
![Page 25: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/25.jpg)
Form-based Query Specification (Infoseek)
Credit: Marti Hearst
![Page 26: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/26.jpg)
![Page 27: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/27.jpg)
![Page 28: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/28.jpg)
Starfield
![Page 29: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/29.jpg)
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
![Page 30: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/30.jpg)
Dynamic Queries:• IVEE/Spotfire/Filmfinder (Ahlberg &
Shneiderman 93)
![Page 31: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/31.jpg)
Putting It All Together
• http://www.philipglass.com/
![Page 32: Human-Computer Interaction and Prototype Demos](https://reader035.fdocuments.in/reader035/viewer/2022081515/56814806550346895db536b4/html5/thumbnails/32.jpg)
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?