SlideShare ist ein Scribd-Unternehmen logo
1 von 39
Mai 2011 5 smarte grep for datavisualisering
Bjørn Tore Wiken Backend/Java Eivind Ingebrigtsen Frontend @muff Vigleik Norheim Interaksjonsdesign @vigleiknorheim
5  grep Begynn med brukeren Besvar ETT spørsmål kjempebra Forstå, og utfordre teknologien Les korrektur Let etter inspirasjon
Begynn med brukeren
Hentet fra coolinfographics.com
Slik forandrer skyen seg
Grep 1: Begynn med brukeren Ut av komfortsonen, snakk med brukere! Hvem er de? Hva prøver de å finne ut av? Hvor god tid har brukeren? Hvor mye detaljer? Hva kan motivere brukeren?
Besvar ETT spørsmål kjempebra
Hvordan gikk det med Napoleons hær i Russland?
-Hei, kan du forklare meg  denne visualiseringen?
Forstå (og utfordre) teknologien
Grep 2: Forstå (og utfordre) teknologien Ut av komfortsonen, snakk med utviklerne underveis! Utviklere er dyktige, engasjerte og har like lyst til å lage noe kult og nyttig som det interaksjonsdesigneren har Sett deg inn i verktøyene (slide til slutt)
Les korrektur
Skikk og bruk Form follows data God overskrift (gjerne "det ene spørsmålet") Husk label og legend på riktig sted + kontraster Effektiv pixelbruk kast ut all overflødig grafikk bruk felter oftere enn skillelinjer bruk gestaltprinsippene bruk white space Animasjoner skal understøtte forståelsen
Let etter inspirasjon
Blogger og forfattere Flowing Data Feltron.com Ben Fry Edward Tufte visualcomplexity.com simplecomplexity.net visualisationmagazine.com Logg inn STB
Oppsummering Begynn med brukeren Besvar ETT spørsmål kjempebra Forstå og utfordre teknologien Les korrektur Let etter inspirasjon
Logg inn STB Send en melding til @vigleiknorheim vigleik.norheim@bekk.no

Weitere ähnliche Inhalte

Ähnlich wie 5 smarte grep for datavisualisering

Strategisk prototyping
Strategisk prototypingStrategisk prototyping
Strategisk prototypingJanne Flusund
 
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)Veronica Heltne
 
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...Yggdrasilkonferansen
 
Programmering som valgfag leksjon 1 9
Programmering som valgfag leksjon 1 9Programmering som valgfag leksjon 1 9
Programmering som valgfag leksjon 1 9Eva Bratvold
 
Universell utforming FTW! Redesign av blindeforbundet.no
Universell utforming FTW! Redesign av blindeforbundet.noUniversell utforming FTW! Redesign av blindeforbundet.no
Universell utforming FTW! Redesign av blindeforbundet.noJoakim Bording
 
Bruk av office 365 i undervisning
Bruk av office 365 i undervisningBruk av office 365 i undervisning
Bruk av office 365 i undervisningMagnus Nohr
 
Mobil: Hva er alternativene? Hva må du tenke på?
Mobil: Hva er alternativene? Hva må du tenke på?Mobil: Hva er alternativene? Hva må du tenke på?
Mobil: Hva er alternativene? Hva må du tenke på?Ida Aalen
 
Teksten i bruk 14.12
Teksten i bruk 14.12Teksten i bruk 14.12
Teksten i bruk 14.12majomo
 
Gode brukeropplevelser for web redaktør og sluttbruker
Gode brukeropplevelser for web redaktør og sluttbrukerGode brukeropplevelser for web redaktør og sluttbruker
Gode brukeropplevelser for web redaktør og sluttbrukerNina Taraldsen
 
Kjernemodellen og kjerneverksted - Y! 28. oktober 2020
Kjernemodellen og kjerneverksted - Y! 28. oktober 2020Kjernemodellen og kjerneverksted - Y! 28. oktober 2020
Kjernemodellen og kjerneverksted - Y! 28. oktober 2020Are Halland
 
Innhold på nye gjensidige.no
Innhold på nye gjensidige.noInnhold på nye gjensidige.no
Innhold på nye gjensidige.noLisa Kjelstad
 
Finn feilen før markedet gjør det: brukertest på mobil
Finn feilen før markedet gjør det: brukertest på mobilFinn feilen før markedet gjør det: brukertest på mobil
Finn feilen før markedet gjør det: brukertest på mobilIda Aalen
 
Roommates: Rapport for hovedoppgave
Roommates: Rapport for hovedoppgaveRoommates: Rapport for hovedoppgave
Roommates: Rapport for hovedoppgaveGjermund Bjaanes
 
Laring i teknologirike omgivelser
Laring i teknologirike omgivelserLaring i teknologirike omgivelser
Laring i teknologirike omgivelserAtle Kristensen
 
Slik unngår du tåketekster
Slik unngår du tåketeksterSlik unngår du tåketekster
Slik unngår du tåketeksterOve Dalen
 
Foredrag Tangen vgs.
Foredrag Tangen vgs.Foredrag Tangen vgs.
Foredrag Tangen vgs.jaoverla
 
