ZZZVIVH HQXWYlUGHULQJ

Transkript

1 ZZZVIVH HQXWYlUGHULQJ Kurs: Grafiska Gränssnitt lp Christine Cronwall,

2 1 INTRODUKTION TEORI RIKTLINJER FÖR ANVÄNDBARHET PRESENTATION OCH EGNA SYNPUNKTER VÄLKOMSTSIDAN STARTSIDAN SCENARIER: ATT GÖRA EN BOKNING ELLER ETT KÖP Ett köp En bokning ANALYS UTIFRÅN NIELSENS TEORIER DISKUSSION REFERENSER...13 BILAGA: BILDER FRÅN 2

3 1 Introduktion Jag har valt att titta närmare på webbplatsen tillhörande SF Bio AB. 1 I vårt nutida Sverige tycks det bli allt vanligare att biobesökarna bokar sina biljetter i förväg och dessutom via Internet. När användaren bokar just via Internet får denne inte bara möjlighet att reservera och betala sina biobiljetter, utan även chansen att bestämma var i biosalongen han/hon vill sitta. Dessutom kan besökaren ta del av ytterligare information om filmer och få länkar till deras hemsidor. Den ökande användningen av Internet leder till att högre krav ställs på webbsidor, vad gäller anpassning till olika kunskap och behov bland besökare. Mot bakgrund av att SF Bio:s målgrupp tycks vara mycket bred och bestå av mer eller mindre hela det svenska folket, är jag intresserad av hur de anpassar sig till denna stora skara användare. 2 Teori I följande kapitel presenterar jag de principer och riktlinjer som jag kommer att utgå ifrån i min utvärdering. 2.1 Riktlinjer för användbarhet Jakob Nielsen har formulerat tio välkända riktlinjer 2 för utvärdering av användbarhet. Jag har valt ut fem av dessa, vilka jag tror är intressanta för min utvärdering. Synbar systemstatus. Gör systemets status synligt för användaren. Informera användaren om vad som händer genom att ge relevant feedback i tid. Koppling system verklighet. Relatera systemet till verkligheten - tala användarens språk, använd ord och fraser som är bekanta för honom/henne. Användarkontroll och frihet. Ge användaren möjlighet att gå tillbaka från platser de oväntat tagit sig till. Ha t ex tydliga länkar tillbaks till startsidan. Konsekvens och standard. Användaren skall inte behöva fundera på om samma knappar, ord eller handlingar betyder olika saker i olika situationer. Estetiskt och minimalistiskt. Undvik att använda information som inte är relevant eller av mindre betydelse

4 Utöver ovanstående riktlinjer, kommer jag i min analys att använda ett antal rekommendationer av Nielsen för just webbplatser 3. Dessa presenterar jag nedan: Förklara tydligt syftet med sidan: Vilka företaget är och vad de gör Starta med en mening på sidan som summerar vad företaget/sidan gör. Ha en titel på fönstret som är tydlig i sökmotorer och listor för bokmärken. Gruppera all information om företaget på ett speciellt område, lämpligtvis en länk till Om «företaget». Hjälp användarna att hitta vad de behöver Fokusera på sajtens mest prioriterade uppgifter, vanligtvis en till fyra stycken. Inkludera en sökruta på minst 25 tecken. Avslöja sajtens innehåll Börja länkars namn med de viktigaste nyckelorden/relevanta ord. Ett vanligt brott mot denna regel är att börja alla länkar med företagets namn, vilket ger ett minimalt mervärde och försvårar för användaren att snabbt hitta vad de behöver. Använd visuell design för att förstärka, inte definiera interaktionsdesign. Överdriv inte formatering av kritiskt innehåll, såsom navigationsområden. Det är lätt att man vill illustrera och färga viktiga delar på startsidan, men bortser då ifrån att användare ofta tolkar dessa som reklam och istället fokuserar på delar av startsidan som ser att vara mer användbara. Använd meningsfulla bilder. Bilder kan fungera som starka kommunikatörer, men slår tillbaka om de verkar irrelevanta för användaren. Nedanstående två råd är hämtade ur en annan artikel av Nielsen. 4 Se till att inte ha en URL som är längre än 75 tecken på någon del av webbplatsen. Låt teckenstorleken vara dynamisk, för att öka användbarheten för samtliga användare. 3 Presentation och egna synpunkter I min utvärdering tänker jag använda mig av följande upplägg: Till att börja med gör jag en allmän utforskning av webbplatsens välkomst- och startsida, där jag fokuserar på utseende, innehåll och navigation. Jag väljer att titta extra noga på just startsidan, eftersom den sägs vara den viktigaste sidan på de flesta sajter. 5 Ef- 3 Top Ten Guidelines for Homepage Usability, 4 Top Ten Web-Design Mistakes of 2002, 5 Top Ten Guidelines for Homepage Usability 4

