Det er fremdeles noen småting igjen som ikke fungerer i IE6, som f.eks. at man bruker PNG-grafikk istedet for GIF noen steder. Men dette har ikke så mye si for funksjonaliteten. Dette er mer visuelle bugs, som man kan velge å leve med eller ikke. Så, siden www.nrk.no nå ser ut til å fungere i IE6, så har jeg egentlig ikke så mye mer på hjertet. Men jeg kan jo gi dere en rask og overfladisk vurdering av den nye forsiden i stedet.

En rask og overfladisk vurdering av nrk.no

Ifølge NRKbeta så “slår NRKs nettstrategi fast at forsiden både skal være nyhetsdrevet og samtidig synliggjøre mangfoldet av innhold og tjenester – spesielt Nett-TV og nettradio.” Her er det vel ingen tvil om at de har nådd det første målet sitt: om at forsiden skal være nyhetsdrevet. Men jeg synes ikke de når det andre målet sitt: om å synliggjøre mangfoldet av innhold og tjenester. Og det målet synes jeg er viktigere enn å være nyhetsdrevet. NRK er jo mye mer enn en nyhetsleverandør, så hvorfor da lage forsiden som en hvilken som helst annen nettavis (minus mesteparten av bannerannonsene)?

Selv om det visuelle uttrykket på forsiden gir inntrykk av å være enkelt, så jeg er usikker på om jeg vil kalle det stilrent. Jeg synes ikke de har klart å få til et tydelig visuelt uttrykk, men jeg synes det er bra at det er enkelt.

Alt i alt, så synes jeg ikke den nye forsiden er så verst. Jeg tror den er på vei til å bli noe bra. Men nå har jeg heller aldri tenkt så mye over hvordan forsiden på www.nrk.no fungerer. Fordi de gangene jeg har besøkt siden, så har jeg hatt helt andre mål for besøket enn å lese nyheter.

Disclaimer: Det kan være at NRK faktisk har gjort et valg om å ikke bry seg om IE6, selv om det ser ut som at sidene fungerer der.

Det jeg vil kommentere er selve det grafiske designet, eller heller mangelen på det. Fordi, med fare for å fornærme noen, dette er utrolig slett håndverk. Hvis en snekker hadde levert et snekkerarbeid med samme kvalitet som dette, så ville ingen ha betalt for det.

Visuelle quickfix for å forbedre brukeropplevelsen

Det nye www.politi.no gir et uprofft grafisk inntrykk, både visuelt og typografisk. Og jeg påstår man lett kunne unngått mye av dette hvis man hadde benyttet bare litt profesjonell designhjelp. Jeg har ikke tenkt å harselere over hvor dårlig jeg synes designet er, men jeg vil heller komme med forslag til visuelle quickfix’s som jeg mener vil forbedre inntrykket litt.

Jeg har tatt for meg en underside på www.politi.no og brukt 2-3 timer med kun justering av stilarkene for å se hva jeg kan få til. Resultatet kan dere se i en skisse lenger nede på siden.

Orginalversjon av underside:

Mine 6 forslag til visuelle quickfix’s:

1. Ta bort den mørke-grå bakgrunnen
2. Gjør logoen mye mindre
3. Øk skrift-størrelsen “all-over”, spesielt på brødteksten. Orginalt er skriftstørrelsen på brødteksten under 10 pixel (i Firefox på Mac. På PC er det under 11 pixel), og det er altfor lite. Det hjelper heller ingenting at man har en funksjon for å øke skriftstørrelsen på nettstedet, når de linkene også er under 10 pixels
4. Typografer innholdet for å gjøre det lettere å lese
5. Det er for mange grafiske elementer som sloss om oppmerksomheten på siden. Ta bort en del av dem
6. Bind visuelt sammen elementer som hører sammen

Resultatet av disse quickfix’ene:

Jeg vil understreke at dette IKKE er en design-skisse på hvordan jeg ville designet denne siden. Jeg har ikke forholdt meg til selve innholdet eller navigasjonen eller annen funksjonalitet på siden. Og her er det stort forbedringspotensial, men jeg har kun tatt utgangspunkt i det innholdet og de elementene som finnes på siden, og forsøkt å komme med visuelle forbedrings-forslag som bør være relativt lette å implementere.

Det grafiske skal støtte innholdet

Et nettsted blir ikke bra ved å ha et godt grafisk uttrykk alene. Det viktigste på et nettsted er at det innholdet og de tjenestene man tilbyr, er presentert og tilgjengeliggjort på en brukervennlig måte. Og det er DET det grafiske uttrykket skal være med å løse: presentere og tilgjengeliggjøre innhold og tjenester på en brukervennlig måte, samt å skape ett ønsket inntrykk.

