Revision. Funka Nu AB Döbelnsgatan 21, Stockholm

Transkript

1 Revision Funka Nu AB Döbelnsgatan 21, Stockholm

2 Fakta om rapporten Beställare: Utförd av: Vår referens: Webbplatsens namn: URL: Delar som inte ingått: Linnéuniversitetet Linda Sohlberg Malin Forne Andreas Blackne Patrik Janesköld Linnéuniversitet Pdf-dokument Tredjepartslösningar Granskningens omfattning: Ej Teknik Revision Ej Ej Ej Ej Ej Pedagogik Språk Pdf Flash Webb-TV Publiceringsverktyg Tidsperiod för granskningen: till Operativsystem vid test: Windows 7 Webbläsare som använts: Internet Explorer 9 Mozilla Firefox 16 Google Chrome 23 Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 2 (79)

3 Funka Nu AB har genomfört en tillgänglighetsgranskning för att bedöma hur väl webbplatsen uppfyller kraven på tillgänglighet. Granskningen består av ett antal kontrollpunkter som vi tagit fram för att mäta tillgängligheten i webbaserade gränssnitt. För varje punkt finns bedömningen: Godkänd. Webbplatsen följer punkten på ett sätt som gör att inga grupper utestängs. Det kan innebära allt från mycket bra lösningar till acceptabla lösningar. Det kan finnas utrymme till förbättringar även här. Behöver förbättras. Det innebär när det gäller tekniska punkter att det troligen krävs åtgärder, men att det snarare handlar om ett fåtal avsteg än genomgående fel. För pedagogiska och språkliga punkter handlar det ofta om att webbplatsen troligen kan bli bättre, men att det måste bli en diskussion om något, och i så fall vad, som ska förändras. Underkänd. Här finns klara tillgänglighetsproblem som måste korrigeras. Inte aktuellt/inte bedömd. Det innebär att dessa lösningar inte används på webbplatsen idag eller att punkten av annan anledning inte är bedömd. Vi vill dock göra er uppmärksamma på att dessa punkter kan påverka tillgängligheten på webbplatsen. Funkas metodik är utvecklad i nära samarbete med handikapprörelsen och allt vi rekommenderar är testat i verkligheten. Vår verksamhet bygger på de internationella riktlinjerna för tillgänglighet, Web Content Accessibility Guidelines 2.0 (WCAG 2.0). Funkas långa erfarenhet av tillgänglighetsarbete och tester med användare med olika behov och förutsättningar, med och utan hjälpmedel, visar att WCAG 2.0 inte räcker. Vi har därför själva utarbetat testkriterier för punkter som kompletterar det internationella regelverk som offentlig sektor genom EUbeslut ska följa fick Funka i uppdrag av W3C att genomföra en auktoriserad översättning av WCAG 2.0 till svenska. Denna översättning kommer att ligga till grund för det arbete med vidareutveckling av Vägledningen 24-timmarswebben som e- delegationen ansvarar för. Web Content Accessibility Guidelines 2.0 (WCAG 2.0) Den auktoriserade svenska översättningen av WCAG 2.0 World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) Läs mer om Funka under rubriken Funka Nu AB i slutet av detta dokument. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 3 (79)

4 Om granskningen En pedagogisk granskning leder ofta till ett behov av att diskutera om och hur något behöver förändras. Vårt arbete kan beskrivas som problemorienterat. Det betyder att vi tar upp sådant som vi tror kan skapa problem för samtliga eller vissa användare. Det betyder också att vi inte ägnar så mycket plats åt det som fungerar bra. Det finns alltid mycket som fungerar bra i en webbplats men det får inte så stort utrymme i denna typ av rapport. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 4 (79)

5 Sammanfattning Det finns en del pedagogiska tillgänglighetsproblem på webbplatsen som kan försvåra för användaren att ta till sig innehållet. Ett exempel på detta är navigationen som dels inte är tillräckligt tydlig och dels hamnar i konflikt med andra objekt på webbplatsen. Det finns även problem med utformningen och hanteringen av länkar på webbplatsen. När länkar inte öppnas i nya fönster blir det till exempel extra viktigt att det framgår tydligt vilka länkar som leder till andra webbplatser. Utöver detta finns det även problem med formulär och felhantering. Funka Nu AB, Stockholm Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 5 (79)

6 Innehåll Fakta om rapporten Sammanfattning... 5 Innehåll... 6 Checklista: Pedagogik... 7 Kommentarer och rekommendationer: Pedagogik...13 Om denna granskning...67 Användarnas olika förutsättningar och behov...75 Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 6 (79)

7 Godkänd Behöver förbättras Underkänd Inte aktuell / Ej bedömd Godkänd Behöver förbättras Underkänd Inte aktuell / Ej bedömd Checklista: Pedagogik Intryck P1. Startsida a) Webbplatsens avsändare är lätt att identifiera b) Webbplatsens övergripande syfte är lätt att förstå c) Startsidan hjälper användaren att förstå vad som är viktigt P2. Generellt a) Webbplatsen känns inte rörig b) Intrycket bekräftar användarens förväntning av hur det borde se ut och fungera Logik och begriplighet P3. Logik a) Utformning och placering av objekt hjälper användaren att tillgodogöra sig innehållet b) Olika tjänster/avdelningar på webbplatsen är sinsemellan konsekventa i sin interaktion med användaren c) När användaren upplever sig göra samma sak blir resultatet också detsamma d) Länkar som leder till samma sida bör heta samma sak e) Begripligheten av instruktioner och hänvisningar är inte beroende av användarens förmåga att se och höra P4. Begriplighet a) Det går intuitivt att förstå hur man navigerar på webbplatsen b) Uppdateringar och ändringar av innehåll sker så långt som möjligt efter den plats där användaren befinner sig när uppdateringen/ändringen initierats Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 7 (79)

8 Godkänd Behöver förbättras Underkänd Inte aktuell / Ej bedömd Godkänd Behöver förbättras Underkänd Inte aktuell / Ej bedömd c) Användaren uppmärksammas när en förändring sker d) Användaren får relevant återkoppling Menyer och navigation P5. Menystruktur a) Antalet val i toppmenyn är väl avvägt b) Förhållandet mellan djup och bredd i strukturen är välbalanserat c) Menystrukturen speglar enbart informationsstrukturen d) Menystrukturen innehåller inte länkar till externa webbplatser e) Menystrukturen innehåller inte globala funktioner f) Menystrukturen innehåller inte kontaktuppgifter g) Menystrukturen speglar användarnas förväntningar av hur innehållet borde vara strukturerat h) Menyer har ställts upp enligt en uttänkt sorteringsordning P6. Övrig navigation a) Aktiv sida har aldrig aktiv länk till samma sida Formulär och e-tjänster P7. Utformning av formulär a) Formulär har en visuell utformning som underlättar ifyllning av uppgifter b) Formulär är konsekvent utformade genom hela webbplatsen c) Viktiga formulär ger användaren möjlighet att läsa en sammanställning av informationen som ska skickas innan denne bekräftar och skickar P8. Utformning av knappar a) Knappar presenteras som de olika webbläsarna presenterar knappar Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 8 (79)

9 Godkänd Behöver förbättras Underkänd Inte aktuell / Ej bedömd Godkänd Behöver förbättras Underkänd Inte aktuell / Ej bedömd b) Knappar är konsekvent placerade på hela webbplatsen P9. Felhantering a) När fel uppstår ska det tydligt meddelas användaren b) Fel ska beskrivas både överst i formuläret och där felet återfinns c) Om fel uppstår ska korrekt ifyllda uppgifter finnas kvar Tabeller P10. Utformning av tabeller a) Tabeller har en visuell utformning som underlättar förståelsen av det data som presenteras Länkar P11. Utformning och beskrivning av länkar a) Vanlig länk är tydligt urskiljbar b) Länk som öppnar nytt fönster är tydligt urskiljbar c) Länk som leder till extern webbplats är tydligt urskiljbar d) Länk för pdf är tydligt urskiljbar e) Länk för Word är tydligt urskiljbar f) Länk för Excel är tydligt urskiljbar g) Länk för teckenspråk är tydligt urskiljbar h) Länk för film är tydligt urskiljbar i) Länk för ljud är tydligt urskiljbar j) Länk för lättläst svenska är tydligt urskiljbar k) Länkstigen är tydligt urskiljbar l) Nya fönster används enbart om det ökar användarnyttan m) Länkars mål framgår tydligt Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 9 (79)

10 Godkänd Behöver förbättras Underkänd Inte aktuell / Ej bedömd Godkänd Behöver förbättras Underkänd Inte aktuell / Ej bedömd Godkänd Behöver förbättras Underkänd Inte aktuell / Ej bedömd Ljud, bild och komplexa medieformat P12. Använd komplexa format när det är lämpligt a) Komplexa format (exempelvis pdf och flash) ska bara användas när det är lämpligt och ökar användarnyttan P13. Tydliga kopplingar till alternativt innehåll a) Det är tydligt för användaren var denne kan hitta en alternativ textversion till material som presenteras i form av bilder och ljud Visuell presentation P14. Typografi a) Rubriker är tydligt urskiljbara och läsbara b) Ingresser är tydligt urskiljbara och läsbara c) Brödtexter är tydligt urskiljbara och läsbara d) Bildtexter är tydligt urskiljbara och läsbara e) Citat är tydligt urskiljbara och läsbara f) Klickbara objekt är tydligt urskiljbara och läsbara Information och hjälp P15. Webbkarta a) Webbkarta finns (för större webbplatser) b) Webbkartan innehåller hela menystrukturen c) Webbkartan är textbaserad P16. Sökfunktion a) Sökfunktion finns (för större webbplatser) Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 10 (79)

11 b) Sökfunktionen är placerad högt upp på sidan c) Den första sökningen är enkel att utföra d) Den första sökningen gör en sökning som omfattar allt material på webbplatsen e) Användaren kan förfina sin sökning med en utökad sökfunktion f) Användaren kan påverka hur träffar presenteras g) Sökning ger relevanta träffar P17. A till Ö-funktion & ordlista a) A till Ö används om webbplatsen är komplex eller har målgrupper med stora skillnader i förutsättningar och språkbruk b) A till Ö innehåller begrepp som riktar sig till besökaren och som tydliggör vilken information som finns på den länkade sidan c) A till Ö används för att styra användaren till rätt del av webbplatsen d) Ordlista/ordförklaring används om webbplatsen innehåller svåra ord och begrepp e) Ordlistans förklaringar av svåra ord och begrepp är enkla att förstå P18. Om webbplatsen a) En sektion som kallas om webbplatsen finns b) Om webbplatsen innehåller information om hur webbplatsen fungerar c) Om webbplatsen innehåller information som beskriver vilket stöd som finns för användare med särskilda behov P19. Hjälp & övergång till manuell service a) Komplexa funktioner och tjänster är försedda med någon form av hjälpfunktion b) Om det finns alternativa vägar att göra det som en komplex funktion är skapad för finns det även tydlig information om detta till användaren c) Om det krävs särskilda kunskaper för att hantera gränssnittet med någon form av hjälpmedel finns även tydlig information om detta till användare med dessa hjälpmedel d) Det är lätt att identifiera kontaktuppgifter i form av telefonnummer och e- Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 11 (79)

12 postadresser P20. Anpassning av presentationen a) Webbplatsen bör erbjuda information om hur användaren anpassar presentationen av webbplatsen direkt i webbläsaren eller operativsystemet P21. Lyssna-funktion a) Webbplatsen erbjuder användaren en möjlighet att lyssna på textinnehållet b) Användaren kan påverka uppläsningen av texterna P22. Teckenspråk a) Webbplatsen erbjuder viktig information på teckenspråk P23. Begriplig information i olika format (lättläst svenska, talad information, bilder, filmer) a) Webbplatsen innehåller material som är anpassat till målgrupper som har svårt att tillgodogöra sig skriftlig information P24. Andra språk a) Webbplatsen följer en genomtänkt strategi för hur andra språk än svenska ska hanteras Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 12 (79)