5 ter ovanstående utforskning genomför jag ett simulerat köp av biljetter med kreditkort följt av en bokning/reservation. Min analys kommer inte att behandla sidor som startsidan länkar till, bokning och köp undantaget. Jag kommer både att referera till teorin i föregående kapitel och beskriva vad jag personligen uppfattar som bra respektive dåligt. I kapitlen Välkomssidan, Startsidan och Scenarier beskriver jag sådant som jag reagerar på hos sidorna, samtidigt som jag reflekterar över mina personliga intryck. Först när jag kommer till kapitlet Analys utifrån Nielsens teorier, kommer jag att hänvisa till teorin. Jag utelämnar, på grund av uppsatsens begränsning på 3500 ord, allmänna beskrivningar av sidornas utseende, och önskar därmed att du som läsare kan ha SF Bio:s startsida alternativt bilagan som stöd när du läser denna utvärdering. 3.1 Välkomstsidan När användare kommer till webbplatsen, via möts denne av en välkomnande sida tillsammans med SF Bio:s kända melodi. Jag tycker att välkomstsidan utseendemässigt är tydlig och enkel. Bra att användaren redan från början får välja sin stad ur en dropdown-meny och därmed vet att de filmer som presenteras på nästa sida verkligen är intressanta för just honom/henne. Musiken som spelas i bakgrunden är säkert överraskande och trevlig för en förstagångsbesökare, men jag själv tröttnar snabbt på den och tycker att den stör mer än den skapar stämning. För en användare som dessutom råkar ha hög volym på sina högtalare, kan musiken rent utav uppfattas som skrämmande. 3.2 Startsidan Färgerna som används är för bakgrunden svart, mörkgrå och mörkröd, i stort sett all text är vit. Jag tycker att SF Bio med dessa färgval lyckas med att ge en känsla av en mörk biosalong, samt ge ett stämningsfullt intryck. Sidan ger mig i sin helhet ett något rörigt intryck, mycket på grund av att alla dess delar tycks ges lika mycket uppmärksamhet och plats. De ligger dessutom tätt intill varandra, vilket gör att jag får svårt att skilja dem åt. Det höga antalet bilder bidrar till den plottriga känslan och får mig att fundera över om alla bilder verkligen är nödvändiga. Om jag fortsätter att tänka kring metaforen biosalongen, tycker jag att ett mer avslappnat utseende på sidan skulle vara mer representativt för den sinnesstämning jag vill vara i när jag går på bio. Nedan presenterar jag var och en av sidans delar, såsom meny och information om filmer. Menyn har som alternativ: Hem, Biljetter, Bioklubben, DVD-butiken, Företagsbiljetter och Kommande. Sist finns även en rullist med namnet Innehåll. Menyn 5