Ifølge prosjektlederen for det nye nettstedet, www.politi.no, så forsøker de med designet “…å formidle trygghet, lov og orden, solditet, enkelhet osv. Noen vil nok oppfatte det som umoderne og kjedelig desverre“. Jeg vil påstå at de oppnår lite av dette, og det har ingenting å gjøre med at noe er umoderne eller kjedelig. Dette er rett og slett dårlig håndverk.

DISCLAIMER: Det er helt tilfeldig at det var siden for å “Anskaffe våpen” som jeg brukte i eksemplet. Så hvis noen lurte, jeg har ingen planer om å gå til anskaffelse av børse!

Samtidig tar jeg meg selv i det, fordi når man jobber med å lage nettsteder, så vet jeg hvor lett det er å overse småting. Men problemet er at slike småting kan bli irritasjonsmomenter for de som skal bruke nettstedet. Og ikke minst, det kan være avgjørende for hvorvidt man kommer tilbake til nettstedet en annen gang.

For å illustrere dette har jeg har tatt frem noen selvopplevde mer eller mindre irriterende eksempler fra nettstedene til CDON, Platekompaniet, Ark bokhandel og Microsoft.

cdon.com

For å handle på cdon.com så må man registre seg, og når man gjør det så må man fylle inn et 13-sifret personnummer på formatet ddmmåååå-nnnnn. Hva er dette for et nummer? Dette er jo helt feil format.

Personnummeret er de siste fem sifrene i fødelsnummeret. Sammen med den seks-sifrede fødelsdatoen som står først, så får vi et 11-sifret nummer som heter fødselsnummer og det skrives på formatet ddmmåå-nnnnn.

Et spørsmål man selvfølgelig kan stille seg er hvorfor må man registrere seg for å kunne handle på cdon.com. Men nå har de engang laget det slik, og hvis jeg ville få tak i sakene mine, måtte jeg gjennom det.

platekompaniet.no

Såvidt jeg vet så står alle utløpsdato’ene på alle kredittkort på dette formatet mm/åå (eks. 11/11). På betalingssiden til Platekompaniet så bruker de nedtrekksmenyer med måneder på tekstform og firesifret årstall (eks. November 2010).

Det kan være de har en god grunn for å gjøre det på denne måten, men det slo meg at kunne man ikke bare ha to nedtrekksmenyer med et to-sifret tall i hver, slik at det likner det som står på kredittkortene? Dette er jo en småting, men det jeg medførte at jeg måtte ta en dobbeltsjekk på kredittkortet for finne ut hva som var hva. Men det var kanskje det de ville.

ark.no

Jeg ville gjerne abonnert på nyhetsbrev fra Ark Bokhandel, men det er ikke lett å finne på ark.no. Jeg ser at nederst i “Ny kunde”-skjemaet så kan man krysse av for “Motta nyhetsbrev“, så jeg antar at de har et nyhetsbrev. Men jeg vil ikke bli kunde enda og jeg vil ikke fylle inn hele dette skjemaet kun for å få et nyhetsbrev.

Etter litt mer leting finner jeg et banner nederst til høyre på forsiden av ark.no, med teksten “- Si Ja til nyhetsbrev. Motta nyheter om salg og andre tilbud. Les mer“.

Men når man klikker på banneret så blir man sendt til “Ny kunde“-registreringssiden igjen. Når banneret frister med mer informasjon om hvordan man kan motta nyheter om salg og andre tilbud på epost, så forventer jeg å komme til en side som gjør akkurat det. Uansett, hvis man ønsker at flest mulig skal abonnere på nyhetsbrevet så er det ikke noe god ide å bruke banner til dette.

En løsning i dette tilfellet ville vært å fjerne banneret på ark.no i sin helhet, og heller bruke tekst sammen med et felt for å fylle inn epost-adresse. Under her har jeg laget et forslag til hvordan det kunne løses:

microsoft.com

Jeg lastet ned en programvare, Expression Web SuperPreview, hos Microsoft. Men siden dette er et beta-produkt, så kunne jeg godt tenke meg å få en påminnelse på epost når det blir sluppet et ferdig produkt. I venstre kolonne på nedlastingsssiden finner jeg link til “Notifications SignUp“-skjemaet. Et av de påkrevde valgene i skjemaet er “For which download categories would you like to receive notifications?“.

Men her finnes ikke noe eget valg for den programvaren jeg lastet ned, og jeg vet ikke hvilken “download category” den tilhører.

