iAllenkelhet er firmabloggen til Netlife Research. Vi lager slanke, lettstelte og effektive interaktive løsninger som gjør at du oppnår dine mål og
får fornøyde brukere.
Nettløysningar i dag genererer store mengder data. Talet på gongar ein har tvitra, talet på venner på Facebook og kor mange som likar eit innlegg du har skrive er eit eksempel på dette. Har du på denne typen data i løysninga di kan du gi meirverdi til brukaren ved å visa dei fram.
Hannah Donovan, interaksjonsdesignar (tidlegare designansvarleg hos LastFM hadde workshop om “Information design for an instrumented world” på Web 2.0 Expo i New York og delte sine tips og erfaringar med oss.
Tre ting du må få oversikt over før du set i gang med designjobben
1. Få oversikt over og forstå dei data du har tilgjengeleg i løysningen
Sannsynlegvis vil ikkje alle data vera interessante å visa fram, så det du må finna ut av er kva du vil oppnå og kvifor du vil oppnå det. Når du har dette klart kan du gå vidare til korleis du skal gjera det.
2. Få tak i reelle data
Det kan enten vera ein dump med data (ei fil, ein database o.l) eller levande data som du får tilgang til gjennom eit API. Finn ut korleis webgrensesnittet (API’et) virkar, kva variablar du kan få ut og i kva format du kan få dei ut.
3. Design med reelle data
Start med å skissa konseptet ut på papir. Deretter må du få inn reelle data (enten direkte i html, eller i minste fall – hent ut reelle data), så designar du grensesnittet med dei data som skal vera der.
Har du desse tre tinga for deg finst det ein verktøykasse med element som kan vera til inspirasjon i designjobben.
Verktøykasse med designelement for å visa fram data
Feed/Straum
Straumen av oppdateringar er alltid levande. Ofte er den animert for å visa at det er sanntidsoppdateringar. Flyten er i eit format der det nyaste alltid kjem øverst. Tenk på kor mykje du kan visa samstundes før det vert overveldande (signal vs. støy). Straumen av oppdateringar på Twitter
Rangerte lister og topplister
Fungerar bra dersom det er eit konkurranseaspekt i dei data du visar fram. Ha med element som nummer, namn og verdi/talet på poeng. Mest spelte artistar på LastFM
Status for brukaren
Viser korleis andre brukar det ein legg ut/deler. Til dømes kor mange har sett på profilen din eller kor mange av dine bilete har andre sett på. Talet på gongar eit bilete har blitt vist på Flickr
Tellarar
Augneblikksbilete av brukarstatistikk. Til dømes talet på følgjarar og personar ein følgjer på Twitter. Omlag tre variablar er passe for at ein skal kunna oppfatta dei ved eit blikk. Talet på gongar ein har tvitra, kor mange ein følgjer og kor mange som følgjer brukaren på Twitter
Sparklines/minigrafar
Desse minigrafane som Edvard Tufte har laga gir eit raskt overblikk og viser trender i store mengder data på liten plass. Minigraf i WordPress over visningar av blogginnlegget
Linjediagram
Best på å visa samanhengdande data og trender i datamengden. Sidan data er samanhengande, må du tenkja på at brukaren skal kunna henta ut data frå kvart punkt på grafen. Som å henta ut farten for kvart punkt på løpeturen i grafen frå Runkeeper under. Graf over løpetur på Runkeeper
Søylediagram
Søylediagrammet blir brukt til å visuelt samanlikna separate data. Til dømes å raskt sjå kva for ein joggetur er lengst. Søylediagram over løpeturar på NikePlus
Setning
Du får kontekstualisert data i ein samtaleaktig form. Pluss at du kan gjera det meir personleg. Tala fortel kor mange gongar ein har spelt sangen (LastFM)
Søk i data i sanntid
Søket oppdaterar seg etterkvart som du puttar inn søkeordet, som i søk i Twitter eller Google. Søket i Twitter oppdaterar seg etterkvart som ein skriv inn søkefrasen
Favoritt/Likar/Elskar/Stjerne/+1
Dette kan du bruka der det er sanntidsstraumar med data som folk kan tenkjast å lika og som dei vil ta vare på. Då må du òg laga ein stad der data som ein merker kan hamna og der ein kan finna det att. Favorittlåtar i Spotify kan stjernemerkast og finnast att under Favorittar
Resirkulering av data
Med resirkulering av innhald legg du til rette for late brukarar,- dei som ikkje er blant dei 1% som bidrar mest. Til dømes reblogging på Tumblr eller retvitring. Funksjon for å retvitra ei melding som andre har laga i Twitter
Tommel opp/ned og rangering med stjerner
Dersom det er viktig for deg å få bra innhald på toppen av straumen/feeden din, er det lurt å la brukarane avgjera kva som er bra innhald og leggja dette øverst. Dersom du brukar stjerner må du sørga for at du får fram kva skalaen er; går den frå misfornøgd til fornøgd eller er ei stjerne litt fornøgd og fem superfornøgd. Tommel opp og tommel ned er lettare å forstå intuitivt for brukaren. Stjernerangering av hotell på TripAdvisor
Varslingar
Varslingar skal visa oppdateringar brukarane ikkje vil gå glipp av. Varsla skal seia i frå om at det er noko nytt som har hendt utan å vera for påtrengande. Vurder støy vs. signal ratioen; kor mykje har du trong for å oppdatera brukaren på. Varsel om nye oppdateringar på Facebook
I juleferien skisset jeg og et par kollegaer raskt opp en alternativ forside til sas.no. Hvorfor i all verden gjorde vi det? Jeg er en ganske alminnelig SAS-kunde. Jeg liker å fly med SAS, men jeg liker dårlig å forholde meg til nettstedet sas.no. Det jeg liker minst er at det er synonymt med umulig [...]
I mars går Difi i gang med å kvalitetsvurdere 700 offentlige nettsteder i Norge. Og til høsten avsluttes det med konferanse, stjernedryss, premiering og fest. Men alt er ikke rosenrødt med Kvalitet på nett. Kanskje det er på tide med noen endringer.
Pingback: → Design for ulike tilstandar av innlogga og utlogga — iAllenkelhet