Brukskvalitet

Dette heispanelet er ubrukelig. Det er et tydelig eksempel på feilslått visuell organisering som er noe av det som syndes svært ofte mot i applikasjoner og på internett. Men hva er løsningen? Les videre for å se hvordan du kan presentere innholdet i dine søkeresultater for at de skal være enkle og oversiktlige.

Legg merke til grupperingen av knapper i heispanelet. Hvis du ignorerer teksten (ved å f.eks. myse på bildet) ser du at de er tydelig organisert i tre rader. Men når vi tar for oss hvilke etasjer de ulike knappene faktisk tar deg til, ser du at rekkefølgen er fire kolonner. “Start” er øverst til venstre, der finner vi de to kjeller-etasjene. Så går vi nedover (!) for å komme oppover i etasjene, og det fortsetter på 1b i toppen av 2. kolonne. For å gjøre forvirringen total finnes det en “2b” ved siden av “1″. Dette gjør lesing av dette panelet forvirrende for mange.

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

Bildet viser tre rader og tre kolonner. De med fargesyn kan se begge deler, mens f.eks. fargeblinde ville kanskje sett tre kolonner? Trekantenes plassering antyder at det er kolonner, mens fargen antyder rader.

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

Her antyder plasseringen rader:

Men det kommer an på øyet som ser: Er det fargen eller plasseringen som er det sterkeste visuelle virkemidlet?

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.

I dette eksempelet fra Komplett.no ser vi at dataene er presentert i rader, men at innholdet er stilt opp slik at brukeren kan scanne pris-kolonnen og sammenligne. I tillegg har bilder og tekst samme marg som gjør det lett å lese produktnavnene. Fin bruk av ulike skrifttyper (fet, blå tekst) skaper kontrast og gir et effektivt visuelt hierarki på hver rad. Men det kunne vært gjort ytterligere, f.eks lagerstatus ville latt seg lett sammenligne dersom de ble presentert tydeligere som en kolonne.

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ø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.

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å.