13 Kommentarer och rekommendationer: Pedagogik Intryck De flesta besökare av en webbplats skapar sig mycket snabbt en bild av webbplatsen utifrån de intryck de får direkt när de får upp sidan i sin webbläsare. Detta kan röra sig om en mycket kort tid. Därefter kan det ta lång tid att ändra besökarens uppfattning. Det första intrycket är därför viktigt. För personer som har olika problem med att hantera webbsidor är det första intrycket ännu viktigare. Det kan antingen skapa förtroende eller förstärka bilden av att det kommer att bli svårt eller rent av omöjligt att använda webbplatsen. P1. Startsida a) Webbplatsens avsändare är lätt att identifiera För många användare skapas en stor osäkerhet om de inte tydligt kan identifiera vem eller vilka som står bakom webbplatsen. Ofta framgår det av logotyper och texter vems webbplats användaren kommit till, men för till exempel projektwebbplatser eller mindre och kanske tillfälliga webbplatser är det inte ovanligt att avsändaridentiteten är oklar. Använd verksamhetens logotyp på startsidan och helst även någon form av text som hjälper till att identifiera avsändaren. Placera logotypen långt upp på sidan. Den bästa placeringen är uppe till vänster. Där förväntar sig de flesta användarna att hitta den. Ha dessutom gärna en sidfot längst ned på sidan där kontaktuppgifter återfinns. Kontaktuppgifter kan även placeras på andra positioner om ni valt att inte använda sidfot. b) Webbplatsens övergripande syfte är lätt att förstå Desto snabbare användaren kan förstå webbplatsens syfte desto snabbare går det att förstå om man hamnat rätt. Dels kan det vara viktigt att redan på startsidan klargöra syftet med webbplatsen, men ibland kan det också behöva förklaras vad webbplatsen inte gör. Många användare är osäkra på hur samhället är organiserat eller vilka aktörer som erbjuder vilka produkter och tjänster. Då kan det ibland även behövas en tydlig information om vad man inte kan göra på webbplatsen. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 13 (79)

14 Kommentar Webbplatsens syfte skulle kunna framgå tydligare. Det kan till exempel vara intressant att berätta att ni är ett universitet där det både går att forska och studera. Detta framgår indirekt i huvudmenyn, men det framgår inte om det går att göra andra saker också. Istället hamnar mycket fokus på parkourfilmen i mitten av sidan, vilket inte är fel men otillgängligt för vissa. Rekommendationer Överväg att presentera webbplatsens syfte i en kort text högt upp på sidan. c) Startsidan hjälper användaren att förstå vad som är viktigt Startsidans utformning kan på ett avgörande sätt hjälpa användaren att förstå vad som är viktigt. Antal objekt på sidan liksom hur dessa är placerade och utformade spelar stor roll. En webbplats kan innehålla en stor mängd information. All denna information är dock inte lika viktig. Utifrån användarens perspektiv går det alltid att säga att viss information är viktigare än annan. Startsidan kan genom sin utformning hjälpa användaren att förstå vad som är viktigt. Det finns några tumregler för hur användarna ofta tänker: Det som kommer högt upp på sidan är viktigare än det som kommer längre ner Det som kommer till vänster är viktigare än det till höger Det som är större är viktigare än det som är mindre Om ni visar mycket på startsidan är ni en verksamhet som inte kan prioritera och komma överens om vad som är viktigast Kommentar På webbplatsen använder ni gul överstrykning för att markera länkar, vilket på ett tydligt sätt drar till sig användarens uppmärksamhet. Risken är dock att de gula textelementen drar till sig för mycket uppmärksamhet, så att andra objekt på webbplatsen blir svårare att identifiera. Bilden nedan är hämtad från startsidan ( Här blir toppmenyn och sökfunktionen mindre framträdande eftersom uppmärksamheten dras till de gulmarkerade länkarna längre ner (se även P3a). Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 14 (79)

15 Rekommendationer Förtydliga toppmenyn och sökfunktionen. Tänk över om den gula markeringen av text verkligen drar ögat till de objekt som är viktigast för användaren. P2. Generellt a) Webbplatsen känns inte rörig En mycket vanlig kritik från användare med olika funktionsnedsättningar är att de anser att många webbplatser är röriga. På sidorna finns en mängd olika informationsobjekt som kanske är placerade och utformade på många olika sätt. När användaren har fått en bild av att webbplatsen är rörig kan det vara svårt att ändra den bilden. Det övergripande målet är att skapa en webbplats där användaren tycker sig ha knäckt koden, det vill säga tror sig förstå hur ni har tänkt och därför intuitivt förstår hur webbplatsen fungerar och var olika typer av information och tjänster är placerade. Kommentar Det finns flera faktorer som tillsammans bidrar till att webbplatsen ger ett ganska rörigt inryck: Gulmarkerade länkar drar till sig användarens uppmärksamhet, vilket gör att det krävs en extra ansträngning för att identifiera och hålla fokus på mindre framträdande objekt, exempelvis toppmenyn (se P1c, P3a och P11a). Funka Nu AB Döbelnsgatan 21, Stockholm (79)

16 Webbplatsen länkar till ett flertal externa system, ofta helt utan förvarning, vilket medför att användaren kastas mellan olika navigationskoncept (se P11c). Grundwebbplatsens menystruktur placerar sig på olika ställen beroende på vilken sida användaren är inne på (se P2b). Det är svårt att se vart i strukturen man befinner sig. De flesta av de faktorer som nämns ovan diskuteras mer i detalj under andra punkter i revisionen. Den sista punkten kommer dock att diskuteras här. Att tydliggöra för användaren vart hon befinner sig i en struktur är viktigt av flera anledningar. Dels hjälper det användaren att skapa en förståelse för hur webbplatsen är uppbyggd och hur man bör gå tillväga för att hitta olika typer av information. Dels blir det lättare att förstå hur man kan ta sig tillbaka till en viss sida vid ett senare tillfälle genom att klicka sig fram från startsidan. Det sistnämnda blir särskilt viktigt om användaren hamnat direkt på en sida genom att använda en sökmotor. Så länge man befinner sig relativt högt upp i webbplatsens struktur går att se var i man befinner sig på lnu.se. Bilden nedan är hämtad från sidan Boende för alla ( Här är de menyval som gjorts markerade, så att användaren utan svårighet kan se att man först klickar på Utbildning i toppmenyn och sedan på Boende i undermenyn till vänster för att ta sig till den aktuella sidan. Dessutom finns en länkstig högst upp på sidan som ger samma information. Förlita er dock inte för mycket på länkstigen eftersom våra tester tyder på att endast avancerade användare har nytta av den. På andra delar av webbplatsen är det dock betydligt svårare att se vart man befinner sig i strukturen. Bilden nedan är hämtad från sidan Design ( som man kommer till genom att klicka på Om Lnu Ämnen Design. Här är det omöjligt att se var i strukturen man befinner sig, eftersom inga menyval är markerade. Inte heller länkstigen ger några ledtrådar, Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 16 (79)

17 då den enbart anger Startsida. Här verkar det som att man har hamnat på en annan webbplats som har samma utseende. Detta kan bli mycket förvirrande för användaren. Rekommendationer Menystrukturen bör fungera som ett stöd för att förstå var man befinner sig på webbplatsen. Länkstigen bör alltid visa var användaren befinner sig i strukturen. Se över de andra punkter som nämns under denna punkt. b) Intrycket bekräftar användarens förväntning av hur det borde se ut och fungera Den som skapar webbplatser strävar ibland efter att vara originell. Användarna tenderar att straffa sådana webbplatser med att ge dem lågt betyg i användartester. För webbplatser som i huvudsak ska förmedla information eller sälja produkter och tjänster är det därför oftast bättre att hålla sig inom de ramar som användaren förväntar sig. Inom dessa ramar finns det utrymme för att vara originell och kreativ. De flesta användarna förväntar sig att: Det ska finnas en logotyp högt uppe på sidan och att man kan klicka på den för att komma tillbaka till startsidan Navigationen sker till vänster eller liggande upptill Adressuppgifter finns nertill En sökfunktion finns upptill (och oftast till höger) Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 17 (79)

18 Sådant som är understruket går att klicka på Kommentar Undermenyerna till vänster på webbplatsen fungerar på ett sätt som avviker från normen, vilket riskerar att skapa en viss förvirring. Det vanliga är att när man klickar på ett alternativ i vänstermenyn blir det valda alternativet markerat på något sätt (eventuellt i kombination med att ytterligare menyalternativ fälls ut), samtidigt som innehållet på sidan uppdateras. Menystrukturens placering brukar däremot inte förändras, vilket den i vissa fall gör på lnu.se. Bild 1 nedan är hämtad från sidan Utbildning ( som innehåller en undermeny en bit ner till vänster. När användaren klickar på Anmälan och antagning i menyn kommer hen till en sida med en helt ny struktur, där vänstermenyn istället ligger direkt efter toppnavigeringen (se bild 2). Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 18 (79)

19 Rekommendationer Låt undermenyerna till vänster ha samma placering oavsett var på webbplatsen användaren befinner sig. Logik och begriplighet P3. Logik a) Utformning och placering av objekt hjälper användaren att tillgodogöra sig innehållet Om ett objekt har en viss funktion men är designat så att det leder tankarna till något annat är risken stor att användaren inte hittar eller inte förstår objektets syfte. Om objekt är placerade i en ordning som inte uppfattas som logisk finns en risk att användaren inte förstår eller gör fel. Om till exempel en funktion för att logga in och göra tidsbokningar är utformad som en reklambanner och placerad högt upp på sidan kommer många användare att tolka objektet som reklam och därmed missa vägen till att boka tider. Om en webbplats som har en stående vänsternavigation plötsligt har sidor där det också finns navigation i en högerspalt kommer vissa användare inte att förstå att det finns ytterligare en eller flera nivåer av information. Det är också viktigt att instruktioner inte enbart relaterar till objekts utseende eller visuella placering. Även någon form av strukturell hjälp vid identifieringen av objektet måste användas. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 19 (79)

20 Kommentar Länkar är utformade så att de ser ut att vara markerade med en överstrykningspenna, på samma sätt som man brukar markera viktiga ord i en fysisk text. Det liknar också det sätt på vilket sökträffar brukar markeras när man söker på specifika ord på en webbsida eller i ett pdf-dokument. Med andra ord kommer det för användaren framstå som att de gulmarkerade objekten ger information som är särskilt viktig. Länkar har visserligen en viktig funktion på alla webbplatser, men utgör inte nödvändigtvis den viktigaste informationen på en webbsida. Risken med den nuvarande utformningen är att användarens uppmärksamhet kommer att dras för mycket till länkarna, så att de istället missar viktig information på sidan (se även P1c). Rekommendationer Överväg att byta till en vanligare utformning av länkar. b) Olika tjänster/avdelningar på webbplatsen är sinsemellan konsekventa i sin interaktion med användaren Ansvaret för att ta fram olika tjänster på en webbplats kan vara delegerat till olika delar av organisationen. Det finns därför en risk att tjänsterna sinsemellan blir mycket olika. Både den övergripande logiken och enskilda detaljer kan skilja sig åt. Internt gör det kanske inte så mycket men för användaren kan det skapa stor frustration. Användaren kan inte förstå varför de ena gången måste göra på ett sätt och nästa gång på ett annat. Användaren kan ha ett behov av att använda flera tjänster på samma webbplats. Samma problem kan uppkomma när man har delegerat ansvaret för att producera innehåll eller utforma sidor. Det kan visa sig att man i olika delar av organisationen löser samma problem på olika sätt, vilket förvirrar användaren. Om de olika tjänsterna är producerade enligt en konsekvent och genomtänkt grundmodell hjälper det användaren. Genom att ha använt en tjänst kan man snabbt förstå hur en annan tjänst fungerar. Ni bör därför ha riktlinjer för hur tjänster ska utformas. Om sådana finns blir det dessutom enklare att specificera krav på tjänster som ska utvecklas internt eller upphandlas av externa leverantörer. Ett stort problem är om man köper in tjänster med färdiga, och kanske helt egenartade, gränssnitt från externa leverantörer. Har man många olika sådana tjänster på sin webbplats upplevs det som mycket svårt och rörigt av många användare. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 20 (79)