6 följer användaren genom hela webbplatsen, vilket bland annat gör det enkelt för användaren att komma tillbaka till startsidan via länken Hem. Jag tycker att alternativen är tydligt formulerade och därmed enkla att förstå innebörden av. Undantaget är Biljetter, vilket inte ger mig en klar association till att det handlar om att just boka och köpa biljetter. Länkarna i menyraden är till skillnad från sidans övriga länkar inte understrukna, vilket jag spontant tror kan förvirra en oerfaren Internetanvändare. När man för muspekaren över något av alternativen blir länken dock understruken, vilket jag delvis tycker väger upp för ovanstående problem. Jag saknar någon form av markering för att ett menyalternativ är valt, mer än att det ibland går att utläsa ur sidans rubrik. Detta skulle förenkla navigationen samt erbjuda mer feedback. Här ska dock nämnas att man efter att ha valt vissa sidor, såsom Kommande eller Företagsbiljetter, får sådan feedback. I dessa fall kan man under menyraden läsa t.ex.: Här är du: Kommande filmer. Detta till skillnad från val av övriga alternativ, vilket känns inkonsekvent. Den rullist som finns sist i menyraden och som innehåller webbplatsens alla möjligheter, ger en bra textbaserad form av funktionerna på sidan. Här finns även information om företaget SF Bio. De två reklamplatserna innehåller för närvarande rörlig information. En av dem tycks alltid innehålla reklam från SF Bio själva. Varje gång ett nytt alternativ väljs i menyn laddas båda platserna om med ny reklam. Jag förstår att SF Bio behöver ha sin reklam för finansieringens skull och att den finns där just för att dra till sig blickar, men jag vill ändå föreslå en minskning av dess rörelser eller bara ge dem rörelse under de första sekunderna som sidan visas. (Jag vill här tillägga att min kunskap kring hur relationen sponsorer webbsida egentligen fungerar, är mycket begränsad. Kanske är det så att SF Bio inte har så stor påverkan på den externa reklamens utformning.) Just nu på SF Bio är den sektion på sidan som placerats längst upp till vänster och där man väljer antingen en film eller en biograf. Jag tycker att sektionen omges av alltför lite luft /tomma ytor, vilket gör att den smälter in alltför väl i resterande information på sidan. Den har fått en fördelaktig placering, men inte tillräckligt med fokus. Det första mina ögon faller på är istället en central sektion på sidan, mycket för att den innehåller en bild med vit bakgrund. Jag tycker att dropdown-menyn På bio idag, är en bra genväg till biljetter för de användare som redan i förväg vet vilken film de vill se. Om användaren inte är så säker på detta, tycker jag att det känns begränsande med en dropdown-meny med alla filmer i. Då vill jag hellre ha det presenterat i en lista, där jag kan gå fram och 6

7 tillbaka mellan information om specifik film och den totala filmlistan. För att få en sådan överblick måste användaren istället välja Biljetter i menyraden. Min spontana fundering kring dropdown-menyn Min biograf, var att: Hur många biobesökare väljer film efter biograf? För det var just det jag trodde att jag skulle komma till; en lista över filmer för just den biografen. Men så var det inte. Sidan innehöll utöver filmerna mycket annan information om exempelvis öppettider, adress, handikappanpassning, kommunikation och parkering. Uppgifterna är i sig väldigt nyttiga, men när dropdown-menyn placerats under Just nu på SF Bio, kändes det inte naturligt att det var sådan information som skulle presenteras där. Speciellt inte när texten ovanför de båda dropdown-menyerna löd: Se vilka filmer som visas på SF Bio idag. Nästa sektion är Nya filmer på SF Bio. Här reagerar jag på att både textlänken till Biljetter samt den lilla bilden på ett par biljetter länkar till samma mål. Under ovanstående sektion ligger sidans största bild (annonsplatserna exkluderade), vilken fungerar som en länk till en tävling tillhörande en viss film hos SF. Bilden är mycket ljus i sin bakgrund, vilket gör att den lätt fångar mitt intresse och därmed tar min uppmärksamhet från sidans viktigare funktioner. Filmsajter. Här lyckas SF presentera åtta filmer, med varsin bild på en liten yta. Bilderna fungerar som länkar till filmernas hemsidor, vilket är inkonsekvent mot andra bilder på sidan. Filmernas namn fungerar även de som länkar trots att de, som den övervägande delen länkar på resten av sidan, inte är understrukna. För att få reda på att man kan komma vidare till varje film måste användaren med andra ord föra muspekaren över antingen text eller bild. För en van användare är detta säkert naturligt, men kanske inte för den ovana. Hela delen Filmsajter innehåller som nämnt åtta bilder, vilka sticker ut mycket mot den mörkgrå bakgrunden och får sidan att kännas plottrig. Bilderna är dessutom så små att jag på flera av dem har svårt att se vad de föreställer. Jag ställer mig också något frågande inför namnet Filmsajter. För den ovana användaren är det kanske inte självklart att det handlar om länkar till filmernas hemsidor. En förklarande text hade underlättat detta. Den del av sidan som först fångade min uppmärksamhet var Premiärtips, som innehåller en av SF rekommenderad premiär. Jag reagerar på att jag varken kan komma vidare via premiärfilmens namn eller bild, som i tidigare avsnitt Filmsajter, utan måste välja Kommande i menyn för att därifrån hitta en länk till filmens startsida. Vidare finns logotyperna tillhörande Bioklubben och DVD-butiken på sidan. Dessa är inget annat än länkar till respektive sidor. Båda alternativen finns i menyn, som jag tidigare nämnt, vilket får dem att kännas något överflödiga. 7

