Bootstrapping - use visualizations to create visualizations

3,246 views

Published on

Presentation at visualeyes conference, Politecnico Milano, May 2010

Published in: Design, Technology, Business

Bootstrapping - use visualizations to create visualizations

  1. 1. BOOTSTRAPPING Moritz Stefaner VisualEyes conference // Politecnico Milano // May 20, 2010 Use visualizations to create visualizations
  2. 2. http://moritz.stefaner.eu
  3. 3. Information Picture Designer
  4. 4. Data Information Picture Application Experience Algorithms
  5. 5. Data Information Picture Application Experience Algorithms User
  6. 6. Data Information Picture Application Experience Algorithms Designer User
  7. 7. http://queue.acm.org/detail.cfm?id=1805128
  8. 8. We feel fine Jonathan Harris and Sep Kamvar | http://wefeelfine.org/
  9. 9. Feltron Annual Reports NICHOLAS FELTON http://feltron.com/index.php?/content/2008_annual_report/
  10. 10. Visualizations for Knight Capital Group Marius Watz http://www.flickr.com/photos/watz/sets/72157608197253021/
  11. 11. On the Origin of Species: The Preservation of Favoured Traces http://benfry.com/traces/
  12. 12. Relevance Integrity Function Form INFORMATION DESIGN Based on a draft by David McCandless
  13. 13. THE CASE FOR PROPOSITIONAL DENSITY
  14. 14. W Lidwell. More with less. ACM interactions (2009)
  15. 15. Propositional density Number of deep propositions divided by number of surface propositions
  16. 16. http://www.pewter.it/productpage.asp?lingua=u&pid=378&finish=1
  17. 17. http://georgjensen.com/europe/Shop/Living/Tableware/SALT--PEPPER-SET.aspx
  18. 18. Alberto Mantilla: Hug Salt & Pepper Shakers http://www.mintnyc.com/
  19. 19. High altitude http://www.michaelnajjar.com/
  20. 20. High altitude http://www.michaelnajjar.com/
  21. 21. INFOVIS PIPELINE Ben Fry (Bild: Benedikt Groß)
  22. 22. 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/
  23. 23. Mind Sketch create read Based on Bill Buxton: Sketching user experiences
  24. 24. Organic edunet
  25. 25. X by Y http://moritz.stefaner.eu/projects/x-by-y/
  26. 26. 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
  27. 27. What’s in the databases http://well-formed-data.net/archives/306/dbcounter-quick-visual-database-stats iSubmissionID sYear 19881995 1987 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 cdCD NTSCPAL 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
  28. 28. 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 !"# $!"# %!"# &!"# '!"# (!"# )!"# *!"# +!"# ,!"# $!!"# -./#0.1/20023-0# 4205-653-# 73-3898:#;<-53-# =3>?<-#@269# AB# AC# DE# 4F# GH# IJ# @K# LM# HJ# GH#
  29. 29. Looking at Data Through the Eyes of Experts /Theory/In/Practice Beautiful Visualization Edited by Julie Steele & Noah Iliinsky
  30. 30. Revisit http://moritz.stefaner.eu/projects/revisit-twitter-visualization/
  31. 31. SOCIALCOLLIDER.NET Sascha Pohflepp & Toxi | http://socialcollider.net/
  32. 32. Skype out Skype in Skype name # # UI Devices Private Public Skype to go Skype UX maps
  33. 33. CANDIDATE CATEGORIES Devices TV Stationery Phone PCMobile Software … PC client Mobile client Personal Skype data Profile Status Mood Contact listHistory Activities Interaction partner general public all my contacts severalone 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 mood IM 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 mood file 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 …
  34. 34. 2D myself one group all contacts general public Ambient/ Signal TransactionMessagingConversation 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 AsyncSync To dos, reminders Files across computers Self–surveillance remote intimacy twitter/fb? twitter/fb twitter/fb? blogging? twitter/fb mass email
  35. 35. CONTEXT & CONVERSATION TYPE Communication partner(s) Conversation/ Transaction Activities find / discover share send talk / chat signal "Passivities " receive get found / discovered notice Channels video mood IM audio status Channel usage one-way / two-way ambient Interaction types conversation signaling transaction sync / async Objects text mood file money status screen sound messaging profile SMS Devices TV Stationery Phone PCMobile Software … PC client Mobile client Features (Account) Premium calls Skype to go Call transfer Call forwarding Online number Voice mail Connectivity status Online / offline Phone in reach? Context at home at work alone vs. people around in the car noise level ... say hi be aware of remind/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? Context at home at work alone vs. people around in the car noise level ... say hi be aware of remind/notify be close to each other discuss Motivation… Communication partner(s)
  36. 36. SENTENCE SAMPLES (AUTO–GENERATED)
  37. 37. !"#$%&'(" )"*+,-. /',0&". 1+02. 3#4. /+,&5. 6"#2. 7,*" 8"9"2 :'-"+%*5#& ;0-'+%*5#& </ )/) /++-%("..#=" >04%*2"-'& ?5#,="%@2+A'$" )"&0B%#**+0,&
  38. 38. ! ! "!#$%& '&() ! ! *+(&, ! ! -&.- /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
  39. 39. 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
  40. 40. screen sharing video audio text (IM, SMS) email traditional call user Skype devices Skype out Skype in Skype name Visual language
  41. 41. Rich communication via Skype
  42. 42. Conference call
  43. 43. VIDEO CALL SKYPE OUT SMS SKYPE IN AUDIO CALL SKYPE OUT AUDIO CALL IM CHAT SKYPE TO SKYPE AUDIO CALL ONE TO ONE SCREEN SHARING ONE TO MANY SCREEN SHARING VIDEO CONFERENCE AUDIO CONFERENCE GROUP IM SKYPE TO GO AUDIO CALL EMAIL NON–SKYPE SMS Iconic representations
  44. 44. SKYPE UX MAPS screen sharing email telephone callaudio text (IM, SMS)video Friends Partner Mother Institutions Muriel Skype out Persona: Muriel
  45. 45. SKYPE UX MAPS Connecting across devices Skype out Skype in Skype name # # UI Devices Private Public Skype to go
  46. 46. Software Flare http://flare.prefuse.org Tableau (Public) http://tableausoftware.com Elastic Lists http://moritz.stefaner.eu/projects/elastic-lists/ Relation browser http://moritz.stefaner.eu/projects/relation-browser/
  47. 47. Thanks! Q? A! http://well-formed-data.net http://moritz.stefaner.eu

×