21 c) När användaren upplever sig göra samma sak blir resultatet också detsamma Det finns nästan inget som kan skapa sådan förvirring hos användaren som när de tycker sig göra samma sak och resultatet blir olika. Om exempelvis pdf-dokument öppnas i nytt fönster ska de alltid göra det. Annars kommer användarna ibland att stänga pdf-dokumentet och ibland sin egen webbläsare när de läst ett dokument och vill gå vidare. Om det går att klicka på något som är utformat på ett visst sätt ska det alltid gå att klicka på sådana objekt. Annars måste användaren provklicka för att förstå vad som är klickbart eller inte. Kommentar På startsidan finns en högermeny med fyra menyval: Student, Samhälle och näringsliv, Press och Alumn (se bilden nedan). Problemet är att de olika objekten i menyn fungerar på olika sätt, trots att de har samma formgivning. Student och Samhälle och näringsliv tar användaren till separata sektioner av webbplatsen med egna undermenyer, medan Press är en direktlänk till en undersektion till Om Lnu. Menyvalet Alumn avviker mest från de övriga, då det leder till en separat webbplats för Alumner ( Designen av Alumni-webbplatsen skiljer sig inte nämnvärt från grundwebbplatsen, vilket innebär att många användare helt kommer att missa att de befinner sig på en separat webbplats. Dessa användare kommer också förvänta sig att exempelvis kunna klicka på loggan högst komma tillbaka till startsidan för lnu.se. När detta inte fungerar kan det skapa förvirring och irritation hos användaren. Rekommendationer Objekt som ser likadana ut bör även fungera på samma sätt. Arbeta med designen av så att det framgår att den är skild från lnu.se. Låt inte menystrukturen innehålla länkar till separata webbplatser (se P5c). Förvarna alltid användaren om när en länkar leder bort från grundwebbplatsen (se P11c). Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 21 (79)

22 d) Länkar som leder till samma sida bör heta samma sak Ibland finns det flera länkar på en sida som leder till samma sida. Om dessa länkar är formulerade på olika sätt blir det svårt för användaren att: Förstå att länkarna leder till samma sida Komma ihåg om man redan varit på sidan som länkarna leder till Det kan finnas situationer som motiverar undantag från denna regel. Frågan får bedömas från fall till fall. e) Begripligheten av instruktioner och hänvisningar är inte beroende av användarens förmåga att se och höra För att alla besökare ska förstå instruktioner och hänvisningar är det viktigt att de inte enbart förlitar sig på besökarens förmåga att se eller höra. Att exempelvis hänvisa med färg kan vara ett bra sätt för att förtydliga för användaren men måste kompletteras med annan information. I stället för att skriva klicka på den gröna knappen kan instruktionen lyda klicka på den gröna knappen med texten Acceptera nedan, då finns det förutom färgen även en text och en position som hjälper användaren att identifiera knappen. Kommentar På ett flertal ställen på webbplatsen hänvisar ni till länkar och menyval som ligger till höger eller till vänster på sidan. Här följer ett par exempel: Forum för professionsforsknings sida Kalendarium 2011 ( innehåller flera referenser till högerkolumnen. Naturvetenskapliga institutionens sida Hitta till oss ( innehåller flera referenser till länkarna till höger. Sidan Ämnen under fliken Forskning ( innehåller flera referenser till listan till vänster. Den här typen av hänvisningar kan i vissa fall hjälpa användare att hitta rätt på webbplatsen, men de är inte anpassade för besökare som använder en så kallad skärmläsare för att komma åt webbplatsen. En skärmläsare är ett program som används av gravt synskadade användare, då de inte har möjlighet att se det visuella gränssnittet. Skärmläsaren tolkar webbplatsens kod och presenterar informationen uppifrån och ner i form av syntetiskt tal och/eller i punktskrift. Därmed blir referenser till olika objekts visuella placering på sidan meningslös för den här användargruppen. Hänvisningar som till höger och till vänster bör Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 22 (79)

23 (precis som hänvisningar till färger) därför kompletteras med någon typ av strukturell information, exempelvis under rubriken Aktuella bilagor till höger. Rekommendationer Hänvisningar till objekts visuella placering bör kompletteras med någon typ av strukturell information. Upprätta interna riktlinjer för hur man bör referera till olika objekt på webbplatsen. P4. Begriplighet a) Det går intuitivt att förstå hur man navigerar på webbplatsen Redan innan en användare kommer till din webbplats har den en viss uppfattning om hur det borde gå till att navigera. Denna bild baserar användaren på hur det brukar fungera på andra webbplatser. De flesta användarna förväntar sig att: Hitta navigation antingen till vänster eller högt upp på sidan Att navigationen är formgiven så att det framgår att den är klickbar Användare letar intuitivt efter något de kan klicka på om de stegvis vill ta sig fram till en viss information. Om navigationskonceptet är oklart finns en risk att vissa användare fastnar eller får ägna lång tid åt att lista ut hur de ska navigera på webbplatsen. Vanliga problemområden brukar vara: Övergångar mellan olika nivåer Att förstå var man är i en menystruktur Kommentar På stora delar av webbplatsen är navigationen placerad högst upp och till vänster på sidorna, vilket många användare vant sig vid från andra webbplatser. Många användare kommer också intuitivt förstå att toppmenyn är en fast struktur som ser likadan ut på hela webbplatsen, medan undermenyerna till vänster skiftar mellan olika avdelningar. På startsidan har ni dock, förutom toppmenyn, lagt till ett ytterligare menyobjekt till höger (se bilden nedan), vars funktion är svårare att förstå på ett intuitivt sätt. Det kan också uppstå en konflikt mellan dessa menyer eftersom de ser lika ut. Detta skulle kunna lösas med en tydligare formgivning. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 23 (79)

24 Utformning och placering av objektet till höger gör att vissa användare kommer att utgå från att den fungerar som en utfällbar meny, där fler menyalternativ dyker upp när man klickar på något av valen. En annan trolig tolkning är att de olika valen representerar målgruppsspecifika ingångar till webbplatsen. Man kan exempelvis tänka sig att man på startsidan väljer att man tillhör målgruppen Student, och därefter bara får information som särskilt riktad till studenter. Problemet är att den inte fungerar riktigt så, eftersom toppmenyn ligger kvar och fungerar likadant på hela webbplatsen. Om användaren exempelvis klickar på Student i högermenyn och sedan Utbildning toppmenyn så kommer informationen som kommer upp inte längre vara riktad till studenter, vilket man skulle kunna tro. Från sidan Utbildning finns det inte heller någon tydlig väg tillbaka till studentsidorna, eftersom den ingången bara finns på startsidan. Rekommendationer Utforma toppmenyn så att den skiljer sig mer från menyn till höger. Fundera på vad högermenyn på startsidan fyller för funktion, samt om den funktionaliteten kan lösas på ett sätt som blir tydligare för användaren (se även P5a). b) Uppdateringar och ändringar av innehåll sker så långt som möjligt efter den plats där användaren befinner sig när uppdateringen/ändringen initierats I nya webbgränssnitt är det vanligt att uppdateringar sker utan att sidan laddas om. Problemet är att göra alla användare uppmärksamma på vad som händer och var. För seende användare är det viktigt att det visuellt visas tydligt var något händer, men för användare som inte ser gränssnittet fungerar inte detta. Det finns olika försök till att åskådliggöra att förändringar sker på sidan för användare som inte ser, men det finns idag inte någon bra lösning på detta. För att minimera problematiken ska därför förändringar så långt som möjligt ske efter den plats där användaren befinner sig. Användare som inte ser märker visserligen inte att något skett men får rätt information när de kommer ner till området som uppdaterades. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 24 (79)

25 c) Användaren uppmärksammas när en förändring sker Om det inte är visuellt tydligt när en uppdatering sker måste detta framhävas. Det kan exempelvis göras genom att ytan där förändringen sker lyfts fram med ljusare/mörkare färger än omgivningen, förstoras upp eller blinkar till. För att hjälpa användare som inte ser gränssnittet kan exempelvis ett kort, klickande ljud användas som komplement. d) Användaren får relevant återkoppling När användaren klickar på en knapp som förändrar något på sidan, postar ett formulär eller på annat sätt interagerar med gränssnittet behöver denne få en återkoppling på vad som sker eller har skett. Några exempel: Gränssnittet ska bekräfta att ett formulär skickats när användaren klickar på "Skicka". När användaren klickar på en länk ska sidans rubrik ge en återkoppling på att användaren kommit rätt. Om systemet laddar information måste det framgå på något sätt, och, om möjligt, hur mycket som återstår innan sidan är helt uppdaterad. Menyer och navigation P5. Menystruktur a) Antalet val i toppmenyn är väl avvägt Den första nivån i en menystruktur har en mycket stor betydelse. Via den här nivån ska användaren fatta ett beslut om var det innehåll denne letar efter kan finnas. Användaren behöver därför kunna överblicka de olika alternativen och få stöd i den process som leder fram till att man väljer väg. Användaren kommer oftast till webbplatsen med ett bestämt syfte. Ofta handlar det om att ta reda på något (skaffa information) eller att göra något (använda en tjänst). Toppmenyerna ska hjälpa användaren att snabbt förstå var den önskade informationen/tjänsten kan finnas. Det går inte att exakt säga hur många toppmenyer som ska finnas. Det beror på den totala informationsmängden, antalet målgrupper och så vidare. Däremot kan sägas att desto fler toppmenyer, desto svårare blir det för användarna. Strävan bör alltså vara att hålla nere antalet toppmenyer. Upp mot toppmenyer kan hanteras men går det upp mot brukar det skapa problem. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 25 (79)

26 Kommentar På lnu.se finns bara tre val i toppmenyn ( Utbildning, Forskning, Om Lnu ), vilket gör att den blir lätt att överblicka. På startsidan finns dock även en högermeny med ingångarna Student, Samhälle och näringsliv, Press och Alumn. De två förstnämnda fungerar som precis som valen i toppmenyn som länkar till olika undersidor (se P3c och P5c). Skillnaden är dock att högermenyn bara finns på startsidan, medan toppmenyn går igen på hela webbplatsen. Menystrukturen skulle bli betydligt tydligare om högermenyn på startsidan istället inkorporerades i toppmenyn. Därmed skulle de olika valen även gå att komma åt från olika delar av webbplatsen, utan att användaren först måste ta sig tillbaka till startsidan. Rekommendationer Överväg att integrera högermenyn på startsidan i toppmenyn. b) Förhållandet mellan djup och bredd i strukturen är välbalanserat Om webbplatsen är strukturerad i många nivåer krävs ett stort antal steg för att komma fram till det önskade innehållet. Olika undersökningar visar att många användare då inte hittar till rätt innehåll. Å andra sidan uppstår stora problem med att överblicka de alternativ som finns med en grundstruktur där varje nivå innehåller ett stort antal valmöjligheter. En väl genomtänkt och balanserad lösning kan minska dessa problem. För omfattande informationsmängder kan det dessutom krävas att materialet delas upp i mindre strukturer, delas upp efter målgrupper eller struktureras så att det på ett annat sätt hjälper användarna att förstå strukturen. Kommentar I nuläget har ni i vissa fall ett stort djup i strukturen, vilket gör att webbplatsen blir svåröverskådlig (se bland annat punkt P2a). Ett sätt att förenkla strukturen skulle kunna vara att presentera en större bredd av menyval på förstasidan (se även föregående punkt). Rekommendationer Överväg att utöka antalet ingångar i startsidans toppmeny. c) Menystrukturen speglar enbart informationsstrukturen Anledningen till att man skapar en struktur på en webbplats är att det ska bli enklare för användaren att stegvis ta sig fram till en viss information eller tjänst. För att hjälpa användaren delas därför materialet upp och presenteras i en menystruktur. Då kan det bli mycket förvirrande för användaren om menystrukturen samtidigt innehåller: Direktlänkar till andra webbplatser Globala funktioner Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 26 (79)

