101
BOOTSTRAPPING Moritz Stefaner VisualEyes conference // Politecnico Milano // May 20, 2010 Use visualizations to create visualizations

Bootstrapping - use visualizations to create visualizations

Embed Size (px)

DESCRIPTION

Presentation at visualeyes conference, Politecnico Milano, May 2010

Citation preview

Page 1: Bootstrapping - use visualizations to create visualizations

BOOTSTRAPPING

Moritz Stefaner

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

Use visualizations to create visualizations

Page 2: Bootstrapping - use visualizations to create visualizations
Page 3: Bootstrapping - use visualizations to create visualizations

http://moritz.stefaner.eu

Page 4: Bootstrapping - use visualizations to create visualizations

Information Picture

Designer

Page 5: Bootstrapping - use visualizations to create visualizations

Data

Information

Picture

Application

ExperienceAlgorithms

Page 6: Bootstrapping - use visualizations to create visualizations

Data

Information

Picture

Application

ExperienceAlgorithms

User

Page 7: Bootstrapping - use visualizations to create visualizations

Data

Information

Picture

Application

ExperienceAlgorithms

Designer

User

Page 8: Bootstrapping - use visualizations to create visualizations
Page 10: Bootstrapping - use visualizations to create visualizations

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

Page 11: Bootstrapping - use visualizations to create visualizations

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

Page 12: Bootstrapping - use visualizations to create visualizations

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

Page 13: Bootstrapping - use visualizations to create visualizations

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

Page 14: Bootstrapping - use visualizations to create visualizations

Relevance

Integrity

Function

Form

INFORMATION

DESIGN

Based on a draft by David McCandless

Page 15: Bootstrapping - use visualizations to create visualizations

THE CASE FOR PROPOSITIONAL DENSITY

Page 16: Bootstrapping - use visualizations to create visualizations

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

Page 17: Bootstrapping - use visualizations to create visualizations
Page 18: Bootstrapping - use visualizations to create visualizations

Propositional density

Number of deep propositions

divided by

number of surface propositions

Page 19: Bootstrapping - use visualizations to create visualizations

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

Page 20: Bootstrapping - use visualizations to create visualizations

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

Page 21: Bootstrapping - use visualizations to create visualizations

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

Page 22: Bootstrapping - use visualizations to create visualizations

High altitudehttp://www.michaelnajjar.com/

Page 23: Bootstrapping - use visualizations to create visualizations

High altitudehttp://www.michaelnajjar.com/

Page 24: Bootstrapping - use visualizations to create visualizations

INFOVIS PIPELINE Ben Fry (Bild: Benedikt Groß)

Page 25: Bootstrapping - use visualizations to create visualizations
Page 26: Bootstrapping - use visualizations to create visualizations

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/

Page 27: Bootstrapping - use visualizations to create visualizations
Page 28: Bootstrapping - use visualizations to create visualizations

Mind Sketch

create

read

Based on Bill Buxton: Sketching user experiences

Page 29: Bootstrapping - use visualizations to create visualizations

Organic edunet

Page 30: Bootstrapping - use visualizations to create visualizations
Page 31: Bootstrapping - use visualizations to create visualizations
Page 32: Bootstrapping - use visualizations to create visualizations
Page 33: Bootstrapping - use visualizations to create visualizations
Page 34: Bootstrapping - use visualizations to create visualizations
Page 35: Bootstrapping - use visualizations to create visualizations
Page 36: Bootstrapping - use visualizations to create visualizations
Page 37: Bootstrapping - use visualizations to create visualizations
Page 38: Bootstrapping - use visualizations to create visualizations
Page 39: Bootstrapping - use visualizations to create visualizations
Page 40: Bootstrapping - use visualizations to create visualizations
Page 45: Bootstrapping - use visualizations to create visualizations
Page 46: Bootstrapping - use visualizations to create visualizations
Page 47: Bootstrapping - use visualizations to create visualizations
Page 48: Bootstrapping - use visualizations to create visualizations
Page 49: Bootstrapping - use visualizations to create visualizations
Page 50: Bootstrapping - use visualizations to create visualizations
Page 51: Bootstrapping - use visualizations to create visualizations

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 52: Bootstrapping - use visualizations to create visualizations

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 53: Bootstrapping - use visualizations to create visualizations
Page 54: Bootstrapping - use visualizations to create visualizations

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 55: Bootstrapping - use visualizations to create visualizations
Page 56: Bootstrapping - use visualizations to create visualizations
Page 57: Bootstrapping - use visualizations to create visualizations
Page 58: Bootstrapping - use visualizations to create visualizations
Page 59: Bootstrapping - use visualizations to create visualizations
Page 60: Bootstrapping - use visualizations to create visualizations
Page 61: Bootstrapping - use visualizations to create visualizations
Page 62: Bootstrapping - use visualizations to create visualizations
Page 64: Bootstrapping - use visualizations to create visualizations