Engelien - Digitale verktøy og medier i undervisningen Vilnius 1
Engelien - Digitale verktøy og medier i undervisningen Vilnius 1 Engelien - Digitale verktøy og medier i undervisningen Vilnius 1
Engelien - Digitale verktøy og medier i undervisningen Vilnius 1 Kirsti Engelien
 

Ähnlich wie 5 smarte grep for datavisualisering (20)

Strategisk prototyping
Strategisk prototypingStrategisk prototyping
Strategisk prototyping
 
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
 
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
 
Programmering som valgfag leksjon 1 9
Programmering som valgfag leksjon 1 9Programmering som valgfag leksjon 1 9
Programmering som valgfag leksjon 1 9
 
Universell utforming FTW! Redesign av blindeforbundet.no
Universell utforming FTW! Redesign av blindeforbundet.noUniversell utforming FTW! Redesign av blindeforbundet.no
Universell utforming FTW! Redesign av blindeforbundet.no
 
Tcd 2014 tirsdag_05 mintra_mobile_enheter
Tcd 2014 tirsdag_05 mintra_mobile_enheterTcd 2014 tirsdag_05 mintra_mobile_enheter
Tcd 2014 tirsdag_05 mintra_mobile_enheter
 
Bruk av office 365 i undervisning
Bruk av office 365 i undervisningBruk av office 365 i undervisning
Bruk av office 365 i undervisning
 
Mobil: Hva er alternativene? Hva må du tenke på?
Mobil: Hva er alternativene? Hva må du tenke på?Mobil: Hva er alternativene? Hva må du tenke på?
Mobil: Hva er alternativene? Hva må du tenke på?
 
Bestepraksis
BestepraksisBestepraksis
Bestepraksis
 
Teksten i bruk 14.12
Teksten i bruk 14.12Teksten i bruk 14.12
Teksten i bruk 14.12
 
Gode brukeropplevelser for web redaktør og sluttbruker
Gode brukeropplevelser for web redaktør og sluttbrukerGode brukeropplevelser for web redaktør og sluttbruker
Gode brukeropplevelser for web redaktør og sluttbruker
 
Kjernemodellen og kjerneverksted - Y! 28. oktober 2020
Kjernemodellen og kjerneverksted - Y! 28. oktober 2020Kjernemodellen og kjerneverksted - Y! 28. oktober 2020
Kjernemodellen og kjerneverksted - Y! 28. oktober 2020
 
Innhold på nye gjensidige.no
Innhold på nye gjensidige.noInnhold på nye gjensidige.no
Innhold på nye gjensidige.no
 
Finn feilen før markedet gjør det: brukertest på mobil
Finn feilen før markedet gjør det: brukertest på mobilFinn feilen før markedet gjør det: brukertest på mobil
Finn feilen før markedet gjør det: brukertest på mobil
 
Roommates: Rapport for hovedoppgave
Roommates: Rapport for hovedoppgaveRoommates: Rapport for hovedoppgave
Roommates: Rapport for hovedoppgave
 
Rapporten
RapportenRapporten
Rapporten
 
Laring i teknologirike omgivelser
Laring i teknologirike omgivelserLaring i teknologirike omgivelser
Laring i teknologirike omgivelser
 
Slik unngår du tåketekster
Slik unngår du tåketeksterSlik unngår du tåketekster
Slik unngår du tåketekster
 
Foredrag Tangen vgs.
Foredrag Tangen vgs.Foredrag Tangen vgs.
Foredrag Tangen vgs.
 
Engelien - Digitale verktøy og medier i undervisningen Vilnius 1
Engelien - Digitale verktøy og medier i undervisningen Vilnius 1 Engelien - Digitale verktøy og medier i undervisningen Vilnius 1
Engelien - Digitale verktøy og medier i undervisningen Vilnius 1
 

5 smarte grep for datavisualisering

  • 1.
  • 2. Mai 2011 5 smarte grep for datavisualisering
  • 3.
  • 4. Bjørn Tore Wiken Backend/Java Eivind Ingebrigtsen Frontend @muff Vigleik Norheim Interaksjonsdesign @vigleiknorheim
  • 5. 5 grep Begynn med brukeren Besvar ETT spørsmål kjempebra Forstå, og utfordre teknologien Les korrektur Let etter inspirasjon
  • 7.
  • 8.
  • 9.
  • 11.
  • 13. Grep 1: Begynn med brukeren Ut av komfortsonen, snakk med brukere! Hvem er de? Hva prøver de å finne ut av? Hvor god tid har brukeren? Hvor mye detaljer? Hva kan motivere brukeren?
  • 15.
  • 16. Hvordan gikk det med Napoleons hær i Russland?
  • 17. -Hei, kan du forklare meg denne visualiseringen?
  • 18. Forstå (og utfordre) teknologien
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29. Grep 2: Forstå (og utfordre) teknologien Ut av komfortsonen, snakk med utviklerne underveis! Utviklere er dyktige, engasjerte og har like lyst til å lage noe kult og nyttig som det interaksjonsdesigneren har Sett deg inn i verktøyene (slide til slutt)
  • 31. Skikk og bruk Form follows data God overskrift (gjerne "det ene spørsmålet") Husk label og legend på riktig sted + kontraster Effektiv pixelbruk kast ut all overflødig grafikk bruk felter oftere enn skillelinjer bruk gestaltprinsippene bruk white space Animasjoner skal understøtte forståelsen
  • 32.
  • 34.
  • 35.
  • 36. Blogger og forfattere Flowing Data Feltron.com Ben Fry Edward Tufte visualcomplexity.com simplecomplexity.net visualisationmagazine.com Logg inn STB
  • 37. Oppsummering Begynn med brukeren Besvar ETT spørsmål kjempebra Forstå og utfordre teknologien Les korrektur Let etter inspirasjon
  • 38.
  • 39. Logg inn STB Send en melding til @vigleiknorheim vigleik.norheim@bekk.no