Dette kunne vært løst på en av to måter. På selve produktsiden/nedlastingssiden kunne de fortalt hvilken kategori dette hører til, eller så kunne de i skjemaet gitt meg en mulighet for å finne ut hvilke produkt som hører med til hvilken kategori. Av disse to er nok den første den enkleste, men den siste er nok den beste løsningen. Kanskje det hadde vært en god ide å bruke begge?

Så hva kan vi som lager nettsteder gjøre?

Disse fire eksempelene viser forskjellige problemer. I de to første tilfellene fikk jeg gjort det jeg kom for, mens ved de to siste gjorde jeg ikke det.

Det vanskeligste er å fange opp disse småtingene i første omgang. Når man først har blitt klar over de er det relativt lett å komme på en bedre løsning, ihvertfall hvis man jobber med brukeropplevelser til daglig. Men det viktigste er selvfølgelig å få implementert løsningene på en rask og enkel måte. Mitt inntrykk er at det ofte er her det stopper opp, fordi man har dårlige og/eller rigide systemer for få gjort slike endringer i en CMS-løsning.

Jeg håper dette kan være påminnelse til oss som lager nettsteder om å prøve å bruke enda mer sunn fornuft i vår tilnærming til brukervennlighet enn det vi gjør, slik at sånne problemer ikke oppstår i første omgang. Så, for å si med Steve Krug’s ord, “Don’t Make Me Think“.

Av og til ser jeg for meg at det sitter en skummel og usivilisert gjeng på bakrommet og pønsker ut nye sinnrike banner-reklamer som skal fange oppmerksomheten vår. Og mitt inntrykk er at mange nettsteds-eiere nedprioriterer sitt redaksjonelle innhold, til fordel for en mer direkte inntektsbringende disponering av layouten. Dette til tross for at det er det redaksjonelle innholdet vi som brukere er på jakt etter.

For eksempel, hvis du leser denne saken på itavisen så ser du en jungel av blinkende banner-reklame og hvis du er heldig så klarer du å få øye på overskriften og ingressen, som i dette tilfelle er to små linjer tekst. Så jeg er ikke forundret over at “banner-blindness” er utbredt blant oss brukere. Jeg tror faktisk det er en nødvendig evne for i det hele tatt å kunne tilegne seg det redaksjonelle innholdet på noen nettsteder.

Men nok harselering om bannere, fordi det var ikke det jeg ville fortelle om. Jeg ville bare understreke at jeg ikke promoterer banner-reklame i det hele tatt, og “just-for-the-record” så leser jeg itavisen.no hver dag og har gjort det i flere år. Det jeg ville fortelle om, var en sak jeg leste på mac1.no, og overskriften som trigget meg var “Apple banner-reklame: Vista suger”. Og der snakket de om bannere som “samhandler”, dvs. et stort utfallenede horsiontalt banner som “samhandlet” med et digert banner i høyrekolonne. Samhandlingen kan oppleves “live” på pcmag.com, men jeg har tatt med etpar skjermdumper for å vise.

Kort fortalt, i banneret i høyrekolonne så står det to karer som driver å snakker om det store horisontale Vista-banneret, og de finner ut at banneret må jo byttes ut, så de kjører igang en “emergency banner refresh” og bytter ut det horisontale banner etpar ganger. Helt til det kommer ett banner de liker, og det er selvfølgelig et Apple-banner.

Da jeg så dette “live” første gang, så slo det meg at dette var jo morsomt, med lyd og pauseknapp du kan trykke på slik at du rekker å hente mer kaffi. Jeg må innrømme at jeg så den flere ganger, og viste den til kollegaer rundt meg. Tenk dere den “samhandlingen” vi kunne fått på nettsiden til itavisen som har så mye bannere! Det kunne jo blitt utrolig morsomt.

Men, er dette en innovasjon innen annonsering på nett? Og i så fall, er det bra for oss brukere? Den fanget ihvertfall min oppmerksomhet (opptil flere ganger), men jeg er usikker på om jeg likte at den ble fanget på den måten. Vi kan jo se for oss at dette utbrer seg i tiden fremover, og er det noe vi ønsker oss?

Her er en annen Apple-reklame som viser “samhandling” mellom bannere:

Dette er selvfølgelig en forenkling av virkligheten, men man kan godt kalle dette en standard layout for nettsider i dag. Og jeg tror dette er blitt en standard ikke nødvendigvis fordi det er best, men like mye fordi det er relativt lett å plassere innhold og navigasjon i en slik layout. For eksempel er dette standard layout i mange publiseringssystem.