27 Vad är skillnaden mellan information/tjänster och globala funktioner? Globala funktioner på en webbplats är funktioner som en användare kan vilja komma åt från vilken sida som helst. Det kan till exempel vara: Kontaktuppgifter Sökfunktionen Ordlistor och ordförklaringar Om det finns ett behov att länka till externa webbplatser bör det ske från en länk på en sida snarare än direkt från menyn. Kontaktuppgifter är av mycket stor betydelse för många besökare på webbplatser. Det är mycket vanligt att användaren går in på webbplatsen för att hitta kontaktuppgifter. Hur kontaktuppgifter ska exponeras kan lösas på flera olika sätt men det är inte en bra idé att göra kontakt till en del av menystrukturen. Kommentar Högermenyn på startsidan innehåller en direktlänk till den separata webbplatsen alumni.lnu.se (se P3c). En bättre lösning vore att lyfta ur länken från menyn. Inte heller Press hör hemma i menyn eftersom det är mer som en länk. I vanliga fall placeras den här typen av länkar i sidhuvudet. Exempelvis kan man tänka sig att Student och Samhälle och näringsliv flyttas upp till toppmenyn, medan Press och Alumn blir till länkar. Rekommendationer Skilj på menystruktur och länkar. d) Menystrukturen innehåller inte länkar till externa webbplatser e) Menystrukturen innehåller inte globala funktioner f) Menystrukturen innehåller inte kontaktuppgifter Kommentar Kontakuppgifter har genomgående placerats på olika ställen i webbplatsens menystruktur. Ett exempel syns i bilden nedan, som är hämtad från Universitetsbibliotekets sida Studieverkstaden ( Här finns två alternativ som heter Kontakta oss i samma meny, men på olika nivåer. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 27 (79)

28 Problemet med den här lösningen är att det blir svårt för användaren att lära sig var han eller hon bör leta för att hitta kontaktinformation. Kontaktuppgifter är en global funktion som användaren kan vilja komma åt oavsett var denne befinner sig på webbplatsen, därför bör uppgifterna också presenteras på samma sätt på hela webbplatsen. Vanliga lösningar är att antingen placera kontaktuppgifter i sidfoten, eller att skapa ett tydligt fast objekt någonstans i sidhuvudet. Notera att det givetvis inte finns någonting som hindrar att olika kontaktpersoner presenteras beroende på vilken del av webbplatsen som visas. Det viktiga är att placeringen är densamma, så att användaren lätt kan hitta den eftersökta informationen. Om det rör sig om skräddarsydda kontaktuppgifter är det bättre att presentera dem direkt på sidan. Kontaktuppgifterna till Studieverkstaden bör därför finnas direkt på sidan Studieverkstaden istället för en nivå ned i strukturen. Samma sak gäller öppettider och besöksadresser. Varje extra steg i strukturen medför att ni tappar användare på vägen. Ett annat problem med detta är att användare som söker på kontakt kommer att få träff på många olika sidor, vilket gör att det kan bli svårt att veta vilken man ska välja. Se bilden nedan. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 28 (79)

29 Funka Nu AB Döbelnsgatan 21, Stockholm (79)

30 Rekommendationer Presentera inte skräddarsydda kontaktuppgifter i menystrukturen utan direkt på sidan ovanför i strukturen istället. Se till att kontaktuppgifter har samma placering oavsett var på webbplatsen användaren befinner sig. g) Menystrukturen speglar användarnas förväntningar av hur innehållet borde vara strukturerat Strukturen bör vara uppställd ur användarens perspektiv. Desto bättre man kan förstå hur användaren tänker och vilka behov användarna har desto bättre kan man skapa en struktur som svarar mot dessa behov. Det finns en stor risk att menystrukturen speglar den interna organisationsstrukturen. Om användaren inte känner till hur ni är organiserade kan det då vara mycket svårt att förstå var en viss information kan hittas. Ett sätt att pröva om strukturen är för intern kan vara att tänka sig en större omorganisation. Om varje omorganisation kräver att webbplatsen struktureras om kan det vara ett tecken på att är strukturerad ur ett internt perspektiv. Ett annat sätt är att tänka utifrån typiska användarfrågor. Vad är det användarna vill veta? Om du vet det kan du ofta skapa en struktur som svarar mot användarnas behov. Kommentar Det är inte alltid uppenbart varför ett visst menyalternativ sorterats in på en viss plats i strukturen och inte någon annanstans. Ingången Ämnen ligger exempelvis under Om Lnu, men hade lika gärna kunnat placeras in under Utbildning eller Forskning. Rekommendationer Utför strukturtester för att undersöka om menystrukturen upplevs som logisk. Se till att menystrukturen är helt fri från internt perspektiv och riktar sig till besökaren. h) Menyer har ställts upp enligt en uttänkt sorteringsordning Det får inte vara en slump att ett visst menyalternativ hamnar över ett annat. Det får inte vara så att nya menyalternativ alltid läggs först eller sist. Många menyer blir med tiden svåra att förstå på grund av att det inte finns någon tydlig bild över hur menyalternativen ska sorteras. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 30 (79)

31 Det finns flera tänkbara sätt att ställa upp ordningen bland olika menyalternativ. Det går inte att säga att det finns ett sätt som är bäst. Istället måste man för varje webbplats ha tänkt igenom hur detta ska gå till. Följande huvudprinciper kan vara användbara: Sortering i bokstavsordning Sortering med det viktigaste först Sortering i ämnesordning Sortering i tidsordning P6. Övrig navigation a) Aktiv sida har aldrig aktiv länk till samma sida Det kan skapa en stor förvirring hos användare om de är på en sida och klickar på en länk där det enda som händer är att den sida man redan är på laddas om. Det kan finnas skäl att göra undantag från denna regel. Grundtanken är dock att en aktiv länk alltid ska leda till en annan sida än den man just befinner sig på. Kommentar De olika menyalternativen är kontant klickbara fast användaren redan befinner sig på den sidan. Detta gäller genomgående i hela menyn. Rekommendationer Ta bort länkningen från menyalternativet som leder till den sidan användaren befinner sig på. Formulär och e-tjänster P7. Utformning av formulär a) Formulär har en visuell utformning som underlättar ifyllning av uppgifter Desto fler delmoment användaren ska hantera i ett och samma formulär desto viktigare är det att formuläret har en genomtänkt utformning. Det finns många olika sätt att underlätta för användaren. Det är viktigt att det finns en genomtänkt idé bakom hur webbplatsens formulär ska utformas. Några exempel på hur man kan utforma formulär så att det underlättar för användaren: Konsekvent placering av ledtexter i förhållande till kontroller och textfält Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 31 (79)