Hinweis der Redaktion

  1. Hvordan kan denne bli bedre?
  2. Hvor mange her som beherskar javascript, HTML5, CSS eller Flex?Hvor mange er det som har hatt fag i interaksjonsdesign/brukervennlighet?
  3. MIN BAKGRUNN:-Sivilingeniør i Industriell Design herfra-jobba ett år med produktutvikling, og to år med kontrollromsdesign, fjernstyring av fem plattformar på Valhall-feltet-begynte i BEKK for snart to år sidan, har jobba med Redd Barna, ei stor statlig bedrift og på Storebrand eitt år
  4. SPØR UNDERVEIS!
  5. ..ikke verktøyet.
  6. -brukere kan være skikkelig ubehagelige å forholde seg til-de er litt små-intense amatører som stikker nesa i det du driver med, og har sterke meninger
  7. -Eller så er de så dumme at de ikke klarer å bruke dem.
  8. -så derfor kan det være mye gøyere å stikke hodet i verktøykassa og se hvilke fete visualiseringer du kan lage med redskapene du har..
  9. ..og så kan det bli noe kult, sånn som dette. Her er det masse tøffe streker, rødt og sort, og det ser overveldande, nesten litt imponerande ut.Uten at du har tatt kontakt med brukeren eller målgruppa.
  10. -resultatet er dessverreen flott sak som ikke gir et fornuftig svar på noen ting, eller svarer på alt annet.
  11. Denne her ser BÅDE imponerande ut, den informerer brukaren, og den vekker nysgjerrigheten til brukarar som i utgangspunktet ikkje er interessert.
  12. Hvor mange har hørt om Edward Tufte? dette er en klassisk, gammel visualisering som Edward Tufte ofte tar fram i sine foredrag. JA, den er fantastisk som en visning på papir, og viser oss når og hvor troppene til napoleon døde, og temperaturen underveis. Hvis man stirrer lenge nok på denne kan man dra svært mange slutninger om krigføring og historie, men den ville neppe fungert i en moderne datavisualisering annet enn et ekspertgrensesnitti et kontrollrom der man. TID OG OPPMERKSOMHET ER NOE VI IKKE HAR LENGER; DERFOR MÅ VI KOMME KJAPPERE TIL POENGET ENN FØR.
  13. -vi trenger ikke besvare alle spørsmålene med bare en visualisering. I grensesnittene som flere av dere kommer til å jobbe med vil dere ha kunnskap om brukerern og konteksten - enten vedkommende er innlogget, eller bare har klikket til en site eller en side i applikasjonen. Dette er en kjempemulighet til å PRIORITERE hva brukeren bør konsentrere seg om. SELVE ARBEIDSMETODEN HER er å finne ETT SPØRSMÅL PR VISUALISERING som skal besvares bra. Alt annet er en bonus. Det er nå LETT å lage mange visualiseringer, derfor er det mye bedre å lage et sett med visualiseringer som er byte-size og to-the point enn en stor, tungt fordøyelig
  14. Dette er all testingen du trenger før implementering. DESTO viktigere!
  15. Hvis du er interaksjonsdesigner - forstå de tekniske begrensningene og mulighetene du har for visualiseringen du vil ha laget. Når du jobber som interaksjonsdesigner i endel firma som ikke har egne utviklere, leverer du ofte fra deg skissene inn i et hull, altså til et eksternt firma, uten å få diskutert dem skikkelig med de som skal implementere.
  16. Så da tror du at en utvikler ser slik ut....
  17. men i BEKK har eg fått dette bildet av programmerere, det er engasjerte problemløsere. Hos BEKK får du oversikt over en utviklingsprosess fra A til Å, og forstår dermed din plass i teamet mye bedre, og du skjønner mer av de andre disiplinene.
  18. Hvilke visualiseringsverktøy må du få innsikt i
  19. Ikke bare interaksjonsprinsipper - Teori og praksis, grav litt ut av komfortsonen
  20. Du kan uansett lære deg hva utviklerne faktisk kan gjøre og ikke.
  21. Pixel til data -tegn eksempler på effektiv pixelbruk
  22. Hvordan kan denne bli bedre?
  23. Brian Suda
  24. Ben Fry – legende i "saklig" datavisualisering. Hovedoppgaven hans ligger gratis tilgjengelig på nett, like bra som boka.