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 fine 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
Demos
Demos
Demos
Demos
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
Autor
Land
Jahr
Kategorie Keywords
Winner?
Autor
X
X
X
X
Land
X
X
X
X
Einreichung
Jahr
X
X
Kategorie
X
X
Keywords Winner? Einreichung
X X
What’s in the databases
http://well-formed-data.net/archives/306/dbcounter-quick-visual-database-stats
iSubmissionID sYear
1988 1995 1987 1997
iCategoryID
10 9
4
2000
1996
8
1993
1989
1
1991
1990
7
1998
2002
2
1994 3
1992
2001
2003
1999
6
sEntryID sTitle sUrl Michael
sFirstname sSurname sAka sCompany sArtists CH NL AU IT
sCountry sLength SVHS CD
sFormat
cdCD NTSC PAL DAT
sCodec iProjectID
NULL
Einreicher
NULL
Adresse_Einreicher
NULL
Autor_Kuenstler
NULL
Adresse_Kuenstler
NULL
Land
NULL
Firma
NULL
Firmenadresse
NULL
Mitarbeiter
NULL
Titel_Einreichung Titel_Prix Entstehungsjahr
NULL NULL NULL
Entstehungsort
NULL
Dauer
NULL
NULL Technische_Beschreibung_Material Hardware
NULL
VHS VHS
CA
JP
USA
UK
FR
AT
DE
US
6KHHW FRXQWU\ JURXS SUL[FDWHJRU\BHQ 1XOO 18//
V<HDU
&RPSXWHU &RPSXWHU $QLPDWLRQ $QLPDWLRQ 9LVXDO (
>WKH QH[W LGHD@
QHW
&RPSXWHU *UDSKLFV
F\EHUJHQH 'LJLWDO &RPSXWHU UDWLRQ &RPPXQLWL 0XVLF X IUHHV HV
0HGLD $UW ,QWHUDFWLYH 5HVHDUFK +\EULG $UW $UW $Z DUG 1
'LJLWDO 0XVLFV
18//
&RXQW RI 1XPEHU RI 5HFRUGV EURNHQ GRZ Q E\ FRXQWU\ JURXS DQG SUL[FDWHJRU\BHQ YV V<HDU 6L]H VKRZ V FRXQW RI 1XPEHU RI 5HFRUGV 7KH GDWD LV ILOWHUHG RQ FRXQWU\ Z KLFK NHHSV 1XOO DQG 18// 7KH PDUNV DUH ODEHOHG E\ FRXQW RI 1XPEHU RI 5HFRUGV
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0
$!!"#
,!"#
AB#
+!"#
*!"#
AC# @K# )!"#
LM# IJ#
(!"#
GH# DE#
'!"#
&!"#
%!"#
4F#
$!"#
GH# HJ#
!"# -./#0.1/20023-0#
4205-653-#
73-3898:#;<-53-#
=3>?<-#@269#
FRPSDQLHV V&RPSDQ\ +HXUH ([TXLVH 9DQFRXYHU )LOP 6FKRRO 6FKRRO RI YLVXDO DUWV 3KWKDOR 683,1)2&20 ,$0$6 3UDWW ,QVWLWXWH 8QLYHUVLWDW GH OHV ,OOHV %DOHDUV (QVDG $WHOLHU G ,PDJH HW G ,Q +HXUH ([TXLVH 0,7 0HGLD /$% 8QLYHUVLW\ RI :DWHUORR $WHOLHU G ,PDJH HW G ,QIRUPDWL 0LGGOHVH[ 3RO\WHFKQLF &$6 VL[SDFNILOP $Y $UNNL &RUUHQWL 0DJQHWLFKH &DUQHJLH 0HOORQ 8QLYHUVLW\ 5LQJOLQJ 6FKRRO RI $UW DQG ' 6FKRRO RI 7HOHYLVLRQ ,PDJL 6FKRRO RI 9LVXDO $UW (16$'B$,, 8QLYHUVLGDG GH ODV ,VODV %DOH &1%', &HQWUH 1DWLRQDO GH O 0,7 0HGLD /DERUDWRU\ 7KH 2KLR 6WDWH 8QLYHUVLW\ 8QLYHUVLWDW ,OOHV %DOHDUV 0D ([ 0DFKLQD 'DKLQGHQ ,5&$0 1HZ <RUN 8QLYHUVLW\ 7H[DV $ 0 8QLYHUVLW\ 8QLYHUVLW\ GH OHV ,OOHV %DOHDU $XVWUDOLDQ )LOP 7HOHYLVLRQ FQEGL /LQ ,QWHUQDWLRQDO $FDGHP\ RI 0H 1$' &HQWUH 1DWLRQDO $QLPD QRQH 6FKRRO RI 7HOHYLVLRQ ,PDJL 6FKRRO RI WKH $UW ,QVWLWXWH RI 7KH 0LOO 7RXFK $UFKLPHGLD .LUNZ RUNV
V&DWHJRU\WLWOH( QHW &RPSXWHU $QLPDWLRQ &RPSXWHU $QLPDWLRQ 9LVXDO (IIHFWV &RPSXWHU *UDSKLFV &RPSXWHU 0XVLF 'LJLWDO 0XVLFV ,QWHUDFWLYH $UW 1HW 9LVLRQ 1HW ([FHOOHQFH :RUOG :LGH :HE
QDPHV YV VXEPLVVLRQV 0HDVXUH 1DP HV
V<HDU
GLVWLQFW DUWLVWV FRS\
GLVWLQFW FRPSDQLHV
&RXQW RI 1XPEHU RI 5HFRUGV
&RXQW RI 1XPEHU RI 5HFRUGV
GLVWLQFW FRPSDQLHV
GLVWLQFW DUWLVWV FRS\
7KH WUHQGV RI FRXQW RI 1XPEHU RI 5HFRUGV GLVWLQFW FRPSDQLHV DQG GLVWLQFW DUWLVWV FRS\ IRU V<HDU &RORU VKRZ V GHWDLOV DERXW FRXQW RI 1XPEHU RI 5HFRUGV GLVWLQFW DUWLVWV FRS\ DQG GLVWLQFW FRPSDQLHV 7KH GDWD LV ILOWHUHG RQ )XOOQDPH Z KLFK H[FOXGHV
/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/
Private
Public
Devices
UI
Skype name
Skype out
Skype in
#
# Skype to go
Skype UX maps
CANDIDATE CATEGORIES Connectivity status
Software Mobile
PC
Call forwarding
Online / offline
Mobile client
PC client
â&#x20AC;Ś
Features (Account)
Phone in reach?
Devices TV
Online number
Skype to go
in the car
at work
Voice mail
Context
Call transfer
Premium calls
noise level ...
at home alone vs. people around
Stationery Phone
video profile
find / discover
mood
Activities Contact list
transaction
Channels
talk / chat History
audio SMS signaling
IM
Interaction types
share
signal
messaging
Personal Skype data Mood
ambient
Profile Status
get found / discovered notice
conversation
status
send
one-way / two-way
myself
Interaction partner
Channel usage one
sync / async
"Passivities"
general public
several
all my contacts
receive text screen
money
Objects mood
File transfer
sound
Motivations
status
say hi
SMS
Use cases
Conference call
Video in mood
Instant messages
Video call Public chat Screen sharing
Setup Conversations
Support IM
remind/notify
discuss
file
Send money Leave a message
Group chat
be aware of
Experiences Transactions
Awareness
â&#x20AC;Ś
be close to each other
Group chat
Screen sharing
Conference call
Sync
Video call
twitter/fb
Instant messages
Public chat
Leave a message To dos, reminders
mass email
SMS
twitter/fb
blogging?
Async
Transaction
Messaging
Conversation
2D
File transfer Files across computers
Send money
Ambient/ Signal
Video in mood Selfâ&#x20AC;&#x201C;surveillance
remote intimacy
twitter/fb?
Mood message
twitter/fb?
Profile Status
myself
one
group
all contacts
general public
CONTEXT & CONVERSATION TYPE
find / discover
talk / chat
Activities send
be aware of discuss
Call forwarding Skype to go
at work
remind/notify
Motivation say hi
share
signal
in the car
in the car
Context
…
at home
be close to each other
PC client
calls
...
screen
alone vs. people around
Objects
sound
"Passivities " receive
Conversation/ Transaction
at work
noise level ...
Mobile client
signaling
alone vs. people around
Mobile
Communication partner(s) Mobile client
TV
Stationery Phone
video profile
audio
Channels SMS
mood
IM status
Online Voice mail number
PC client
calls
Mobile Online / offline
Devices one-way / two-way
Channel usage sync / async
Stationery Phone
TV
Connectivity status Phone in reach?
Call forwarding Skype to go
Features (Account) Call transfer Premium
…
ambient
discuss
Motivation
Software PC
be aware of
say hi be close to each other
Interaction types conversation
PC
Devices
…
at home
messaging
Online / offline
remind/notify
Context
transaction
…
Phone in reach?
notice
file status
Software
Connectivity status
get found / discovered
money
mood
Communication partner(s)
Online number Voice mail
Features (Account) Call transfer Premium
text
noise level
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
! ! 34+")/"'-
*,!*++)
!
*,!"2"$%"3$%$-,
!
6&+6%&!(+-!+(!'7,6& >7,6&!-+!5+
Conversation type / partners Conversation
Video call Audio call Public chat
Text chat (IM) Messaging
Voice mail SMS Transaction
Send money File transfer
Ambient
Mood message Profile Availability one
group
all contacts
general public
Visual language
screen sharing
user
video Skype out
audio Skype name
Skype
text (IM, SMS) Skype in
devices
traditional call
Rich communication via Skype
Conference call
Iconic representations
IM CHAT
SKYPE TO SKYPE
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
NON–SKYPE
SMS
AUDIO CALL
AUDIO CONFERENCE
SKYPE TO GO
AUDIO CALL
GROUP IM
SKYPE UX MAPS
Persona: Muriel
Friends
Partner Skype out
Mother
Muriel Institutions
screen sharing
video
audio
text (IM, SMS)
telephone call
SKYPE UX MAPS
Connecting across devices Private
Public
Devices
UI
Skype name
Skype out
Skype in
#
# Skype to go
Visual sports
High altitude http://www.michaelnajjar.com/
m DESIGN
n
Based on a draft by David McCandless
io ct
n Fu
Re le va nc e
Fo r
ity
gr te In INFORMATION
Projektbudgets
Anpassung Elastic Lists
Visualisierung
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â&#x20AC;&#x2122;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 â&#x20AC;Ś
Learn to say no Donâ&#x20AC;&#x2122;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ďŹ&#x20AC;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://flare.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/