Vi anmelder «Praktisk Brukertesting»

 

Haakon må stadig sjekke "praktisk brukertesting" boka når han er testleder.

Eli Toftøy-Andersen (@elitatt) og Jon Gunnar Wold (@jonwold) har skrevet boken “Praktisk brukertesting” (Cappelen Damm Akademisk, 2010, 181 sider, kr 348,-).

Om boken

Forfatterne av Praktisk brukertesting, Eli Toftøy-Andersen og Jon Gunnar Wold skriver boken de gjerne skulle hatt da de selv begynte å gjennomføre brukertester. Til daglig er begge seniorrådgivere innen brukervennlighet og design i konsulentselskapet Steria, og har nå lang erfaring med å se på ting fra brukernes perspektiv. De ønsker å formidle sine erfaringer med brukertesting og overbevise leseren om brukertestens fortsatte styrke som en umiddelbar og rimelig (økonomisk) metode for å finne ut av brukerens behov, problemer og utfordringer. De ønsker også at leseren skal sitte igjen med kunnskap som gjør det enklere å unngå nybegynner-fellene de selv opplevde som newbies.

Les videre

Hvordan ser kundereisen ut?


Skal du jobbe strategisk med kundeopplevelser trenger du verktøy for tjenestedesign, ikke bare produktutvikling. Lenge før du fokuserer på brukeropplevelser i utfylling av skjema, plassering av en knapp eller lesbarhet på en tekst må du jobbe med opplevelsen som gjør at kundene velger deg, legger igjen mer penger og forteller om tjenesten din til vennene sine. Dette handler om hele kundelivsløpet, alle møtepunktene man er innom og hvordan dette forløper over tid. Les videre

20år på verdensveven

Den 6. august 1991 publiserte Tim Berners-Lee verdens første nettside, en kort introduksjon til tankene bak ‘the world wide web’, på http://info.cern.ch/. Skjønt det var først ved introduksjonen av en nettleser i 1993 det skjøt fart mot det vi kjenner som internett i dag. Men Berners-Lee hvilte ikke på den syvende dag, selv om han så at det var såre godt. I årene videre grunnla han først World Wide Web Consortium (W3C) som jobber for standardisering og siden World Wide Web Foundation som kjemper for økt åpenhet. I de senere årene har han vært en av de sterkeste pådriverene for et såkalt semantisk web og linked data som han misjonerer for i TED-videoen ovenfor. Les videre

Hjertesukk fra en digital mor

Barnehageopptaket er i full gang, og etter 6 måneder i kø, 2 oppdaterte søknader og 4 telefonsamtaler med noe anstrengt toneleie har vi fått plass til poden.

Prosessen har fått hjernen min til å jobbe overtid med nye idéer…  Hva med animasjoner som viser hvordan køen beveger seg? Rekker med små avatarer – som tusler taktfast mot det uoppnåelige Soria Moria i det fjerne. Eller hva med drag and drop? Ledige barnehageplasser på den ene siden, og ditt barn på den andre. Dra poden over – og vips er plassen sikret! Bytte-torg med Facebook-integrasjon med  kunne også vært noe: Har plass på Bjølsen, bytter mot Kjelsås – anyone?

Spøk til side. Systemet for tildeling av barnehageplasser i Oslo er tungrodd, gammeldags og ineffektivt. Kudos til de som jobber på barnehagekontoret og daglig svarer på telefoner fra frustrerte foreldre som etterlyser bedre kommunikasjon. Transparente digitale løsninger som gjør det lett å søke, men enda lettere å følge prosessen etterpå er det som trengs. Og nå som poden har fått barnehageplass, har jeg tid til å hjelpe!

 

Ett van Halen-klistremerke er verdt tre Sex Pistols-klistremerker

Med Like-knappen kan du vise fram ting du vil at andre skal vite at du liker. Finner du en ting du liker, men tør ikke å innrømme det, holder du deg unna Like-knappen. På samme kan du dele videoer, bilder og Spotifylinker.  Med disse preferansene lager du  et kontrollert offentlig selvportrett.

Men hva skjer hvis du blir påført en preferanse? Hjemme har vi en laptop med Spotify koblet til stereoanlegget. En dag hører kona mi på Shaun Bartlett i stua. Hun skal på konsert med Shaun Bartlett, og deler en sang på Facebook via Spotify. Siden Spotify i stua er logget på med min konto, blir Shaun Bartlett-sangen publisert på min profil.

Jeg har ikke noe i mot Shaun Bartlett. Men siden jeg aldri har hørt ham, har jeg ikke noe for ham heller.

Hele min møysommelig iscenesatte musikksmak står i fare for å kollapse. 80% sur kritthvit indierock. 10% obskuriteter fra gamle dager. 10% ukule artister. (Husk, ett van Halen-klistremerke er verdt tre Sex Pistols-klistremerker.)

