Analys av webbsida

Researangören Rosa Bussarnas webbplats "www.rosabussarna.com".

Webb­platsens syfte

På webbplatsen presenteras alla resor som företaget arrangerar till olika delar av världen. Syftet med webbplatsen är att göra hela processen med att boka en av deras resor så smidig som möjligt för kunden. Till hjälp har kunden en sökmotor med olika filter som hjälper till att begränsa sökresultaten för att hitta en resa som passar dem. Information om resmål, dagsprogram, priser och avgångsdatum finns att läsa för varje resa och kunden kan även registrera sig och göra online-bokning på vald resa och troligen även betala för resan online.

Webbplatsens målgrupp

Webbplatsen har en folklig ton och riktar sig till folk som är ressugna och föredrar att resa arrangerat och i grupp. Den lägger stor vikt på att vara enkel att använda och mindre på att vara grafiskt konstnärlig, kanske för att det förväntas att de som kommer hit redan är inspirerade att vilja resa och därför inte behöver övertygas med extraordinär grafik. Användaren antas i stället föredra en webbplats som är lättillgänglig och praktiskt upplagd, med en sökmotor för resmålen för att snabbt hitta resan man vill ha. Att det inte finns någon välkomsttext på startsidan visar också på att webbplatsen är anpassad i första hand till användare som redan känner till företaget sen tidigare, antagligen för att de utgör den bredaste kundbasen, och därför bör man ta större hänsyn till dessa användare [1].

Vissa resor är markerade som 55+ resor och signalerar att man tar extra hänsyn till denna åldersgrupps behov på dessa resor. Möjligt kan det verka avskräckande på yngre användare på webbplatsen. Något annat som är speciellt med webbplatsen är att alla priser finns utskrivna vilket är väldigt användarvänligt mot folk med begränsad plånbok.

Navigationen

Webbplatsen är målorienterad - användaren är där för att hitta och boka en resa. Det är väldigt viktigt att målorienterade webbplatser ska vara lätta att hitta i [2], och det tycker jag man har lyckats med.

Webbplatsen ger användaren tillgång till flera olika navigationssätt och dessa följer ett mönster för hur de brukar fungera. I sökmotorn för resmålen kan man snabbt begränsa resultaten genom fyra olika filter (typ av resa, kontinent, land och månad för avresa). Man kan även få en överblick över resorna via toppmenyns flik “Våra resor”, där alla resorna är grupperade efter vad det är för typ av resa, så som “familjeresor”, “cykelresor”, “vandringsresor” med mera. Ett fritextsökningsfält finns också där man kan hitta resor via sökord. Oavsett vilken av navigationsvägarna man valt leds man sen till en resultatsida som listar upp de relevanta resorna. Man väljer en av dem för att komma till dess egen sida, där all information om resan finns och man har möjlighet att gå vidare och se avresedatum och göra en bokning. Så här brukar ett bokningssystem för resor fungera enligt min erfarenhet. Buntningen av informationen i toppmenyn och i sökmotorn är tydlig och logisk med ett flödesschema i form av en trädstruktur, vilket gör att användaren lätt kan få överblick över webbplatsen [3]. Sen finns det även löpsedelsbilder på startsidans topp med direktlänkar till de populäraste resmålen. Dessa står utanför den vanliga hierarkin på webbplatsen [4], och är också något som också ofta finns på sidor som vill sälja något. Jag upplever att alla förväntningar på hur en navigation ska fungera uppfylls av den här webbplatsen.

Förutom att användaren kan navigera lätt kan den också lätt se var den befinner sig på webbplatsen, och det tack vare en textsträng på sidans topp med sökvägen dit, ofta kallad för brödsmulor [5]. Brödsmulorna fungerar även som länkar bakåt. Om man vill ta sig hela vägen tillbaka till startsidan kan man också klicka på företagslogotypen i övre vänstra hörnet, något som också många användare förväntar sig att man ska kunna göra [6]. Något annat som underlättar orienteringen på webbplatsen är att den länk som leder tillbaka till samma sida man är på får en tydlig färgmarkering, t.ex. genom att menyfliken blir vit när de andra är gula, eller att länken i sidofoten blir rosa där de andra är svarta. Besökta länkar byter däremot inte färg, vilket är tur för det hade gjort menyerna mer svårlästa [7].

Bilderna

Bilderna spelar en central roll på webbplatsen och kan delas upp i tre olika typer.

Den kanske viktigaste typen är den klickbara navigationsbilden som tillsammans med underliggande rubrik och brödtext bildar en informationsgrupp som oftast motsvarar ett resmål, och där är alla klickbara och leder till samma sida. Bilden ger informationsgruppen sin grafiska identitet och det blir därför lättare för ögat att skilja ut de olika intilliggande grupperna från varandra [8].

Löpsedelbilden är en annan typ av bild på webbplatsen, den finns på toppen av varje sida och den är till för att ge en stämning och ett första intryck. Ibland är det växlande banderollbilder som är klickbara och fungerar som en spontan genväg till ett resmål, och då finns förklarande bildtext inne i bilden. I andra fall så har banderollen samma bild som informationsgruppen har som länkade till aktuell sida, och då är bilden till för att göra det tydligt att man har hamnat på fördjupningssidan för resmålet som man just valt.

Det finns även vanliga bilder på webbsidorna som inte är till för navigation. Dessa bilder ger mer information om resmålet och lättar upp innehållet. Vissa av dessa är länkade till en förstorad version av samma bild, för att man ska kunna se detaljer.

