Analys av webbplatsen csn.se Personlig uppsats i kursen Interaktionsdesign Grafiska gränssnitt, hösten 2003 Helena Callert 1. Sammanfattning Denna uppsats beskriver en personlig analys av Centrala studiestödsnämndens webbplats. Med stöd av dokumenterade rekommendationer har webbplatsen utvärderats med avseende på både textbaserat och grafiskt innehåll, navigationsmöjligheter samt användbarhet och flexibilitet. Jag vill dock understryka att det i första hand är mina egna åsikter och erfarenheter som ligger till grund för analysen, formella användartester med fler personer har inte utförts. Jag har inte heller haft kontakt med CSN angående webbplatsens utformning. 2. Inledning Centrala studiestödsnämnden, CSN, är en statlig myndighet som nästan alla svenska högskolestudenter kommer i kontakt med när det gäller administration av studiebidrag och lån. Det ställs stora krav på tillgänglighet och snabb service vilket gör att webben borde vara ett viktigt och mycket användbart medium för myndigheten att förmedla sin information. CSN får också ofta kritik i media för sin otillräcklighet när det gäller telefonservice. Där kan webbplatsen utgöra ett bra komplement om den utnyttjas på rätt sätt. Med utgångspunkt från dessa antaganden har jag valt att analysera webbplatsen www.csn.se. 2.1. Målgrupper Den största användargruppen är troligtvis studenter vid svenska högskolor och universitet samt studenter som läser andra likvärdiga, studiemedelsberättigande utbildningar. Det som kan sägas om denna mycket breda grupp är att åldern varierar från 18 till 45 år och att datorvanan kan skifta mycket. Vissa studenter läser datortekniskt inriktade kurser och har stor erfarenhet. Andra har datoranvändning naturligt involverad i utbildningen och använder ofta webben vid informationssökning. Dessutom är det troligt att många studenter använder webben på fritiden för att läsa nyheter, boka tåg- och biobiljetter och så vidare. En annan stor användargrupp är de som återbetalar sina lån. I denna grupp är medelåldern förmodligen något högre medan datorvanan och användandet av webben antagligen är mycket skiftande även här. Ytterligare en grupp består av dem som förmedlar CSN:s information till studenterna, alltså studievägledare och andra informatörer. Även dessa är en åldersmässigt bred grupp, dock kan man anta att de har en viss grundläggande datorvana från arbetet och förmodligen även en viss vana av webbanvändning. 2.2. Syfte med webbplatsen CSN behöver förmedla både rent allmän information om studiemedel och återbetalningsregler samt personlig information till enskilda studenter eller återbetalare. Webbplatsen ger också möjlighet att publicera information om själva myndigheten, var deras lokalkontor finns och hur man kan kontakta dem. 1
3. Analys Detta avsnitt belyser utformningen av webbplatsens fundamentala delar. Strukturen bygger genomgående på att all information visas i en rektangulär inramad ruta, centrerad i webbläsarfönstret, se figur 1. Figur 1. Webbplatsens genomgående utseende i användarens webbläsare. All information presenteras inom den inramade delen i mitten. 3.1. Första sidan Den första sidan, hemsidan, som användaren ser är mycket viktig för det fortsatta besöket på webbplatsen i fråga, den bör gå snabbt att ladda och samtidigt presentera det viktigaste av webbplatsens innehåll. På CSN:s webbplats, se figur 1, möts besökaren av en kort välkomsttext som presenterar myndigheten och syftet med webbplatsen, några större snabbvalsknappar, en nyhetsruta samt en stor länkad knapp till Studiemedelsguiden, vilken leder till en sida där diverse blanketter kan beställas, bland dem en broschyr med namnet Studiemedelsguiden. I den övre gröna kanten finns myndighetens logotyp diskret placerad i vänstra hörnet, bredvid ses den navigationsöversikt med rullgardinsmenyer som återfinns på hela webbplatsen. Sidan pryds också i mitten med en bild på en person i färd med någon studie- eller yrkesrelaterad sysselsättning, bilden varieras från gång till gång då sidan laddas om. Rent allmänt ger första sidan ett strukturerat intryck. Den korta texten är lättläst och ger en bra sammanfattning, dock hade en introduktion till de tjänster som webbplasten erbjuder kanske 2
varit användbar. Det finns snabbvalsknappar till vissa tjänster, exempelvis Webbsvar dina sidor där en student eller återbetalare via inloggning får tillgång till sin personliga information. Dessa knappar underlättar och effektiviserar besöket för dem som på förhand vet vart knapparna leder. För en förstagångsbesökare kan de eventuellt bidra till att sidan känns lite rörig. Nyhetsrutan till höger presenterar fyra aktuella nyhetsrubriker med den senaste överst. Dessa ger ett förhållandevis stelt och opersonligt intryck, endast rubriken ger inte mycket ledtrådar till vad det handlar om, såvida man inte är väl insatt i vad som händer hos CSN. Enligt Nielsen [1] är det viktigt att visa en del av webbplatsens faktiska innehåll på första sidan, kanske hade det varit mer intressant att läsa en kort sammanfattning av en nyhet än rubriker för fyra nyheter. Den länkade knappen till Studiemedelsguiden ger inte heller någon vidare information om vad detta faktiskt är, även om namnet ger en del ledtrådar. Även här hade en mycket kort beskrivning, kanske bara ett par ord, kunnat hjälpa användaren. 3.2. Navigation Navigationen på webbplasten sker i första hand via menyn i den övre gröna ramen. Uppdelningen i kategorier är baserad på vilken roll besökaren har i förhållande till CSN; Studerande, Återbetalare eller Vidareinformatör. Dessutom finns kategorierna Utländsk medborgare, Kontakta oss, Om CSN samt Sök. Då muspekaren förs över ett alternativ i menyn dyker en rullgardinsmeny upp under den gröna kanten, där de befintliga underkategorierna presenteras, se figur 2. Figur 2. Navigation via menysystemet. Varje huvudkategori har en undermeny med varierande antal alternativ. För att förflytta sig mellan olika delar av webbplatsen kan användaren antingen klicka på huvudkategoriernas namn eller direkt på en underavdelning i rullgardinsmenyn. När en kategori väljs och en ny sida följaktligen visas, kan också den aktuella kategorin med underavdelningar ses till vänster, se figur 3. När till exempel kategorin Studerande väljs, visas alla avdelningarna från rullgardinsmenyn i en separat meny till vänster om texten. I den 3
undre gröna ramen visas dessutom att användaren befinner sig i avdelningen Studerande som i hierarkin är placerad direkt under första sidan, se figur 3. Figur 3. Avdelningen Studerande med underavdelningar till vänster. Det tog lite tid att upptäcka att rubriken för varje huvudkategori är klickbar och genererar en helt annan sida än de som finns i rullgardinsmenyn. Detta tyckte jag personligen var lite svårt att ta till sig, jag ville gärna tolka de olika huvudkategoriernas namn som endast rubriker. Om användarens webbläsare av någon anledning inte kan visa rullgardinsmenyerna är det dock en lösning att kunna klicka på rubriken, för att sedan navigera vidare med hjälp av den vänstra menyn. Navigationssystemet är vid en första överblick mycket lättöverskådligt och enkelt att använda, samtidigt som det är diskret och inte drar till sig användarens uppmärksamhet i onödan. Detta överensstämmer väl med Nielsens riktlinjer [1]. Kategoriseringen av innehållet känns också naturlig, användaren kan i de flesta fall identifiera sig som antingen studerande, återbetalare eller vidareinformatör och på så sätt direkt få tillgång till de underavdelningar som bör vara av störst intresse. Antalet underavdelningar varierar en hel del mellan de olika huvudkategorierna och på vissa ställen kan det vara svårt att få en överblick eller att hitta rätt avdelning. I menyn som dyker upp till vänster då en huvudkategori valts kan det i vissa fall vara svårt att skilja de olika länkarna från varandra, de avgränsas inte på annat sätt än att de är placerade på olika rader. Dessutom finns ingen direkt markering som avslöjar att de är klickbara, som till exempel understrykning eller annan textfärg. Att i den undre gröna ramen visa var i webbplatsens hierarki användaren befinner sig verkar vid första påseende vara en bra sätt att skapa översikt. Dock är menyuppbyggnaden sådan att samma länkar återkommer om och om igen i undermenyerna, för varje underavdelning som väljs i menyn till vänster skapas en ny undermeny med vad som anses vara lämpliga länkar. Till exempel förekommer avdelningen Webbsvar - dina sidor i nästan alla underavdelningar. Detta spindelnät av länkar kan ge upphov till ganska lustiga strukturer i den undre gröna ramen, se figur 4. För att se information om CSN-kontor kan användaren gå via 4
Återbetalare och därefter Lån före 1989. Detta känns lite tillkrånglat även om det för med sig att användaren kan se vilka sidor som nyligen besökts och i vilken ordning. Figur 4. I den nedre gröna kanten kan användaren se var i webbplatsens hierarki han eller hon befinner sig. Ibland verkar dock uppbyggnaden lite ologisk. Att hitta kontaktinformation och fakta om CSN är enkelt då dessa kategorier återfinns i huvudmenyn. Kategorin Sök är också lättillgänglig. Det finns dock inte som på många webbplatser möjlighet att skriva in ett sökord direkt i en ruta på startsidan, vilket Nielsen [1] förordar. Frisökning finns istället tillgänglig via ett klick på huvudkategorin Sök. Rullgardinsmenyn erbjuder en innehållsöversikt från A till Ö, en ordlista där sökning kan ske på ord som ingår i denna samt en sitemap där alla sidor visas. Innehållsöversikten ger inte mycket hjälp för en vilsen besökare, då allt är sorterat strikt alfabetiskt. Informationsbladet Att betala tillbaka studielån finns till exempel sorterad under bokstaven A och ingen annanstans. Webbplatsens sitemap ger endast textlänkar till alla undersidor och eftersom det rör sig om ett mycket stort antal så blir det ingen särskilt tydlig översikt. Sökmöjligheterna skulle helt klart kunna förbättras, de är också viktiga då det rör sig om förhållandevis stora informationsmängder på webbplatsen. 3.3. Textinnehåll och information Långa textstycken är mycket svåra och tröttande att läsa på en webbsida. Textinnehållet måste anpassas speciellt för webben, gärna med korta stycken, många underrubriker och med markerade nyckelord [2]. CSN har tagit fasta på dessa krav vad gäller textinnehållet på webbplatsen, då längre textstycken behövs är de föredömligt uppdelade, se figur 5. För ytterligare upplysningar finns oftast blanketter och broschyrer att ladda ner separat. Det skulle kräva mycket tid och kunskap för att avgöra om den information som webbplatsen innehåller är relevant och vad som eventuellt skulle kunna förbättras avseende detta. Intrycket man får efter ett antal besök är dock att den mesta information man kan önska sig finns på webbplatsen, även om det i vissa fall kan vara lite krångligt att navigera sig fram till den. När det gäller personliga upplysningar till studenter eller återbetalare finns den lösenordsskyddade avdelningen Webbsvar dina sidor, där besökaren i fråga kan hitta sin personliga information. Denna del verkar fungera bra och tillför mycket till webbplatsen. Det är ju oftast den personliga informationen som är mest intressant, och att använda webben för att få tillgång till den är mycket smidigt. 5
Figur 5. Exempel på hur lite större textmängder presenteras, med underrubriker och länkar väl synliga. 3.4. Bild och form När det gäller grafik och bilder på en webbplats är det viktigt att inte låta detta bli ett självändamål, bilderna måste finns där av en anledning. Nielsen [1] understryker att det bästa oftast är att använda fotografier på människor med anknytning till sidans innehåll och detta verkar CSN ha tagit fasta på. På första sidan visas, som tidigare nämnts, ett antal olika personer som är sysselsatta med studier eller yrkesarbete, se figur 1 och 2. Bilderna är svartvita fotografier där vissa detaljer har livats upp med färg, oftast rött. Detta kan vara ett bra knep för att göra bilden mer intressant, utan att för den skull låta den dra till sig alltför mycket uppmärksamhet eller införa alltför många färger i helhetsbilden. Personbilderna verkar också vara tänkta att föreställa helt vanliga människor vilket är lämpligt, de flesta besökare kan då identifiera sig med dem. I allmänhet finns en bild per sida vilket livar upp den stundtals ganska torra textinformationen. Bilderna föreställer i allmänhet människor i studie- eller yrkesrelaterade miljöer, eller föremål som förknippas med dessa, till exempel pennor, se figur 3. Den grundläggande grafiska utformningen är diskret och stjäl ingen onödig uppmärksamhet från besökaren. Färgerna är grönt och rött som representeras av de gröna ramarna upp- och nertill samt CSN:s logotyp i rött längst uppe till vänster i den övre ramen. Just logotypen är extremt liten och diskret och kanske är detta avsiktligt eftersom förkortningen CSN har en lite negativ klang för många (det förknippas lätt med pressade studiesituationer och mager ekonomi). Färgnyanserna som används är klara och kontrasterar bra mot varandra och bakgrunden, något som W3C [3] rekommenderar. Rullgardinsmenyer och undermenyer till 6
vänster går i en ljusare grön färg vilket stämmer bra ihop med den gröna färgen i ramarna. Den gröna färgen återfinns i samband med alla navigationsytor. Färger kan, då de används på rätt sätt, vara ett utmärkt sätt att lyfta fram information, men kan även lätt skapa förvirring då den används fel [4]. På CSN:s webbplats ger färgerna ett mervärde, de både förtydligar och förskönar intrycket. Den grafiska utformningen är inte på något sätt djärv eller nyskapande men den fyller sin funktion och då CSN är en statlig myndighet är det naturligt att det är innehållet och inte designen som ska lyftas fram och uppmärksammas. 3.5. Flexibilitet och anpassningar Ett välkänt problem med att skapa webbplatser är att få dem att se någorlunda likadana ut, eller åtminstone fungera, i olika webbläsare, på olika sorters bildskärmar och med olika operativsystem. För att hjälpa besökaren ger CSN på första sidan länkar till en informationssida för just detta, där ett antal rekommenderade webbläsare och operativsystem listas. Detta är dock kanske mest ett sätt att vinna lite användarvänlighetspoäng, naturligtvis ska en webbplats som riktar sig till en så stor målgrupp fungera med de vanligaste webbläsarna och operativsystemen. Så verkar också vara fallet, åtminstone vid en snabb testning. Bredden på den ram inom vilken informationen presenteras visar sig vara anpassad för en minsta skärmupplösning på 800 x 600 pixlar, vilket innebär att en användare med lägre upplösning får problem. Antagligen är dock denna användargrupp mycket liten i dagens läge. Vad gäller bilder har man följt normen att märka alla med så kallade alt-taggar, vilket gör att en kort beskrivning av bilden dyker upp då muspekaren förs över den. Detta underlättar i de fall då en bild av någon anledning inte laddas in, eller för de besökare som använder helt textbaserade webbläsare. Samtliga bilder är relativt små (både ytmässigt och med avseende på filstorlek) och går snabbt att ladda in, vilket också är positivt. Länkar inom textstycken har markerats med blå färg och understrykning vilket är den traditionella utformningen av länkar. Detta gör dem förstås lätta att urskilja och användaren riskerar inte att missa information på det sättet. Dock går färgsättningen inte så bra ihop med den övriga layouten där rött och grönt är de två förekommande färgerna. Här har man antagligen fått väga det estetiska intrycket mot tydligheten och beslutat att göra länkarna traditionellt blå. Ett alternativ för att få dem att bättre smälta in i färgsättningen hade förstås varit att göra dem gröna. 4. Slutsatser Efter att ha studerat CSN:s webbplats intensivt under några dagars tid är intrycken övervägande positiva. Sidan känns väl genomarbetad och det märks att man har tänkt till lite extra när det gäller användbarhet. Det som skulle kunna förbättras vid en renovering är första sidan, där det gärna får finnas lite mer smakprov på nyheter och mer information om tillgängliga tjänster. Webbplatsen innehåller ju totalt sett stora mängder information och det borde vara ännu enklare att snabbt hitta rätt. En sökruta direkt på första sidan vore säkert uppskattad, likaså skulle man kunna se över navigationssystemet till viss del, kanske behöver inte samma länk finnas i alla undermenyer, när den dessutom alltid finns tillgänglig via huvudmenyn. 7
5. Referenser [1] Jakob Nielsen, Top Ten Guidelines for Homepage Usability, http://www.useit.com/alertbox/20020512.html, 2002-10-28. [2] Jakob Nielsen, Top Ten Web-Design Mistakes of 2002, http://www.useit.com/alertbox/20021223.html, 2002-10-28. [3] World Wide Web Consortium, http://www.w3c.org, 2003-10-30. [4] Edward R. Tufte, Envisioning Information, 1990, Graphics Press. 8