32 Indelning av stora formulär i tydliga avdelningar Tydlig signal för vad som är obligatoriskt Användning av ikoner för att tydliggöra funktioner Kommentar Utformningen av formulär på lnu.se brister på flera punkter. Ett problem är att det saknas tydlig information om vilka fält som är obligatoriska. Faktum är att det i de allra flesta formulären på webbplatsen helt saknas information om vilka uppgifter som är obligatoriska. Här följer några exempel: 1. Lånekortsansökan distansstuderande ( 2. Beställ katalog ( 3. Skog och trä - beställ utbildningsinfo ( 4. Beställ temafolder ( Det enda undantaget vi har hittat är Formulär för valbar kurs ( som visas i bilden nedan. I det fallet har ni angett högst upp att alla fält är obligatoriska, men det saknas fortfarande en tydlig indikation i anslutning till varje formulärsfält. Ledtexterna i ett formulär (exempelvis Namn och Personnummer ) fungerar som instruktioner till användaren. Därför är det viktigt att de framträder på ett tydligt sätt. I bilden ovan är ledtexterna onödigt svårlästa, vilket beror på flera faktorer. För det första har ni valt en grå färg på ledtexterna, vilket gör att de inte Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 32 (79)

33 framträder särskilt väl mot den vita bakgrunden. För det andra är texten skriven i kursiv stil, vilket många användare upplever som mer svårläst än normal text. Sist men inte minst är texten relativt liten. Sammantaget blir det svårt, framförallt för användare med synnedsättningar, att ta till sig informationen. Ett annat problem är att formulären genomgående saknar information om på vilken form olika uppgifter ska fyllas i. Det blir särskilt viktigt när man exempelvis ber om användarens personnummer, som ju kan skrivas på många olika sätt (exempelvis med eller utan århundrande och med eller utan av streck och mellanslag). Även om ni har ett flexibelt system på baksidan, som kan hantera flera olika format, så kan det skapa en osäkerhet hos användaren om det inte tydligt framgår hur informationen bör fyllas i. Ett snabbt test av formulären ovan visar dessutom att det verkar ta emot vilken information som helst; felmeddelanden dyker enbart upp om användaren helt missar att fylla i ett fält (och inte ens då visas de alltid). Därmed ökar också risken för att användaren skickar in felaktig information. Se mer om detta under P9a. Rekommendationer Lägg till en tydlig markering (exempelvis en asterisk) i anslutning till de formulärsfält som är obligatoriska. Förklara överst i formuläret hur obligatoriska fält markeras eller om alla/inga fält är obligatoriska. Se till att ledtexter blir mer framträdande genom att förbättra exempelvis typsnitt, textfärg och storlek. Informera användaren om hur uppgifter ska fyllas i på de ställen där det kan uppstå en osäkerhet. b) Formulär är konsekvent utformade genom hela webbplatsen En och samma användare kan (samtidigt eller vid olika tillfällen) behöva använda flera av webbplatsens olika tjänster. Interaktion med en tjänst sker i huvudsak via olika typer av formulär. För användaren är det viktigt att dessa formulär ser ut och fungerar på samma sätt, oavsett vilken del av verksamheten som ansvarar för tjänsten. Det är vanligt att man inom samma verksamhet kan hitta formulär som skiljer sig åt. För varje gång det sker tvingas användaren att tänka om eller stanna upp för att tolka hur formuläret ska fungera. Om formulären däremot är konsekvent utformade kommer det istället att fungera tvärtom: För varje gång man använder en tjänst lär man sig hur alla tjänster på webbplatsen fungerar. Då blir det lättare och lättare ju fler tjänster man använder. c) Viktiga formulär ger användaren möjlighet att läsa en sammanställning av informationen som ska skickas innan denne bekräftar och skickar När en webbaserad funktion används för juridiskt bindande åtaganden eller för att betala/föra över pengar är det extra viktigt att användaren faktiskt förstår vad Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 33 (79)

34 som kommer att hända. Det är också lätt hänt att råka trycka på OK i en webbtjänst utan att vara medveten om det eller vara säker på följderna. För att undvika onödiga problem hos användaren ska därför tjänster som innebär juridiskt bindande åtaganden, ekonomiska transaktioner eller att lagrad information som rör användaren ändras/tas bort ge användaren möjlighet att i ett sista steg läsa igenom en sammanställning och bekräfta händelsen. Kommentar Formulär för valbar kurs ( är sannolikt ett viktigt formulär för många studenter, eftersom det påverkar utformningen av deras utbildning. När användaren klickar på knappen Skicka visas visserligen en sammanställning av de inmatade uppgifterna (se P9a), men då har uppgifterna redan skickats in. Rekommendationer I Formulär för valbar kurs bör ni ge användaren en möjlighet att läsa en sammanställning av inmatade uppgifter innan de skickas in för handläggning. P8. Utformning av knappar a) Knappar presenteras som de olika webbläsarna presenterar knappar För användaren är det viktigt att kunna identifiera knappar. Knappar representerar avgörande moment och om man inte förstår vad som är en knapp kan man inte heller avsluta eller bekräfta något man gjort på sidan. Webbläsare presenterar knappar på ett visst sätt. Exakt hur en knapp ser ut beror på vilken webbläsare användaren har valt att använda. Det finns en stark pedagogisk poäng i att låta knappar presenteras som de visas default för respektive webbläsare. En användare kan då lära sig att i min webbläsare ser knappar alltid ut på det här sättet. När man börjar formge knappar finns risken att formen avviker så mycket från vad användaren är van vid att innebörden går förlorad. Om en användare inte förstår/hittar knappen OK eller Köp kan allt det man tidigare fyllt i vara förgäves. Vad som är en knapp måste därför vara mycket tydligt. För användaren är det oftast mest effektivt om knappar alltid ser likadana ut oavsett vilken webbplats eller tjänst som används för tillfället. Kommentar Formulären på webbplatsen har en gul Skicka -knapp. Den här knappen ser inte ut som användarna är vana att knappar ser ut, vilket kan ställa till problem för ovana och osäkra användare. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 34 (79)

35 Rekommendationer Utforma helst knappar så att de ser ut som de olika webbläsarna presenterar knappar. Om ni väljer att formge knapparna själva är det viktigt att de liknar webbläsarnas knappar och att de ser klickbara ut. b) Knappar är konsekvent placerade på hela webbplatsen Om en sida eller webbplats innehåller flera knappar eller grupper med knappar är det viktigt att ha en genomtänkt strategi för hur de ska placeras. Dels rör det sig om i vilken ordning knappar ska placeras i de fall där det finns flera knappar efter varandra. Dels måste det finnas en logik i var knapparna placeras. Det finns flera tänkbara principer som kan tillämpas. Om det finns både knappar som bekräftar gjorda val/inmatningar och knappar för att ångra eller avbryta gäller det att vara konsekvent i vilken ordning de presenteras. Det får inte vara så att den sista knappen ibland bekräftar inmatningar och ibland avbryter/rensar gjorda inmatningar. Knappars placering kan till exempel vara att de alltid är vänsterställda eller alltid högerställda. Om det finns en konsekvens i var knappar är placerade kan användaren intuitivt leta efter knapparna på rätt ställe. P9. Felhantering a) När fel uppstår ska det tydligt meddelas användaren För användaren är det mycket viktigt att få veta om något blivit fel. Det finns flera sätt att göra det. Ett tydligt sätt är att visa en dialogruta som berättar: Att det blivit fel Vad användaren bör göra För användaren är det alltså först viktigt att bli uppmärksammad på att det blivit fel. Sedan är det lika viktigt att få information om vad man ska göra för att rätta till felet. Beror det på något som användaren kan påverka eller inte? Om det är ett fel användaren inte kan påverka (till exempel om er tjänst är tillfälligt ur funktion) behöver användare få veta det och kanske uppmanas att försöka igen senare eller så presenterar ni ett telefonnummer eller en e-postadress för att erbjuda användaren ett alternativ till det som inte fungerar. Beror felet på att användaren gjort något fel är det viktigt att beskriva vad som hänt och sedan hjälpa användaren att enkelt korrigera felen. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 35 (79)

36 Felmeddelanden ska inte heller enbart relatera till visuella aspekter för att beskriva var felet uppstått eller vad som är fel. Det måste även finnas någon strukturell information som hjälper användare som inte kan se gränssnittet att hitta och åtgärda felet. Kommentar Bilden nedan visar vad som händer när användaren postar Formulär för valbar kurs ( med uppgifter som är uppenbart felaktiga. Här får användaren (Stina) information om att formuläret har skickats, trots att det både finns uppenbart felaktig information och obligatoriska fält som inte har fyllts i (Förstahandsval, Andrahandsval och Tredjehandsval). Följden blir förstås mer jobb för den som ska försöka tolka den felaktiga ansökan. I det här fallet är risken dessutom stor att Stinas ansökan inte kommer gå att bearbeta alls, vilket innebär att hon kanske missar chansen att söka till en valbar kurs. I de flesta fall visas trots allt ett felmeddelande om användaren missar att fylla ett obligatoriskt fält. Bilden nedan visar vad som händer om man försöker skicka Lånekortsansökan distansstuderande ( utan att ha fyllt i vissa uppgifter. Här visas felmeddelanden i anslutning till de fält som inte fyllt i, men informationen ges på engelska. Även om många användare kan engelska tillräckligt bra för att förstå meddelandet kan man inte utgå ifrån att det gäller alla. Dessutom finns ingen anledning att använda sig av engelska felmeddelanden på en svenskspråkig webbplats. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 36 (79)

37 Det är också viktigt att presentera felmeddelandena innan inmatningsfältet. Annars kommer användaren att få dem i fel ordning, något som blir extra problematiskt för användare som inte ser gränssnittet. Rekommendationer Eliminera uppenbara fel genom att införa kontroller av de formulärdata som användaren fyller i (ett personnummer ska exempelvis aldrig kunna innehålla bokstäver). Visa alltid felmeddelanden när användaren postar ett formulär där obligatoriska uppgifter saknas. Skriv felmeddelanden på svenska. Presentera felmeddelandena ovanför inmatningsfältet. b) Fel ska beskrivas både överst i formuläret och där felet återfinns För användaren är det viktigt: Att få veta hur många fel det finns Att få hjälp att hitta var felet finns Enklast gör man detta genom att överst på sidan/formuläret uppmärksamma användaren på att det blivit fel. Detta kan göras genom att man skapar en tydlig rubrik som berättar att det har blivit fel. Direkt därefter bör man sammanställa samtliga fel, gärna i en punktlista. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 37 (79)

38 Till sist markerar man på ett tydligt sätt var i formuläret de olika felen finns. Observera att det inte räcker med att bara markera fel genom att till exempel ändra färgen på texten från svart till röd. Det går inte att vara säker på att alla uppfattar skillnaden mellan svart och röd. Färgförändring ska därför kombineras med ytterligare något sätt. Det kan till exempel vara en fel-ikon eller tecknet *. Kommentar I den mån felmeddelanden används visas de i anslutning till de formulärsfält där felet uppkommit (se P9a). Därmed blir det lättare för användaren att förstå vad som behöver göras för att formuläret ska kunna skickas. Problemet är att användaren kan behöva scrolla för att se felmeddelanden långt ner i ett formulär, i synnerhet om han eller hon besöker webbplatsen från en mobil enhet med liten skärm. Genom att lägga till en sammanställning av samtliga fel högst upp på sidan minimerar ni risken för att användaren ska missa att det blivit fel. Rekommendationer Visa en sammanställning av samtliga fel högst upp på sidan när användaren postar ett felaktigt ifyllt formulär. c) Om fel uppstår ska korrekt ifyllda uppgifter finnas kvar Om användaren gör fel ska det inte resultera i att ifyllda uppgifter raderas. Användaren kan ha stora problem med att fylla i uppgifter, särskilt om det är en blandning av text- och sifferuppgifter. Det är därför viktigt att användaren inte tvingas börja om och fylla i alla uppgifter igen bara för att något blivit fel. Ett sätt att hjälpa användaren är att de inte ska behöva fylla i sådana uppgifter som ni redan känner till. Om användaren till exempel loggat in i en tjänst är det bättre att användaren får bekräfta att till exempel adressuppgifterna stämmer istället för att ni varje gång ber användaren fylla i sådana uppgifter. Tabeller P10. Utformning av tabeller a) Tabeller har en visuell utformning som underlättar förståelsen av det data som presenteras Många upplever det svårt att hantera information som presenteras i rader och kolumner. Samtidigt är det ett mycket effektivt sätt att presentera stora datamängder. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 38 (79)

