Kriterier E-handel för alla med gda exempel Författare: Erika Frssell Stina Jhanssn Vill du veta mer? Stina Jhanssn stina.jhanssn@etu.se Tel: 0708 80 70 07 Erika Frssell erika.frssell@etu.se Tel: 0708 80 70 09 inf@etu.se www.etu.se
2 (28) Innehåll Kriterier för e-handel för alla, med gda exempel... 3 1. Generella kriterier... 4 1.1 Ren layut... 4 1.2 Uppställning av infrmatin... 4 1.3 Länkar... 6 1.4 Tydliga knappar... 7 1.5 Bilder... 7 1.6 Rubriker... 8 1.7 Tydliga navigeringsmenyer... 9 1.8 Ledtexter ch artikelnamn... 9 1.9 Låt användaren avgöra när någt ska utföras... 10 1.10 Tabeller... 10 1.11 Frmulär... 11 1.12 Felhantering... 11 1.13 Kdkvalitet... 13 2. Hitta en prdukt... 14 2.1 Sökning... 14 2.1 Filtrering... 16 3. Uppställning av prdukt... 17 3.1 Listning av flera prdukter... 17 3.2 Prduktsida... 19 4. Varukrg... 21 4.1 Varukrg - när du handlar... 21 4.2 Varukrg - när du har handlat... 25 5. Genmför köp Kassan... 26 5.1 Grundläggande m köpprcessen:... 26 5.2 Om köpprcessen är uppdelad på flera sidr:... 27 5.3 Tydlig gruppering av steg i köpprcessen... 27 5.4 Registrera dig sm kund... 28
3 (28) Kriterier för e-handel för alla, med gda exempel ETU AB vann Pst- ch Telestyrelsens innvatinstävling 2011 ch fick därigenm möjlighet att ta fram kriterier för e-handel för alla. Vinstpengarna har resulterat i landets första kriterier för en av de mest expansiva branscherna i landet. Sex e-handelsplatser har testats med användare både med ch utan lika funktinsnedsättningar. Testerna har sammanställts för att får fram kriterier sm förbättrar möjligheten för alla att kunna hitta ch beställa prdukter.kriterierna vi föreslår har självklart sin grund i den internatinella WCAG-standarden för att göra webbplatser tillgängliga för alla avsett funktinsnedsättning eller inte. Våra rön presenteras under mars 2013 vid seminarium ch mässr där målgruppen är e- handlare. Följ WCAGs-riktlinjer i första hand, våra kriterier ska ses sm ett kmplement till dessa. Vi listat de åtgärder sm vår studie visar skulle göra e-handelsplatser avsevärt mycket lättare att använda för väldigt många användare. Detta leder i sin tur att försäljningen hs företagen med e-handelsplatser ökar. Det är viktigt att understryka att den testpersn utan någn funktinsnedsättning i strt sett upplever samma svårigheter sm testpersnerna med någn frm av funktinsnedsättning. Det förstärker vår tes att det bästa är att göra rätt från början ch bygga en e-handelsplats för alla användare. Med eller utan funktinsnedsättning. Testade webbplatser Dessa e-handelsplatser har analyserats: CCHbby Netnnet CDON Oriflame Brands Tretti.se Testpanel Vi har testat dessa webbplatser med ti testpersner En synsvag med förstringsprgram En rörelsehindrad sm använder rullmus. Två dyslektiker, en med prgramvara för uppläsning sm hjälp En med neurpsyklgisk diagns En gravt synskadad med skärmläsare ch talsyntes En äldre En sm inte har svenska sm första språk En med förvärvad hjärnskada (Strke) En nrmalanvändare
4 (28) 1. Generella kriterier 1.1 Ren layut Ett återkmmande prblem på e-handelsplatserna är att det är för mycket infrmatin på sidrna. Erbjudande är för många ch presenteras samtidigt. Det får till följd att användaren till slut inte uppfattar det e-handlaren vill kmmunicera. Speciellt stra prblem får persner med kgnitiva prblem eller kncentratinsprblem. Följ våra kriterier så skapar ni en e-handelsplats sm underlättar väsentligt för många användare. Skapa rena sidr sm tydligt visar vilka delar av infrmatinen sm hör ihp. Håll sidrna så rena sm möjligt. Ett strt prblem är startsidr sm innehåller väldigt mycket infrmatin, det får mtsatt effekt. Användaren uppfattar inte infrmatinen. Undvik rörligt innehåll Rörligt innehåll på sidrna stör många användare. Det gäller både persner med synnedsättning ch med kncentratinssvårigheter. För persner sm använder hjälpmedel så kan rörligt innehåll störa hjälpmedlet. Det gör det svårt för den användaren att handla på e-handelsplatsen. Undvik inledande stra bilder Användare vill inte ha en inledande str bild på sidan för att det är jbbigt skrlla ner till den första textinfrmatinen. Särskilt på sidr med prduktlistning, där användaren vill kmma till prdukterna direkt är detta ett påtagligt prblem. 1.2 Uppställning av infrmatin Inramning ch gruppering För flera av användarna har det varit viktigt med inramning av infrmatin sm hänger samman. Det är särskilt viktigt för persner med dyslexi ch med neurpsyklgiska diagnser. Här följer några knkreta råd: Använd streck eller ramar sm tydligt visar vad sm hör ihp. Inled varje grupp med en rubrik. Använd listr för att gruppera exempelvis länkar. Exempel: Oriflames prduktlistning har en bra visuell inramning av prdukterna ch användarna har lätt att se vad sm hör ihp sm texter ch bild.
5 (28) Förbättringsförslag: Inled gruppen med rubriken (exempel Air Eau de Tilette ), flytta infrmatin m märket (exempel AIR, ICE, FIRE ) ch kda rubrikstrukturen krrekt. Exempel: Nästa exempel är hämtat från Tretti.se ch deras Kassafunktin. Här är varje del i kassan inramad ch väl avgränsad visuellt. Det är lätt för användaren att förstå vad sm hör ihp. Förbättringsförslag: Flikarna under Välj betalsätt, är svåra att förstå för den sm inte ser. Detta kan lösas på ett annat sätt. Kdmässigt finns förbättringsförslag med att märka upp rubrikerna med h-element. Skapa en naturlig väg genm sidrna Det är viktigt för persner med kgnitiv nedsättning att webbsidan är skapad så att kmpnenter kmmer i den rdning sm den ska läsas. Det blir extra viktigt när användaren ska utföra någt på sidan. Sm att beställa en prdukt genm att välja en knapp. Knappen ska ligga efter den grundläggande infrmatin sm finns m prdukten. Ha inte annan infrmatin i detta sammanhang,, sm exempel dela på sciala medier, eller förslag på andra prdukter. Lägg den typen av infrmatin utanför prduktinfrmatinen. Skapa sidrna så att bjekt ch infrmatin kmmer i rätt rdning. För persner sm inte ser innehållet är det viktigt att rubriken i en uppställning kmmer först, eftersm användaren i sitt hjälpmedel har möjlighet att hppa till en rubrik ch frtsätta läsa där. Det gör att de missar infrmatin sm står innan rubriken men hör till infrmatinen. När gruppering av infrmatin görs, placera rubriken först. Exempel: Exempelet här är från NetOnNet där prdukten presenteras i rätt rdning, där Rubriken kmmer först, följt av märket, krt infrmatin m prdukten pris, antal ch sist ligger Lägg i kundvagn. (Denna uppställning används inte på prduktsidan, där är det en uppställning sm är svårare att förstå.)
6 (28) Förbättringsförslag: Ge länken Läs mer en längre frmulering sm talar m vart länken leder, exempelvis Ggle Nexus 4, mer infrmatin. 1.3 Länkar Länkar är centralt på en e-handelsplats. Med hjälp av dem kmmer användaren vidare ch kan läsa m prdukten. Det sm visat sig vara prblem med länkarna, är att de ibland är svåra att hitta, att använda ch att tlka, därför kmmer här några råd för att göra länkar tydligare. Skapa tydligt fkus för länkar, både för den sm pekar ch den sm tabbar sig fram på sidan. Skapa länkar med en tillräcklig klickbar yta. Det ska vara lätt att välja en länk. Det ska vara tydligt vad sm är klickbart. Använd färg, understrykning eller en symbl sm visar vad sm är länkat. Tänk på att inte göra flera länkar till samma sida med lika länktexter. Till exempel kan bild ch varans beteckning läggas i en ch samma länktagg. I dessa fall ska bildens alternativattribut lämnas tmt (alt= ) Varans beteckning ska inte stå där. Länktexten ska tydligt visa vart länken leder. Exempel: I navigeringsmenyn på tretti så förändras utseendet på länken när användaren pekar på den med muspekaren, det är en bra hjälp för det är lättare att se vilken länk sm är i fkus. Förbättringsförslag: Låt länken förändras på samma sätt för den sm använder tangentbrdet för att navigera. Då ska länken ändra utseende när länken har tabbfkus.
7 (28) 1.4 Tydliga knappar Ge knappen ett knapputseende, med ett tydligt fkus. Knappen ska förändras när användaren pekar på den eller tabbar fram till den med tangentbrdet. Det är viktigt att knappen har en bra kntrast. Texten ska synas tydligt. Låt texten vara text på knappen, så att det inte är en bild med text på. Det blir svårare att få texten uppläst på ett bra sätt annars. En bild blir även pixligt när den uppförstras. Knappar ska se ut sm knappar. Texten på knappen ska vara text (inte vara en del av bilden), så att texten kan förstras. Knappen ska få ett synligt fkus när användaren pekar på eller tabbar till knappen. Knappen ska få förändrat utseende när den väljs, trycks in. 1.5 Bilder Tänk igenm användandet av bilder ch alternativtexter till bilder. Bilder sm förmedlar infrmatin ska beskrivas med hjälp av alternativtexter (alt= text sm beskriver bilden ) Om bilden inte tillför någn infrmatin ska bildens alternativattribut vara tmt (alt= ). Bilden kan alternativt göras till bakgrundsbild. Hjälpmedel läser då inte upp bildens namn eller sökväg. Exempel: Om det finns en text i anslutning till bilden sm beskriver prdukten kan alternativtexten utelämnas Om bilder är klickbara ska bildens alternativtext beskriva vart länken leder. Alternativtexten ska i detta läge inte beskriva bilden. Om bilden är klickbar ch det finns en textlänk sm leder till samma målsida ska bilden ch text sammanfgas till en länk. Kdexempel: Klickbara bilder sm beskriver vart länken leder: <a href="/" title="netonnets startsida"><img class="lg" src="/cntent/images/sv- SE/netnnet_lg.gif" alt="netonnets startsida"/></a> Tänk på att alternativtext skrivs, det räcker inte med title-text. Sammanfgad bild ch länktext i en länk: Två länkar: <a href="http://skrivutfunktin.se"><img src="skrivare.gif" alt="skriv ut sida" /></a> <a href="http:// skrivutfunktin.se">skriv ut sida</a> En länk: <a href="http://skrivutfunktin.se"><img src="skrivare.gif" alt="" /> Skriv ut sida</a>
8 (28) 1.6 Rubriker Skapa en rubrikstruktur på sidrna. Rubriker hjälper användaren sm ser sidan att bättre förstå innehållet ch det hjälper användare sm inte ser innehållet att få struktur med hjälp av sitt hjälpmedel. När inte sidan indelades med relevanta rubriker får användare prblem att förstå innehållet. Strukturen ska finnas både visuellt ch tekniskt (kdas h1-h6) för att kunna tlkas med hjälpmedel. Varje sida ska ha en huvudrubrik, där det huvudsakliga innehållet börjar. Rubriker ska användas för att gruppera infrmatin. Det ger en möjlighet att hppa över grupper av infrmatin. Det är extra viktigt att Varukrg är kdad sm rubrik, så att det snabbt går att hppa dit. Skriv begripliga rubriker. Rubrikens frmulering ska tydligt tala m vad infrmatinen innehåller. Exempel: NetnNet har en rubrikstruktur där det finns en huvudrubrik ch artiklarna är uppmärkt sm h2, vilket är bra. Förslag på åtgärder: Huvudrubriken ska vara en text överst på sidan, visuellt till exempel med större typsnitt, fet stil eller annan färg ch tekniskt (h1) uppmärkt vilket gör det tydligare för alla. Den första artikeln är inte uppmärkt sm rubrik, rubriken ska vara nivå 2 (h2). I den högra spalten finns det rubriker sm är uppmärkt med h3. Det innebär att dessa rubriker är en underrubrik till den sista artikeln, prdukten i mittenklumnen vilket blir tkigt. Det måste läggas till en rubriktext i den högra spalten sm sammanfattar innehållet ch märks upp med h2, (den högra spalten nuvarande rubriker kan då vara kvar sm h3) eller att den högra spaltens nuvarande rubriker märks m till h2. Varukrgen måste märkas upp sm en rubrik (h2) för att den ska vara enkel att hitta för användare sm inte kan se webbplatsen.
9 (28) 1.7 Tydliga navigeringsmenyer Menyn är avgörande för att användaren ska hitta till de lika kategrierna av prdukter. Vi har sett att på en del e-handelsplatser använder inte användarna menyerna eftersm det är för svårt eller tydligt. Användaren söker istället, läs mer under rubriken 2. Hitta en prdukt. Vi föreslår några tydliga kriterier för hur en meny bör fungera för att vara lätt att använda för alla: Kda menyer i listr ch nästlade listr för undernivåer. Gör tydliga menyer visuellt. Använd symbler, indrag, streck ch färger för att visa lika nivåer. Gör tydligt utseende på vilken länk sm är vald. Gör tillräckligt avstånd mellan länkarna (se rubriken Länkar). Gör tydligt tabbfkus ch muspekarfkus (se rubriken Länkar). Exempel: Ett exempel sm alla testpersner tyckte var tydligt är hämtat från Tretti.se: Menyn är krrekt kdad med listr (ul) sm visar nivåerna för den sm inte ser. Den är ckså visuellt tydlig, med avgränsning mellan varje länk En symbl framför varje länk (+) sm visar att det finns undernivåer. En annan symbl (-) sm visar att en nivå visas. Undernivån framgår genm en annan bakgrundsfärg ch ett tunnare teckensnitt. Aktiv sida visas genm en gul bakgrundsfärg. 1.8 Ledtexter ch artikelnamn Ange vad det är för prdukt i artikelnamnet Användare har haft prblem med att förstå vad det är för prdukt utifrån artikelnamnet. När flera prdukter ligger i varukrgen blir detta ett strt prblem. Kunden vet helt enkelt inte vad den har i varukrgen. Skriv ut vad det är för prdukt, ange inte bara prduktens beteckning. Exempel: Prdukt där det är svårt att förstå vad det är för prdukt Nature Secrets Shamp Anti-Dandruff with Burdck & Grapefruit användare har prblem med att förstå att det är ett mjällschamp. Anderssn LPM 3.0 Art.nr: 168950 Användare har prblem med att förstå att det är en trådlös mus. Exempel: Prdukt där det är lätt att förstå vilken prdukt sm beskrivs Sklsax, 16 cm, högersax
10 (28) Ledtexter Använd texter sm talar m vilken infrmatin sm kmmer ch skriv ut dem i klartext. Undvik krångliga rd ch förkrtningar. Använd inte bstavsbilder sm exempelvis :-, för krnr läses i hjälpmedel sm kln bindestreck åtgärda genm skriva ut kr istället. -> för pil sm läses bindestreck större än, åtgärda genm att göra bakgrundsbild eller bild med tmt alternativtext (alt= ). Exempel: Lägg rden Pris: framför priset för att göra det tydligt Lägg rdet Kr efter Priset, inte :- Antal:, inte kvanitet Skriv ut Längd ch Höjd. Inte L ch H 1.9 Låt användaren avgöra när någt ska utföras Låt användaren styra när någt ska utföras. Undvik funktiner där innehåll dyker upp, utan att användaren är medveten m det. Till exempel när användaren drar muspekaren över ett mråde. Låt användaren aktivt välja vad sm ska visas, till exempel genm att välja en länk. Låt användaren avgöra när någt ska utföras så de aktivt väljer en länk när någt ska visas Låt användaren göra filtreringen med aktiva val, det ska inte ske autmatiskt (nchange) 1.10 Tabeller Tabeller kan användas till att lista data, till exempel till att lista prdukter i en kundvagn. Tabeller är ett bra sätt att lista prdukter men infrmatinen måste ställas upp på ett tydligt sätt. Tabellen ska kdas på rätt sätt ch utseendet måste göras tydlig ch läsbart. Nedan kmmer några kriterier sm km fram vid våra tester. Tabeller ska användas för att presentera data. Prgrammera tabellen tekniskt med html taggarna table, th (klumnrubriker eller radrubriker) tr (tabellrader) ch td (tabellceller). Beskriva vad klumnrubrikerna eller radrubrikerna är rubrik över (exempelvis html scpe). Det görs främst när tabellen består av både rad ch klumnrubriker. Tabellen ska presenteras med samma antal klumner för alla rader. Det ska finnas klumnrubrik (text) för varje klumn. Det ska visuellt framgå att det är en tabell. Det ska vara visuella skillnader på klumnrubriker ch vanligt innehåll. Öka läsbarheten genm varannan rad eller klumn i tabellen har en annan bakgrundsfärg eller tydliga streck. Placera ett innehåll, en uppgift i varje datacell.
11 (28) 1.11 Frmulär Frmulärfält används på alla e-handelsplatserna för att ta emt data. Det används exempelvis vid sökning, filtrering ch registrering av kunduppgifter. Frmulärfälten måste kdas på rätt sätt för att fungera på ett bra. För användare sm använder tangentbrdet för att navigera eller använder ett hjälpmedel så är det extra viktigt att det kdas på rätt sätt. Uppställning av frmulärfält har ckså visat sig vara viktig för förståelsen av frmuläret. Nedan följer kriterier sm gör det enkelt för alla att använda frmulär. Etikettext till inmatningsfält ska finnas. Frmulärfält ska kpplas ihp med etikett (label). Visa med ett exempel hur inmatning ska göras. Till exempel persnnummer. Radiknappar ch kryssrutr ska placeras under varandra. Använd fieldset ch legend för att gruppera ch rubricera grupper av radiknappar ch kryssrutr. Visa vad sm är bligatriska inmatningar genm att: Använd symblen * för bligatriska fält ch gör den röd. Symblen * placeras vid etiketten (ska ingå i label). Skriv överst på sidan eller vid inmatning (frmulärfält) att * = uppgifter sm du måste mata in, bligatriskt. Systemet bör vara förlåtande med inmatning, ska acceptera flera lika sätt på inmatning. Funktin sm underlättar inmatning ska användas, till exempel att adressuppgifter (bkföringsadresser) hämtas när användaren matar in persnnummer. Ge återkppling till användaren då inmatning är krrekt. Bra exempel: Testpersnerna tyckte att det var tydligt hur de skulle mata in persnnummer när det fanns ett exempel. När testpersnerna tryckte på knappen Hämta adress hämtades övriga uppgifter ch fylldes i frmuläret. Det är en bra funktin för många testpersner. Obligatriska fält var tydligt utmärkt med en röd symbl. 1.12 Felhantering Felhantering måste göras tydligt så att användaren förstår att det har blivit fel ch vad sm har blivit fel ch ett exempel på hur användaren gör för att göra inmatningen rätt. Felhantering görs genm exempelvis text längst uppe på sidan samt vid frmulärfältet sm har blivit fel. Det är viktigt att det görs tekniskt krrekt, med färg ch med text.
12 (28) Funktin sm underlättar inmatning ska användas exempel att adressuppgifter (bkföringsadresser) hämtas när användaren matar in persnnummer. Exempel: Det måste hända någt när det blir fel. Ett pp-up fönster kan visas med ett felmeddelande eller att webbsidan laddas m med ett felmeddelande. Om inmatning görs fel visas ett pp-up fönster med ett felmeddelande. Förbättringsförslag: Gör ett tydligare felmeddelande sm beskriver hur användaren ska göra för att mata in krrekt persnnummer. Exempel från tretti.se Exempel: Om inmatning blir fel laddas en ny sida in när användaren trycker på knappen Lgga in. Felmeddelandet visas längst upp på sidan med en tydlig rubrik ch ett utseende samt symbl sm uppmärksammar användaren på att någt har blivit fel. Frmulärfältet har fått en annan färg vilket ckså gör det tydligt att se att någt är fel. Förbättringsförslag: Gör ett exempel på hur e-pstadressen ska se ut. Exemplet kan placeras både i felmeddelandet ch vid frmulärfältet (innan inmatning). Frmulärfältet kan även få ett visuellt kraftigare ram i rött för att tydliggöra ännu mer. Exempel: Det är bra att återkppla till användaren att inmatning eller steg i köpprcessen är krrekt med exempelvis symbler ch färger (även tekniskt med exempelvis alternativtext på bild).
13 (28) 1.13 Kdkvalitet I testerna av webbplatserna har det ibland uppstått prblem relaterade till vilken webbläsare ch vilken versin av webbläsaren sm har användaren har använt. Det har ckså förekmmit prblem där hjälpmedel inte kunnat tlka innehållet på webbplatsen. Därför blir ett av kriterierna att följa standard vid prgrammeringen. Vår rekmmendatin är kntrllera så att sidrna går att validera både HTMLkden ch CSSen. Ett annat prblem är webbplatser sm kdas med HTML 5. Det är ännu inte någn fastställd standard vilket gör att hjälpmedel ch webbläsare inte kan tlka innehållet på ett riktigt sätt. Vi rekmmenderar därför att antingen vänta med att använda HTML 5 eller att kntrllera ch testa att sidrna går att använda med hjälpmedel innan de lanseras. Välj en standard ch följ den: för uppmärkningskd - HTML för stilmallar - CSS
14 (28) 2. Hitta en prdukt För varje e-handelsplats sm vi kntrllerat har användarna fått i uppdrag att hitta tre lika prdukter. De har tagit sig an uppgiften på lika sätt på de lika webbplatserna. På en av webbplatserna använde användarna bara sökfunktinen medan på andra användes menyer ch ibland sökfunktin berende på vilken prdukt de skulle hitta. Det finns lika rsaker för att välja en specifik väg för att hitta prdukten. Dels hur många kategrier av prdukter sm finns på sidan. Dels hur många prdukter sm finns av varje kategri ch dels hur väl genmarbetad infrmatinsstruktur sidan har. En avgörande faktr hur bra menyn går att använda. Är menyerna svåra att använda så återstår bara sökfunktinen. Nedan beskriver vi några kriterier för sökningen ch filtrering sm funnits i användartesterna. 2.1 Sökning På flera av sidrna så är sökningen viktig, det är svårt att hitta prdukter utan att använda sökningen. På sidr med ett strt utbud av prdukter ch många prduktkategrier är sökningen central. Gör ett tydligt sökfält Placera en etikett innan sökfältet sm infrmerar att det är en sökning Kda frmulärfält krrekt (se rubriken frmulär) Gör en tydlig sökknapp (se rubriken knappar) Sökningen ska nås från alla sidr exempel så placera sökfältet i sidhuvudet. 2.1.1 Hjälp med sökning Testpersnerna med dyslexi uppskattar extra mycket då de får hjälp av sökningen genm förslag på prdukter. De uppskattar ckså m sökfunktinen är förlåtande mt stavfel ch ger förslag på alternativ rd. Erbjud förslag på prdukter i sökningen Erbjud en förlåtande sökning, sm ger förslag på rd sm det istället kan vara vid felstavning. Bra exempel: webbplatsen Tretti har en sökfunktin sm visar en utfälld lista med sökresultat av en prduktgrupp med bild, sökväg ch antal prdukter. Användare kan klicka på prdukten för att se mer av resultatet eller knappen Sök. Förbättringsförslag: Det måste gå att välja länken för användare sm enbart använder tangentbrdet för att navigera (exempel tabb-tangenten).
15 (28) Bra exempel: Webbplatsen Oriflame erbjuder en länk med ett annat förslag på sökrd m användaren stavar fel. 2.1.2 Sökresultat Lägg in en rubrik sm visar var sökresultatet börjar Låt det framgå hur många prdukter sm hittades. Låt det framgå hur många sökresultat sm visas exempel Visar 10 av 234 träffar på sökrdet hårfön Kmplettera gärna sökresultatet med bild av prdukten. Användarens primära syfte med sökningen är att hitta prdukter, andra val ska kunna tas brt ur resultatet, eller placeras under funna prdukter. Exempel: Sökning med bilder i resultatet hämtat från netnnet Exempel: Resultat av sökningen från Brands med tydlig infrmatin m hur många artiklar sm har hittats, hur många artiklar sm visas samtidigt. Testpersnerna tyckte att det var bra med en bild av prdukten ch att de var tydligt avskilt från varandra. Förslag på förbättringar: Skriv rubrik med sökresultat, gör det tydligt visuellt att det visas 99 artiklar eller ett bättre val av rd.
16 (28) 2.2 Filtrering Filtrering av prdukter är uppskattat särskilt när det gäller sidr med strt utbud av prdukter. En väl strukturerad filtrering är viktig, där filtreringsval placeras under varandra snarare än radvis. Det har upplevts sm rörigt, särskilt när knappar ch inmatningsfält inte placerats rakt under varandra. Undvik funktiner sm uppdaterar sidan direkt utan att användaren har gjrt ett aktivt val. Exempelvis kmbinatinsrutr utan väljknappar. Placera filtreringsalternativ under varandra, eller åtminstne spaltvis, för att undvika att ge ett rörigt intryck. Låt användaren göra filtreringen med aktiva val, inget ska ske autmatiskt (nchange). Ändra inte utseende på frmulärelement. Använd dem sm det är tänkta att användas.
17 (28) 3. Uppställning av prdukt 3.1 Listning av flera prdukter När vi testat sidrna så har vi sett att det finns i huvudsak två typer av listningar av prdukter: Det första är listning av prdukter uppställt i spalter, fta är det tre spalter i bredd. Det andra är listning av prdukter under varandra i en tabell eller en tabell liknande uppställning. Väldigt rena prduktlistr har varit de mest uppskattade. De sm innehåller begränsad infrmatin exempelvis en bild, ett artikelnamn, pris ch köpknapp. Gemensamt för de lika listningarna är att det bör finnas möjlighet att: Srtering av prdukterna i listan, efter exempelvis ppuläritet, pris, nyheter Erbjud möjligheten att visa listan med prdukter på lika sätt Välja hur många varr sm ska visas per sida Håll infrmatinen så ren sm möjligt Gör inte flera länkar med lika länktext till den enskilda prdukten (prduktsidan) Bläddra mellan sidr Det ska vara enkelt att bläddra mellan sidr, det ska stå nästa på länken sm går till nästa sida. Tänk på att det är bra träffyta på länkarna. Länkad bild ch länktext kan med fördel läggas i samma länktagg, när länkmålet är detsamma (se rubriken 1.4 Bilder) Exempel: Ibland har det varit svårt för användare att hitta länken för att byta utseende på listan. Det måste visas på ett tydligt sätt med både symbl ch text Det är bra att listan kan visas på lika sätt men glöm inte att symblerna måste kmpletteras med länktext ch göras tydligare med en starkare kntrast. Från CDn. 3.1.1 Listning av prdukter i flera spalter med bild Rama in varje prdukt i uppräkningen, så att det blir tydligartilken infrmatin sm hör ihp. Prdukterna bör få ett tydligt fkus när användaren pekar på eller tabbar sig fram till prdukten. Vänsterställ texten/infrmatinen sm finns under varje bild. Lägg inte fler en tre prdukter på varje rad.
18 (28) Exempel: Exempel: här är ett bra exempel från Brands sm listar tre prdukter i bredd. Muspekarfkus är tydligt i frm av en ram runt prdukten sm är i fkus. Förbättringsförslag: Gör en tydligare inramning av prdukterna ch vänsterställ texten. Lägg till fkus även för tangentbrdsanvändare. 3.1.2 Listning av flera prdukter radvis Begränsa infrmatinen till exempelvis bild, artikelnamn, pris ch köpknapp. Vilken infrmatin sm ska visas är berende på vad det är för prdukt. Användarna saknar bilder när de inte finns med i listningen det tyder på att bilder är viktigt för användarna. Lägg en bild på prdukten i listan med prdukter Exempel: Listningen av prdukter på CDON, har varit uppskattad för sina bilder. Det gör det lätt för användaren att se vad sm listas.
19 (28) En annan listning sm varit uppskattad är Oriflame, det är tydligt med bild sm visar prdukten. I båda exemplen så är det ganska lite infrmatin m prdukten, vilket användarna har uppskattat. Det finns ckså en visuell avgränsning i frm av en linje mellan varje prdukt sm har gör det tydligt vilken infrmatin sm hör ihp. 3.2.3 Listning i tabellfrm En lista med prdukter kan med fördel läggas i en datatabell. Om en tabell används är det viktigt att denna har lika många klumner i alla rader ch att det finns tydliga klumnrubriker. Kda tabellen krrekt Kda klumnrubriker ch radrubriker sm TH Kppla klumnrubriker till innehållet med exempelvis scpe Gör tabellen tydlig visuellt med linjer ch tydliga rubriker 3.2 Prduktsida Sidan där en specifik prdukt visas. Uppställningen på prduktsidan är viktigt för alla användare. Och att det är en tydlig ch ren uppställning, där det är tydligt vad sm hör ihp, ch en tydlig avgränsning mt infrmatin sm inte direkt handlar m aktuell prdukt. Det är ckså viktigt att köpknappen sitter efter prduktinfrmatinen annars kan användare ha svårt att hitta den. Exempelvis persner med kgnitiv nedsättning. Huvudrubriken på sidan bör vara prduktens namn ch vad det är, alltså inte bara prduktbeteckning, sm kan vara svår att tlka. Använd prduktens namn ch vad det är för prdukt sm huvudrubrik (h1) ch titel på sidan. Erbjud bilder på prdukten, gärna flera från lika håll, berende på prdukt
20 (28) Exempel: Det är uppskattat med bilder, gärna flera från lika håll. Det berr förstås på vad det är för prdukt m det är viktigt eller inte. På Brands var detta en uppskattad funktin. Lägg den grundläggande infrmatinen m prdukten i en krtfattad infrmatin innan köpknappen. Exempelvis i en punktlista, det uppskattades av användare. Fördjupad infrmatin m prdukten bör placeras i en egen inramad yta, skild från den första grundläggande infrmatinen. Relaterad infrmatin kan finnas på sidan, sm Andra tittade på eller betygsättning ch recensiner kan ckså finnas på sidan, men under prduktinfrmatinen ch med tydlig avdelning visuellt ch med en rubriksättning, så att det är tydligt att sidan är uppdelad i lika delar. När det finns teknisk infrmatin m en prdukt så bör den placeras i en överskådlig tabell sm är väl strukturerad ch lätt att läsa. Dela in sidan i tydliga delar med inramningar ch rubriksättning. Placera relaterad infrmatin efter infrmatinen m prdukten. Placera teknisk infrmatin i en tabell.
21 (28) 4. Varukrg 4.1 Varukrg - när du handlar 4.1.1 Namn eller benämning Varukrg ch Kundvagn är vanligt förekmmande rd sm testpersnerna har relaterat till. Av dessa två benämningar så har de inte favriserat någt av rden. Det sm har varit viktigt är att benämningen använts knsekvent på hela webbplatsen. Andra rd sm Shppingbag har ckså fungerat men testpersnerna har inte föredragit det. Det var ett prblem för gravt synskadad sm har letat efter Varukrg eller Kundvagn eftersm det är det vanligaste rden för detta. 4.1.2 Placering av varukrgen på webbplatsen För testpersnerna har varukrgar sm placeras till höger på webbplatserna varit det bästa. De varukrgar sm visats hela tiden har varit mest mtyckta ch upplevts tryggast för användarna. Placera varukrgen till höger på webbplatsen eller eventuellt i sidhuvudet. Visa hela varukrgen hela tiden Exempel: Brands sm har sin varukrg till höger på webbplatsen ch visar den hela tiden användaren handlar. För gravt synskadad har placeringen av varukrgen mindre betydelse. Det sm är viktigt är att det finns en rubrik sm användaren kan hppa till. Detta görs genm att hjälpmedlet tlkar rubriken (h-tagg) ch genm krtkmmandn kan hn hppa till varukrgen. 4.1.3 Innehåll i varukrg Innehållet i varukrgen kan variera berende vilka artiklar sm kan handlas. Det sm testpersnerna har tyckt varit viktigt är: Artikelns namn - det sm har varit ett prblem är när det används artikelbenämningar sm inte är tydliga exempel LGHX906Pan. Bra artikelnamn är särskilt viktigt m det inte visas andra benämningar i samband sm talar m vad det är för någt (se även 1.8).