En stappfull markedsplass – som flokkdyr forstår vi at dette er attraktivt fordi mange andre mennesker er der. Blide av Sanctu, Flickr.com, CC-lisens

Så hva har dette med brukskvalitet å gjøre? Det ligger i vår natur som flokkdyr å følge andre. Dersom ditt nettsted viser at det finnes liv der, blir vi tryggere på det vi gjør. Om du selger noe, vil jeg vite hva andre har kjøpt. Se bare her på Amazon.com:

På amazon er det mye tegn til liv. Produktsidene handler mye om andre ting som folk kjøper og hva andre mener om produktet.

Gode gamle tuben kan brukes som eksempel på alt. Her ser vi hvordan forsiden i stor grad handler om hva andre ser på akkurat nå. Det er viktig å vite at andre bruker det, og for å føle tilhørighet vil vi gjerne oppleve det samme som andre.

Et norsk eksempel hvor man må lete litt for å finne liv er nettbutikken komplett.no. Det finnes kundeanbefalinger, produktomtaler og rating av produktene men størsteparten av forsiden er tom for liv. Er det noen hjemme?

Er det noe liv her? Det er ikke godt å vite.

Om man ikke kjenner nettstedet og vareutvalget er det vanskelig å vite om det er populært. Og det er viktig å være populær, ettersom vi alltid hermer etter andre. Vi handler der andre handler, vi kjøper til og med  samme varer. Om du har mange kunder, så skriv gjerne det. Det viser meg at her er jeg ikke alene om å handle. At andre har gjort det samme gjør meg trygg på at jeg ikke blir lurt, at prisene er greie og at varene holder det de lover.

Joda – Komplett.no har mye tegn til liv men det er ikke gitt en god plassering. De kunne med fordel vist bedre frem hvor populære de er for å fjerne tvil hos skeptiske nye kunder.

En variant av tegn til liv er det jeg kaller suksesshistorier. En god læremester fortalte meg om dette fenomenet mens vi jobbet med internasjonale nettsider for kjøp og salg. Eksempelet han brukte var Shaadi.com – Et av de største nettsidene for å finne en partner å gifte seg med i India. Se bare her:

Shaadi.com bruker mye plass på å vise deg sine suksesshistorier. De oppfordrer brukerne til å sende inn sine suksesshistorier fordi de vet hvor viktig det er å vise at dette er stedet andre folk bruker for å treffe en ektefelle.

Men det beste eksempelet jeg har funnet er Svensk-norske Møteplassen. Der kombineres suksesshistorier med bilder av faktiske medlemmer. Dette gir en fin kombinasjon som viser at det finnes yrende liv der.

Selv den mest minimalistiske GUI trenger tegn til liv. Har du lagt merke til Google suggest som foreslår søkekriterier? De er satt sammen av søkebegreper som andre skriver. Å vite hva andre søker etter gjør det enkelt å formulere sine søk og det gir trygghet å vite hva andre søker etter:

Ja DET skulle du likt å vite det tenker jeg

(Som vanlig) mangler jeg empirisk grunnlag for mine påstander men det er all grunn til å tro at tegn til liv, eller mangel på liv påvirker vår trygghet når vi søker informasjon eller kjøper varer fra ditt nettsted. Som flokkdyr søker vi dit andre folk er, gjør det de gjør og begjærer samme ting som de har.  Hvordan fremstår ditt nettsted for brukerne? Tomt, eller fullt av liv?

Som et rekrutteringstiltak for å få opp andelen jenter på IT-studier i Trondheim, arrangerte Jenter og Data ved prosjektleder Nina Kotte, NTNU, en IT-camp i Trondheim hvor 50 jenter fra videregåendeskoler rundt omkring i landet ble invitert. Jeg, professor Dag Svanæs og student Lars K. Flem arrangerte øvelsen.

