Information Aesthetics

INFORMATION AESTHETICS and how to make a living with it Moritz Stefaner Gründungscluster // Kunsthochschule Kassel // June 2, 2010

Background 1998 – 2002 Web designer 2002 – 2005 BSc Cognitive Science 2005 – 2007 MA Interface Design 2007 – 2009 Research assistant FH Potsdam 2004 – Freelance information visualizer working for Skype, World Economic Forum, Yahoo… Works exhibited at ars electronica, SIGGRAPH, … Nominated for the Design Award of the Federal Republic of Germany 2010

http://moritz.stefaner.eu

Designer Information Picture

User Picture Data Application Information Experience Algorithms Designer

http://queue.acm.org/detail.cfm?id=1805128

We feel ﬁne Jonathan Harris and Sep Kamvar | http://wefeelfine.org/

Feltron Annual Reports NICHOLAS FELTON http://feltron.com/index.php?/content/2008_annual_report/

Visualizations for Knight Capital Group Marius Watz http://www.flickr.com/photos/watz/sets/72157608197253021/

On the Origin of Species: The Preservation of Favoured Traces http://benfry.com/traces/

INFOVIS PIPELINE Ben Fry (Bild: Benedikt Groß)

well-formed.eigenfactor Moritz Stefaner & Eigenfactor Team, 2009 | http://well-formed.eigenfactor.org

Visual tweaks

well-formed.eigenfactor: Neuroscience Story http://well-formed.eigenfactor.org

X by Y http://moritz.stefaner.eu/projects/x-by-y/

First guesses of what might be interesting Ein- Autor Land Jahr Kategorie Keywords Winner? reichung Autor X X X X Land X X X X Jahr X X Kategorie X X Keywords X Winner? X Ein- reichung

What’s in the databases http://well-formed-data.net/archives/306/dbcounter-quick-visual-database-stats iSubmissionID sYear 1988 1995 1987 1997 2000 1996 1993 1989 1991 1990 1998 2002 1994 1992 2001 2003 1999 iCategoryID 10 9 4 8 1 7 2 3 6 sEntryID sTitle sUrl sFirstname Michael sSurname sAka sCompany sArtists sCountry CH NL AU IT CA JP USA UK FR AT DE US sLength sFormat SVHS CD VHS sCodec cdCD NTSC PAL DAT VHS iProjectID NULL Einreicher NULL Adresse_Einreicher NULL Autor_Kuenstler NULL Adresse_Kuenstler NULL Land NULL Firma NULL Firmenadresse NULL Mitarbeiter NULL Titel_Einreichung NULL Titel_Prix NULL Entstehungsjahr NULL Entstehungsort NULL Dauer NULL NULL Technische_Beschreibung_Material Hardware NULL

0 $!!"# 0 0 0 ,!"# 0 0 0 AB# 0 +!"# 0 0 0 0 *!"# 0 AC# 0 @K# 0 )!"# 0 LM# 0 0 IJ# 0 (!"# 0 GH# 0 0 DE# '!"# 0 0 0 0 &!"# 0 0 0 %!"# 4F# 0 0 0 0 $!"# GH# 0 0 0 HJ# 1 !"# 0 -./#0.1/20023-0# 4205-653-# 73-3898:#;<-53-# =3>?<-#@269# 0 0 0

/Theory/In/Practice Beautiful Visualization Looking at Data Through the Eyes of Experts Edited by Julie Steele & Noah Iliinsky

Revisit http://moritz.stefaner.eu/projects/revisit-twitter-visualization/

SOCIALCOLLIDER.NET Sascha Pohflepp & Toxi | http://socialcollider.net/

Public Private Devices UI Skype name Skype out Skype in # # Skype to go Skype UX maps

CANDIDATE CATEGORIES Online / offline Call forwarding Mobile client PC client Online number Software Connectivity status Skype to go in the car Voice mail at work Mobile PC Features (Account) … Phone in reach? noise level Context Devices Call transfer ... Premium calls at home alone vs. people TV Stationery Phone around video audio find / discover profile transaction talk / chat Channels SMS Activities mood IM signaling Interaction types conversation History Contact list send status signal share messaging Personal Skype data Mood Profile ambient one-way / two-way myself Status get found / Interaction partner Channel usage discovered general public one several sync / async all my contacts "Passivities" notice receive text money screen be aware of Objects sound discuss remind/notify mood Motivations File transfer Send money file … status Leave a message say hi be close to each other Group chat SMS Use cases Conference call Video in mood Instant messages Video call Setup Public chat Conversations Support Screen sharing Experiences IM Awareness Transactions

2D Conversation Video call Group chat Sync Screen sharing Conference call twitter/fb Instant messages Public chat Leave a message Messaging To dos, reminders SMS mass email twitter/fb blogging? Async File transfer Transaction Files across Send money computers Video in mood Ambient/ Signal Mood message Self–surveillance remote intimacy twitter/fb? twitter/fb? Proﬁle Status myself one group all contacts general public

