3. Revisiting Early Web Usability Findings

Gjennomgang av tidligere resultater når det gjelder bruk av Web

Hva har skjedd i de siste 10 år Bedre teknologi

Bredbånd, PC, forbedrede standarder (HTML, XML) Ny løsninger:

PDA og laptop med trådløs forbindelse Mobiltelefonen er blitt en datamaskin:

Nye applikasjoner, bedre nett Apps

Erfaring Brukerne blir kjent med spesielle sider og Web

generelt Designere blir bedre

Designerne lærer og unngår de verste tabbene Standarder og ”best practices”

8 problemer som ikke er endret Linker som ikke skifter farge etter at de

er klikket på Back-knapper som ikke fungerer Åpne nye browser-vinduer Pop-up vinduer Funksjonelle elementer i siden som ser

ut som annonser Brudd med generelle konvensjoner som

gjelder for Web Tettpakket tekst som er vanskelig å lese

Linker som ikke skifter farge Navigasjon må understøttes Brukerne må fortelles hvor de har

vært, hvor de er og hvor de kan gå. Brukerne vil vite hvor de har vært:

For å finne tilbake For å forsøke en annen lenke

Da blir det viktig å skifte farge på besøkte lenker (en standard fra 1993)

Tenke høyt metoden hjelper Med ”tenke høyt” metoden får vi forklart

hva som er galt. Slike undersøkelser viser at: Brukeren finner ikke linken Finner linken men oppfatter den som irrelevant Ofte går brukerne tilbake til tidligere sider, de

forstår ikke at de allerede har vært der Kanskje gir de opp for tidlig, de forstår ikke at

det er muligheter de ennå ikke har utforsket

Tilbake-knappen Noe av det nyttigste med databehandling

er at vi kan gjøre en ”undo”. Går vi feil kan vi gå tilbake. Så lenge vi har

denne muligheten kan vi aldri gå oss vill. Dette benytter brukerne seg av. Tilbake-knappen er alltid der i browseren,

godt plassert med stort areal. Den innbyr til å bli trykket på. Da må den virke!

NB! Når vi kommer tilbake til en tidligere side skal de data vi fylte ut fortsatt være der!

Tilbake-knapp-feller Knappen kan fjernes gjennom et script Vi kan åpne et nytt vindu, da mister

knappen sin betydning: det nye vinduet arver vanligvis ikke historien til

det gamle Med ”redirects” til nye sider implementert

som en ”refresh” slik at den gamle siden blir erstattet med den nye. Går en tilbake til denne vil en automatisk blir dirigert dit en er!

Dette kan ordnes bak kulissene slik at browseren glemmer den midlertidige siden

Åpne nye browser-vinduer Brukerne forventer at klikk på en link skal

medføre at de får en ny side i browser-vinduet De blir forvirret om de får et helt nytt vindu:

Ofte oppdages dette ikke Back virker ikke Med et uhell kan de klikke på scrollbar for vinduet

bak og blir totalforvirret Brukerne får administrasjonsarbeid med å håndtere

alle sidene Dersom brukeren vil ha et nytt vindu kan han

alltid få det med å høyreklikke på linken.

Unntak Det er situasjoner der det er greit å åpne i nytt

vindu: Visning av spesialfil, som pdf:

Her forventer brukeren et nytt vindu, siden filen er så spesiell

Når han er ferdig trykkes close-knappen, og brukeren forventer at hun da er tilbake i den opprinnelige Web-siden (da er det uheldig om det var samme vindu!)

Åpne derfor disse filene i nytt vindu (fortell brukeren det), men fjern back-knappen m.m. fra browseren.

Bedre alternativ? Åpne filene i egen applikasjon (Word, Adobe reader, etc), men dette kan ha andre problemer.

Maximization Et klikk her lar vinduet få hele skjermen Flere problemer:

Det skjuler andre vindu Skjermer er i dag så store at de sjelden har

mening å fylle hele skjermen Knappen burde blitt erstattet av en ”maks.

