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: (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 (  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? 

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:  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