Brukbarhetsevaluering av norwegian.no og sas.no MMI Øving D1, Lars Kirkholt Melhus
Innholdsfortegnelse Innledning...3 Persona...3 Studenten...3 Forretningsmannen...3 Senioren...3 Norwegian.no...4 Målgruppe...4 Visuell fremstilling...5 Tilpasning til målgruppen...5 Gestaltprinsipper...5 Guidelines for design...5 Hensikt/funksjon...6 Scenarie: Geir på forretningsreise...6 Scenarie: Lise vurderer om hun skal velge Norwegian...6 Språk/ordvalg...6 Funksjonell layout...7 Brukervennlighet...7 Sas.no...8 Målgruppe...8 Visuell fremstilling...9 Tilpasning til målgruppene...9 Gestaltprinsipper...9 Guidelines for design...9 Hensikt/funksjon...10 Scenarie: Olav vil besøke familien...10 Scenarie: Lise vurderer om hun skal velge SAS...10 Språk/ordvalg...10 Funksjonell layout...10 Brukervennlighet...11 Sammenligning...11 Konklusjon...11 Kilder...12
Innledning I denne oppgaven skal vi se på og sammenligne nettsidene til norges to hovedaktører i flybransjen; Norwegian og SAS. Vi vil se på nettstedets forside og vurdere brukbarhet etter noen gitte designprinsipper. Til slutt vil vi se om vi kan kåre en vinner. Persona I dag reiser alle befolkningsgrupper med fly, unge som gamle, derfor er det naturlig å vurdere nettstedene etter et felles sett referansepersona. Studenten Lise er student ved NTNU, nærmere bestemt studerer hun psykologi på Dragvoll. Hun har ikke jobb ved siden av studiene, men studielånet får hjulene til å gå rundt. Lise er singel og bor alene på en over middels kostbar hybel. Hun prøver å spare penger når det er mulig. Lise drømmer om å reise til utlandet og studere et år, men planlegger ellers lite utover neste uke. Hun er Apple-purist, med MacBook og Iphone som trofaste følgesvenner. Lise liker å surfe på nettet, og er en reser på sosiale nettsteder. Forretningsmannen Geir er 45 år og ansatt som selger i et stort firma. Geir bor i Osloområdet, er gift, og har tre barn. Han er ofte på farten i forbindelse med jobben, også en del i utlandet. Han er opptatt av punktlighet og at ting fungerer som de skal. Geir har en Lenovo-pc som han har fått av jobben. Når han må ta fly dekker også jobben utgiftene hans. På fritiden liker Geir å tilbringe tid med familien. Senioren Olav er forlengst blitt bestefar, men er fremdeles i god form. Han bor sammen med sin kone gjennom snart 40 år, i et koselig hus i Bergen. Siden de fleste barnebarna bor på østlandet hender det Olav og kona tar seg en tur og besøker dem. Olav liker egentlig ikke å fly, men han liker enda mindre å kjøre bil. Olav vet hva internett er, han har akkurat fått vite hvordan han bruker nettbank. Olav ser ganske dårlig, derfor er han avhengig av stor tekst på skjermen når han leser.
Norwegian.no Historisk sett er nowegian nykommeren blant våre to kandidater. Stiftet i 1993, og som alle lavprisselskap med respekt for seg selv, stort eksponeringsbehov for billige flyreiser. Internett er åpenbart en viktig kommunikasjonskanal for flyselskapet. Målgruppe Norwegian, som et lavprisselskap vil muligens ha en enda større kundebase blant den yngre garde enn sin konkurrent SAS. Men selskapet utelukker heller ingen kundegrupper med sin forretningsmodell, lave priser er noe alle kan være med på.
Visuell fremstilling Tilpasning til målgruppen Enkelt og funksjonelt design. Man går rett på sak, med bestillingsskjema sentralt plassert oppe til venstre på siden. Dette vil typisk være noe av det første brukeren legger merke til, da øyet scanner fra toppen til venstre og nedover (leseretningen). Dette passer bra for kunden som vet hva han vil, nemlig bestille reise fra A til B. Noen brukere vil muligens mene de store røde annonsene tar for mye oppmerksomhet. Grensesnittet inneholder veldig mange elementer som konkurrer om oppmerksomheten, noe som kan redusere effektiviteten til Senioren, som i tillegg ser dårlig. Gestaltprinsipper Selv om siden er noe «trang», med veldig mange elementer presset inn på liten plass, klarer brukeren å skaffe seg oversikt gjennom den naturlige grupperingen som kommer gjennom layouten på siden. Siden er delt i tre kolonner, med klare grupper av bokser med forskjellig bakgrunnsfarge nedover. Ved første overblikk ser vi at i hovedsak to farger blir brukt; beige og rød. Dette synes å dele siden i to deler; de elementene som er mer eller mindre permanente (vanlig bestilling, lavpriskalenderen osv), kontra annonser for nyheter og spesielle tilbud. Gruppene av elementer er også samlet inntil hverandre, slik at det virker mer oversiktlig. På høyresiden ser vi en samling med 4 røde firkanter som klart må noe med hverandre å gjøre, grunnet likhet i både farge og form. (Viser seg å annonsere billige turer). Noe som derimot virker litt forvirrende (og forstyrrende for layouten på siden) er den femte røde boksen som ligger litt lengre ned, under den horisontale streken. Den ekstra paddingen mellom den og gruppen med de fire andre får den til å stå som et eget element på siden. På midten har vi «Hotell», «Leiebil» og «Fly+hotell» som utgjør en gruppe. Resten av boksene blir mer eller mindre selvstendige elementer. Norwegian har i stor grad lykkes med å anvende gestaltprinsipper om likhet i form (rektangler), farge og posisjon, til å presentere innholdet på en ryddig måte. Guidelines for design Usability og standarder: Nettsidens markup validerer ikke (23 feil), blant annet mangler altatributtet for en del bilder. Også generelt dårlig markup. Eksempelvis brukes <div>-elementer for å markere label for input-felt, <table> brukes for å strukturere layout, listen er lang. Dette er svært uheldig for folk som får lest opp innholdet på siden eller på annen måte tolker innholdet på annen måte enn de fleste er vant med. (Kanskje aktuelt for Senioren). Ellers ingen spesielle ting å påpeke, forsiden følger stort sett aktuelle punkter i Jacob Nielsens liste og Schneidermans 8 punkter.
Hensikt/funksjon Det er i hovedsak to brukscenarier som peker seg ut for en side som norwegian.no. En bruker ønsker å: Bestille en planlagt tur Se etter tilbud Scenarie: Geir på forretningsreise Geir har nettop fått vite at han skal til Sverige neste uke i forbindelse med jobben. Han navigerer seg fram til norwegian.no, og finner menyen «Søk billige flybilletter», som han har brukt utallige ganger før. Han velger Oslo som avreiseflyplass og Stockholm-Arlanda som destinasjon. Han velger Tur/retur, og aktuelle reisedatoer for utreise og retur. En voksen; «Søk og bestill». Enkelt og greit, dette gikk fort tenker Geir. Scenarie: Lise vurderer om hun skal velge Norwegian Lise har lyst hjem en helg og besøke familien. Hun har hørt at Norwegian har noen billige billetter ute for salg, og bestemmer seg for å skjekke dette på nettsiden deres. Lise ser kjapt over nettstedet, som hun ikke har brukt noe særlig før (hun har reist en del med tog). Hun skjønner ikke helt hva som er forskjellen på «Søk billige flybilletter» og «Fly billig med LAVPRISKALENDEREN». Ingen av annonsene på forsiden er til Oslo, så de ignorerer hun. Siden sistnavnte meny ser ut til å kreve retur (noe hun ikke har bestemt seg for) velger hun å prøve samme meny som Geir brukte. Hun fyller inn aktuell informasjon og velger «Enkel» reise. Språk/ordvalg Nettstedet bruker forståelig norsk i tekst og menyer. Om enn noe ukonsekvent for eksempel i menyen «Min Norwegian». Her er noen alternativer beskrivelser av hva du kan gjøre, eksempelvis «Reserver sete», mens andre er litt mer tvetydige; «Spesialbagasje» - hva gjør du egentlig om du trykker på den? Samme for «Er flyet i rute». Også litt ukonsekvent på ordbruk når man snakker om å få tak i reiseinformasjon: «Finn reise» og «Hent reisedokument». Ellers ingen spesielle negative ting å trekke frem.
Funksjonell layout Lenker har ikke underline, i stedet er noen i form av en rød «knapp», og andre bare tekst. Knappene har veldig god affordance, det er intuitivt at de skal kunne trykkes på. De flash-baserte annonsene på høyre side er derimot helt umulige å vite om er trykkbare eller ikke. Her må man nesten gjette, eller «lete» med musa og se når man får opp en håndmarkør. I listen nederst midt på siden ser vi at det er grå ruter ved siden av hvert reisemål. Disse er knapper, som man skjønner etter å ha vært på norwegian sine sider før. Man kan kjenne det igjen siden dette designet er brukt gjennom hele registreringsprosessen for å velge avgang. Alle trykkbare elementer, bortsett fra flash-elementene, gir feedback til brukeren ved at utseendet forandres når musen ligger over elementet, enten i form av skiftende farge eller understreking. Knappene for å bestille hotell, leiebil og fly+hotell har god mapping mellom design og funksjon. Ikonet ved siden av bidrar til å gjøre det tydeligere for brukeren hva som skjer om man trykker på knappen. Noen menyer er redundante, for eksempel er det mange måter å komme seg videre til bestilling. «Min Norwegian»-menyen kan virke litt forvirrende. Det er en meny som skiller seg klart ut fra resten av siden (annen farge, litt gjemt bort langt ned), og samtidig ser ut til å kopiere noe av funksjonaliteten til menyen i toppen (logg inn finner vi igjen i begge for eksempel). Brukervennlighet Totalt sett fungerer webløsningen til Norwegian bra for alle brukergrupper. Det er lett å finne billige flyreiser for Lise, Geir får unna bestillingen raskt, og Olav skal klare å navigere seg fram uten altfor store problemer. For brukere som er avhengig av opplesning eller på annen måte må tolke innholdet annerledes kan det oppstå problemer med dårlig markup. Dette kan være et problem. Pluss for å tilby visning i hele 10 forskjellige språk.
Sas.no Målgruppe Tradisjonelt sett har SAS vært et selskap som satser på kvalitet framfor å være den billigste aktøren. Forretningsmodellen appellerer nok mer til businesspersoner som forventer god service og punktlighet, og som også kanskje slipper å betale alle utgiftene selv. SAS vil ofte være mindre aktuelt for personer som vil spare mest mulig penger på reisen, eksempelvis studenten Lise.
Visuell fremstilling Tilpasning til målgruppene Enkelt og funksjonelt design, med rask tilgang til skjema for å bestille reise. SAS deler på brukergrupper ved å ha et eget skjema forå bestille «ungdomsbillett», et valg for «pakkereiser» og vanlig bestilling. Lise og andre som er på jakt etter tilbud får raskt et overblikk via annonser på høyre side. Hjelp-dialog sentralt plassert oppe i høyre hjørne. Lett å finne for folk som er usikre/uerfarne, muligens noe Olav vil sette pris på. Gestaltprinsipper På SAS sin forside finner vi flere eksempler på at elementer har likhet i posisjon, form og farge. Blant annet de fem boksene med annonser på høyresiden, som oppfattes som en gruppe på grunn av likhet i form og ved at de opptrer samlet og ordnet. Noe av grunnen til at man lager slike grupper er at brukeren lettere kan få oversikt. Hjernen kan normalt klare å holde rede på rundt 7 objekter samtidig, grupper på 5 er da noe man kjapt kan fordøye. Guidelines for design Konsistens: Layout endres til å bli smalere under bookingsekvens. Layout endres helt ved å velge for eksempel «SAS pakkereiser», som også åpnes i et nytt vindu. Dette kan virke forvirrende for brukeren. Standarder: HTML validerer ikke (42 feil). Usability: Dårlig markup. Overdrevet bruk av <div>-elementer, for eksempel i menyen, hvor man helt klart bør bruke en uordnet liste. Slike feil kan bety problemer for folk som tolker markupen på andre måter enn kun grafisk, for eksempel får det opplest. Forhindre feil: Det er mulig å velge samme utreise- og hjemreiseby. Man får en fin feilmelding, men det kunne gått ann å laget menyen slik at valget ikke var mulig. Hjelp og dokumentasjon: Sas har valgt en interaktiv modell hvor man kan skrive inn spørsmål via «Spør Eva». Spørsmålet er om brukere tør prøve seg på en slik uvant måte å få hjelp på, og om det fungerer bra. Ellers ingen spesielle ting å påpeke angående aktuelle punkter i Jacob Nielsens liste og Schneidermans 8 punkter.
Hensikt/funksjon Vi ser på de samme to scenariene som for Norwegian Bestille reise Se etter tilbud Scenarie: Olav vil besøke familien Olav vil bestille en reise for to til Oslo. Han navigerer seg inn på sas.no og leser gjennom siden. Han har god tid. Her var det mange valg tenker Olav. Han legger også merke til «Eva» som man tydeligvis kan spørre om hjelp. Dette skal jeg nok klare selv tenker Olav, og leser videre. Han kommer til slutt fram til at «Bestill flyreise»-skjemaet nok er et godt utgangspunkt. Han taster inn aktuell reiseinformasjon og trykker «Vis flyavganger». Scenarie: Lise vurderer om hun skal velge SAS Lise har lyst hjem en helg og besøke familien. Hun har bestemt seg for å skjekke om SAS har noen gode tilbud den aktuelle helgen. Hun scanner fort gjennom forsiden, og ser listen over billige reiser i den svarte flash-boksen. Hun irriterer seg over at teksten forsvinner og dukker opp igjen hele tiden, nesten før hun får lest gjennom hele listen. Ingen av de annonserte turene var dit hun skulle, så hun prøver «Bestill flyreise» i stedet. Før hun er ferdig med å fylle inn skjemaet ser hun at det er et eget skjema for «ungdomsbillett», hun prøver det. Hun fyller inn aktuell reiseinformasjon og blir sendt videre. Språk/ordvalg Generelt lettfattelig språk, meningen kommer klart fram av menyvalgene. Noen uklare begreper og formuleringer; «Motta tilbud rett på skjermen!» under Tjenester for eksempel, hva menes med det? En del oppkonstruerte ord, som «Bedriftsbestilling». Også litt innblanding av engelske begreper, som «SAS Travel Passes». Funksjonell layout SAS har valgt å gi de fleste lenker den tradisjonelle blåfargen. Dette gjenkjennes umiddelbart av de aller fleste, og kan virke positivt for brukeropplevelsen. Lenkene forandres ved hover, brukeren får tydelig signal, feedback, om at det er mulig å trykke. Lenkene har god affordance. Lenkene i form av bilder og flash for å annonsere tilbud er derimot ikke spesielt gode på affordance. Det gis ingen indikasjon på at de kan trykkes på, bildene har ingen hover-effekt, og det svarte feltet med «avganger» er helt umulig å vite at kan brukes som meny. Ellers kjører SAS den gode gamle venstrestilte menyen, brukere er vant til å finne en meny der. Betydningen til elementene gjøres enda klarere ved å legge til et lite ikon foran teksten. For eksempel et fly ved siden av «Bestill flybillett». Vi kan si elementene har en god mapping mellom design og funksjonalitet.
Brukervennlighet Helt ok brukervennlighet for alle aktuelle målgrupper. Om hjelpefunksjonen «Eva» fungerer godt teller det positivt, noe sannsynligvis Olav vil kunne sette pris på. Enkel og ryddig layout på forsiden, men ukonsekvent når man navigerer seg lenger inn på nettstedet. Kun to språkvalg; norsk og engelsk. Dårlig markup trekker ned. Sammenligning Begge nettstedene har vi sett er relativt gode på å tilby et godt og forståelig grensesnitt overfor sine forskjellige brukergrupper. Det er likevel et par mer eller mindre viktige designmessige og funksjonelle ting som skiller de to sidene fra hverandre. Norwegian har mye bedre støtte for flere språk. Norwegian har generelt større grad av konsistens. Layouten holdes konsekvent gjennom undermenyer på siden, og det brukes et fåtall farger. Sas sin side virker på dette punktet mindre ryddig. Sas scorer bedre på gjenkjennbarhet i brukergrensesnittet. Tenker spesielt på bruk av standard formatering av lenker. Akkurat dette med blåfargen på lenker er det veldig mange sider i dag som ikke bruker, men understreking er fremdeles vanlig. Norwegian har ingen av delene. Konklusjon Sas har noe bedre affordance og et design brukere vil kjenne igjen i større grad enn Norwegian sin side. Likvel; en totalvurdering tisier at Norwegian.no kommer best ut. Blant de mest avgjørende faktorene er det at layouten holdes mer konsekvent og på alle undersider.
Kilder Ben Shneiderman, Catheringe Plaisant: Designing the User Interface, 5 th Edition http://www.norwegian.no http://www.sas.no http://www.clker.com/cliparts/b/1/f/a/1195445301811339265dagobert83_female_user_ic on.svg.med.png http://all-free-download.com/images/graphicmedium/business_man_clip_art_17763.jpg http://www.clipartguide.com/_named_clipart_images/0511-0809-2616-2967_old_man_paying_over_the_phone_with_a_credit_card_clip_art_clipart_image.jpg http://validator.w3.org/ http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm