12. ambient information visualization peripheral display of … · 2020-04-11 · – display few...

LMU München – Medieninformatik – Andreas Butz – Informationsvisualisierung – WS2011/12 Folie

12. Ambient Information VisualizationPeripheral display of information

Vorlesung „Informationsvisualisierung”Prof. Dr. Andreas Butz, WS 2011/12Konzept und Basis für Folien: Thorsten Büring

1


Outline

• Ambient Information Visualization

• Show cases• Taxonomy

• Organizational stuff

2


InfoVis vs Ambient InfoVis• Traditional Information Visualization

–„The use of computer-supported, interactive visual representations of abstract data to amplify cognition“ (Card et al. 1998)

–Compress complex high-dimensional data while preserving a maximum of information

–Scale to large amounts of data–Targeting work places of expert users (e.g. business

analyst, chemists, ...)–Systems require to be in the focus of attention –Used for longer time periods

3


InfoVis vs Ambient InfoVis• Ambient Information Visualization

– Usually low level of interaction (if any)– Abstract summary of (often real-time) non-critical information bits (e.g.,

current stock price, weather forecast)– Embedded into the (physical or virtual) environment– Based on peripheral awareness - users can and should focus on their

primary tasks– Usually non-distracting update of the visualization– Pre-attentive processing - users gather the information provided at a

glance– Often artistic and aesthetic objectives

• Often used as synonyms: calm computing, ambient displays, peripheral displays, notification systems

• Works range from non-interactive physical informative art to interactive screen-based peripheral display of notification data

4


Informative Art• Dangling string by artist Natalie

Jeremijenko– 2.5m long plastic string hanging from

the ceiling and providing information about network traffic

– String is attached to a small electric motor connected to a nearby Ethernet cable

– A busy network causes a madly whirling string with a characteristic noise

– A quiet network causes the string to only twitch occasionally

– http://sandbox.xerox.com/hypertext/weiser/calmtech/calmtech.htm

• Smoker‘s lamp by Galerie Quang– Smoke sensors– Light turns red by the exhalations of the

cigarette smokers nearby

5

http://sandbox.xerox.com/hypertext/weiser/calmtech/calmtech.htm





Ambient Orb + Umbrella

• Glass lamp showing stock market trends, weather forecast, local traffic via color encoding

• Umbrella handle showing weather forecast

• http://www.ambientdevices.com

6

http://www.ambientdevices.com/cat/orb/orborder.html

http://www.ambientdevices.com/cat/orb/orborder.html


More ambient concepts

• Conceptual ambient displays presented by David Rose in his keynote talk at the Ambient Information Systems Workshop (Pervasive 2007)

• Source: http://infosthetics.com/archives/2007/05/ambient_devices_keynote_talk_david_rose.html

• Google clock– Integrates with Google calendar– Shows appointments of the day– Background-color changes from blue over yellow to orange

to alert people to the beginning & end of events.

• Wallet– Notifications of special offers– State of your credit card accounts (?)– Not sure I want that information...

7

http://infosthetics.com/archives/2007/05/ambient_devices_keynote_talk_david_rose.html





Ambient Room

• Ishii et al. 1998• Physical architectural space to serve as

an interface between humans and digital informations

• Display multiple sources of information in the background of awareness

• Humans can monitor theses sources concurrently

• Example mappings– Activity level of distant person / animal shown

as water ripples projected to the ceiling (water lamp)

– Network traffic represented by different levels of vehicle noise - played on demand by uncorking a bottle

8


Bus Mobile

• Mankoff 2003• Provides information about bus lines

approaching a bus stop• Busses are represented by paper tokens

labelled with bus numbers• Tokens hang from a „white screen“ - a bag• A bus remains out of sight under the white

screen until it is less than 25 minutes away from the bus stop

• Then it moves down to the lowest possible depth in order to start its “approach“

9


Informative Art

• Holmquist & Skog 2003• Borrows the styles of modern artists to

encode information• Example 1: weather display inspired by Piet

Mondriaan• Each colored square represents a city

– Top row, from left to right: Los Angeles, Göteborg, Tokyo

– Bottom row: Rio de Janeiro, Cape Town, Sydney

• Size of the square: temperature (the bigger the hotter)

• Color of the square: current weather condition, yellow: sunny, red: cloudy, blue: rain

10

June 2001

December 2001


Informative Art• Example 2: soup clock / egg-timer inspired by Andy Warhol• Two flavors of Campbell soup can: asparagus soup (yellow) and

tomato soup (red)• When starting the clock, all cans are yellow• While time passes by the asparagus cans are more and more

replaced by red tomato soup cans

11


Digital Family Portrait

• Mynatt et al. 2001• Provides qualitative visualizations of a family member’s

daily life • Attempts to capture the observations that would naturally

occur to someone living next door or in the same home• Four sides of the frame map to four variables

– Events, e.g. planned and unplanned events, special occasions– Relationships, e.g. phone calls, letters written etc.– Activities: physical movement– Health: eat healthy, get exercise etc.