39 För att en tabell ska uppfattas som överskådlig behöver den utformas med en tydlig typografi. Rad- och kolumnrubriker bör gå att skilja från tabelldata. Rader och kolumner kan behöva skiljas åt med exempelvis: Linjer Tonade fält på varannan rad (eller kolumn) Komplexa tabeller kan behöva delas upp i delstrukturer eller grupperas. Kommentar Vi har bara lyckats hitta en tabell på webbplatsen, på Polisutbildningens sida Förutsättningar för det goda polisarbetet ( Delar av tabellen visas i bilden nedan. I det här fallet har ni inte tänkt så mycket på tabellens visuella utformning och typografi. Bland annat saknas både titel och en övergripande introduktion till tabellen, vilket innebär att det blir onödigt svårt att förstå vad den har för syfte. Det är också svår att förstå vad som är rubriker i tabellen, eftersom kolumnrubrikerna Tid och Aktivitet är markerade på samma sätt som delar av innehållet, det vill säga med fet stil, medan rubriken Lokal inte är markerad alls. Dessutom finns insprängda underrubriker (exempelvis Utbildningens betydelse för öppenhet, reflektion och verksamhetsutveckling ), vilket ökar komplexiteten ytterligare. En lösning på det problemet skulle kunna vara att dela upp tabellen i flera mindre tabeller (en för varje konferensdag). Förutom de pedagogiska problem som diskuteras ovan finns stora tekniska brister i tabellen, vilket bland annat drabbar användare med skärmläsare. Det går vi dock inte närmare in på i den här revisionen, eftersom fokus ligger på pedagogiska aspekter av tillgänglighet. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 39 (79)

40 . Rekommendationer Länkar Se till att det tydligt framgår vad som är rad- och kolumnrubriker i en tabell. Utarbeta interna riktlinjer för hur tabeller bör utformas på webbplatsen. P11. Utformning och beskrivning av länkar Hos användaren pågår ofta en process som kan beskrivas som: Ska jag fortsätta läsa den här sidan eller klicka för att få fram en ny. För att göra den processen lättare är det mycket viktigt att användaren utan problem kan uppfatta vad som är en länk och vad som inte är det. Dessutom är det viktigt att användaren kan förstå skillnaden mellan olika typer av länkar. En länk som leder till att en film börjar spelas upp kan vara bra för vissa medan andra inte vill eller kan se filmen. En länk som leder till att ett nytt fönster öppnas innebär att användaren måste lära sig att stänga fönstret istället för att trycka på tillbaka -knappen i webbläsaren. Att hitta och förstå vad som är länkar är därför av mycket central betydelse för alla användare. Vissa användare kan ha extra svårt att identifiera länkar. Därför är det bra att vara tydlig och konsekvent i utformningen av olika typer av länkar. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 40 (79)

41 Det finns flera principer för att utforma länkar. Nedan följer några exempel: Länkar får inte enbart markeras med en avvikande färg Ikoner kan användas för att tydliggöra länkar som leder till dokument av olika format Ikoner eller text kan användas för att förtydliga vad som kommer att hända (länken öppnas i ett nytt fönster, länken leder till en extern webbplats etc.) En text i slutet av länken kan förtydliga dokumentets format (och storlek) a) Vanlig länk är tydligt urskiljbar Kommentar Länkar är konsekvent markerade med en gul överstrykning, vilket gör de är svåra att missa. Även användare med nedsatt färgseende kommer att uppfatta markeringarna, även om de inte framstår riktigt lika tydligt i gråskala. Däremot kommer få användare genast förstå att det är just länkar som är markerade på det sättet, eftersom utformningen avviker från vad de har vant sig vid från andra webbplatser. Med andra ord kan det krävas en viss inlärning innan användaren förstår vad som är länkar och inte på webbplatsen. Se punkterna P1a och P3c för ytterligare kommentarer om andra potentiella problem med ert sätt att markera länkar. Rekommendationer Använd en mer konventionell utformning av länkar som användarna känner igen. b) Länk som öppnar nytt fönster är tydligt urskiljbar c) Länk som leder till extern webbplats är tydligt urskiljbar Kommentar Webbplatsen innehåller ett stort antal länkar till externa webbplatser, som i de allra flesta fall inte är markerade alls. Ett exempel visas i bilden nedan, som är hämtad från sidan Student ( Under rubriken Bra att ha länkar i bilden leder alla utom en länk ( Hitta på Lnu ) till externa webbplatser eller system, vilket inte framgår alls av länkarnas utformning. Även under rubriken Gå direkt till" finns en länk som leder bort från grundwebbplatsen ( Mitt Lnu ), men inte heller den går att skilja från övriga länkar. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 41 (79)

42 Det finns flera sätt att markera länkar som leder till externa webbplatser, exempelvis: 1. Länktexten anger exempelvis Extern webbplats inom parentes. 2. Adressen (eller en förkortad version av adressen) till den externa webbplatsen anges inom parentes. 3. En ikon visas i anslutning till länken. Ikonen bör i så fall ha en alternativtext som anger Extern webbplats eller liknande. 4. En title-text anger att länken öppnas i nytt fönster. 5. Rubriken till en lista med länkar anger att de leder till externa mål. Observera att en kombination av flera markeringar kan behövas för att alla användare ska kunna ta till sig informationen. Title-texter visas enbart när användaren håller musen över en länk, vilket innebär att besökare som använder pekskärm eller tangentbord för att navigera på webbplatsen aldrig kommer att ta del av informationen. Tänk också på att många uppläsande hjälpmedel hoppar över att läsa den vanliga länktexten när det finns en title-text. Title-texten ska därför alltid ange hela länktexten, och inte enbart exempelvis Extern webbplats. I första hand bör ni ange i länktexten när en länk leder till en extern webbplats (alternativ 1 eller 2 ovan), men i vissa fall kan det leda till överdrivet långa länktexter. Då kan en kombination av ikon och title-text vara ett alternativ. Det viktigaste är dock att ni bestämmer er för en strategi och sedan använder den konsekvent på hela webbplatsen. Rekommendationer Ange i länktexten när en länk leder till en extern webbplats eller använd en kombination av ikon och title-text för att förmedla informationen. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 42 (79)

43 d) Länk för pdf är tydligt urskiljbar Kommentar Länkar till pdf-dokument är överlag markerade på ett godtagbart sätt, med texten PDF samt filens storlek inom parentes. På ett par ställen saknas dock uppmärkning helt och hållet. Bilden nedan är hämtad från sidan Exjobb ( som innehåller en lång lista med ouppmärkta pdf-länkar. Vi har även sett följande exempel på ouppmärkta pdf-länkar: Länken checklista i innehållet på sidan Instruktioner för studenter ( Länkarna E-katalog program 2013/2014 och E-katalog kurser vår 2013 på sidan Utbildning ( Länkarna Upphovsrätt och Upphovsrätt- information om rättsreglerna på sidan Upphovsrätt ( Länken Mediepolicy på sidan Beställ ( Rekommendationer Märk upp länkar som inte anger att de öppnar ett pdf-dokument. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 43 (79)

44 e) Länk för Word är tydligt urskiljbar Kommentar På lnu.se är Word-dokument är uppmärkta enligt samma princip som pdf:er, vilket är bra. På sidan Instruktioner för studenter ( finns dock ett avsteg. Här länkar ni till en mall för examensarbeten, som finns i två format, beroende på om besökaren använder en äldre eller nyare version av Word (se bilden nedan). Här bör ni följa samma princip som för övriga Word-länkar. Den första länken skulle därmed kunna ange exempelvis Mall för examensarbete (Word 2007, 25kB). Rekommendationer Ändra formuleringen av Word-länkarna på sidan Instruktioner för studenter ( f) Länk för Excel är tydligt urskiljbar g) Länk för teckenspråk är tydligt urskiljbar h) Länk för film är tydligt urskiljbar i) Länk för ljud är tydligt urskiljbar j) Länk för lättläst svenska är tydligt urskiljbar Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 44 (79)

45 k) Länkstigen är tydligt urskiljbar Kommentar Vår erfarenhet säger att ganska få användare tar hjälp av länkstigen när de navigerar på en webbplats. På lnu.se verkar det dock finns ett större behov av en tydlig länkstig, eftersom det i vissa fall är svårt att se på annat sätt vart man befinner i strukturen. I sin nuvarande form är länkstigen ganska svår att upptäcka, då den ligger högt upp i hörnet och är skriven med ganska liten kursiv text. Tänk dock på att ni i första hand bör arbeta med webbplatsens grundstruktur, eftersom betydligt fler användare blir hjälpta av en tydlig menystruktur som visar vart man befinner sig på webbplatsen. Rekommendationer Överväg att göra länkstigen tydligare med hjälp av exempelvis större text, avvikande färgsättning och/eller en mer framträdande placering. l) Nya fönster används enbart om det ökar användarnyttan Nya fönster skapar problem för olika grupper med användare. Därför bör de undvikas om det inte finns starka skäl för det, och när de används måste användaren förvarnas. Ett fall där nya fönster kan användas är när länkar leder till dokument i andra format än html. Enligt riktlinjerna i vägledningen 24-timmarswebben (som gavs ut av Verket för förvaltningsutveckling, Verva) bör nya fönster bara användas för dokument i andra format än html. Vi ser dock en nytta med att använda nya fönster för avvikande gränssnitt även om dessa är i html. Vad er organisation väljer att göra är dock upp till er. Huvudsaken är att det sker konsekvent. m) Länkars mål framgår tydligt Länkar ska ge tydlig information om vad de leder till för sidor/dokument. Tydligt formulerade länktexter hjälper alla användare att hitta rätt länk. En tydlig länk är också ofta en förutsättning för att gravt synskadade användare och en del personer med grava kognitiva funktionshinder ska hitta den information de söker. När en gravt synskadad användare navigerar på en sida kan en del problem uppstå. Det är exempelvis omöjligt att få en visuell överblick av sidan. Det innebär att det inte heller med ett snabbt ögonkast går att identifiera de länkar som finns på sidan och till vilka textstycken de är kopplade. Gravt synskadade användare får i stället ta sig runt sidan och se vad som finns med stöd av sitt hjälpmedel. Hjälpmedlen presenterar då bara den information som hjälpmedlet just då har fokus på. Är fokus på en länk läses bara länken, inte texten runt om. Användaren har inte heller det visuella stödet som gör att de kan koppla länken till någon text i närheten. Det gör att länken i sig måste ge all relevant information om vart den leder. Det räcker inte att skiva detta bredvid länken. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 45 (79)

46 En länk ska innehålla information om: Vart länken leder Vilken information man kommer till när man följer länken Om länken leder till ett dokument och i så fall vilket format och hur stort dokumentet är Om sidan öppnas i nytt fönster Om det är en e-postlänk ska själva e-postadressen framgå liksom information om mottagaren, exempelvis funktion och/eller namn Om länken leder till en annan webbplats Om det inte går att skriva all information direkt i länktexten kan länkens titleattribut, title-text, användas. Title-texten är dock ingen ersättning för dåliga länktexter, exempelvis Läs mer. En sådan länk är inte tillgänglig även om den har en bra title-text (även om en title-text är bättre än ingenting). Title-text kallas ibland för Beskrivning eller Tooltip i olika publiceringsverktyg. Title-texten visas i många webbläsare när man håller muspekaren över länken, precis som alttexter visas för bilder. Om ni skriver en title-text ska den vara möjlig att läsas för sig själv, utan koppling till länken. Ett exempel: Om länken lyder Information om upphovsrätten, leder till Regeringens webbplats och öppnas i nytt fönster bör title-texten inte enbart säga öppnas i nytt fönster, utan snarare Information om upphovsrätten, regeringens webbplats (öppnas i nytt fönster). Detta eftersom hjälpmedlen för gravt synskadade i dagsläget inte klarar av att ge användaren både länktext och title-text utan enbart ett av dessa. I riktlinjerna från WAI och i html-standarden är title-attributet tänkt att användas som komplement till länktexten. Då skulle titletexten i ovanstående exempel bara inkludera just öppnas i nytt fönster. Men eftersom hjälpmedlen i dagsläget inte hanterar detta bra är vår rekommendation att title-texten ska vara fullt begriplig i sig själv, om den måste användas. Finns inte behov av att förtydliga länktexten ska ni inte använda title-attributet. Om länktexten i sig är fullt begriplig och informativ kan title-texten användas för att ge en fördjupad information om länken, men det är då i första hand information till seende användare. Tänk på att många användare aldrig kommer att ta del av title-texten och att den givetvis inte ersätter informationsbehovet i själva länken. Länkade bilder måste ge all relevant information om själva länken direkt i bildens alt-text (kallas även det ibland för Beskrivning eller Tooltip i olika publiceringsmiljöer). Denna information kan även skrivas i länkens title-text. Många hjälpmedel har även ett verktyg som lyfter ut länkarna ur sitt sammanhang och presenterar dem i en lång lista för användaren. Detta snabbar upp navigationen och gör det möjligt att snabbt hitta specifika länkar som Till kassan eller Logga in. När en länk tas ur sitt sammanhang hjälper det inte användaren om det bredvid länken står vart den leder till, utan det måste stå i själva länken. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 46 (79)

