beyond simple screen design - university of calgary in...

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


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


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


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


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)


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


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


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

>> >> > > >


Sheelagh Carpendale

Shape

Sheelagh Carpendale

Visual Variable: Valueselective

associative

quantitative

order

length• theoretically infinite but practically limited• association and selection ~ < 7 and distinction ~ 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


Sheelagh Carpendale

Encoding

Common advice says use a rainbow scale- Marcus, Murch, Healey- problems with rainbows

Sheelagh Carpendale


Sheelagh Carpendale

Sheelagh Carpendale


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


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


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


Sheelagh Carpendale

Deaths byCholera

Dr John Snow1854

Sheelagh Carpendale

1864 Exports of French Wine

E. Tufte “Visual Display of Quantitative Information” p 25,


Sheelagh Carpendale

Telling a story: Napolean's march to Moscowby Charles Minard

Sheelagh Carpendale

Data DensityNew York Weather History• 181 numbers/sq inch


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


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



0

510

15

20

2530

35

4045

50

55

6065

70



Ford

GMPontiacToyota

Sheelagh Carpendale

Small MultiplesLearn once

Invite comparisons


Sheelagh Carpendale

Small Multiples: Showing Time and Change

Sheelagh Carpendale

Small Multiples: Showing Time and Change


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


Sheelagh Carpendale

Sheelagh Carpendale


Sheelagh Carpendale

Main view in foreground

Overview in background

Sheelagh Carpendale

Detail-in-Context


Sheelagh Carpendale

Elastic Presentation

Sheelagh Carpendale

Data MountainRobertson / Czerwinski / Larson / Robbins / Thiel / van DantzichData Mountain: Using Spatial Memory for Document ManagementProc ACM UIST’98


Sheelagh Carpendale


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

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


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:



Sheelagh Carpendale

Case study: Concept mapping

Sheelagh Carpendale


Sheelagh Carpendale

Sheelagh Carpendale

Main view in foreground

Overview in background


Sheelagh Carpendale

Detail-in-Context

Sheelagh Carpendale

Elastic Presentation


Sheelagh Carpendale


Sheelagh Carpendale



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


Sheelagh Carpendale


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


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:


Sheelagh Carpendale

MetaphorsPervade excellent interfaces

spreadsheet (actuary sheet)

games (literal world)


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


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


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?


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


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


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?


Sheelagh Carpendale

Which folder has the most documents?right menu+ properties

Sheelagh Carpendale

Where am I?


Sheelagh Carpendale

Where am I?

Sheelagh Carpendale

What do I have to do?


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)


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


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/


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/


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


Sheelagh Carpendale

HyperbolicLens

Xerox Parc/Inxight

Sheelagh Carpendale

Hyperbolic Lens


Sheelagh Carpendale

Games

Sheelagh Carpendale

Direct manipulationRepresentation directly affects what can be directly manipulated


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


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

beyond simple screen design - university of calgary in...

Documents