praktisk størrelse” knapp. Her har vi et godt eksempel på at den

teknologiske utvikling (mot større skjermer) medfører at konvensjoner må endres

Design for ”dumme” brukere Ikke alle forstår de grunnleggende

konseptene Derfor bør vi gjøre grensesnittene

enkle, uten unødvendige kompleksiteter

Pop-up vinduer Mange forbinder dette med plagsomme

annonser Kommer som en overraskelse, avviker fra

normal respons Krever vindusadministrasjon fra brukeren Kan legge seg bak andre vindu Det er situasjoner der dette kan være nyttig,

men det negative ”image” til pop-up gjør at det bør unngås

Det blitt vanlig å installere ”pop-up” blokkere, enda en grunn til å unngå dette

Plagsomme teknikker i Web-annonser

Av de som hadde et negativt inntrykk av Web-annonser.

Annonser som er designelementer

Vi unngår annonser Så sterkt at vi ikke ser

design-elementer utformet som annonser

Vi forventer at de nyttige delene framstår i vanlig tekst

Noen bruker annonsefjernere (programvare som fjerner små bannere)

Brudd på konvensjoner Brukerne har forventninger til siden At den skal være som andre sider Hva er disse forventningene:

Linker skal se ut som det Logo og link til hjemmesiden i øverste

venstre hjørne Søk øverst til høyre … (skal komme tilbake til dette senere)

Hva gjør organisasjonen? Brukerne skal få et klart inntrykk

av organisasjonen med en gang Derfor må vi ha enkle sider, enkelt

språk, klar layout, korte navigasjonsveier, ….

Altså oversiktlige sider Samtidig skal sidene vise

organisasjonens profil

Tettpakket tekst Brukerne har liten tid Begrens mengden tekst Gjør det lett å scanne teksten Det er vanskeligere å lese på skjerm

enn på papir, ha derfor mindre tekst på Web

Men, også her er det unntak (vi aksepterer tekst i artikler, bøker, spesifikasjoner…)

Teknologi og brukervennlighet Tidligere problemer med

nedlastningstid, små skjermer og dårlig fargeoppløsning er i ferd med å reduseres

Det gjør at vi kan opererer med høyere bildeoppløsning, video, faste sideformater m.m. i dag uten de helt store problemene

Men…

Nedlastningstid Ikke alle har bredbånd (ca. 70% i dag i

Norge) Nytt trådløst utstyr har ofte begrenset

kapasitet I USA markedsføres fortsatt oppringte

samband De enkleste sidene hadde størst suksess

i 90-årene (brukerne likte disse, ikke designerne)

Enkle sider gir brukerne følelsen av at de er effektive!

Flash Må ha lastet ned programvaren (fra

Macromedia) Tar tid, Web er ikke TV Animering kan ha sin funksjon, men ikke alltid Med flash kom også mange, ikke standard,

kontroller (scollbar) Bør ha en god begrunnelse Eksempel: www.opel.com (tidligere avanserte

animasjoner som nå er tatt bort) Brukes fortsatt mye i annonser

Vanskelig søking Problemer med å finne produkt m.m.

med ekstern og intern søkemotor Ekstern er delvis utenfor vår kontroll,

men internt burde det fungere Mange interne søkemotorer viser til

uinteressante resultater, f.eks. pressemeldinger istedenfor produkter

Ofte kan vi ikke finne sentrale ting (som ansatte) gjennom søk

Multimedia og lange videoer Tar tid Streaming eller nedlastning,

spesielt streaming krever god båndbredde

Beskriv tiden det vil ta

Fast (frossent) sideformat Fordel:

Designer har full kontroll med siden Ulempe:

Krever skjerm som er stor nok Ellers må vi scrolle horisontalt, og det

er det ingen som liker/aksepterer

Eksempel

Plattform-kompatibilitet Internet Explorer har hatt 97 % av markedet Men i det siste er det kommet sterke