Siden iPhone fortsatt er rimelig hot blandt unge mennesker i dag, baserte vi oss på den som basis for prototypen som ble bruk. Vi skrev ut 50 bilder av en iPhone, monterte de på capafix (en 5 mm tykk pappplate med lim for montering av bilder), og skar ut formen til en iPhone ved hjelp av en skarp tapetkniv. Det resulterte i 50 papptelefoner som i form og tykkelse ikke ligner så aller verst på den “ekte” saken. I tillegg skar vi til post-it lapper slik at de passet rimelig nøyaktig inn på skjermen til en papirtelefonen, heretter kalt pappPhone.

Hver av deltakerne fikk utdelt en pappPhone, en bunke tilpassede post-it-notes, og en blyant. Så ble de instruert til å dra ned til Trondheim Torg (et kjøpesenter midt i Trondheim sentrum) perfekt for shoppeglade unge damer. Her ble instruert til å lage et mobilt system som skulle forbedre shoppingopplevelsen deres ved hjelp av pappPhonen og. De fikk oppgitt at iPhonen hadde GPS (som for anledningen også fungerte innendørs), Bluetooth og RFID-leser.

I kjøpesenteret gikk elevene rundt (med fotograf Kai T. Dragland på slep) og “brainstormet” seg frem til nyttige (og unyttige) funksjoner på telefonen ved hjelp av pappPhonen som prototyp. Mange gikk rundt på egen hånd fra butikk til butikk og brukte pappPhonen til å komme på ideer, noen intervjuet butikkpersonalet, andre snakket med kunder.

Elevene trakk seg deretter tilbake til flere grupperom der de fikk beskjed om å lage en poster der de presenterte den beste av ideene de kom frem til.

Det kom frem flere gode ideer under posterfremvisningen:

Trendråd: Flere av gruppene kom frem til applikasjoner som hjelper deg med å finne frem klesplagg som passer deg i forhold til dine vitale mål, øyefarge, hårfarge. Noen baserte seg på trendråd basert på informasjon som du selv oppgir. Andre og mer avanserte varianter kan du gjøre en “virtuell” prøving av klærne uten å ta det på; du tar bare bilde av klesplagget på kleshegeren, så lager applikasjonen et bilde av deg med klesplagget på slik at du ser hvordan det kommer til å ta seg ut.

Karttjeneste: Telefonen tilbyr en innendørs karttjeneste som for eksempel hjelper deg med å finne veien og menyen til restauranter i kjøpesenteret

Kølapp: På telefonen kan du trekke kølapp til apoteket på mobiltelefonen mens du fortsatt shopper i en annen butikk.  Underveis i shoppingen får du se hvilket kølappnummer som ekspederes på apoteket, slik at du kan gjøre andre innkjøp i mellomtiden. Alarmen går når ditt klølappnummer nærmer seg og du må løpe til apoteket (se detaljert poster ved å trykke på bildet under).

Budsjetthjelp: Hold styr med hvor mye du shopper for. Systemet kommuniserer med kassasystemene og holder styr med hvor mye du har shoppet for og hvor mye du har igjen på budsjettet. Du får klar beskjed når du har oversteget budsjettet.

Til slutt gjennomførte elevene selv en kåring av beste poster og beste detalj i posteren. Vinnerne (dødt løp) ble en av trendrådløsningene samt det mobile kølappsystemet. På en halv dag lærte altså 50 unge mennesker seg kunsten å prototype gode designløsninger.

• Noen tar seg bryet med å gjøre et utvalg av hva som skjer i verden
  Det vrimler av tilgjengelig informasjon, og det at noen tar seg bryet med å strukturere denne informasjonen i en lineær leseopplevelse, som er prioritert og organisert er veldig betryggende. Og det er minst like viktig at en avis velger bort informasjon for meg slik at jeg står igjen med det viktigste. Når profesjonelle mennesker gjør slike utvelgelser av alt som har skjedd i verden siste døgn, og rangert det etter viktighet så er det verdt å betale for.
• Presentere det på en måte som gjør at stoffet kommer til sin rett
  Typografer kalles disse menneskene som på noen få timer hver kveld setter sammen en grafisk presentasjon av de utvalgte nyhetene og sakene som jeg får levert på døra hver morgen. De bruker ulike typer (fonter) for å fange leserens oppmerksomhet, trekke fram det som er viktig og trekke leseren inn i saken. Har du lagt merke til at noen saker kun er et bilde og en bildetekst, andre er små notiser med overskrift og 50-60 ord mens store saker er dobbelside med flere bilder i ulike størrelser, ingresser, bildetekster m.m.? Avisa du kjøper i kiosken er faktisk designet av en fagperson som skreddersyr en presentasjon som passer innholdet – hver dag.

Summen av dette er at den tradisjonelle nettavisen slik vi kjenner den hopper bukk over to svært vesentlige elementer og kan dermed være medvirkende årsak til at vi ikke gidder å betale for nyheter på nett. Nettaviser presenterer nyhetene kronologisk (med noen få unntak) og i bunn og grunn behandles alle saker likt, enten det er en stor og komplisert sak med mye stoff , en kort notis eller en syltynn kjendishistorie. Publiseringsystemet har selvsagt mye av skylden.  Men de som produserer innholdet har det største ansvaret, og

Nettavisene må vise respekt – for sitt innhold og sine lesere

Kjære alle nettaviser:

• Innse at å presentere ting i kronologisk rekkefølge som om alt var like viktig er å fraskrive dere ansvar. Del opp innholdet på en måte som jeg vet dere er gode for. Dere klarer det på papir, og ABC news i Australia klarer det på nett. Dere er de profesjonelle, vis litt yrkesstolthet!
• Gi meg den respekten jeg fortjener som leser: Gi meg tydelige signaler på sakenes viktighet og omfang. Den nettavis som befrir seg fra publiseringsystemets tøyler og presenterer sakene på en profesjonell måte kan kanskje til og med ta betalt for det. Det hadde vært noe det. Eller?

Hva med deg? Hva vil du savne når/hvis papiravisa blir borte?

Finansportalen.no

1. Endre skriftstørrelse gjør ikke som forventet
Jeg er ikke svaksynt, men jeg har en bitteliten PC. Det første som slår meg er at jeg har et behov for større skrift, og klikker på “endre skriftstørrelse” på toppen av siden. Overraskelsen er stor når jeg blir forflyttet til forsiden og klikker gjentatte ganger før jeg innser at utviklerne ikke har sett for seg det scenario at jeg ikke står på forsiden når jeg skal endre skriftstørrelse. Jeg gikk tross alt inn via en link på et annet nettsted og det må være vanskelig å se for seg at noen gjør, eller?
Løsning: Det finnes design patterns for endring av skriftstørrelse. Bruk dem.

2. Tekststøy og dobbel navigasjon forstyrrer meg
Som overskriften sier, så gjentas ordene “bytt” og “bank” til det ekstreme.  Brødsmulestien på toppen av siden forteller meg at jeg befinner meg på “Bank”, og – er det mulig – at jeg kan bytte bank under “bytt bank” siden.

Bytt bank bytt bank bytt bank. Bankbytte?

For å gjøre vondt verre finnes det flere linker til nøyaktig samme side.  Navigasjonen dobles og tredobles dersom man regner med brødsmulestien. En hløsning bør være å fjerne hierarkiet i venstremenyen slik at navigasjonen ligger i hovedsiden eller omvendt, en av dem er unødvendig. Den som lager det vet at linkene er like men vi som bruker det for første gang kan ikke vite det.

Dobbel navigasjon

Løsning: Bruk Steve Krug’s formel for webtekster: Omit needless words. Skriv det du vil si, kutt halvparten og kutt deretter halvparten igjen. Da har du passe lang tekst.