Så skjer det. Venner gir meg tommel opp, Facebook-style. Tenk om jeg får en Shaun-Bartlett-CD i presang? T-skjorte? Konsertbillett? Jeg sitter snart fast i en Seinfeldepisode skrevet av Mark Zuckerberg.

Så, Eirik, Kaja og Sanjin: Beklager. Jeg liker ikke Shaun Bartlett, ikke en gang hemmelig. Men jeg misliker ham heller ikke.  Jeg har bare ikke hørt en eneste Shaun Bartlett-sang.

En enklere og mer effektiv hverdag

Både for designere og utviklere er en viktig del av jobben å teste nettsteder som er under utvikling for å forsikre seg om at alt blir så bra som mulig. I den forbindelse har jeg prøvd ut noen plug-ins for Firefox og noen webbaserte applikasjoner som gjør det enklere å teste nettsteder og å gi tydelige tilbakemeldinger.

Firesizer – https://addons.mozilla.org/en-US/firefox/addon/5792/
Resize My Browser – resizemybrowser.com

Det er alltid lurt å teste hvordan nettstedet du jobber med tar seg ut i forskjellige oppløsninger. Firesizer plug-in for Firefox gjør det enkelt å justere størrelsen på nettleseren din til standardstørrelser som 1024×768 og 800×600. Personlig savner jeg et litt større utvalg og bedre beskrivelser av oppløsninger i Firesizer. Resize My Browser har på sin side et veldig godt beskrevet utvalg av oppløsninger, men er en webbasert tjeneste og ikke en plug-in. Begge viser størrelsen på nettleseren din i real time.

MW_blogg_resizemybrowser

Screengrab! – screengrab.org
Det å ta skjermbilde av nettsider er noe man ofte har bruk for, og som ikke er lagt opp veldig enkelt for de av oss som sitter og jobber i Windows. Screengrab! er et plug-in for Firefox som lar deg lagre alt som er synlig i nettleseren (enten med eller uten verktøylinjer), mindre utsnitt, og også hele nettsiden som èn stor screenshot.

PixelPerfect – pixelperfectplugin.com
PixelPerfect er en plug-in for Firefox som lar deg legge en bildefil oppå en nettside du har åpen i nettleseren, som i et eget layer. På denne måten kan du sammenligne nettsiden du holder på å teste med det grafiske designet som er levert til utvikling. En rask og nøyaktig måte å oppdage om det er avvik som må rettes på, spesielt kjekt om man skal ha det pixel perfect.

Firebug – getfirebug.com
For brukere av Firefox, er Firebug en utrolig kjekk plug-in å ha. Er du usikker på om bredden av et bildet er korrekt, eller om fargen på en link er riktig? FireBug lar deg klikke på og inspisere alle elementer på en nettside, og viser deg informasjon om farger, fonter, størrelser og alt annet som er definert i css og html-koden. Det forutsetter litt grunnleggende kjennskap til CSS, men ikke nødvendigvis så avskrekkende mye.

Bounce App – www.bounceapp.com
Bounce App er en webbasert applikasjon som lar deg kommentere rett på nettsider. Last inn en URL, legg inn dine kommentarer, og del med hvem du vil. Det er ikke nødvendig å registrere seg, og det er en veldig lav terskel for å komme i gang med applikasjonen.

Desverre kan Bounce ikke hente inn screenshots fra lukkede siter (noe de ofte er i utviklingsfasen), men det finnes et mer omfattende alternativ fra samme selskap som heter Notable App – notableapp.com. Dette lar deg også laste opp bildefiler fra PC, laste opp via iPhone og bruke et eget firefox-plugin som tar skjermbilder du kan legge inn, ulempen er at man må registrere seg og med gratis-versjonen kun kan dele med 3 andre personer.

MW_blogg_bounce_screen

Konklusjon
Det var et lite knippe verktøy å teste ut i fremtidige prosjekter. Dette er verktøy som kan være nyttige både internt mellom designer og utvikler, og i dialog med en ekstern kunde. Felles for dem alle er at de er tidsbesparende tjenester som er enkle å bruke.

Det finnes selvfølgelig alternative plug-ins til andre nettelesere enn Firefox med samme funksjoner som utvalget i denne artikkelen, men jeg har valgt å ta utgangspunkt i èn nettleser. Har du et godt forlag til alternativer, kom gjerne med dem.

Størrelsen teller nesten ikke – tekststørrelse og lesbarhet

I webdesignprosjekter ender man ofte opp med å diskutere hvor liten teksten kan være før den blir for vanskelig å lese. Her er noen tall som parkerer diskusjonen.

Blir en tekst lettere å lese jo større teksten er? I 2008 undersøkte Martin Liebig ved høyskolen i Gelsenkirchen dette i et online eksperiment med 3000 deltagere (obs: PDF, 750kb). Undersøkelsen viser at det ikke har noe for seg å øke tekststørrelsen over 13-14 piksler. Undersøkelsen testet bare lesbarhet for brødtekst. (Det du leser nå, er brødtekst. Det andre er overskrifter, ingresser, mellomtitler, bildetekster etc.)