8 Om sektionen Filmspelet har jag inte mycket att säga annat än att den består av en bild som jag ifrågasätter behovet av samt att den understrukna länken Tävla är tydlig och enkel att förstå målet för. Bilden går i detta fall inte att klicka på. Även i Fler tävlingar finns en understruken länk Tävla och den är det centrala i sektionen. Det enda jag vill poängtera är att det här finns ytterligare en bild. Till sist har vi Övrig information, som vid min utvärdering innehåller information i punktform om allt ifrån Rabattkort och Stockholms filmfestival till reklam och pensionärspris. Varje ny punkt inleds med en liten bild, vilken inte fungerar som länk. Här är textlänkarna understrukna och finns med bland den löpande texten, undantaget den översta punkten, där länken är placerad under bilden. Jag funderar över anledningen till denna inkonsekvens. I menyn finns även, som tidigare nämnt, Biljetter, vilken jag ska titta närmare på i nästa avsnitt, i och med att jag också utför mina scenarier; bokning och köp. 3.3 Scenarier: Att göra en bokning eller ett köp För att komma till sidan för bokning/köp kan man antingen, som jag beskrev tidigare, från startsidan välja en film ur På bio idag, eller välja en biograf och sedan dess repertoar. Ett tredje sätt är att klicka på Biljetter i menyraden. På denna sida möts man av något som kallas Filmmenyn, vilken jag tänker titta närmare på. De fyra dropdown-menyerna, med vilka man kan ändra biograf, dag, tid och åldersgräns, tycks få lika stor uppmärksamhet. Ovanför varje meny finns små rubriker, vilka alla inleds med ordet Ändra, vilket snarare bidrar till rörighet än förenklar. Att användaren kan ändra är underförstått. Vidare funderar jag över ordningen dem emellan. Är det viktigare att kunna ändra biograf än dag, med tanke på att biograf är placerad först? Är det rätt att låta åldersgränser och tid på dagen få lika stor fokus som dag och biograf? I menyerna för biograf och åldersgränser står det förvalt Alla biografer samt Alla åldersgränser. Jag anser att det här skulle räcka med att skriva ut Alla, och låta rubriken tala för vad det handlar om. Detta för att göra det mer läsbart för användaren. Jag går nu vidare till filmerna som presenteras under de fyra menyerna. Det tycks för mig förvirrande att filmernas namn är understrukna textlänkar när alternativet Biljetter är knapp. Jag gör nämligen flera gånger misstaget att klicka på filmens namn för att komma till biljetterna. Istället blir jag försedd med information om filmen presenterad till höger om Filmmenyn. Jag skulle föredra att det fanns en separat textlänk eller knapp vid sidan av knappen Biljetter, för just denna information. Var jag kommer när jag klickar på namnet känns för mig oklart. 8

