information aesthetics

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

Upload: moritz-stefaner

Post on 28-Jan-2015

112 views

Category:

Design


1 download

DESCRIPTION

Presentation at Kunsthochschule Kassel (Gründungscluster talk series).

TRANSCRIPT

Page 1: Information Aesthetics

INFORMATION AESTHETICS

Moritz Stefaner

Gründungscluster // Kunsthochschule Kassel // June 2, 2010

and how to make a living with it

Page 2: Information Aesthetics

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…

Page 3: Information Aesthetics

http://moritz.stefaner.eu

Page 4: Information Aesthetics

Information Picture

Designer

Page 5: Information Aesthetics

Data

Information

Picture

Application

ExperienceAlgorithms

Designer

User

Page 6: Information Aesthetics
Page 8: Information Aesthetics

We feel fineJonathan Harris and Sep Kamvar | http://wefeelfine.org/

Page 9: Information Aesthetics

Feltron Annual ReportsNICHOLAS FELTONhttp://feltron.com/index.php?/content/2008_annual_report/

Page 10: Information Aesthetics

Visualizations for Knight Capital GroupMarius Watzhttp://www.flickr.com/photos/watz/sets/72157608197253021/

Page 11: Information Aesthetics

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

Page 12: Information Aesthetics

INFOVIS PIPELINE Ben Fry (Bild: Benedikt Groß)

Page 18: Information Aesthetics

Demos

Page 19: Information Aesthetics

Demos

Page 20: Information Aesthetics

Demos

Page 21: Information Aesthetics

Demos

Page 22: Information Aesthetics
Page 23: Information Aesthetics
Page 24: Information Aesthetics
Page 25: Information Aesthetics
Page 26: Information Aesthetics
Page 27: Information Aesthetics
Page 28: Information Aesthetics
Page 29: Information Aesthetics
Page 30: Information Aesthetics
Page 31: Information Aesthetics
Page 32: Information Aesthetics
Page 33: Information Aesthetics

Visual tweaks

Page 34: Information Aesthetics

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

Page 38: Information Aesthetics
Page 39: Information Aesthetics
Page 40: Information Aesthetics
Page 41: Information Aesthetics
Page 42: Information Aesthetics
Page 43: Information Aesthetics
Page 44: Information Aesthetics

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

Page 45: Information Aesthetics

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

Page 46: Information Aesthetics
Page 47: Information Aesthetics

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#

Page 48: Information Aesthetics
Page 49: Information Aesthetics
Page 50: Information Aesthetics
Page 51: Information Aesthetics
Page 52: Information Aesthetics
Page 53: Information Aesthetics
Page 54: Information Aesthetics
Page 55: Information Aesthetics
Page 57: Information Aesthetics

Looking at Data Through the Eyes of Experts

/Theory/In/Practice

Beautiful Visualization

Edited by Julie Steele

& Noah Iliinsky

Page 59: Information Aesthetics
Page 60: Information Aesthetics

SOCIALCOLLIDER.NETSascha Pohflepp & Toxi | http://socialcollider.net/

Page 61: Information Aesthetics
Page 62: Information Aesthetics
Page 63: Information Aesthetics
Page 64: Information Aesthetics
Page 65: Information Aesthetics
Page 66: Information Aesthetics
Page 67: Information Aesthetics
Page 68: Information Aesthetics
Page 69: Information Aesthetics
Page 70: Information Aesthetics
Page 71: Information Aesthetics
Page 72: Information Aesthetics
Page 73: Information Aesthetics
Page 74: Information Aesthetics
Page 75: Information Aesthetics
Page 76: Information Aesthetics

Skypeout Skype

in

Skypename

#

#

UI

Devices

PrivatePublic

Skypeto go

Skype UX maps

Page 77: Information Aesthetics

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…

Page 78: Information Aesthetics

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

Page 79: Information Aesthetics

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)

Page 80: Information Aesthetics

Skype UX map | Moritz Stefaner | July 1, 2009

SENTENCE SAMPLES(AUTO–GENERATED)

Page 81: Information Aesthetics

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,&

Page 82: Information Aesthetics

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.

Page 83: Information Aesthetics

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

Page 84: Information Aesthetics

screen sharing

video

audio

text (IM, SMS)

email

traditional call

user

Skype

devices

Skypeout

Skypein

Skypename

Visual language

Page 85: Information Aesthetics

Rich communication via Skype

Page 86: Information Aesthetics

Conference call

Page 87: Information Aesthetics

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

Page 88: Information Aesthetics
Page 89: Information Aesthetics
Page 90: Information Aesthetics
Page 91: Information Aesthetics

SKYPE UX MAPS

screen sharing email telephone callaudio text (IM, SMS)video

Friends

Partner

Mother

Institutions

Muriel

Skypeout

Persona: Muriel

Page 92: Information Aesthetics

SKYPE UX MAPS

Connecting across devices

Skypeout Skype

in

Skypename

#

#

UI

Devices

PrivatePublic

Skypeto go

Page 93: Information Aesthetics

Visual sports

Page 94: Information Aesthetics
Page 95: Information Aesthetics
Page 97: Information Aesthetics

High altitudehttp://www.michaelnajjar.com/

Page 98: Information Aesthetics

Relevance

Integrity

FunctionForm

INFORMATION DESIGN

Based on a draft by David McCandless

Page 99: Information Aesthetics

Consulting / Design

Consulting / Design / Anpassung Relation Browser

Consulting / Design / Visualisierung

Visualisierung

Anpassung Navigationskomponente / Consulting

Entwurf Navigationskomponente

Anpassung Elastic Lists

Anpassung Elastic ListsVisualisierung

Projektbudgets

Page 100: Information Aesthetics

Kunden

Overhead + hot air

Frei

Zeit

Page 101: Information Aesthetics
Page 102: Information Aesthetics
Page 103: Information Aesthetics

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

Page 104: Information Aesthetics

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

Page 105: Information Aesthetics

LEARN MORE

Page 106: Information Aesthetics

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

Page 108: Information Aesthetics

Looking at Data Through the Eyes of Experts

/Theory/In/Practice

Beautiful Visualization

Edited by Julie Steele

& Noah Iliinsky

Page 109: Information Aesthetics

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/