konkurrenter (Firefox, Safari, Opera, m.fl.). Firefox har nå 30% av markedet

(http://www.w3schools.com/browsers/browsers_stats.asp)

Systemet bør testes ut i alle fall på de mest sentrale plattformene, ikke minst på tidligere versjoner av IE.

Spesielt viktig der det er kostbart å utelate brukere (nettbank, billettbestilling, og lignende)

Mobile enheter/PDA PDA (Personal Digital Assistant),

håndholdte enheter, smarttelefoner Kan vi designe også for disse? Helt andre krav (små skjermer, små

tastatur, lavere overføringshastighet) Vanskelig å kombinere Her kan vi lage to varianter, en

Wap/mobil og en for PC Bedre mobile enheter kan redusere

problemene

Hvordan brukerne har påvirket Brukerne er mer erfarne i dag De kan i større grad håndtere noen

av de problemene vi hadde med de tidlige Web systemene, men fortsatt gjenstår mange…

I tillegg til en side som skal mestres, krever vi også effektivitet, og å unngå feil

Konvensjoner Jo mer vi bruker Web, jo faster

konvensjoner får vi God eksempel:

Bibsys, Atekst og andre systemer har krevd at vi setter inn operatorer mellom søkeord, eventuelt at en antar en ”og”

Web søkemotorer gir oss alle kombinasjoner, men selvfølgelig i prioritert rekkefølge

Selv om Bibsys kom før Web, forventer vi i dag at Bibsys kan brukes som en Web søkemotor

Hva er klikkbart?

Scrolling Mange scroller ikke Mange oppdager ikke at det er noe

lengre nede på siden Også i avisverden (storformat) var

det viktig å få nyheten på øverste halvdel

Et argument for tabloid er at hele forsiden blir vist i avis-stativet

Eksempel

Mange oppdager ikke at her er det noe mer!

Bedre nå – dårlige eksempler forsvinner!

Registrering Registrering kan skremme bort

kunden Derfor bør dette være frivillig Oppgi gjerne fordelene, men la

dette være kundens valg Uten registrering bør vi slette alle

personopplysninger etter at handelen er oppgjort

Eks: Kiva (mikrolån)

Samme brukergrensesnitt enten er logget inn eller ikke. Men en må logge inn for å låne ut penger.

Persondata og betalingsinformasjon

Vi vil vite alt om produktet, også priser (helst også en ide om fraktkostnader) før vi gir person og betalingsinformasjon

Først når vi vet at vi vil ha produktet er vi villig til å gi disse opplysningene (vi forstår at dette er nødvendig nå)

Brudd på dette vil medføre skeptiske kunder

Eksempler NSB ba tidligere om persondata før

det var klart om det var plass på toget

Hurtigruten ville tidligere (fortsatt) ha persondata og betalingsinformasjon før full pris er oppgitt

Nationalteateret har tvungen registrering for å kjøpe billett

Komplekse URL Selv med bookmark og linker er det

uhensiktsmessig å ha en kompleks URL Skal ofte skrives inn likevel Skal oppgis i epost. Får vi for lang URL

kan vi få brudd (innsatt blanke m.m.). Muligheter for å plukke ut deler av en

URL er best om denne ikke er for lang

Pull down menyer Brukerne er mer vant til dette i dag En ulempe er at menyen blir skjult

bak et tastetrykk (dårligere sideoversikt)

Unngå menyer i for mange nivåer (vanskelig å flytte cursor til riktig element)

Spesielt komplisert med touch

Designerne har dempet noen av problemene

Plug in 3D grensesnitt Overveldende design Bevegelige elementer Selvlagede GUI

komponenter Ikke fortelle hvem

som står bak organisasjonen

Tillagede ord

Splash Ingen oppdatering Inkonsistente sider Ikke fortelle hvem som

står bak siden Krav om

personopplysninger for tidlig

Mange siter ”Foreldreløse” sider

, men fortsatt har vi problemer med:

Smarte løsninger Eksempel:

Valg av farge på bil 3D presentasjon av bilen Design eget kjøkken

Men: Nedlastningstid Virker kanskje ikke i alle browsere Farge kan gi et annet inntrykk på skjermen

enn i virkeligheten

Plug-ins Brukerne trykker cancel om

applikasjonen krever nedlastning av programvare (der vi tidligere var redd for å fylle opp disken er vi nå redd for virus)

Men browserne har i dag flere muligheter som standard

3D grensesnitt Krever spesiell programvare (men

en 3D pdf virker interessant) Kontroller er ikke helt enkle (2D →

3D) For spesielle applikasjoner (men

litt kjekt å studere en bil i 3D likevel)

Overveldende design Mindre vanlig nå Designerne har lært Men fortsatt er det mange

designere som glemmer formålet med siden

Eksempel - bilfabrikker Tidligere mange fancy løsninger:

lange flash videoer 3D visning (rotering, nedenifra, ovenifra) 360 grader velg farge, m.m.

Nå mer begrenset. De har nok oppdaget at kundene hovedsakelig er ute etter opplysninger.

og kanskje bilder og enkle animasjoner er best for å vise bilen.

Splash sider En samling bilder for å introdusere

siden Mister det funksjonelle Tar tid, og det har ikke brukerne Få sider bruker splash i dag Brukt forsiktig kan det ha en effekt

Egenproduserte komponenter Standard komponenter (knapper,

menyer, scrollbar) er lett gjenkjennelige

Da blir de også kjedelige Designerne vil gjerne lage noe nytt Men da blir komponentene

vanskeligere å bruke og oppdage

Eksempel Her har vi en

egenprodusert scrollbar, oppdager vi den?

www.norahjones.com

Manglende ”about us” Kan vi stole på en Web-side? Relevant spørsmål som mange

brukere stiller Da er det viktig å gi tillit, og en

”about us” er en sentral komponent: Bedriftshistorie Kunder Filosofi, visjon, ideer

Miniøving: Du skal utvikle sider for

Hurtigruten for utlendinger Hvordan skal du skape tillit til

siden?

Tillagede ord Fristene - for å gi inntrykk av å

være moderne og ”in” Ulempen er at brukerne ikke

forstår det du skriver …heller ikke søkemotorene

Ut på dato Mange har etablert en Web side og glemmer

at den må vedlikeholdes og oppdateres Et annet og kanskje større problem er at

tidligere informasjon ligger ute, og at søkemotorene ofte treffer dette

Det er derfor essensielt å lage en fast folder/fil-struktur. Skift heller ut innhold, f.eks. årets studieplan istedenfor den gamle, enn å endre strukturen.

Profesjonelle sider har et apparat for oppdatering

Noe oppdatering forenklet ved at data hentes direkte fra databaser

Konsistens Fra et ”ad hoc” system har nå

organisasjonene jobbet for å gjøre sidene konsistente.

Fordelene er at brukerne kjenner seg igjen Eksempel: www.himolde.no, www.uib.no Hva med sammenslåinger av organisasjoner

(Statoil-look, Hydro-look, hvordan skal Statoil-Hydro sidene se ut?)

Personlige opplysninger Det er uhøflig å be om personlig

informasjon for tidlig (jfr. sjekking) Brukerne er redd for å oppgi dette Ikke be om mer enn du må Ikke be om dette før du må Gi valgmuligheter for registrering

For mange siter En integrert Internett strategi er

viktig: En site Konsistente sider Forenkler navigering og søking

”Foreldreløse” sider: Ingen linker videre Bør unngås (enkle verktøy tilgjengelig

for å sjekke linker)

Oppsummering Forfatterne sammenligner tidligere

studier med dagens resultater Omkring halvparten av problemene

eksisterer fortsatt Den største forbedringen, mer enn

teknologi, skyldes at designerne viser moderasjon

Det er naturlig ettersom en ny teknologi modnes