9 För att fortsätta mitt scenario väljer jag en film ( Bad Boys 2 ) och klickar på Biljetter. Tider för olika visningar presenteras på följande sida tillsammans med dess salong. Salongsnamnet är, som med filmnamnet tidigare, en understruken länk till information. Här känns dock länkens betydelse mer intuitiv. Jag väljer en visning och klickar så på Köp/reservera. När jag håller muspekaren över knappen, visas en s.k. ToolTip med antalet lediga platser på visningen. Mycket bra och informativt, tycker jag. Det är på sidan jag nu kommer till, som jag väljer mellan Köp biljett och Reservera biljett. Överst på sidan visas var i bokningen jag befinner mig, genom att markera aktuellt steg i köpet/bokningen i förhållande till hur många som är kvar. Gemensamt för de båda alternativen är att jag först väljer antal biljetter. Jag reagerar på att extra kostnader under reservation är markerade med fetstil, medan de för köp ligger allra längst ned och ej är i fetstil. Jag behöver t.o.m. scrolla ned till sidans slut för att överhuvudtaget se texten. Bra med informationsrutan till höger, där jag under hela bokningen kan se vilka val jag gjort. Den är dock inte så tydlig, jag tycker att texten flyter ihop något och att prickarna som skiljer raderna åt ger ett rörigt intryck Ett köp Jag bestämmer mig för att göra ett köp och väljer därför knappen Betala med kontokort. Sidan jag kommer till är tydlig vad gäller presentation av salongen och instruktioner för att välja platser. Det är också bra med ett förstorande fönster som visar platserna jag drar muspekaren över. Att tid visas, känns något stressande, men ändå informativt, så att jag förstår att jag inte kan dröja hur länge som helst med min bokning. Informationen som ges om vad platsernas symboler innebär är också den informativ. Jag tycker dock att texten på sidan på flera ställen är väldigt liten. Risk finns för att användare med sämre syn får problem att läsa detta. Vidare undrar jag vad rutan med pilarna som går i cirkel betyder. Går inte att klicka på och ingen annan information ges. Om jag tar för lång tid på mig (mer än 60 sek.) i min bokning, säger systemet till mig att köpet avbrutits och jag tas sedan hela vägen tillbaka till startsidan för att välja stad än en gång. Tycker att detta är ett steg väl långt tillbaka i köpet. När jag så valt platser börjar dessa blinka med ett svagt vitt sken. Jag tycker att denna markering kunde har varit tydligare. Deras ursprungsfärg skiljer sig inte alltför mycket ifrån den vita färgen. När jag bekräftat, kommer jag så till en sida som beskriver vad jag behöver veta om köpet samt vad de olika rutorna innebär. Jag tycker att texten som presenteras här är alltför massiv och skulle kunna delas upp. Mitt förslag är att information rörande t.ex. rutan för Rabattkort, läggs som en länk strax bredvid denna ruta. Det är annars risk för att användaren missar viktig information. I och med att köpet nu kommit till sin slutfas tar min simulering för detta slut. 9

10 3.3.2 En bokning Jag bestämmer mig nu istället för att göra en reservation och anger därför mitt telefonnummer. På nästa sida får jag inte välja biljetter själv, vilket är mycket frustrerande, eftersom jag personligen föredrar att sitta långt fram i salongen istället för att automatiskt tilldelas de bästa platserna från mitten. Sidan är dock som den för köp, mycket tydlig vad gäller presentation av salongen. När jag bekräftat min bokning, kommer jag till en ny sida. Här står det till vänster var jag hämtar ut mina biljetter samt när jag ska hämta ut dem och vad det kostar. Det står dock inte vad som är mitt bokningsnummer (tror jag först). Inte förrän efter en stund, inser jag att den stora vita rutan till höger, som jag avfärdat som reklam, är i själva verket ett utskriftsvänligt kvitto med allt jag behöver veta om min bokning. På sidan finns två textlänkar till Biografen respektive Externa försäljningsställen. Framför dessa finns, som i sektionen Nya filmer på SF Bio, små bilder som länkar till samma sak, vilket känns överflödigt. 4 Analys utifrån Nielsens teorier Nedan går jag igenom teorin som jag presenterat tidigare och applicerar den på SF Bio:s startsida. Synbar systemstatus och feedback Det jag stött på som är relaterat till feedback på startsidan, är bland annat behovet av ett genomgående förtydligande av vilket menyalternativ som är valt på startsidan. Under ett köp/en bokning ges ständig feedback med hjälp av informationsrutan där användaren under hela bokningen kan se vilka val som han/hon har gjort. Under köp agerar tidsfristen även en visning av status, likaså gör indikatorn på hur många steg som återstår i bokningen. Att tala användarens språk SF Bio använder genomgående ett enkelt språk som kan förstås av de flesta användare. Dock missar de i några fall att, såsom i sektionen Filmsajter på startsidan, formulera sig även så att ovana Internetanvändare förstår. Användarkontroll och frihet Genom länken Hem i menyn, är det lätt för användaren att ta sig tillbaka till startsidan ifrån webbplatsens alla sidor. Konsekvens och standard En av inkonsekvenserna på startsidan, var att textlänkar i regel var understrukna men ibland inte, såsom i menyn och i avsnittet Filmsajter. Även bilder ledde till 10

