UX | Information Aesthetics

Page 1

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

‌

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

‌

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–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

email

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

EMAIL

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)

email

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’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://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/


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.