Looking at Data Through the Eyes of Experts

/Theory/In/Practice

Beautiful Visualization

Edited by Julie Steele

& Noah Iliinsky

Page 66: Bootstrapping - use visualizations to create visualizations
Page 67: Bootstrapping - use visualizations to create visualizations

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

Page 68: Bootstrapping - use visualizations to create visualizations
Page 69: Bootstrapping - use visualizations to create visualizations
Page 70: Bootstrapping - use visualizations to create visualizations
Page 71: Bootstrapping - use visualizations to create visualizations
Page 72: Bootstrapping - use visualizations to create visualizations
Page 73: Bootstrapping - use visualizations to create visualizations
Page 74: Bootstrapping - use visualizations to create visualizations
Page 75: Bootstrapping - use visualizations to create visualizations
Page 76: Bootstrapping - use visualizations to create visualizations
Page 77: Bootstrapping - use visualizations to create visualizations
Page 78: Bootstrapping - use visualizations to create visualizations
Page 79: Bootstrapping - use visualizations to create visualizations
Page 80: Bootstrapping - use visualizations to create visualizations
Page 81: Bootstrapping - use visualizations to create visualizations
Page 82: Bootstrapping - use visualizations to create visualizations
Page 83: Bootstrapping - use visualizations to create visualizations

Skypeout Skype

in

Skypename

#

#

UI

Devices

PrivatePublic

Skypeto go

Skype UX maps

Page 84: Bootstrapping - use visualizations to create visualizations

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 85: Bootstrapping - use visualizations to create visualizations

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 86: Bootstrapping - use visualizations to create visualizations

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 87: Bootstrapping - use visualizations to create visualizations

Skype UX map | Moritz Stefaner | July 1, 2009

SENTENCE SAMPLES(AUTO–GENERATED)

Page 88: Bootstrapping - use visualizations to create visualizations

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 89: Bootstrapping - use visualizations to create visualizations

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

Page 90: Bootstrapping - use visualizations to create visualizations

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 91: Bootstrapping - use visualizations to create visualizations

screen sharing

video

audio

text (IM, SMS)

email

traditional call

user

Skype

devices

Skypeout

Skypein

Skypename

Visual language

Page 92: Bootstrapping - use visualizations to create visualizations

Rich communication via Skype

Page 93: Bootstrapping - use visualizations to create visualizations

Conference call

Page 94: Bootstrapping - use visualizations to create visualizations

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 95: Bootstrapping - use visualizations to create visualizations
Page 96: Bootstrapping - use visualizations to create visualizations
Page 97: Bootstrapping - use visualizations to create visualizations
Page 98: Bootstrapping - use visualizations to create visualizations

SKYPE UX MAPS

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

Friends

Partner

Mother

Institutions

Muriel

Skypeout

Persona: Muriel

Page 99: Bootstrapping - use visualizations to create visualizations

SKYPE UX MAPS

Connecting across devices

Skypeout Skype

in

Skypename

#

#

UI

Devices

PrivatePublic

Skypeto go

Page 100: Bootstrapping - use visualizations to create visualizations

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/

Page 101: Bootstrapping - use visualizations to create visualizations

Thanks!

Q?

A!

http://well-formed-data.net

http://moritz.stefaner.eu