3. Tilgjengelighet via “leseweb” er ufin mot meg
Det er prisverdig å ha en funksjon som leser opp innholdet på siden men den glemmer å nevne at bruker først må markere det som skal leses opp, og deretter trykke “play”. Og når jeg ikke vet det så svarer den med å rope DET ER IKKE MARKERT NOEN TEKST! i et prompt. Å unnskyld kjære system, jeg prøvde bare å bytte bank bank bytte bankbytte, jeg skal aldri gjøre det mer.

Leseweb for svaksynte er slem

Under innstillinger finner jeg også begrepsforvirring, “Min linekapasitet” tolket jeg i all min dårskap til å være hvor mange linjer jeg ville høre på om gangen, eller “takk for at du spør men linjeavstander var helt grei, det er ikke derfor jeg vil ha teksten lest opp”.  Jeg gjør meg litt dum nå men linjekapasitet er et ord vi sjelden benytter.

Min linjekapasitet

Løsning: Bruk kjente begreper.

4.Mistenkelig interaksjon for veiledning og manglende hjelp når jeg trenger det

"ORD OG BEGREPER"

En slik har jeg aldri sett før, men når man plasserer en stor blå klump på siden på denne måten kan man ikke unngå å legge merke til den. Visuelt sett er denne spøkelseskladden svært viktig på siden så en nysgjerrigper som meg må undersøke hva den gjør. Hele alfabetet er representert, det er da noe.  Her kan man klikke på bokstaven, for å se hva kryptiske faguttrykk som Kasko, Kredittkort og Kontofon betyr. Men hva skal jeg med det? Må jeg lese om det før jeg bytter bank med bankbytte? Nei, men den store blå boksen rakk å avlede meg fra min oppgave med å bytte bank med bankbytte før jeg innså at den ikke var til noen hjelp – nå i hvertfall. Men den inneholder også veivisere, hele sider fulle av tekst som avskrekker meg. En av dem kan fortelle om hvordan jeg “sender en henvendelse til en ny bank gjennom bytt bank” – dersom jeg skal bytte bank, naturlig nok.

Nysgjerrigheten fører meg videre – hvor opptrer egentlig alle disse ordene som de som har laget finansportalen tror at brukerne behøver hjelp til?

Hvor er hjelpen når du trenger den?

Aha! I skjemaet for å bytte bank (!) skjuler det seg en skog av bankbegreper. Her fråtser vi i Fastrente, rentetak, mellomfinansiering osv. Men når nøden er som størst, finnes ingen hjelp å få.

Løsning: Unngå svære hjelpeklumper som denne. Sørg for relevant kontekstuell hjelp, som f.eks. på skjema (helt ned på felt-nivå). En sentral inngang til hjelp må også åpne i et eget vindu. Da kan brukerne skrive det ut, ha det åpent mens de jobber med et skjema og du slipper å klikke back 7-8 ganger bare for å finne ut at nettleseren ikke gidder å post’e data på nytt slik at du mister innholdet i skjemaet ditt.

Verden er urettferdig

Det er selvsagt urettferdig av meg å henge ut en enkelt nettside på denne måten. Men verden er urettferdig. Mange nettsider begår slike synder. Jeg ser det hver dag:  Bittesmå avvik fra etablerte design patterns.  Å vasse gjennom en urskog av tekst for å komme til poenget. Ufin oppførsel. Sære begreper og fagguttrykk. Så kanskje ved å statuere et eksempel i ny og ne vil jeg kunne inspirere noen til å gjøre noe med det.

Bytt gjerne bank med bankbytte på finansportalen.no. Tross alt er det en flott tjeneste.

Oppskriften er enkel

1. Lag prototypbasisen (en tom skjerm) på et stykke tykt papir.
2. Lag et snitt øverst i hele skjermens bredde (du må selvfølgelig spare på eventuelle navigasjonsknapper). Lag et tilsvarende snitt i nedre del.
   