12


Digital Family Portrait

• Each side has 3 layers of time represented by 3 bands– Inner band: the current day– Middle band: average of previous three days (before today)– Outermost band: average of previous seven days

• Redundant time encodings: size of icons, color shading• Each variable has 10 levels of measurement• Represented by density of icons• Different icon styles matching people‘s gender and age• Field trial with web-based portrait and manual

measuring• Result: too complex design, misinterpretation of

encoded information, but: users reacted very positive to the idea of a dynamic picture frame

• Redesign reducing the information load

13


The Wherebouts Clock• [Sellen et al. CHI 2006], prototype!• Displays where all family members

currently are• Clock metaphor:

– positioned in a useful, visible place– broadcasts info to everybody– only visible in the home– coarse grained info at a glance

• a person is either home, at school/work, or „out“ without further details

• Technical basis: cell phone data– sends SMS when entering/leaving a zone– user can add text if needed

14


InfoCanvas

• Miller & Stasko 2003• Abstract pictorial representation of

awareness information • Presented as a painting hung on a

wall or a picture frame set on a desk • Highly customizable display: the

user maps each element of a scene to an information source

• Individual mappings also allow for privacy

15


Scope• Dantzich et al. 2002, MS Research• Glanceable notification summarizer• Shows notifications from e-mail, task manager,

information alerts, and appointments• Circular radar-like screen divided into sectors

that group different kinds of notifications• The more urgent a notification is, the more it

moves to the center• Additional visual attributes of icons are used to

encode further notification properties• Users can magnify areas and drill down on

items

16


Sideshow

• Cadiz et al. 2002, MS Research• Sidebar on the screen• Shows weather, traffic, stock market,

presence, project status, etc.• Provides additional alert windows• Allows for information drill-down

17


Widget and Feed Collections• Provides awareness of information• Is this still ambient information visualization?

18


Taxonomy of Ambient InfoVis• Pousman & Stasko 2006• Based on 19 systems• Design Dimensions

–Information capacity–Notification level–Representational fidelity–Aesthetic emphasis

• Design Patterns–Symbolic sculptural displays–Multiple information consolidator archetype– Information monitor display archetype–High-throughput textual display archetype

19


Information Capacity• Number of information elements

that are displayed• Information capacity can be

increased by devoting more space for visualizing information and / or by transitioning through a set of views over time (e.g. automatic slide show, scrolling)

• Problem: too many information sources decrease the „view at a glance“ objective

• Observation– Systems with low information capacity

are typically physical displays– Systems with high information capacity

are typically screen-based

20


Notification Level• Degree to which system alerts

are meant to interrupt a user– Demand attention (e.g. system dialog

window)– Interrupt (e.g. alarm)– Make aware (e.g. flashing)– Change blind (see lecture on

perception)– User poll (user receives information

on-demand, e.g. Apple Dashboard, My Yahoo)

• In adherence to the objective of peripheral awareness most systems fall into the „Change blind“ and „Make aware categories“

21


• Degree of concreteness / abstractness of information display– Indexical (concrete): photographs,

measuring instruments, maps, descriptive text segments

– Iconic: drawings, doodles, caricatures– Iconic: metaphors– Symbolic: language symbols (letters and

numbers)– Symbolic: abstract symbols

• Systems marked with an * are present in more than one category

• Systems featuring physical displays usually focus on abstract symbols

22

Representational Fidelity


Aesthetic Emphasis• Degree to which the

system designers focussed on aesthetic considerations (very subjective)

• Does not / cannot measure how successful the designers were at doing so

• Most systems have medium to high degrees of aesthetic emphasis

23


Design Patterns• Clustering in PCP (emphasized by color) remain

four main archetypes of ambient InfoVis systems

24


Design Patterns

• Symbolic sculptural displays– Display few information elements - often a single

element– Abstract information representation, often sculptural– Intended to be decorative objects - highly aesthetic– Examples: Family Portrait, ambient orb, dangling

string

• Multiple information consolidator archetype– Display many individual information elements in a

consolidated manner– Typically screen-based– Make users aware of changes, often through blinking

of elements– Reasonably decorative for the benefit of customization

and information capacity– Examples: InfoCanvas

25


Design Patterns• Information monitor display archetype

– Peripheral part of a user‘s computer desktop– Visualize multiple sources of information,

often via visual metaphors– Offer multiple notification mechanisms of

different strengths– Achieve aesthetics but it is not their main focus– Example: Sideshow

• High-throughput textual display archetype– Represent voluminous information by

using text and icons– No interruption-level notification– Focus on information conveyance– Example: My Yahoo!

26


The End

27


Final exam• 7.2. (in a week), 10:00-12:00• registration until 3.2.• Hörsaal B 138 in Theresienstr. 39

• open book–can use the script (slide printouts and own notes)–can use a (printed) dictionary if needed–must not use anything with internet access or which

computes• except a pocket calculator!

–bring ID and student ID

28

12. ambient information visualization peripheral display of … · 2020-04-11 · – display few...

Documents