View
11
Download
0
Category
Preview:
Citation preview
Beyond Simple Screen Design 1
Sheelagh Carpendale
Beyond Simple Screen Design
Characteristics of good representationsBertin’s Visual variables: creating visual representations
Tufte’s guidelines: assessing visual representations Navigation issues: detail & context, querying
Metaphor: use and misuse
Sheelagh Carpendale
RepresentationsGood representations• captures essential elements of the event / world• deliberately leaves out / mutes the irrelevant• appropriate for the person and their interpretation• appropriate for the task, enhancing judgment ability
How many buffalo?
# Buffalo
# Adults # calfs
# Buffalo
8 4
Beyond Simple Screen Design 2
Sheelagh Carpendale
RepresentationA representation is
- a formal system or mapping by which the information can be specified(D. Marr)- a sign system in that it stands for something other than its self.
for example: the number thirty-four or the buffalo exampledecimal: 34,binary: 100010,roman: XXXIV
different representations reveal different aspects of the informationdecimal: counting & information about powers of 10,binary: counting & information about powers of 2,roman: counting
presentationhow the representation is placed or organized on the screen
34, 34
Sheelagh Carpendale
Mayan Numerals one to nineteen
Beyond Simple Screen Design 3
Sheelagh Carpendale
Egyptian Numerals
Sheelagh Carpendale
RepresentationsSolving a problem simply means representing it so as to make the solutiontransparent … (Simon, 1981)
Good representations• allow people to find relevant information
- information may be present but hard to find
• allow people to compute desired conclusions- computations may be difficult or “for free” depending on representations
Beyond Simple Screen Design 4
Sheelagh Carpendale
When do I take my drugs?Note: 10 - 30% error rate in taking pills, same for pillbox organizers
Inderal -1 tablet 3 times a dayLanoxin -1 tablet every a.m.Carafate - 1 tablet before meals and at bedtimeZantac - 1 tablet every 12 hours (twice a day)Quinag - 1 tablet 4 times a dayCouma - 1 tablet a day
Breakfast Lunch Dinner BedtimeLanoxin OInderal O O O OQuinag O O O O Carafate O O O O Zantac O O Couma O
Organized by both time of day and by drug
Breakfast Lunch Dinner BedtimeLanoxinInderal Inderal Inderal Inderal Quinag Quinag Quinag Quinag
Carafate Carafate Carafate Carafate Zantac Zantac
Couma
Sheelagh Carpendale
Which is the best flight?
depart arriveAC 117 Vancouver - Calgary 7:00 9:00Cdn 321 Vancouver - Calgary 9:00 12:00Cdn 355 Calgary - Montreal 13:30 19:30AC 123 Calgary - Toronto 12:30 16:30AC 123 Toronto - Montreal 16:45 17:30*time zone: +1 van-cal, +2 cal-tor, mtl
length, stop-overs , switches...
7 9 11 13 15 17
10 12 14 16 18 20
Vancouver
8 10 12 14 16 18
AC 117 Cdn 321
Cdn 355AC 123
Calgary
Toronto
Montreal
Beyond Simple Screen Design 5
Sheelagh Carpendale
Which representation is best?depends heavily on task
What is precise value?
How does the performancenow compared to its peak?
How does performancechange over time?
Sheelagh Carpendale
Creating Visual Representations
Where does one start?
with marks! • for us, pixels?
Visual Variables: how can we vary marks?• by where we place them• by how we place them (Bertin calls this ‘implantation’)• by their visual characteristics (Bertin calls these retinal variables)
Jacques Bertin,Semiology of Graphics: Diagrams, Networks, Maps.Translated by W. J. Berg. University of Wisconsin Press 1983 (in French 1967)
Beyond Simple Screen Design 6
Sheelagh Carpendale
VisualVariables
Sheelagh Carpendale
Visual VariablesAttributes• position
- changes in the x, y (z) location
• size- change in length, area or repetition
• shape- infinite number of shapes
• value- changes from light to dark
• orientation- changes in alignment
• colour- changes in hue at a given value
• texture- variation in pattern
• motion
Beyond Simple Screen Design 7
Sheelagh Carpendale
Visual VariablesCharacteristics of visual variables can be
• selectiveis a change in this variable enough to allow us to select it from a group?
• associativeis a change in this variable enough to allow us to perceive them as a group?
• quantitativeis there a numerical reading obtainable from changes in this variable?
• orderare changes in this variable perceived as ordered?
• lengthacross how many changes in this variable are distinctions perceptible?
Sheelagh Carpendale
Visual Variable: Positionselective
associative
quantitative
order
length
100
0 100
Beyond Simple Screen Design 8
Sheelagh Carpendale
selective
associative
quantitative
order
length• theoretically infinite but practically limited• association and selection ~ 5 and distinction ~ 20
Visual Variable: Size
> >> > > >
=4 X ?
Sheelagh Carpendale
Selective
associative
quantitative
order
length - infinite variation
Visual Variable: Shape
>> >> > > >
Beyond Simple Screen Design 9
Sheelagh Carpendale
Shape
Sheelagh Carpendale
Visual Variable: Valueselective
associative
quantitative
order
length• theoretically infinite but practically limited• association and selection ~ < 7 and distinction ~ 10
< < < < < <
Beyond Simple Screen Design 10
Sheelagh Carpendale
Visual Variable: ColourSelective
associative
quantitative
order
length• theoretically infinite but practically limited• association and selection ~ < 7 and distinction ~ 20
> > > > > > >>
Sheelagh Carpendale
Colour
Beyond Simple Screen Design 11
Sheelagh Carpendale
Encoding
Common advice says use a rainbow scale- Marcus, Murch, Healey- problems with rainbows
Sheelagh Carpendale
Beyond Simple Screen Design 12
Sheelagh Carpendale
Sheelagh Carpendale
Beyond Simple Screen Design 13
Sheelagh Carpendale
Visual Variable: Orientationselective
associative
quantitative
order
length• ~5 in 2D; ? in 3D
< < < < < < <?
Sheelagh Carpendale
Visual Variable: TextureSelective
associative
quantitative
order
length
> > > >
• theoretically infinite
Beyond Simple Screen Design 14
Sheelagh Carpendale
Textures
Sheelagh Carpendale
Visual Variable: Motionselective - motion is one of our most powerful attention grabbers
associative - moving in unison groups objects effectively
quantitative - subjective perception
order -
length - distinguishable types of motion??
Beyond Simple Screen Design 15
Sheelagh Carpendale
Motion
Sheelagh Carpendale
Anscombe’s Quartet
N: 11.0mean X’s : 9.0mean Y’s : 7.5standard error of slope estimate: 0.1sum of squares: 110.0regression sum of squares: 27.5residual sum of squares of Y: 13.8correlation coefficient: 0.8r squared: 0.7regression line: Y=3+0.5X
Graphics Reveal the Data
Beyond Simple Screen Design 16
Sheelagh Carpendale
Deaths byCholera
Dr John Snow1854
Sheelagh Carpendale
1864 Exports of French Wine
E. Tufte “Visual Display of Quantitative Information” p 25,
Beyond Simple Screen Design 17
Sheelagh Carpendale
Telling a story: Napolean's march to Moscowby Charles Minard
Sheelagh Carpendale
Data DensityNew York Weather History• 181 numbers/sq inch
Beyond Simple Screen Design 18
Sheelagh Carpendale
Chart Junk: A common errorInformation visualization is not just pretty graphics• graphical re-design by amateurs on computers gives us
- “fontitis,” “chart-junk,” etc.
10
2
5
8
0
2
4
6
8
10Dear Sir ; This is a really exciting opportunity! Take advantage of it !
Sheelagh Carpendale
Chart Junk: Cotton production in Brazil, 1927
Beyond Simple Screen Design 19
Sheelagh Carpendale
Chart Junk: Removing deception and simplification
58
59
60
61
62
63
64
65
66
Ford GM Pontiac Toyota
Maintenance cost / year
0
510
1520
2530
3540
4550
55
6065
70
Ford GM Pontiac Toyota
Maintenance cost / year
0
510
15
20
2530
35
4045
50
55
6065
70
Ford GM Pontiac Toyota
Maintenance cost / year
Ford
GMPontiacToyota
Sheelagh Carpendale
Small MultiplesLearn once
Invite comparisons
Beyond Simple Screen Design 20
Sheelagh Carpendale
Small Multiples: Showing Time and Change
Sheelagh Carpendale
Small Multiples: Showing Time and Change
Beyond Simple Screen Design 21
Sheelagh Carpendale
Navigation: detail & context
Problems are intensified by the discrepancy between large informationspaces and the relatively small available screen space.• How to find a given piece of information?• How to move through the information?• How to gain overall perspective?
Sheelagh Carpendale
Case study: Concept mapping
Beyond Simple Screen Design 22
Sheelagh Carpendale
Sheelagh Carpendale
Beyond Simple Screen Design 23
Sheelagh Carpendale
Main view in foreground
Overview in background
Sheelagh Carpendale
Detail-in-Context
Beyond Simple Screen Design 24
Sheelagh Carpendale
Elastic Presentation
Sheelagh Carpendale
Data MountainRobertson / Czerwinski / Larson / Robbins / Thiel / van DantzichData Mountain: Using Spatial Memory for Document ManagementProc ACM UIST’98
Beyond Simple Screen Design 25
Sheelagh Carpendale
Data MountainRobertson / Czerwinski / Larson / Robbins / Thiel / van DantzichData Mountain: Using Spatial Memory for Document ManagementProc ACM UIST’98
Sheelagh Carpendale
Task Gallerywww.research.microsoft.com/ui/TaskGallery/
Beyond Simple Screen Design 26
Sheelagh Carpendale
Case Study: visual access for DNA sequencesDNA sequences consist of four kinds of nucleotides: A, C , G, T
- A G : purines- C T : pyrimidines
• Extremely long sequence information• Good visual access is difficult• A simple solution lists nucleotides as text• Uniform, hides distinguishing features
H-Curves defined by Hamori (1983)• A 3D graphical representation of five dimensions:
- Four individual nucleotides (A, C, G, T)- Position of nucleotide within sequence
Used effectively to:• identify interesting regions of DNA• compare sequences for homologies in structure/function
Sheelagh Carpendale
Case Study: visual access for DNA sequences
Drawing an H-Curve
Define four vectors torepresent nucleotides
G [-1 -1 -1]
G G [-1 -1 -1][-1 -1 -1]
A [ 1 -1 -1]
A A [ 1 -1 -1][ 1 -1 -1]
T [ 1 -1 1]
T T [ 1 -1 1][ 1 -1 1]
C [-1 -1 1]
C C [-1 -1 1][-1 -1 1]
String vectors togetheras each nucleotide isencountered
Beyond Simple Screen Design 27
Sheelagh Carpendale
Case Study: visual access for DNA sequences
H-Curve for ACT
(0,3,0)
(1,2,1)
(0,1,0)
(1,0,-1)
A box similar to the oneframing the entire sequenceis placed around thezoomed segment todistinguish it from theunzoomed segments:
Case Study: visual access for DNA sequences
Beyond Simple Screen Design 28
Sheelagh Carpendale
Case study: Concept mapping
Sheelagh Carpendale
Beyond Simple Screen Design 29
Sheelagh Carpendale
Sheelagh Carpendale
Main view in foreground
Overview in background
Beyond Simple Screen Design 30
Sheelagh Carpendale
Detail-in-Context
Sheelagh Carpendale
Elastic Presentation
Beyond Simple Screen Design 31
Sheelagh Carpendale
Data MountainRobertson / Czerwinski / Larson / Robbins / Thiel / van DantzichData Mountain: Using Spatial Memory for Document ManagementProc ACM UIST’98
Sheelagh Carpendale
Data MountainRobertson / Czerwinski / Larson / Robbins / Thiel / van DantzichData Mountain: Using Spatial Memory for Document ManagementProc ACM UIST’98
Beyond Simple Screen Design 32
Sheelagh Carpendale
Task Gallerywww.research.microsoft.com/ui/TaskGallery/
Sheelagh Carpendale
Case Study: visual access for DNA sequencesDNA sequences consist of four kinds of nucleotides: A, C , G, T
- A G : purines- C T : pyrimidines
• Extremely long sequence information• Good visual access is difficult• A simple solution lists nucleotides as text• Uniform, hides distinguishing features
H-Curves defined by Hamori (1983)• A 3D graphical representation of five dimensions:
- Four individual nucleotides (A, C, G, T)- Position of nucleotide within sequence
Used effectively to:• identify interesting regions of DNA• compare sequences for homologies in structure/function
Beyond Simple Screen Design 33
Sheelagh Carpendale
Case Study: visual access for DNA sequences
Drawing an H-Curve
Define four vectors torepresent nucleotides
G [-1 -1 -1]
G G [-1 -1 -1][-1 -1 -1]
A [ 1 -1 -1]
A A [ 1 -1 -1][ 1 -1 -1]
T [ 1 -1 1]
T T [ 1 -1 1][ 1 -1 1]
C [-1 -1 1]
C C [-1 -1 1][-1 -1 1]
String vectors togetheras each nucleotide isencountered
Sheelagh Carpendale
Case Study: visual access for DNA sequences
H-Curve for ACT
(0,3,0)
(1,2,1)
(0,1,0)
(1,0,-1)
Beyond Simple Screen Design 34
A box similar to the oneframing the entire sequenceis placed around thezoomed segment todistinguish it from theunzoomed segments:
Case Study: visual access for DNA sequences
Sheelagh Carpendale
MetaphorsPervade excellent interfaces
spreadsheet (actuary sheet)
games (literal world)
Beyond Simple Screen Design 35
Sheelagh Carpendale
Examples continued
Control Panels with familiar controls
Name:_______________ Address:_______________
City:_______________ Province:_______________
Postal Code:_______________
Forms
Hierarchical Folders
Sheelagh Carpendale
Example: A telephone database
Search for: Green
Result: S. GreenbergDept Computer ScienceUniversity of Calgary
Greenberg, S.Dept Computer ScienceUniversity of Calgary
Guttenburg, A.Harleck, P.
J-ST-Z
A-F
Find “Green”>S. Greenberg>Dept Computer Science>University of Calgary
Command systemno direct manipulation
Form metaphor:syntactic direct manipulation
Rolodex metaphor:full direct manipulation
Beyond Simple Screen Design 36
Sheelagh Carpendale
Phone list
List metaphor Rolodex metaphor
Sheelagh Carpendale
Interface MetaphorsDefinition of Metaphor• application of name or descriptive term to an object to which it is not
literally applicable
Purpose• function as natural models• leverages our knowledge of familiar, concrete objects/experiences to
understand abstract computer and task concepts
Problem• metaphor may portray inaccurate or naive conceptual model of the system
A presentation toolis like
a slide projector
Beyond Simple Screen Design 37
Sheelagh Carpendale
Creating Interface Metaphors (continued)Generating metaphors
• Use metaphors that matches user's conceptual taskdesktop metaphor for office workerspaintbrush metaphor for artists...
• Given a choice, choose the metaphor close to the way the system works
• Ensure emotional tone is appropriate to users- eg file deletion metaphors
trashcanblack holepaper shredderpit bull terriernuclear disposal unit...
Sheelagh Carpendale
Metaphors continuedEvaluating metaphors• consider probable consequences
- will metaphor restrict what people could actually do?eg strict file/folder hierarchy vs system allows links between directories
- will metaphor believe that people can do more than what is possible?eg agent-based systems, Eliza...
Evolve metaphors• is metaphor extensible to new features?• when is the metaphor no longer useful?
Beyond Simple Screen Design 38
Sheelagh Carpendale
Metaphors continuedCaveat• metaphors can be overdone!
Common pitfalls• overly literal
- unnecessary fidelity- excessive interactions
• overly cute- novelty quickly wears off
• overly restrictive- cannot move beyond
• mismatched- does not match user’s
task and/or thinking
Sheelagh Carpendale
Example: The Rooms Metaphor
Beyond Simple Screen Design 39
Sheelagh Carpendale
Example: TeamRooms
List of rooms
List of users
chat tool
shared whiteboard applets
Sheelagh Carpendale
Example: TeamRooms Metaphor implies:• persistent room artifacts• both synchronous and asynchronous activity• asynchronous communication by sticky notes attached to artifacts• “for free” standard tools• ability to bring in custom tools via (applets)• same place/different place activity• knowing who is around• trivial groupware connectivity• ...
Beyond Simple Screen Design 40
Sheelagh Carpendale
Misuses of Metaphors
Milltronics' Dolphin Plusa configuration package for industrial level and flow sensors
Sheelagh Carpendale
Navigation: queries
Levels of visual interpretation• questions introduced by a single element or a single correspondence
- locating items- interpreting an item - for yesterday, what was stock X?
• questions introduced by a group of elements- comparisons between two or more elements - for the last three days, what was
stock X’s movement?• questions introduced by the global context
- relating to their context- seeing trends, overall patterns - given the pattern since the company’s formation
what is stock X’s trend? Likely behaviour?
Beyond Simple Screen Design 41
Sheelagh Carpendale
Which folder has the most documents?right menu+ properties
Sheelagh Carpendale
Where am I?
Beyond Simple Screen Design 42
Sheelagh Carpendale
Where am I?
Sheelagh Carpendale
What do I have to do?
Beyond Simple Screen Design 43
Sheelagh Carpendale
Detailed navigationplus precision
General navigation plus orientation
Where am I?
Sheelagh Carpendale
Direct Engagement & Direct ManipulationDirect Engagement• the feeling of working directly on the task
Direct Manipulation• An interface that behaves as though the interaction was with a real-world
object rather than with an abstract system
Central ideas• visibility of the objects of interest• rapid, reversible, incremental actions• manipulation by pointing and moving• immediate and continuous display of results
Almost always based on a metaphor• mapped onto some facet of the real world task semantics)
Beyond Simple Screen Design 44
Sheelagh Carpendale
Direct EngagementXerox Star: pioneered in early '80s, copied by almost everyone• simulates desktop with icons
- in and out baskets- file folders and documents- calculators- printers- blank forms for letters and memos
• small number of generic actions applicable system wide- move, copy, delete, show properties, again, undo, help
eg same way to move text, documents, etc- property sheets
pop-up form, alterable by user
• What you see is what you get (WYSIWYG)
Sheelagh Carpendale
Xerox Star continuedStar's observers:• objects understood in terms of their visual characteristics
- affordances, constraints
• actions understood in terms of their effects on the screen- causality
• intuitively reasonable actions can be performed at any time- conceptual model
A subtle thing happens when everything is visible:the display becomes reality
Beyond Simple Screen Design 45
Sheelagh Carpendale
Object-Action vs Action-ObjectSelect object, then do action• interface emphasizes 'nouns' (visible objects) rather than 'verbs' (actions)
Advantages• closer to real world• modeless interaction• actions always within context of object
- inappropriate ones can be hidden• generic commands
- the same type of action can be performed on the object- eg drag ‘n drop:
folders filesparagraphstext
numbers…
my.doc
move
Sheelagh Carpendale
Dynamic Queries (Home Finder)
Shneiderman et alUniversity of Marylandhttp://www. cs.umd.edu/hcil /spotfire/
Beyond Simple Screen Design 46
Sheelagh Carpendale
HomeBay 481 Student Project (April, 2000)Rob Pearson, Kashama Willms and James Chisan
DynamicQueries
RadarOverview
Progressivedetails ondemand
Sheelagh Carpendale
Starfield Display
Ahlberg, University of Marylandhttp://www. cs.umd.edu/hcil /spotfire/
Beyond Simple Screen Design 47
Sheelagh Carpendale
PhotoFinderUniversity of MarylandHuman Computer Interaction Laboratoryhttp://www.cs.umd.edu/hcil/
Sheelagh Carpendale
Cone TreesRobertson / Mackinlay / CardCone Trees: Animated 3D Visualizations ofHierarchical Information. Proc ACM CHI'91
Beyond Simple Screen Design 48
Sheelagh Carpendale
HyperbolicLens
Xerox Parc/Inxight
Sheelagh Carpendale
Hyperbolic Lens
Beyond Simple Screen Design 49
Sheelagh Carpendale
Games
Sheelagh Carpendale
Direct manipulationRepresentation directly affects what can be directly manipulated
Beyond Simple Screen Design 50
Sheelagh Carpendale
Is direct manipulation the way to go?Some Disadvantages• Ill-suited for abstract operations
- spell-checker?
• Tedium- manually search large database vs query
• Task domain may not have adequate physical/visual metaphor
• Metaphor may be overly-restrictive
Solution• Most systems combine direct manipulation and abstractions
- word processor:WYSIWYG document (direct manipulation)buttons, menus, dialog boxes (abstractions, but direct manipulation “in thesmall”)
Sheelagh Carpendale
Conventional Applications: A Mix
Beyond Simple Screen Design 51
Sheelagh Carpendale
What you now knowGood Representations• captures essential elements of the event / world• deliberately leaves out / mutes the irrelevant• appropriate for the person, their task, and their interpretation
Visual Representation• Bertin’s visual variables• Tufte’s principles• Mantra: Overview first, zoom and filter, then details on demand• many techniques now available
Metaphors• uses our knowledge of the familiar and concrete to represent abstract concepts• need not be literal• has limitations that must be understood
Direct manipulation• visibility of the objects of interest• rapid, reversible, incremental actions• manipulation by pointing and moving• immediate and continuous display of results
These four components are the foundation of a true Visual Interface
Sheelagh Carpendale
Articulate:•who users are•their key tasks
User andtaskdescriptions
Goals:
Methods:
Products:
Brainstormdesigns
Taskcenteredsystemdesign
Participatorydesign
User-centereddesign
Evaluatetasks
Psychology ofeverydaythings
User involvement
Representation& metaphors
low fidelityprototypingmethods
Throw-awaypaperprototypes
Participatoryinteraction
Task scenariowalk-through
Refineddesigns
Graphicalscreendesign
Interfaceguidelines
Styleguides
high fidelityprototypingmethods
Testableprototypes
Usabilitytesting
Heuristicevaluation
Completeddesigns
Alpha/betasystems orcompletespecification
Fieldtesting
Interface Design and Usability Engineering
Recommended