CONTEXT & CONVERSATION TYPE find / discover talk / chat Activities send signal share in the car in the car be aware of at work at work be aware of remind/notify noise level text noise level remind/notify discuss money get found / discuss Motivation Context screen discovered Context Motivation … at home ... Objects sound ... at home … alone vs. mood notice "Passivities alone vs. say hi file be close to each other people " people be close to each other hi say status receive around around Call Communication Conversation/ Communication Call forwarding forwarding partner(s) partner(s) Online Online Skype to go Features number Voice mail Transaction Voice mail number Features Skype to go Call transfer (Account) transaction (Account) Call transfer Premium Mobile client Mobile client Premium PC client signaling PC client calls calls Software Interaction types conversation Software … … messaging Mobile PC PC Mobile Online / Online / Devices video Devices offline audio offline ambient one-way / TV Stationery profile Stationery TV Connectivity Phone Channels SMS two-way Phone Connectivity Channel usage status mood IM status Phone in status sync / async Phone in reach? reach?

SENTENCE SAMPLES (AUTO–GENERATED)

:'-"+%*5#& ;0-'+%*5#& </ )/) /++-%("..#=" >04%*2"-'& ?5#,="%@2+A'$" )"&0B%#**+0,& !"#$%&'(" )"*+,-. /',0&". 1+02. 3#4. /+,&5. 6"#2. 7,*" 8"9"2

()*+,+*+-. /-%'0- 1-,+)-. /$-)%23+*+%2. ! ! "!#$%& '&() +(%$(& ! ! *+(&, "!/+(-"/- ;(%$(&!(1*3&4 ! ! -&.- !"#$%&' 89 <+$/&!*"$% :!/"( /0"-! ! "1)$+ "%%!+#!*,!/+(-"/-' *+3$%& 9"%%!#+4="4)$(5 ! ! 2$)&+ 5&(&4"%!613%$/ '-"-$+(&4,!60+(& 9"%%!-4"('#&4 ! ! *,!*++) 6&+6%&!(+-!+(!'7,6& 34+")/"'- >7,6&!-+!5+ ! ! *,!"2"$%"3$%$-,

Conversation type / partners Conversation Video call Audio call Text chat (IM) Public chat Messaging Voice mail SMS Transaction Send money File transfer Ambient Mood message Proﬁle Availability one group all contacts general public

Visual language screen sharing user video Skype audio out Skype name Skype text (IM, SMS) Skype in email devices traditional call

Rich communication via Skype

Conference call

Iconic representations SKYPE TO SKYPE IM CHAT AUDIO CALL VIDEO CALL VIDEO CONFERENCE SKYPE OUT SKYPE OUT ONE TO ONE ONE TO MANY SMS AUDIO CALL SCREEN SHARING SCREEN SHARING SKYPE IN EMAIL AUDIO CALL AUDIO CONFERENCE NON–SKYPE SKYPE TO GO SMS AUDIO CALL GROUP IM

SKYPE UX MAPS Persona: Muriel Friends Partner Skype out Mother Muriel Institutions screen sharing video audio text (IM, SMS) email telephone call

SKYPE UX MAPS Connecting across devices Public Private Devices UI Skype name Skype out Skype in # # Skype to go

Visual sports

High altitude http://www.michaelnajjar.com/

In te m gr r Fo ity INFORMATION DESIGN e Fu nc n va ct le io Re Based on a draft by David McCandless n

Projektbudgets Visualisierung Anpassung Elastic Lists Anpassung Elastic Lists Entwurf Navigationskomponente Anpassung Navigationskomponente / Consulting Visualisierung Consulting / Design / Visualisierung Consulting / Design / Anpassung Relation Browser Consulting / Design

Zeit Frei Overhead + hot air Kunden

Challenges Design workflow not very agency/client-friendly Concept -> design -> production waterfall does not work with visualization. Long explorations and freedom to reorient project needed. Usually, I don’t work with agencies. Most interesting clients have the least money. Deal with it

Advice Pick one code environment and become a virtuoso Flash Processing OpenFrameworks HTML5 + Javascript … Learn to say no Don’t waste time on pointless projects. Engage in the community

LEARN MORE

TALKS & LECTURES See conference videos http://www.see-conference.de/ http://www.vimeo.com/user1665731 Living with information workshop http://vimeo.com/album/153327/ Jeﬀrey Heer: A brief history of data visualization http://hci.stanford.edu/seminar/abstracts/08-09/090306-heer.html Moritz Stefaner at xtopia 08 http://vimeo.com/2762765 Eric Rodenbeck (stamen) http://infosthetics.com/archives/2009/04/eric_rodenbeck_information_visualization_is_a_medium.html

BOOKS http://www.librarything.com/catalog.php?view=MoritzStefaner&deepsearch=visualization

/Theory/In/Practice Beautiful Visualization Looking at Data Through the Eyes of Experts Edited by Julie Steele & Noah Iliinsky

Software Flare http://ﬂare.prefuse.org Tableau (Public) http://tableausoftware.com Protovis http://vis.stanford.edu/protovis/ Elastic Lists http://moritz.stefaner.eu/projects/elastic-lists/ Relation browser http://moritz.stefaner.eu/projects/relation-browser/

Information Aesthetics

by Moritz Stefaner on Jun 03, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 71

Statistics

Information Aesthetics — Presentation Transcript