3. Lag hele skjerminnholdet på en papirstrimle (tykt papir) med nesten samme bredde som snittene øverst og nederst på skjermen.
   
4. Papirstrimlen stikker du inn i snittene i prototypbasisen fra undersiden øverst og ned fra oversiden nederst.
   
5. Slik vises et utsnitt av skjerminnholdet i prototypen din.
   
6. Når brukeren vil scrolle ned eller opp i skjermbildet tar hun papirstrimmelen med fingeren og drar den opp eller ned (du kan eventuelt hjelpe til med å dra papirstrimlen opp eller ned slik at et nytt utsnitt av skjerminnholdet vises)
   
   
   

Slik kan du scrolle, selv med en papirprototyp. Det fungerer ikke bare på prototyper av mobiltelefoner. Også scrolling i applikasjoner på større skjermer kan løses med denne metoden.

Hvordan synes du det fungerer? Gi oss tilbakemeldinger!

Rader eller kolonner? Bilde av kontrollpanelet til en heis

Heisknappene ser ut til å være gruppert i rader

Den faktiske grupperingen er slik

Om vi oppfatter ting som rader eller kolonner kommer an på mange faktorer. Se f.eks. her:

Rader eller kolonner?

Her blir det tydeligere. De fleste vil oppfatte bildet under som tre kolonner:

Rader eller kolonner?

Her antyder plasseringen rader:

Rader eller kolonner?

Eksempler fra den virkelige verden ser man oftest i presentasjon av søkeresultater. Mange designere tegner én rad i en liste og utviklerne lager en iterasjon som presenterer resultatet for brukeren. Ta ikke slike lettvinte løsninger! Når man presenterer søkeresultater i tabellform må man se på dataene. Hva er sammenlignbart? Hvordan fasilitere at brukeren kan scanne listen for å få oversikt? Svaret finner du ved å sette deg inn i de visuelle virkemidlene for å presentere innholdet i lister, ta hensyn til rader og kolonner og lag brukerscenarier som kan gi deg tips om hvordan brukerne vil lese innholdet. Tips: De vil IKKE lese én og én rad i din liste eller tabell.

Søkeresultat fra komplett.no

Når man søker etter biler hos FINN ser man samme metode i bruk. Resultatene presenteres som rader (1 rad= 1 bil) men for at bruker skal kunne sammenligne data ved å scanne listen er nøkkeldata presentert i tydelige kolonner. Radene fremheves med bakgrunnsfarge og nøkkeldata er uthevet med fet blå skrift.

Søkeresultat fra FINN bil

Søker man derimot etter Dell Inspiron tvinges vi til å lese én og én rad. Når data presenteres i klumper på denne måten fremstår det tydelig som rader, og vi det er umulig å scanne.

Dell søkeresultat

Ser man nøye på dataene kommer det fram flere ting som kan forbedres, b.l.a. presenteres innhold fra ulike kategorier i samme liste (bærbare og stasjonære PC’er, minnebrikker m.m.) men det er også fint lite som kan sammenlignes. Om vi tar for oss det som finnes tilgjengelig kan vi i det minste presentere det slik:

Her er det laget en delelinje som skiller bærbare fra stasjonære. I tillegg er vekt og operativsystem plassert i egen kolonne slik at de kan sammenlignes. Ved å skille beskrivelse fra tekniske detaljer gjøres hver rad enda mer lesbar og selv om de tekniske dataene ikke er direkte sammenlignbare kan avanserte brukere lett plukke ut hvor “tekstklumpen” med teknikken finnes. I tillegg har jeg fjernet de doble linkene (linken, overskriften og knappen går til samme side). Det gir oss mer plass og mindre visuell støy.

Jeg hører gjerne fra brukere som har gode eller mindre gode eksempler på søkeresultater. Bla. Viewzi.com har laget fascinerende måter å visualisere søkeresultat på.