11 brott mot standard, genom att vissa av bilderna på startsidan fungerade som länkar till filmernas hemsidor, när andra inte gjorde detta. Ett exempel var att bilden under Premiärtips var statisk när alla bilder under Filmsajter var länkar. Även den ovan nämnda markeringen av var man befinner sig i systemet, var föremål för inkonsekvens, i och med att den inte alltid visades för användaren. Estetik och minimalistisk design Det är framför allt på startsidan som jag känner att SF Bio går ifrån minimalistisk design. Flera saker förekommer två gånger på sidan, såsom DVD-butiken och Bioklubben gör i meny samt i form av stora logotyper på startsidan. Detta bidrar till ett rörigt intryck, som jag tidigare nämnt. Övriga sidor på webbplatsen har något enklare design och känns mindre röriga. Att förklara sidans syfte Den mening som Nielsen efterfrågar om vad företaget gör, finns inte hos SF. Dock framgår det tydligt att det är ett företag i biobranschen, inte minst av logotypen. Fönstrets titel börjar alltid med SF Bio och byggs tidvis på med Telefonbokning: All information om SF ligger samlad i menyns rullist Innehåll, i enlighet med Nielsens rekommendationer. Att hjälpa användaren att hitta Mot bakgrund av att startsidan har flera delar som drar åt sig uppmärksamhet, är det svårt att urskilja vilka som faktiskt är de mest prioriterade uppgifterna. Den enda som sticker ut, till följd av att den har fått en fördelaktig placering i övre vänstra hörnet, är sektionen Just nu på SF Bio. Jag antar därför att den i enlighet med Nielsens teorier är just en av SF Bio:s viktigaste funktioner. Någon ruta för att söka på webbplatsen finns inte på sidan, vilket ju Nielsen rekommenderar. Att avslöja sajtens innehåll Flera länkar på sidan är korta och tydliga, såsom länkarna med texten Tävla. Ett misstag som är lite relaterat till detta finns dock på bokningssidan, där rubrikerna över de fyra dropdown-menyerna alla inleds med ordet Ändra. Detta försvårar enligt Nielsen. Att använda visuell design På startsidan finns en väldigt stor mängd bilder, varav två stora reklamplatser. Några av bilderna på sidan är så små att det är svårt att urskilja vad de visar, vilket gör att de snarare förvillar och förstör för användaren än förenklar. En av reklamplatserna ligger väldigt nära menyraden, vilket inkräktar på navigationen. Reklamen kan dessutom leda till att användaren bortser från övriga bilder, 11

12 eftersom besökaren tolkar dessa som att vara reklam de också. På sidan där köp och bokning bekräftas finns just detta problem, då viktig information visualiseras med samma bakgrundsfärg och på samma placering som reklamen. URL och teckenstorlek Jag har inte stött på att sidans URL någon gång har överstigit 75 tecken. SF Bio har byggt upp sitt gränssnitt huvudsakligen av bilder, vilket gör att det blir omöjligt att ha en dynamisk teckenstorlek. Detta benämner Nielsen således som ett designmisstag. 5 Diskussion Det är svårt att utvärdera en sida utifrån riktlinjer objektivt, dvs. utan att blanda in mina egna värderingar. För att kunna använda dessa råd, måste jag själv tolka och applicera dem på webbsidan. Mitt helhetsintryck av SF Bio:s startsida är att den är rörigare i sin design än jag tycker att den behöver vara. Dess största positiva egenskap ligger i färgvalet, anser jag. Det mörka utseendet ger en mysig känsla av en biosalong. Jag är medveten om att den skillnad som SF har mellan att köpa och boka biljetter finns, med anledning av att det ska vara mer fördelaktigt att köpa biljetter. Jag tycker dock att den frustration och begränsning som det innebär för användaren att själv inte kunna välja plats, är skäl nog för att ändra på detta. 12

13 6 Referenser Ten Usability Heuristics Top Ten Guidelines for Homepage Usability (Jakob Nielsen s Alertbox, May 12, 2002) Top Ten Web-Design Mistakes of 2002 (Jakob Nielsen s Alertbox, December 23, 2002) 13

14 Bilaga: Bilder från Bild 1. Startsidan Bild 2. Filmmenyn 14

15 Bild 3. Visningar Bild 4. Köpa/reservera 15

16 Bild 5. Att välja plats Bild 6. Bekräftelse 16