© anselm spoerri lecture 6 housekeeping –final project: proposals due two weeks human computer...
Post on 20-Dec-2015
220 Views
Preview:
TRANSCRIPT
© Anselm Spoerri
Lecture 6
Housekeeping– Final Project: Proposals due two weeks
Human Computer Interaction – Recap– Heuristic Evaluation Assignment Due Week 7
“User Interfaces and Visualization” – Review
Information Visualization – Toolbox
PerspectiveWall
ConeTree
© Anselm Spoerri
Human-Computer Interaction (HCI) - Recap
Define Target User Community– Identify Usage Profiles
Perform Task Analysis to ensure proper functionality – Define tasks and subtasks– Establish task frequencies of use – Matrix of users and tasks helpful
Select Interaction Styles– Direct manipulation – Menu selection – Form fillin– Command language – Natural language Blending of interaction styles need for diverse tasks and diverse users
Select Evaluation Measures– Time to learn – Speed of performance for key benchmarks – Rate and nature of common user errors – Retention over time– Subjective satisfaction: free-form comments and feedback
Create & Test Design Alternatives – Use a wide range of mock-ups
© Anselm Spoerri
Prototyping - Recap
© Anselm Spoerri
Recognize Diversity – Summary
Usage ProfilesNovice or First-Time Users
– Use familiar vocabulary and offer few choices
Knowledgeable Intermittent Users – Emphasize recognition instead of recall
Expert Frequent Users – Seek to get work done quickly Macros
Interaction StylesDirect Manipulation Novices Users
Menu Selection Novices and Intermittent Users
Form Fillin Intermittent and Expert Users
Command Language Expert Users
Natural Language Novices and Intermittent Users
© Anselm Spoerri
Nielsen's Ten Usability Heuristics - Summary
1. Visibility of System Status
2. System Matches Real World
3. User Control and Freedom
4. Consistency and Standards
5. Error Prevention
6. Recognition rather than Recall
7. Flexibility and Efficiency of Use
8. Aesthetic and Minimalist Design
9. Help users Recognize, Diagnose, and Recover from Errors
10. Help and Documentation
© Anselm Spoerri
Review: User-Centered Product Design
High Concept Ethnographic Observation
PrototypeAnticipated Usage ProfilesUse different Interaction Styles
Scenario Development
Participatory Design
Software Development Expert ReviewsHeuristic EvaluationGuidelines ReviewConsistency Inspection Cognitive WalkthroughFormal Usability Inspection
Usability Testing
Acceptance Testing
Product Release Surveys
Field Testing
© Anselm Spoerri
Eight Golden Rules of Interface Design - Recap
1. Strive for Consistency
2. Enable frequent users to use Shortcuts
3. Informative Feedback
4. Design Dialogs to Yield Closure
5. Offer Error Prevention & Simple Error Handling
6. Permit Easy Reversal of Actions
7. Support Internal Locus of Control
8. Reduce Short-term Memory Load
© Anselm Spoerri
User-Centered Design Methods
Heuristic Evaluation– Quick and cheap – Suitable for early use in usability engineering lifecycle– Evaluate compliance with recognized usability principles
(the "heuristics").– Three to five evaluators: more diminishing returns
Nielsen's Ten Usability Heuristics1. Visibility of system status 2. System matches the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10.Help and documentation
Find Flaws & Suggest Improvements
© Anselm Spoerri
How to conduct Heuristic Evaluation
Evaluator goes through the interface several times and inspects it
Interface = List of Heuristics?
Single individual will never be able to find all the usability problems.
Different people find different usability problems
Evaluation results Written Report
© Anselm Spoerri
Heuristic Evaluation Assignment
Conduct Heuristic Evaluation
Use Nielsen's 10 Heuristics and provided template
Write short report (4-5 pages)
Due Week 7
Publish Report online and send me URL
© Anselm Spoerri
User Interfaces and Visualization - by Marti Hearst
Users have Fuzzy Understanding of their Information Need
Information Access = Iterative Process
User Interface should help users
• Formulate Queries
• Select Information Sources
• Understand Search Results
• Track Progress of Search
© Anselm Spoerri
Shneiderman’s User Interface Principles
Offer Informative Feedback– Show relationship between query and documents retrieved– Show relationships among retrieved documents– Show relationships between retrieved documents and metadata
Reduce Working Memory Load – Browsable Information for
– Search starting points (sources or topic lists)– Suggestions of related terms or metadata
– Visual Search History: return to previous search strategies
Provide Interfaces for Novices & Experts – Good user interface design provides intuitive bridges between
the simple and the advanced interfaces.
© Anselm Spoerri
Information Access Process - Starting Points
Which collection / terms to choose?Vocabulary Problem
Search interfaces must provide good ways to get started
“Testing Water”– Users start out with very short queries,
inspect results, and then modify queries incrementally
Starting points– Lists – Overviews – Automated source selection
© Anselm Spoerri
Vector Space Retrieval
Document = Set of Words
Each Word = Dimension in Vector– After removing very common and rare words– Stemming (retriev*, inform*, visual*, interact*) = 4D vector
Each Word / Dimension Weighted based on Frequency “Inverse” = 1 / Frequency The less frequent, the greater the weight
Similarity of Documents = Angle between Vectors Two text passages similar if their vectors point in a similar direction
© Anselm Spoerri
List of Retrieved Documents
© Anselm Spoerri
Scatter/Gather - Automatically Derived Collection Overviews
Topic 87: Criminal Actions Against Officers of Failed Financial Institutions
© Anselm Spoerri
Document Visualization - Clustering
© Anselm Spoerri
Document Visualization – Kohonen Maps
© Anselm Spoerri
Document Visualization - ThemeView
© Anselm Spoerri
Query Specification
Shneiderman Interaction Styles: Command language, Form fillin, Menu selection, Direct manipulation, and Natural language.
Query Formulation– Fields– Phrases– Proximity– Stemming
© Anselm Spoerri
Boolean Queries
OR
AND
Coordination Problem: which operator to choose?
Most people find the basic Boolean syntax counter-intuitive. AND “implies” broadening (opposite true).
OR “implies” narrowing (opposite true).
© Anselm Spoerri
Boolean Queries – VQuery using Venn Diagrams
© Anselm Spoerri
Boolean Queries – InfoCrystal -
Interested in articles that mention “Visual” and “Information Retrieval.”
Further, “Query Language” or “Human Factors” need to be mentioned.
Boolean Query ?
© Anselm Spoerri
InfoCrystal Across Document Matching
Interested in articles that mention “Human Factors” or “Visual.”Further, they should mention “Query Language” or “Information Retrieval.”
How would you narrow this query?
© Anselm Spoerri
TileBars – Within Document Matching
© Anselm Spoerri
TileBars - What research is ongoing to prevent osteoporosis?
© Anselm Spoerri
TileBars – Within Context Highlighting
© Anselm Spoerri
Integrating Scanning, Selection, and Querying
Cat-a-Cone
− Better Representation of Category Space
− Compact Representation of Retrieved Documents
Cat-a-Cone = Cone Tree + WebBooks– Book Cover = Query responsible for producing retrieval results. – Book closed and selected, ConeTree shows categories within book pages. – User opens book, ConeTree shows categories on current page.
© Anselm Spoerri
WebBook and WebForager
Why “Book”? Familiar Metaphor? Structure of Data: next, prev, cluster, small
© Anselm Spoerri
Cat-a-Cone – Starting Search Discovering Categories
Contents of Entire Hierarchy can be overwhelming
© Anselm Spoerri
Cat-a-Cone – Expand Category
© Anselm Spoerri
Cat-a-Cone – Parts of hierarchy that (partially) match term
© Anselm Spoerri
Cat-a-Cone – Viewing Retrieved Documents
© Anselm Spoerri
Toward a InfoVis Toolbox – Problem Statement & Goal
Scientific Visualization – Show abstractions, but based on physical space
Information Visualization– Information does not have any obvious spatial mapping
Fundamental ProblemHow to map non–spatial abstractions into effective visual form?
GoalUse of computer-supported, interactive, visual representations of abstract data to amplify cognition
© Anselm Spoerri
Data Types, Data Sets and Marks
Date Types Quantitative (can perform arithmetics)
Ordinal (obeys ordering relations)
Nominal (equal or not equal to other values)
Marks– Points (position, color, size)
– Lines (location, length, width, color) – Areas (uniform / smoothed shading)
– Volumes (resolution, translucency)
Abstract Data Sets− Symbolic − Tabular− Networked − Hierarchical− Textual information
© Anselm Spoerri
Human Visual System – Recap
Visual System Detects CHANGES + PATTERNSLuminance Channel More Important than Color
Stages of Visual Processing1 Rapid Parallel Processing2 Slow Serial Goal-Directed Processing
Pre-Attentive Features – Position– Color– Simple Shape = orientation, size– Motion– Depth
Proximity Similarity Continuity
Symmetry Closure
Figure + Ground
Gestalt Law
Depth Cues − Occlusion− Relative Size− Motion Parallax− Binocular Disparity− Shape from Shading / Contour
© Anselm Spoerri
Ranking of Visual Properties for Different Data Types
QUANTITATIVE
PositionLengthAngleSlopeAreaVolumeDensityColor SaturationColor Hue
ORDINAL
PositionDensityColor SaturationColor HueTextureConnectionContainmentLengthAngle
NOMINAL
PositionColor HueTextureConnectionContainmentDensityColor SaturationShapeLength
© Anselm Spoerri
Information Visualization – “Toolbox”
Position
Size
Orientation
Texture
Shape
Color
Shading
Depth Cues
Surface
Motion
Stereo
Proximity
Similarity
Continuity
Connectedness
Closure
Containment
Direct Manipulation
Immediate Feedback
Linked Displays
Animate Shift of Focus
Dynamic Sliders
Semantic Zoom
Focus+Context
Details-on-Demand
Output Input
Maximize Data-Ink Ratio
Maximize Data Density
Minimize Lie factor
Perceptual Coding Interaction
Information Density
© Anselm Spoerri
Information Visualization – Design & Interaction
© Anselm Spoerri
Interaction – Mappings + Timings
Mapping Data to Visual Form
1. Variables Mapped to “Visual Display”
2. Variables Mapped to “Controls”
“Visual Display” and “Controls” Linked
Interaction Responsiveness“0.1” second
Perception of Motion Perception of Cause & Effect
“1.0” second Status Feedback
“10” seconds Point & click, parallel requests
© Anselm Spoerri
Information Visualization – Design & Interaction
© Anselm Spoerri
Perspective Wall
Fisheye Distortion to Increase Information Density
Download Video (30MB+ … will take a while)
or http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/
and right click on “PerspectiveWall.avi” and save
© Anselm Spoerri
PerspectiveWall
Position Yes
Size Yes
Orientation
Texture
Shape Yes
Color Yes
Shading
Depth Cues Yes
Surface Yes
Motion Yes
Stereo
Proximity Yes
Similarity Yes
Continuity
Connectedness
Closure
Containment Yes
Direct Manipulation Yes
Immediate Feedback Yes
Linked Displays Yes
Logarithmic Shift of Focus Yes
Dynamic Sliders Yes
Semantic Zoom
Focus+Context Yes
Details-on-Demand
Output Input
Perceptual Coding
Interaction
Data = Temporal / Linear
© Anselm Spoerri
ConeTree – Hierarchy Visualization
© Anselm Spoerri
ConeTree (cont.)
Download Video (30MB+ … will take a while)or http://www.scils.rutgers.edu/~aspoerri/Teaching/InfoVisResources/videos/ and right click on “ConeTree.avi” and save
© Anselm Spoerri
ConeTree (cont.)
© Anselm Spoerri
Hierarchy – Exponential Growth of Nodes
Levels
Base Width = BL - 1
Branching = 3
© Anselm Spoerri
ConeTree (cont.)
How to manage exponential growth of nodes? Use 3D to “linearize” problem – width fixed Use “logarithmic” animation of object or point of interest
to create “Object Constancy”
Time
Location
linear
Logarithmic IN / OUT
© Anselm Spoerri
ConeTree
Position Yes
Size Yes
Orientation
Texture Yes
Shape Yes
Color Yes
Shading Yes
Depth Cues Yes
Surface
Motion Yes
Stereo
Proximity Yes
Similarity Yes
Continuity
Connectedness Yes
Closure
Containment
Direct Manipulation Yes
Immediate Feedback Yes
Linked Displays Yes
Logarithmic Shift of Focus Yes
Dynamic Sliders
Semantic Zoom Yes
Focus+Context Yes
Details-on-Demand Yes
Output Input
Perceptual Coding
Interaction
Data = Hierarchy
top related