Lesehastighet = lesbarhet

Deltakerne i eksperimentet ble bedt om å lese fire forskjellige tekster på en nettside, hver på 110 ord. I hver tekst var det to ord som helt tydelig ikke hørte hjemme. Når deltageren fant det første ordet, venstreklikket han med musa. Når han fant  det andre ordet, gjorde han det samme. Tiden mellom de to klikkene ble et mål på lesehastigheten.

Disse fontene ble testet

Disse fontene ble testet

På denne måten ble lesehastigheten til 12 forskjellige systemfonter, kombinert med forskjellige størrelser, linjeavstander og linjelengder målt.

Hvis vi tar dette for god fisk, godtar vi at lesehastighet er lik lesbarhet. Man kan for eksempel se på «lesbarhet» som det samme som økning i kunnskap. Hvor mye klokere blir du av å lese en tekst satt i Verdana enn en tekst satt i Arial? Å måle dette er en umulig oppgave. Lesehastighet er ikke et perfekt mål på lesbarhet, men det nærmeste man kommer i et eksperiment som dette. Til gjengjeld gir 3000 deltagere et solid tallgrunnlag.

Her er tallene

Det viste seg at større skrift gjorde tekstene mer lesbare opp til en viss størrelse. Dette er størrelsen for de tolv systemfontene som ble testet:

Arial – 13px

Calibri – 14px

Cambria – 14px

Candara – 14px

Constantia – 13 px

Georgia – 13 px

Segoe – 13px

Tahoma – 12 px

Times – 14 px

Trebuchet – 14px

Verdana – 12px

Større tekst enn dette hadde ingen effekt på lesbarheten.

Hvorfor er størrelsen forskjellig for hver av fontene?

Siden det er flest små bokstaver i en vanlig tekst, er det høyden på disse (x-høyden) som bestemmer hvor «stor» skriften ser ut.

X-høyde

X-høyde

Forskjellige fonter brukt i samme størrelse har forskjellig x-høyde. Derfor vil for eksempel Times se mindre ut enn Verdana når begge er satt i samme størrelse.

16px

For å kunne sammenligne fonter, ble tekstprøvene justert slik at x-høyden var lik for hver av de fontene som ble sammenlignet.

divpx

For å sammenligne lesehastigheten til Verdana og Times New Roman, må Verdana settes i 16 piksler, og Times New Roman i 19 piksler.

Pass på linjeavstanden

Standard linjeavstand i en nettleser er 120 %. Det vil si at en hvis skriftstørrelsen er 12 piksler, setter nettleseren linjeavstanden til 16. Undersøkelsen viser at dette er altfor lite.

En linjeavstand på 250% av x-høyden er en god tommelfingerregel. Som vi husker, er det x-høyden i fonten som bestemmer hvor «stor» en skrift ser ut.

linjehoyde

Et eksempel: X-høyden til Verdana i 12 piksler er 8 piksler. 8 × 2,5 = 20, som er en bedre linjeavstand enn nettleserens gjerrige 16.

Hvor viktige er disse tallene?

Litt. Lesbarheten varierte med bare 3,9 % mellom de forskjellige skriftstørrelsene. Utslagene på andre variabler var minimale, med linjeavstand som unntak.

Fontvalget hadde heller ingen synlig innvirkning på lesbarheten.

Designerens erfaring og skjønn er like viktig som disse tallene. Men aller viktigst er teksten selv. God typografi er sjanseløs mot en elendig tekst.

Dette innlegget er basert på artikkelen «Die gefühlte Lesbarkeit» fra Design Tagebuch.

Hva ble testet?

Disse fontene ble testet

Disse fontene ble testet

Lesehastigheten til 12 forskjellige systemfonter, kombinert med forskjellige størrelser, linjeavstander og linjelengder, ble målt. Over 3000 personer deltok i en online test.

Hva er «lesehastighet»?

Konkurrenter imellom

I forbindelse med oppslaget i Finansavisen den 26. august om at Making Waves overtar Tarantell , fikk journalisten med seg min litt flåsete kommentar på informasjonsmøtet at vi nå skal ta innersvingen på Creuna. Dette skrev journalisten selvsagt i avisa, selv om det mest var ment som spøk og uansett kun til innvortes bruk.

Jeg ringte derfor til Arne Hjeltnes i Creuna for å si unnskyld og at vi har stor respekt for dem som konkurrent. Ikke overraskende syns han det var lystelig, men satte pris på telefonen.

Beskjeden de ansatte i Creuna fikk fra Arne Hjeltnes etter at nyheten om Tarantell og Making Waves ble kjent var imidlertid at konkurransen blir skjerpet og at de må legge seg i selen.

Vi er imidlertid begge enig i at både Making Waves/Tarantell og Creuna er godt posisjonert innen digital kommunikasjon og at markedet er stort nok for begge aktører.

God helg!