Utöver dessa finns även logotypen och kartbilderna. Logotypbilden är klickbar och leder tillbaks till startsidan. Kartbilder visas med Google Maps och finns under toppmenyfliken ”Vår Värld” och i sidfoten på varje resemåls-sida med deras geografiska plats utmarkerade.

Tillgängligheten

Alla webbplatsens bilder som är klickbara har också en alt-text som kan läsas av en skärmläsare. De statiska bilderna som bara är för utfyllnad har däremot ingen alt-text och det är så det ska vara enligt riktlinje 1.1 i Web Content Accessibility Guideline [9].

Webbplatsens html-sidor innehåller endast ren html-kod, utan information om stil och form. Detta uppfyller riktlinje 1.3 [9], om separerad struktur från innehåll. Man vill nämligen att skärmläsare bara ska behöva gå igenom relevant information.

Kontrasten mellan texten och bakgrunden bör vara stor nog för att det ska vara lätt att läsa texten, enligt riktlinje 1.4 [9]. Den mesta texten är svart på vit bakgrund eller svart på gul vilket också är lätt-läsbart. Men det finns också rosa text på gul bakgrund t.ex. sidhuvud-rubriken, eller grå text på ljusbrun bakgrund t.ex. sidfotlänkarna, där kontrasten inte är stor nog att bli godkänd enligt WCAG färgkontrast-regler [10], speciellt inte för små textstorlekar. Man har nog prioriterat det symboliska värdet av att använda färgen rosa över att ha en tydlig färgkontrast. Angående möjligheten till förstoring av textstorleken så testade jag med 24 px som minsta och 30 px som normal storlek och det funkade bra överallt på webbplatsen utom på vissa ställen i sidfoten där spalter krockade. (Kunde inte genomföra storleksändringen i Firefox, men det gick i Chrome).

Riktlinje 2.1 [9], att man kan nå viktiga funktioner med tangentbordet genom tabbtangenten, uppfylls. Det kan finnas användare som inte har tillgång till mus och för dem blir denna funktion nödvändig.

Startsidan och andra sidor högt i navigationsflödet har bara titlar i h2, vilket känns lite konstigt. Det här blir extra förvirrande för en som läser med skärmläsare och som försöker förstå den hierarkiska strukturen på sidan, som enligt riktlinje 2.4 [9] bör framgå genom rubriker i fallande ordning. Resmålssidorna däremot innehåller rubrikerna h1, h2 och h3 och i rätt ordning. Och man ser även var på webbplatsen man finner sig genom att läsa sökvägen från brödsmule-text-strängen.

Förutsägbarheten, som det står om i riktlinje 3.2 [9], är ganska god. Logotyp och löpsedelbilder är på toppen av sidan, huvudmenyn kommer sen, och därefter huvudinnehåll och sidofoten med de mindre viktiga länkarna sist. Kontaktinformation finns i sidofoten vilket också är vanligt.

Enligt riktlinje 4.1 [9], bör all kod ha korrekt syntax för att göra det enklare för skärmläsare att läsa. Validerar man t.ex. startsidan med ett valideringsprogram [11] får man upp ett antal fel och varningar. De flesta verkar vara liknande typer av felmeddelanden som har med bilders attribut att göra. Jag antar att dessa inte har någon större betydelse eftersom sidan är gjord av professionella som säkert vet vad de gör.

Sammanfattningsvis så kan man säga att webbplatsen har en ganska god tillgänglighet för synskadade med skärmläsare, tack vare att det finns alt-text på bilderna, att html-sidorna hålls rena och att sidorna har ett vanligt förekommande upplägg. Däremot finns det vissa brister i rubrikhierarkin på vissa sidor och problem med otillräcklig färgkontrast på viss text som drar ner tillgängligheten lite.

Responsiviteten

När jag kör webbplatsens startsida genom verktyget Responsinator [12], ser jag att företagsnamnet Rosa Bussarna som står högst upp på alla webbsidorna, blir avklippt vid smala skärm-vyer. Det här sker också i alla mina webbläsare på laptoppen när jag minskar fönstret, men inte när jag ser webbsidorna i min mobil. Har ingen aning varför mobilen lyckas visa texten rätt men inte laptoppen. Om man bortser från den här detaljen så verkar allting annat vara bra anpassat för smala skärmar/mobilskärmar. För att navigationen ska få plats i mobilvyn har toppmenyn blivit komprimerad till bara tre flikar, där sista fliken har alla menyval i rubriker med utfällbara underrubriker. Detta gör menyn lätt överblickbar.

Webbplatsens brister

Jag tycker att webbplatsen är väldigt enkel att använda med bra och kortfattad information om varje resmål. Men kanske en sak som de kunde lägga till skulle vara att göra toppmenyn ”sticky” så att den hänger med när man skrollar. Speciellt i mobil-vy känns det som att det hade varit bra om hamburger-ikonen var sticky, för som det är nu så är det väldigt besvärligt att navigera om man har skrollat ner på sidan och menyn hamnat utanför skärmen. Av samma skäl tycker jag att det även borde finnas en sticky logotyp-hemlänk. Det enda som de har sticky nu är sökmotormenyn, och det sker bara i desktop-vy, vilket är mindre viktigt där eftersom skärmen är större och skrollandet mindre.

Sen märkte jag även att rubriklänkarna i sidfoten leder tillbaka till startsidan, så de borde inte finnas alls som länkar.