Standard kolonnelayout er ikke nødvendigvis dårlig, fordi det gir gjenkjenbarhet på tvers av nettsteder og gir til en viss grad forutsigbarhet, men jeg tror det er rom for forbedring av layouten hvis vi ser på hvordan brukere navigerer rundt på et nettsted. Så, hensikten min med dette innlegget er å prøve å komme med forslag til å tenke nytt når det gjelder weblayout.

Hvordan navigerer brukere rundt på et nettsted?

• Brukere er ekstremt målfokusert og de bruker backknappen ofte. De aller fleste brukere har et klart mål når de besøker et nettsted. De vil scanne en nettside, og klikke på linker som de tror tar de til den siden de kom for å finne, og det vil de fortsette med inntil det ikke finnes flere relevante linker eller at de har funnet det de kom for. Finner de ikke siden de lette etter, bruker de backknappen for å gå tilbake til en side de tror kan være et bedre utgangspunkt. Ofte går brukerne helt tilbake til forsiden på nettstedet for å begynne på nytt.
• Brukere vil overse navigasjon og informasjon som ikke virker relevante for det de kom for. Som jeg nevnte over, vil brukerne ofte klikke på backknappen når de ikke finner det de lette etter. Og jeg tror at en av grunnene til dette, er at de overser all navigasjon underveis som de anser for å være ikke-relevant for dem. Noen har kalt dette “Navigation blindness”.
  En liten digresjon, i 1999 ble det gjort en undersøkelse hvor personer ble bedt om å se en video av noen som spilte basketball, og de ble gitt oppgaven å telle antall pasninger innen et av lagene. Etterpå ble de spurt om de hadde lagt merke til noe spesielt på videoen, og halvparten hadde vært så fokusert på å telle pasninger at de ikke hadde sett en person utkledd som gorilla spasere over skjermen.
• Informasjon som ligger i høyrekolonnen blir ofte oversett av brukere fordi de scanner en nettside i et F-mønster.
• Brukere er villige til å scrolle ned på en side. Hvis brukere tror, eller får indikasjoner på at de finner mer relevant informasjon lenger ned på siden, er de villige til å scrolle nedover på en nettside.

Mitt forslag til forbedring av weblayout

I stedet for å tenke kun kolonner i layouten, tenk rader også, spesielt på innholdssider. For eksempel har Amazon kuttet ut både venstre- og -høyrekolonne på produktsidene sine, og de bruker kun radlayout.

Hvis det er slik at brukere overser hva som ligger i høyrekolonnen, så bør man vel heller ikke bruke den til relevant innhold. Man kan kanskje vurdere å ta den bort, for å få mer fokus på hovedinnholdet. Den informasjonen man hadde tenkt å legge i høyrekolonnen kunne man lagt i en rad på bunnen av siden, sammen med annen relevant navigasjon.

Tenk deg at du har funnet en artikkel eller en side som du fant interessant. Da er linker til relatert innhold ikke interessant før du har lest artikkelen. Og hvor befinner du deg når du har lest artikkelen, nemlig på bunnen av siden. Man har funnet og lest det man kom for, og man er klar for å lese eller gjøre noe annet. Men på de fleste nettsidene finner man omtrent ingen relevante linker på bunnen av siden.

Navigasjon man kan se for seg på bunnen av siden

• Link til forsiden på nettstedet
• Link til relaterte artikler/sider
• Global navigasjon
• Søk
• Stien/pathen ligger jo tradisjonelt på toppen av siden. Men den kunne også ligget på bunnen av siden.

Her er noen eksempler

Denne artikkelen, “Embrace your bottom“, viser ideen i praksis og den omhandler samme tema. En annen side som også viser denne ideen er “Killing Some Bad Layout Conventions“. Her har man lagt hele hovednavigasjonen på bunnen av siden. Selve artikkelen kan forøvring også anbefales.

Man kan også se for seg en kombinasjon av layout bestående av rader og kolonner, sammen med relevant navigasjon på bunnen av siden. www.cssbeauty.com er eksempel på det. Eller som Amazon, som bruker kolonnelayout på forsiden og seksjonsforsider, men på produktsidene går over til radlayout.

De fleste har kanskje vært innom lange nettsteder som har en “tilbake-til-toppen”-link på bunnen av siden. Nå synes ikke jeg at dette nødvendigvis er en god løsning, men det illustrerer ideen. Fordi, hvorfor har man lagt inn denne linken? Det er fordi de som ser den linken har fokus nederst på siden, og all annen navigasjon ser man ikke fordi det ligger øverst på siden, så man gir brukere dette alternativet. Med andre ord, gi brukeren alternativer der de er motivert for å gjøre noe annet, og ikke før.