47 En situation som kan vara svårhanterlig och som många webbplatser stöter på är hur puffar(1) ska länkas vidare. En puff består oftast av en rubrik och en kort text. Ofta följs puffarna av en länk som bara lyder Läs mer vilket inte säger något om länkens mål och funktion. I andra sammanhang länkas hela puffen, vilket skapar en onödigt lång länktext. Varje puff bör ha en länk vidare. Det bör inte vara rubriken som är länkad utan en separat länk som ligger efter pufftexten. Dels lämpar sig sällan rubriktexter som länkar eftersom rubrikens syfte är att fånga läsarens intresse medan länkens syfte är att tydligt ange vilken information man kommer till när man följer den. Rubriken kan exempelvis lyda Svaga isar medan själva länken anger Checklista för dig som ska bege dig ut på isarna. Dels måste användare med hjälpmedel backa om inte länken ligger efter själva pufftexten. Användaren läser rubriken och texten och bestämmer sig sedan om det är tillräckligt intressant för att läsa vidare. Då ska användaren inte behöva backa tillbaka upp för att hitta en länk. Om ni vill att en hel puff ska vara klickbar kan detta åstadkommas utan att inkludera hela puffen i länktexten. Den klickbara ytan kan göras större än själva länktexten. När det finns ikoner kopplade till länkar ska ikonen vara en del av den klickbara länken. Ikonens visuella information måste också skrivas ut. Om länken saknar title-text ska ikonens alt-text användas. Om det finns en title-text bör ikonens information i stället inkluderas i denna. Kommentar På sidan Disputationer 2012 ( listar ni årets avhandlingar med länkar till bland annat ett Pressmeddelande om avdelningen. Ett utdrag ur listan visas i bilden nedan. 1 En puff puffar för information. Det kan exempelvis vara en nyhetspuff på startsidan som kort, ofta bara med en rubrik och ett par rader text, meddelar att nyheten finns och länkar vidare till själva artikeln. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 47 (79)

48 Länktexter som Pressmeddelande och Abstract fungerar dåligt när de lyfts ur sitt sammanhang, eftersom de egentligen säger mycket lite om vilken information man kommer till om man följer länken. Det är enbart i kombination med den omgivande texten som användaren har en chans att förstå vad pressmeddelandet i fråga handlar om. Ytterliggare ett problem är att samma länktexter återkommer under varje avhandling i listan. Därmed blir det ännu svårare att hitta fram till rätt länk när länktexterna tas ur sitt sammanhang. För varje avhandling finns även en e-postlänk med texten Kontakta avhandlingsförfattaren. Även den här länktexten blir svår att förstå när den tas ur sitt sammanhang, eftersom det inte framgår det vilken avhandlingsförfattare som avses. Ett annat problem är att länken inte uppger vad som händer när man klickar på den. I det här fallet kommer att e-postprogram att öppnas (om användaren har ett sådant installerat), men länken hade lika gärna kunnat leda till en sida med kontaktinformation. Eftersom e-postadressen inte är utskriven i länktexten går det inte heller att exempelvis kopiera adressen till sin webbmail. Här vore det alltså bättre om länktexten angav e-postadressen till respektive författare. Det förekommer också länkar som heter här. Exemplet nedan är från sidan Öppna föreläsningar hösten 2012 ( Rekommendationer Använd aldrig samma länktext flera gånger på samma sida (om det inte finns flera länkar med samma mål). Länktexter ska gå att förstå även när de tas ur sitt sammanhang. Ljud, bild och komplexa medieformat P12. Använd komplexa format när det är lämpligt a) Komplexa format (exempelvis pdf och flash) ska bara användas när det är lämpligt och ökar användarnyttan Att gå ifrån html-sidor och istället använda mer komplexa format ska vara ett genomtänkt beslut. Det måste gå att försvara användningen av dessa format med att de till exempel: Ökar användarnyttan Ökar systemets effektivitet Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 48 (79)

49 Ger ökade pedagogiska möjligheter Ger ett resultat som inte kan uppnås annars P13. Tydliga kopplingar till alternativt innehåll a) Det är tydligt för användaren var denne kan hitta en alternativ textversion till material som presenteras i form av bilder och ljud En film, ljudfil eller komplex bild kan ofta återge komplex information på ett mycket enklare sätt än vad en text kan. Ni bör därför sträva efter att använda grafik och ljud för att ge information. Komplexa bilder, filmer, ljud och annan information som är beroende av användarens förmåga att se eller höra behöver dock beskrivas med text för att bli tillgänglig för alla. Ett enkelt exempel är om användaren kan lyssna på en person som berättar något behöver personer med hörselnedsättning få möjlighet att istället läsa en text. Annars går de miste om informationen. En användare som ser dåligt måste kunna läsa sig till informationen som visas visuellt i ett diagram. För vanliga bildobjekt räcker det oftast med att bilderna beskrivs med hjälp av så kallade alt-texter. Komplexa bilder, exempelvis diagram, samt ljudfiler och filmer kräver ofta en referens som visar var användaren kan få tag på en text. Ett pedagogiskt problem är att hjälpa användaren förstå att det finns en alternativ textbeskrivning. På något sätt måste det framgå att ljudfilen/filmen också har en beskrivning i form av text. Kommentar Filmer används lite här och var på webbplatsen som ett komplement till den skrivna informationen, vilket är bra. Ofta saknas dock en tydlig koppling till en text som behandlar samma ämne. På sidan Vad är freds- och utvecklingsstudier? ( finns exempelvis en film som beskriver vad ämnet freds- och utvecklingsstudier handlar om. På sidan finns en kort introduktion till filmen, men ingen beskrivning av filmens innehåll för den som inte kan eller vill ta till sig ljud eller rörliga bilder. Däremot finns en sida med rubriken Om Freds- och utvecklingsstudier ( där ungefär samma information presenteras i textform. I det här fallet skulle det behövas en tydligare koppling mellan text och film, exempelvis i form av tydliga länkar och/eller hänvisningar från den ena sidan till den andra. På sidorna om konst- och bildvetenskap finns ett menyval som bara heter Film, och som leder till en sida som också har rubriken Film (se bilden nedan). Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 49 (79)

50 I det här fallet finns inte ens en kort textintroduktion på sidan, vilket innebär att användare som inte kan ta del av filmen inte heller får i veta om de går miste om viktig information. Rekommendationer Sidor som innehåller film ska alltid åtminstone ha en kort textbeskrivning i anslutning till filmen. När motsvarande information finns i text någon annanstans på webbplatsen ska det finnas en tydlig koppling mellan film och text. Upprätta interna riktlinjer för hur film används och presenteras på webbplatsen. Visuell presentation P14. Typografi Det finns inga undersökningar som tydligt pekar ut ett visst teckensnitt som har högst läsbarhet. Bildskärmar med låg kvalitet har problem med teckensnitt som har så kallade seriffer. De flesta moderna bildskärmarna har dock sådan kvalitet att det går att använda serif-teckensnitt. För personer med lässvårigheter har det visat sig vara viktigt att man använder teckensnitt som är vanligt förekommande. De grundläggande principerna för god typografi bör tillämpas. Personer som har lässvårigheter har stor nytta av ett en webbsida är välutformad enligt grundläggande typografiska principer. Formen ska användas för att underlätta läsning. a) Rubriker är tydligt urskiljbara och läsbara Tydliga och bra formulerade rubriker gör dina sidor lättare att läsa. Det är särskilt viktigt för personer med lässvårigheter. Det blir lättare för alla läsare att snabbt bilda sig en uppfattning om texten. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 50 (79)

51 Personer som använder olika hjälpmedel för att läsa upp en text kan skumläsa längre texter genom att hoppa från rubrik till rubrik. Dessutom har sökmotorer lättare att indexera sidor på ett bra sätt om det finns relevanta rubriker. Använd rubriker för att strukturera sidorna på ett tydligt sätt. För kortare texter kan det räcka med att texten har en huvudrubrik. Mer omfattande texter kan behöva både huvudrubriker och underrubriker. Tänk på att rubriker och underrubriker skapar en hierarki i texten. För att tillåtas använda en underrubrik måste det finnas en huvudrubrik. För att det ska bli snyggt kan du ibland behöva olika typer av huvudrubriker, till exempel huvudrubriker med olika storlek. Om du arbetar med ett publiceringsverktyg är det viktigt att använda de färdiga rubrikformaten som finns. Skapa inte rubriker enbart genom att göra brödtexten fet och större. b) Ingresser är tydligt urskiljbara och läsbara En bra ingress hjälper användaren att snabbt avgöra om innehållet på sidan är relevant eller ej. Att göra ingressen tydligt urskiljbar gör att användaren snabbt ser att den finns och att det kan vara mödan värt att läsa den även om sidan i sig är lång. Ingressen bör vara utformad så att den skiljer sig både från rubriker och löpande text (brödtext). De flesta läsare känner igen en ingress om texten är fet och lite större än brödtexten. Kommentar Ingresser har samma textstorlek som brödtext på webbplatsen, men skiljer ut sig genom att de är skrivna i kursiv stil (se bilden nedan). Det gör att många användare kommer att uppfatta ingresserna som mer svårlästa än övrig text. Ett bättre alternativ vore att istället för kursiv stil använda en något större textstorlek för ingresserna. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 51 (79)

52 Rekommendationer Använd en större textstorlek för ingresser och undvik kursiv stil. c) Brödtexter är tydligt urskiljbara och läsbara Ett problem för många som läser webbsidor är att de tycker att texten är för liten. Även om läsaren kan förstora texten via sin egen webbläsare ska de allra flesta inte behöva göra det. Storlekar under 11 pt skapar problem med läsbarheten för en ganska stor grupp användare. Om du vet att en stor del av dina besökare är medelålders eller äldre bör du använda minst 12 pt. Det finns sällan någon anledning att låta brödtexten vara något annat än svart text på vit botten. Det ger en bra svärta och underlättar läsbarheten. d) Bildtexter är tydligt urskiljbara och läsbara Bildtexter är ofta utformade med mycket små storlekar och ibland även kursiva, vilket gör att de kan vara svåra att läsa för en del användare. Om bildtexter används är det viktigt att hitta en typografisk form som tillåter att bildtexterna får ta plats. I annat fall kanske det är bättre att avstå från att använda bildtexter. e) Citat är tydligt urskiljbara och läsbara För förståelsen av en text kan det vara mycket viktigt att skilja fakta från något som en viss person säger. Om en viss person uttalar sig om något ska det vara lätt för läsaren att förstå: Att någon uttrycker något Vem som uttrycker något Citat kan anges på flera sätt. Citat-tecken eller tankestreck (pratminus) är de två vanligaste. Det är också tänkbart att utforma citattexter med en avvikande typografi. I diskussionsforum och liknande föregås ofta varje uttalande av att personens namn exponeras före texten. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 52 (79)

53 f) Klickbara objekt är tydligt urskiljbara och läsbara Om grafiska objekt också är klickbara och/eller innehåller text är det viktigt att denna text är läsbar och att man kan skilja dessa objekt från andra objekt som inte är klickbara. För länkade bilder kan exempelvis en liten pil-ikon användas i nedre högra hörnet. För bilder som startar filmer eller Webb-TV kan en stor play-symbol läggas mitt i bilden. Information och hjälp P15. Webbkarta a) Webbkarta finns (för större webbplatser) Även om webbplatsen har en genomtänkt struktur kan det finnas användare som tycker att det är svårt att förstå var en viss information/tjänst finns. Ett sätt att hjälpa användarna att överblicka vad som finns är att tillhandahålla en så kallad webbkarta. Webbkartan visar hur webbplatsens struktur är uppbyggd. Webbkartan bör visa strukturen så att även den hierarkiska ordningen framgår. Toppmenyer bör på något sätt presenteras tydligare och det bör framgå hur undermenyer hör ihop med överliggande menyer. Kommentar För att det ska bli enklare att hitta webbplatskartan är det bra att gruppera ihop den med sökfunktionen. På det sättet hitta användaren all alternativ navigering på samma ställe. b) Webbkartan innehåller hela menystrukturen Om delar av strukturen inte finns med i webbkartan kan det skapa stor förvirring hos användaren. Det kan vara aktuellt att begränsa webbkartan till enbart de två eller tre översta nivåerna om den innehåller en djup struktur. Ett alternativ är att visa de översta nivåerna och sedan göra det möjligt för användaren att veckla ut underliggande nivåer. c) Webbkartan är textbaserad Om webbkartan ska gå att läsa med ett hjälpmedel och om texten ska gå att förstora måste den vara textbaserad. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 53 (79)

54 Det finns även interna skäl att göra webbkartan textbaserad. På så sätt kan förändringar i menystrukturen automatiskt slå igenom i webbkartan. Det är mycket olyckligt om det krävs en manuell rutin för att bevaka ändringar i strukturen och föra in dessa i webbkartan. P16. Sökfunktion a) Sökfunktion finns (för större webbplatser) Många användare ser sökfunktionen som det viktigaste sättet att hitta något på en webbplats. För vissa är det kanske rent av det enda sättet. Det är främst användare som tycker att det är svårt att stegvis klicka sig fram i en menystruktur som föredrar att använda sökfunktionen. Sökfunktionen är därför en av de allra viktigaste funktionerna på en webbplats. En liten webbplats med ett begränsat innehåll kan klara sig utan en sökfunktion men det finns egentligen ingen större anledning att avstå. Sökfunktioner kan fungera på många olika sätt och det krävs oftast särskilda insatser för att få sökfunktionen att fungera väl. Ett bra sätt att testa hur sökfunktionen fungerar är att söka på sådant som du vet finns på webbplatsen och sedan analysera träffbilden. b) Sökfunktionen är placerad högt upp på sidan Användaren förväntar sig att hitta sökfunktionen högt upp på sidan. De vanligaste placeringarna är högt upp till höger på sidan eller högt upp till vänster (under logotypen men högst upp i en vänsterspalt). Det finns en risk att användaren tror att webbplatsen saknar sökfunktion om den inte är placerad högt upp. c) Den första sökningen är enkel att utföra Användaren ska kunna skriva ett eller flera sökord och aktivera sökningen med en knapp som heter sök. Det finns sällan anledning att göra den första sökningen komplicerad. Många användare ser sökfunktionen som sin primära (och ibland enda) möjlighet att hitta rätt information. Därför måste det vara mycket enkelt att komma igång med sökningen. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 54 (79)

