Welcome to INFO 424 “Information Visualization and Aesthetics”
Information Aesthetics
-
Upload
moritz-stefaner -
Category
Design
-
view
112 -
download
1
description
Transcript of Information Aesthetics
INFORMATION AESTHETICS
Moritz Stefaner
Gründungscluster // Kunsthochschule Kassel // June 2, 2010
and how to make a living with it
Background
1998 – 2002
2002 – 2005
2005 – 2007
2007 – 2009
2004 –
Web designer
BSc Cognitive Science
MA Interface Design
Research assistant FH Potsdam
Freelance information visualizer
Works exhibited at ars electronica, SIGGRAPH, …
Nominated for the Design Award of the Federal
Republic of Germany 2010
working for Skype, World Economic Forum, Yahoo…
Information Picture
Designer
Data
Information
Picture
Application
ExperienceAlgorithms
Designer
User
http://queue.acm.org/detail.cfm?id=1805128
We feel fineJonathan Harris and Sep Kamvar | http://wefeelfine.org/
Feltron Annual ReportsNICHOLAS FELTONhttp://feltron.com/index.php?/content/2008_annual_report/
Visualizations for Knight Capital GroupMarius Watzhttp://www.flickr.com/photos/watz/sets/72157608197253021/
On the Origin of Species: The Preservation of Favoured Traceshttp://benfry.com/traces/
INFOVIS PIPELINE Ben Fry (Bild: Benedikt Groß)
well-formed.eigenfactorMoritz 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 Yhttp://moritz.stefaner.eu/projects/x-by-y/
First guesses of what might be interesting
Ein-reichung
X
Ein-reichung
X
X
X
X
X
Winner?
Winner?
Keywords
XKategorie
Jahr X
X XXLand
XAutor XX
KeywordsKategorieJahrLandAutor
What’s in the databases http://well-formed-data.net/archives/306/dbcounter-quick-visual-database-stats
iSubmissionID
sYear 198819951987 1997 2000 1996 1993 1989 1991 1990 1998 2002 1994 1992 2001 2003 1999
iCategoryID 109 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 SVHSCD VHS
sCodec cdCDNTSCPAL 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
Technische_Beschreibung_MaterialNULL
Hardware NULL
Software NULL
Musik_Soundtrack NULL
Equipment_needed NULL
Equipment_supplied NULL
Format_des_Bands NULL
Laenge_des_Bands NULL
Masterband NULL
Typ_Kategorie NULL
Eingereichtes_Material NULL
Preis NULL
Preis_in_Kategorie NULL
Agreement_network NULL
Anmerkung
num submissionsDistinction Honorary Mention
AD 1 0 0 0
AE 3 0 0 0
AM 1 0 0 0
AR 62 0 0 0
AT 1494 1 2 0
AT / FR 2 0 0 0
AT / NL 2 0 0 0
ATR 1 0 0 0
AU 538 0 3 0
Afrika 1 0 0 0
BA 3 0 0 0
BD 3 0 0 0
BE 117 0 0 0
BG 94 0 0 0
BO 4 0 0 0
BR 154 0 0 0
BY 1 0 0 0
CA 680 1 7 0
CA / AUS 1 0 0 0
CA / CH 1 0 0 0
CA / US 1 0 0 0
CG 1 0 0 0
CH 369 0 0 0
CH 2 0 0 0
CH/AT 1 0 0 0
CL 3 0 0 0
CN 16 0 0 0
CO 19 0 0 0
COP 1 0 0 0
CSFR 3 0 0 0
CSSR 12 0 0 0
CZ 100 0 0 0
Ch 1 0 0 0
Chi 1 0 0 0
Chile 2 0 0 0
DDR 26 0 0 0
DE 3228 3 9 1
DE / US 1 0 0 0
DK 104 0 0 0
EC 1 0 0 0
EE 26 0 0 0
EG 1 0 0 0
EI 2 0 0 0
ER 1 0 0 0
ES 242 0 1 0
ES / MX 1 0 0 0
FI 142 0 0 0
FR 1364 5 20 0
FR/AT 3 0 0 0
Fisch 1 0 0 0
GL 1 0 0 0
GR 22 0 0 0
GR / UK 2 0 0 0
HK 21 0 0 0
HR 23 0 0 0
HU 217 0 0 0
HUF 1 0 0 0
HUU 1 0 0 0
ID 1 0 0 0
IE 45 0 0 0
IEP 2 0 0 0
IL 39 0 0 0
ILS 1 0 0 0
IN 15 0 0 0
IR 1 0 0 0
IS 26 0 0 0
ISK 1 0 0 0
IT 610 1 4 1
ITR 3 0 0 0
JM 1 0 0 0
JP 736 1 4 0
KR 27 0 0 0
L 1 0 0 0
LK 1 0 0 0
LT 12 0 0 0
LTU 1 0 0 0
LU 33 0 0 0
LV 1 0 0 0
MA 9 0 0 0
ME 5 0 0 0
MK 11 0 0 0
MX 25 0 0 0
MY 11 0 0 0
NL 446 1 2 0
NM 1 0 0 0
NO 49 0 0 0
NZ 22 0 0 0
Nl 1 0 0 0
PE 7 0 0 0
PH 4 0 0 0
PK 1 0 0 0
PL 148 0 1 0
PT 28 0 0 0
R 7 0 0 0
RA 23 0 0 0
RCH 18 0 0 0
RFR 1 0 0 0
RO 19 0 0 0
RU 72 0 0 0
RUR 3 0 0 0
SE 175 0 0 0
SFR 1 0 0 0
SG 14 0 0 0
SI 62 0 0 0
SI/DE 1 0 0 0
SIT 3 0 0 0
SK 25 0 0 0
SL 2 0 0 0
SM 1 0 0 0
SO 3 0 0 0
SP / BR 1 0 0 0
SU 36 0 1 0
T 3 0 0 0
TF 1 0 0 0
TH 1 0 0 0
TR 16 0 0 0
TW 7 0 0 0
TWD 2 0 0 0
UA 9 0 0 0
UK 1012 0 2 1
US 5428 7 34 6
UY 1 0 0 0
VE 6 0 0 0
X 4 0 0 0
YU 113 0 0 0
ZA 21 0 0 0
Golden Nica
!"#
$!"#
%!"#
&!"#
'!"#
(!"#
)!"#
*!"#
+!"#
,!"#
$!!"#
-./#0.1/20023-0# 4205-653-# 73-3898:#;<-53-# =3>?<-#@269#
AB#
AC#
DE#
4F#
GH#
IJ#
@K#
LM#
HJ#
GH#
Looking at Data Through the Eyes of Experts
/Theory/In/Practice
Beautiful Visualization
Edited by Julie Steele
& Noah Iliinsky
Revisithttp://moritz.stefaner.eu/projects/revisit-twitter-visualization/
SOCIALCOLLIDER.NETSascha Pohflepp & Toxi | http://socialcollider.net/
Skypeout Skype
in
Skypename
#
#
UI
Devices
PrivatePublic
Skypeto go
Skype UX maps
Skype UX map | Moritz Stefaner | July 1, 2009
CANDIDATE CATEGORIES
Devices
TV Stationery Phone
PCMobile
Software
…
PC clientMobile client
Personal Skype data
Profile
Status
Mood
Contact listHistory
Activities
Interaction partner
general public
all my contactsseveralone
Features (Account)
Premium calls
Skype to go
Call transfer
Call forwarding
Online number
Voice mail
Connectivity status
Online / offline
Phone in reach?
find / discover
share
send
talk / chat
signal
"Passivities"
receive
get found / discovered
notice
Channels
video
moodIM
audio
status
Channel usage
one-way / two-wayambient
Interaction types conversationsignaling
transaction
Context
at home
at work
alone vs. people around
in the car
noise level
...
sync / async
myself
Objects
text
moodfile
money
status
screen
sound
Video in mood
Leave a message
SMS
Send moneyFile transfer
Instant messages
Group chat
Public chat
Conference call
Video call
Screen sharing IM
Use cases
messaging
profile
SMS
Transactions
Setup
Conversations
Awareness
Support
Experiences
say hi
be aware of
remind/notify
be close to each other
discuss
Motivations…
Skype UX map | Moritz Stefaner | July 1, 2009
2D
myself one group all contacts general public
Am
bie
nt/
Sig
na
l
Tra
nsa
cti
on
Me
ssa
gin
gC
on
ve
rsa
tio
n
Video in mood
Leave a message
SMS
Send money
File transfer
Instant messages
Group chat
Public chat
Conference call
Video call
Screen sharing
Mood message
Profile
Status
Asyn
cS
yn
c
To dos, reminders
Files across computers
Self–surveillance remote intimacy twitter/fb?
twitter/fb
twitter/fb?
blogging?
twitter/fb
mass email
Skype UX map | Moritz Stefaner | July 1, 2009
CONTEXT & CONVERSATION TYPE
Communication
partner(s)Conversation/
Transaction
Activities
find / discover
sharesend
talk / chat
signal
"Passivities
"receive
get found /
discovered
notice
Channels
video
moodIM
audio
status
Channel usage
one-way /
two-way
ambient
Interaction types conversation
signaling
transaction
sync / async
Objects
text
moodfile
money
status
screen
sound
messaging
profile
SMS
Devices
TV Stationery
Phone
PCMobile
Software
…
PC clientMobile client
Features
(Account)Premium
calls
Skype to go
Call transfer
Call
forwarding Online
number Voice mail
Connectivity
status
Online /
offline
Phone in
reach?
Contextat home
at work
alone vs.
people
around
in the car
noise level
...
say hi
be aware ofremind/notify
be close to each other
discuss
Motivation …
Devices
TVStationery
Phone
PC Mobile
Software
…
PC clientMobile client
Features
(Account)Premium
calls
Skype to go
Call transfer
Call
forwardingOnline
numberVoice mail
Connectivity
status
Online /
offline
Phone in
reach?
Contextat home
at work
alone vs.
people
around
in the car
noise level
...
say hi
be aware ofremind/notify
be close to each other
discuss
Motivation…
Communication
partner(s)
Skype UX map | Moritz Stefaner | July 1, 2009
SENTENCE SAMPLES(AUTO–GENERATED)
Skype UX map | Moritz Stefaner | July 17, 2009
!"#$%&'(" )"*+,-. /',0&". 1+02. 3#4. /+,&5. 6"#2. 7,*" 8"9"2
:'-"+%*5#&
;0-'+%*5#&
</
)/)
/++-%("..#="
>04%*2"-'&
?5#,="%@2+A'$"
)"&0B%#**+0,&
Skype UX map | Moritz Stefaner | July 17, 2009
! ! "!#$%&
'&()
! ! *+(&,
! ! -&.-
/0"-! ! "1)$+
! ! 2$)&+
! ! *,!*++)
34+")/"'-
! ! *,!"2"$%"3$%$-,
"!/+(-"/-
!"#$%&'
"%%!+#!*,!/+(-"/-'
5&(&4"%!613%$/
6&+6%&!(+-!+(!'7,6&
89
*+3$%&
'-"-$+(&4,!60+(&
:!/"(
()*+,+*+-. /-%'0- 1-,+)-.
+(%$(&
;(%$(&!(1*3&4
<+$/&!*"$%
9"%%!#+4="4)$(5
9"%%!-4"('#&4
>7,6&!-+!5+
/$-)%23+*+%2.
one group all contacts general public
Conversation
Messaging
Transaction
Ambient
Conversation type / partners
Send money
File transfer
Audio call
Video call
Profile
Availability
Mood message
Public chatText chat (IM)
Voice mail
SMS
screen sharing
video
audio
text (IM, SMS)
traditional call
user
Skype
devices
Skypeout
Skypein
Skypename
Visual language
Rich communication via Skype
Conference call
VIDEO CALL
SKYPE OUTSMS
SKYPE INAUDIO CALL
SKYPE OUTAUDIO CALL
IM CHATSKYPE TO SKYPEAUDIO CALL
ONE TO ONESCREEN SHARING
ONE TO MANYSCREEN SHARING
VIDEO CONFERENCE
AUDIO CONFERENCE
GROUP IMSKYPE TO GO
AUDIO CALL
NON–SKYPESMS
TilesIconic representations
SKYPE UX MAPS
screen sharing email telephone callaudio text (IM, SMS)video
Friends
Partner
Mother
Institutions
Muriel
Skypeout
Persona: Muriel
SKYPE UX MAPS
Connecting across devices
Skypeout Skype
in
Skypename
#
#
UI
Devices
PrivatePublic
Skypeto go
Visual sports
High altitudehttp://www.michaelnajjar.com/
Relevance
Integrity
FunctionForm
INFORMATION DESIGN
Based on a draft by David McCandless
Consulting / Design
Consulting / Design / Anpassung Relation Browser
Consulting / Design / Visualisierung
Visualisierung
Anpassung Navigationskomponente / Consulting
Entwurf Navigationskomponente
Anpassung Elastic Lists
Anpassung Elastic ListsVisualisierung
Projektbudgets
Kunden
Overhead + hot air
Frei
Zeit
Challenges
Design workflow not very agency/client-friendlyConcept -> 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 virtuosoFlash
Processing
OpenFrameworks
HTML5 + Javascript
…
Learn to say noDon’t waste time on pointless projects.
Engage in the community
LEARN MORE
TALKS & LECTURES
See conference videoshttp://www.see-conference.de/
http://www.vimeo.com/user1665731
Living with information workshophttp://vimeo.com/album/153327/
Jeffrey Heer: A brief history of data visualizationhttp://hci.stanford.edu/seminar/abstracts/08-09/090306-heer.html
Moritz Stefaner at xtopia 08http://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
Looking at Data Through the Eyes of Experts
/Theory/In/Practice
Beautiful Visualization
Edited by Julie Steele
& Noah Iliinsky
Software
Flarehttp://flare.prefuse.org
Tableau (Public)http://tableausoftware.com
Protovis http://vis.stanford.edu/protovis/
Elastic Listshttp://moritz.stefaner.eu/projects/elastic-lists/
Relation browserhttp://moritz.stefaner.eu/projects/relation-browser/