Bootstrapping - use visualizations to create visualizations

BOOTSTRAPPING

Moritz Stefaner

VisualEyes conference // Politecnico Milano // May 20, 2010

Use visualizations to create visualizations

http://moritz.stefaner.eu

Information Picture

Designer

Data

Information

Picture

Application

ExperienceAlgorithms

Data

Information

Picture

Application

ExperienceAlgorithms

User

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/

Relevance

Integrity

Function

Form

INFORMATION

DESIGN

Based on a draft by David McCandless

THE CASE FOR PROPOSITIONAL DENSITY

W Lidwell. More with less. ACM interactions (2009)

Propositional density

Number of deep propositions

divided by

number of surface propositions

http://www.pewter.it/productpage.asp?lingua=u&pid=378&finish=1

http://georgjensen.com/europe/Shop/Living/Tableware/SALT--PEPPER-SET.aspx

Alberto Mantilla: Hug Salt & Pepper Shakers http://www.mintnyc.com/

High altitudehttp://www.michaelnajjar.com/

High altitudehttp://www.michaelnajjar.com/

INFOVIS PIPELINE Ben Fry (Bild: Benedikt Groß)

MATERIAL EXPLORATION

What’s

available

significant

interesting

the scale

feasible

Where are the anchor points?

What does it afford?

http://berglondon.com/blog/2009/10/23/toiling-in-the-data-mines-what-data-exploration-feels-like/

Mind Sketch

create

read

Based on Bill Buxton: Sketching user experiences

Organic edunet

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+(&

:!/"(

1+/.2./.)0 ()%'*) 3)2.+)0

+(%$(&

;(%$(&!(1*3&4

<+$/&!*"$%

9"%%!#+4="4)$(5

9"%%!-4"('#&4

>7,6&!-+!5+

($)+%,-./.%,0

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

Software

Flarehttp://flare.prefuse.org

Tableau (Public)http://tableausoftware.com

Elastic Listshttp://moritz.stefaner.eu/projects/elastic-lists/

Relation browserhttp://moritz.stefaner.eu/projects/relation-browser/

Thanks!

Q?

A!

http://well-formed-data.net

http://moritz.stefaner.eu