55 d) Den första sökningen gör en sökning som omfattar allt material på webbplatsen Utgå från att användare inte vet något om hur din webbplats är organiserad eller strukturerad när de använder webbplatsens sökfunktion. Den första sökningen bör därför ge en träffbild där sökningen omfattar allt material. Användaren kan till exempel inte veta om informationen finns i webbsidor eller i pdf-dokument. Därför bör den första sökningen omfatta alla typer av dokument. Användaren kan inte veta om informationen finns på huvudwebbplatsen eller på en sub-webbplats. Därför bör den första sökningen omfatta alla dina webbsidor. e) Användaren kan förfina sin sökning med en utökad sökfunktion Om användaren får många sökträffar uppstår ett behov att avgränsa och förfina sökningen. Det finns flera tänkbara sätt att avgränsa eller förfina en sökning. Exakt vilka sätt som är lämpliga kan inte sägas generellt, utan det får bedömas från fall till fall. Följande sätt kan vara viktiga: Ny sökning inom sökresultatet Begränsning genom val/bortval av nyckelord Begränsning genom olika typer av sökvillkor Begränsning genom sökning i en viss del av strukturen/inom ett visst ämnesområde Begränsning genom val/bortval av vissa dokumenttyper Begränsning genom att ange vissa tidsintervall Kommentar På lnu.se finns ingen avancerad sökfunktion, och möjligheterna att filtrera eller avgränsa vilka resultaten som ska visas är mycket begränsade. I nuläget kan använddaren välja mellan att söka på hela webbplatsen, eller att begränsa sig till ämnesområdens Utbildning eller Forskning. Ett första steg mot att förbättra sökfunktionen skulle kunna vara att låta användaren filtrera på dokument. Som det är nu kan man tvingas scrolla förbi ett stort antal träffar på pdf-dokument för att hitta de html-sidor som matchade sökningen. Rekommendationer Ge användaren större möjligheter att filtrera sökresultaten. Ge användaren möjlighet att göra mer avgränsade sökningar. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 55 (79)

56 f) Användaren kan påverka hur träffar presenteras Om användaren fått ett stort antal träffar kan det vara viktigt att på olika sätt styra hur träffarna presenteras. Det finns flera tänkbara sätt som användaren kan behöva använda för att få en bättre träffbild. Exakt vilka som är lämpliga kan inte sägas generellt, utan det får bedömas från fall till fall. Följande sätt att påverka kan vara viktiga: Sortering efter datum Hur många träffar som visas per sida Sortering efter var i strukturen träffarna finns Kommentar Det finns ingen möjlighet att påverka hur sökresultaten presenteras. Rekommendationer Ge användaren möjlighet att sortera resultaten efter exempelvis datum eller relevans. g) Sökning ger relevanta träffar Om en användare söker något via sökfunktionen är det viktigt att träffarna är relevanta. De träffar som kommer högst upp bör vara träffar som också leder till rätt sidor i webbplatsen. Om webbplatsen har en avdelning om ett visst ämne ska sökningar på ord inom detta ämnesområde leda till träffar på denna avdelning. Om sökfunktionen utelämnar eller lägger träffar till rätt information långt ned i träfflistan tappar sökfunktionen sitt värde. Användaren kan förledas att tro att informationen inte finns. Det leder till att användaren kanske agerar fel eller måste kontakta er på annat sätt (e-post, telefon, personligt besök). En sökfunktion som inte ger relevanta träffar kan alltså skapa stora problem både för användaren och för den verksamhet ni bedriver. Sökfunktionen bör även ge relevanta träffar när användaren stavar sökordet fel. P17. A till Ö-funktion & ordlista Även om webbplatsen är välstrukturerad kan det finnas användare som behöver hjälp med att hitta rätt. Dessa användare kan ha nytta av en A till Ö-funktion. Denna Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 56 (79)

57 funktion ger ingångar till strukturen via någon form av ämnesord eller via att sidor döpts på ett logiskt sätt. Uppställningen är i bokstavsordning. A till Ö kräver att man tänker igenom vilka ord/formuleringar som ska användas. Ett vanligt misstag är att man automatiskt skapar en A till Ö-lista utifrån vad redaktörerna anger för sidtitlar. Resultatet brukar bli en lista som innehåller många Aktuellt, Projekt, God jul och liknande. En sådan förteckning tillför mycket litet värde för användaren. Om listan ska skapas automatiskt krävs det att redaktörerna tänker på A till Ö-listan när de skapar en sidtitel eller att de kan ange en alternativ beskrivning som bara används i A till Ö-funktionen. Många gånger är det effektivare att utgå från ämnesord och formulera dessa ur ett användarperspektiv. På så sätt kan man också fånga upp användare som använder fel ord. Exempelvis kan A till Ö innehålla ordet Dagis som leder till startsidan för Barnomsorg. a) A till Ö används om webbplatsen är komplex eller har målgrupper med stora skillnader i förutsättningar och språkbruk b) A till Ö innehåller begrepp som riktar sig till besökaren och som tydliggör vilken information som finns på den länkade sidan c) A till Ö används för att styra användaren till rätt del av webbplatsen d) Ordlista/ordförklaring används om webbplatsen innehåller svåra ord och begrepp Ord och begrepp som kan vara svåra för användarna att förstå måste förklaras. En förklaring kan i sin enklaste form ske direkt i den löpande texten. Men eftersom vi inte vet vilka sidor användaren läser kan det vara omständligt att förklara svåra ord varje gång de används. Då kan det vara bättre att presentera en separat ordlista. En separat ordlista kan antingen vara en sida/funktion skapad på den aktuella webbplatsen men det finns också leverantörer som tillhandahåller tjänster för ordförklaring som kan integreras med webbplatsen. Kommentar Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 57 (79)

58 Under Om Lnu finns en Akademisk ordlista ( som förklarar ord och begrepp som används inom den akademiska världen. Ordlistan skulle göra ännu mer nytta om den gjordes mer synlig på webbplatsen, eftersom användare som går in under exempelvis Utbildning eller Student mycket väl kan behöva förklingar på vissa akademiska termer. En lösning skulle kunna vara att lyfta ut ordlistan ur strukturen och placera den i sidhuvudet tillsammans med övriga länkar. Framförallt skulle ni kunna hjälpa användaren genom att länka till ordlistan på utvalda ställen, exempelvis på sidan Ny på Linnéuniversitetet. Rekommendationer Gör ordlistan mer synlig och årkomlig från olika delar av webbplatsen. Lägg in länkar till ordlistan på sidor där den kan göra särskilt stor nytta. e) Ordlistans förklaringar av svåra ord och begrepp är enkla att förstå När en användare valt att avbryta läsningen för att slå upp ett ord är det viktigt att själva förklaringen är enkel. Det är vanligt att användaren upplever tvärtom: Förklaringen är skriven/uppställd så att den mer bekräftar att användaren har svårt att förstå än att den förklarar ordet. Om ordförklaringen är kopplad mot en ordbok är det vanligt att användare med lässvårigheter inte anser att de får ordet förklarat på ett bra sätt. P18. Om webbplatsen Användaren kan ha ett behov av att förstå hur vissa saker på webbplatsen fungerar. Det kan finnas en hel del finesser och möjligheter som användaren inte känner till. Dessutom kan ni behöva redogöra för hur webbplatsen följer olika lagar och regler samt redogöra vem man kan kontakta om man har synpunkter och frågor. För användare som har behov av särskilt stöd kan det vara viktigt att hitta information om hur långt ni kommit i arbetet med att göra webbplatsen tillgänglig. Ni kanske vet att det finns svårigheter med vissa delar av webbplatsen och då är det bra att presentera den informationen samlat. a) En sektion som kallas om webbplatsen finns b) Om webbplatsen innehåller information om hur webbplatsen fungerar Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 58 (79)

59 c) Om webbplatsen innehåller information som beskriver vilket stöd som finns för användare med särskilda behov Kommentar Om webbplatsen innehåller i dagsläget ingen information för användare med särskilda behov. Här kan det exempelvis vara bra att informera om att ni är anslutna till Talande Webb, för att exempelvis dyslektiker och personer med svenska som andraspråk ska kunna dra nytta av det stöd som finns. På sikt bör ni också utreda webbplatsens tekniska tillgänglighet och informera om eventuella brister i sektionen Om webbplatsen. Webbplatsen innehåller även en sektion som heter Anpassa där ni informerar om varför ni i nuläget valt att inte implementera snabbkommandon. Den informationen har egentligen ingenting med anpassning att göra, och bör istället placeras under sektionen Om webbplatsen. Rekommendationer Under Om webbplatsen bör ni informera om att ni är anslutna till Talande Webb. Om webbplatsen bör innehålla information om webbplatsens tekniska tillgänglighet. P19. Hjälp & övergång till manuell service a) Komplexa funktioner och tjänster är försedda med någon form av hjälpfunktion Om det finns en möjligt för användare att göra fel kommer användare att göra fel. När det blir fel behöver många användare tydlig information om: Att det blivit fel Hur många fel som uppkommit Var felen finns Hur de kan få hjälp att rätta till felen För komplexa funktioner och tjänster räcker det oftast inte att bara visa felen i någon form av dialog med användaren. För att hantera dessa situationer behöver användaren hjälp. Hjälpfunktioner kan utformas på många olika sätt. Den exakta lösningen får utarbetas från fall till fall. Det är viktigt att hjälpfunktionen i sig är enkel. En grundprincip är att hjälpfunktionen ska vara enklare än den tjänst den är kopplad till. Exempelvis hjälper man inte en användare som har svårt att förstå innebörden av en text genom att länka till lagtext om samma sak. Den som inte förstår den första texten förstår sällan lagtexten heller. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 59 (79)

60 Kommentar Kartsökfunktionen på sidan Karta ( är en komplex funktion. Här har användaren möjlighet att söka efter en specifik byggnad på något av Linnéuniversitetets campus (se bilden nedan). Om användaren skriver in en byggnad som inte finns i sökrutan laddas sidan om, men användaren får ingen information om vad som gått fel. Här skulle ni behöva lägga in ett felmeddelande, gärna med förslag på vad användaren kan ha menat. Ni kan också hänvisa till materialet under rubriken Karta som pdf i högerspalten (se nästa punkt). Rekommendationer Visa ett felmeddelande i kartsök-funktionen för sökord som inte ger några träffar. b) Om det finns alternativa vägar att göra det som en komplex funktion är skapad för finns det även tydlig information om detta till användaren Ju mer komplexa funktioner vi bygger i webbgränssnitt desto fler användare kommer att uppleva det som besvärligt att navigera bland alla funktioner och valmöjligheter. Finns det alternativa vägar att göra samma sak är det därför fördelaktigt för användaren att få information om detta. Det kan exempelvis vara en bokningsfunktion där användaren i stället för RIA-lösningen kan använda ett förenklat, mobilt gränssnitt eller en telefonbokning. Lägg sådan information tydligt, högt upp på den första sidan i gränssnittet. Funka Nu AB Döbelnsgatan 21, Stockholm kontakt@funkanu.se 60 (79)