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…

http://moritz.stefaner.eu

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)

email

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

EMAIL

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/