Riktlinjer taggade med Utveckling

21 maj, 2012

Testa och utvärdera designförslag

Den tredje fasen i det användarcentrerade arbetssättet är att testa och utvärdera designförslagen. Ordna helst tester och utvärderingar flera gånger under er arbetsprocess, allt eftersom ni utvecklar designen.
Med test menar vi användningstest, där användare testar en prototyp, genom att utföra en eller flera uppgifter. Med utvärdering menar vi att man presenterar ett designförslag för någon, som ger synpunkter. Det kan vara en användbarhetsexpert som gör en expertutvärdering, eller en fokusgrupp som har synpunkter på förslaget i en workshop.

21 maj, 2012

Ta fram designförslag

Den andra fasen i det användarcentrerade arbetssättet är att ta fram designförslag som visar hur en målgrupp utför en viss uppgift. Ett designförslag består av en prototyp och en uppgiftsbeskrivning. Dessa utvecklas successivt. Börja med en konceptuell design. Förtydliga i en interaktionsdesign, som sedan ytterligare bearbetas till en detaljerad design.

21 maj, 2012

Utforma webbadresser med omsorg

Se till att era webbadresser kommer att vara tydliga och fungera bra, även på papper. Webbadresser behöver vara enkla att uppfatta. De kan behöva användas till exempel från utskrivna e-brev eller tryckta material, eller läsas upp i etermedier. Det finns risk att användarna uppfattar dem fel. Utforma därför webbadresserna med omsorg.

21 maj, 2012

Märk upp citat i koden

Om ni använder citat i texter ska de märkas upp som citat i koden. Då kan ni lätt ge citat ett eget grafiskt utseende via css. Märkningen och utseendet tydliggör för användarna vad som är ett citat från viss person, till skillnad från vanlig text som ni själva som avsändare står för. Hjälpmedel kan också behöva korrekt kodade citat för att kunna ange för användarna när något är ett citat.

21 maj, 2012

Ange om ett dokument är en del av ett större dokument

Om ett dokument är en del av ett större dokument, eller är nära relaterat till andra material, länka dit och använd relevanta attribut som beskriver relationen. Till exempel kan varje kapitel av en rapport ligga på varsin sida, med länkar sinsemellan, som har attributen ”prev” och ”next” . Det finns också särskilda attibut för tillhörande ordlistor, upphovsrättsinformation med mera. De underlättar för användare och sökmotorer att förstå att, och hur, dokument hör ihop.

21 maj, 2012

Stryk aldrig under text som inte är länkad

När text är understruken signalerar det till användarna att den är klickbar.

21 maj, 2012

Skapa rubriker med h-element

Märk upp rubriker med h1, h2 och så vidare. Undvik att särskilja en rubrik från brödtext enbart genom formgivning. Det gör det nämligen svårare för personer med vissa hjälpmedel att navigera på sidan, och svårare för sökmotorer att avgöra vad sidan handlar om.

21 maj, 2012

Markera obligatoriska fält i formulär

Informera användaren om vilka fält i ett formulär som är obligatoriska, för att minska risken att onödig tid läggs på rättning av felaktigt eller ofullständigt ifyllda formulär.

21 maj, 2012

Använd rätt html-element när ni gör listor

En av poängerna med HTML är att språket kan användas för att märka upp semantiken i ett dokument. Märk upp listor som listor, och se till att inget annat än listor är märkta så. Skärmläsare och andra hjälpmedel behöver korrekt kodade listor för att kunna signalera till användaren att en lista faktiskt är just en lista.

21 maj, 2012

Skriv rubriker till tabeller

Tabeller kan vara svåra att tolka – både för användare med skärmläsare och för andra. Låt html-koden uttrycka vad tabellens olika delar innehåller, och hur de hänger ihop. På så vis blir tabellen tillgänglig för alla. Använd till exempel th-element för att ange vilka celler som är rad- och kolumnrubriker.

21 maj, 2012

Se till att bakåtknappen fungerar

Webbläsarens funktion för att backa är en av de mest använda funktionerna för att navigera på webben, både inom en webbplats och mellan webbplatser. Se därför till att den fungerar.

21 maj, 2012

Använd inte ramar

Använd i första hand serverbaserade tekniker för att infoga innehåll i sidor. Använd inte ramar (frames) för att utforma webbplatsen. Det orsakar nämligen en rad problem med användbarhet och tillgänglighet.

21 maj, 2012

Använd Javascript för att öka tillgängligheten – inte tvärtom

Javascript ger ofta en god användbarhet, och kan bidra till ökad tillgänglighet och effektivitet. Men det finns användare som inte kan eller vill använda Javascript. Se därför till att det går att använda webbplatsens viktigaste funktioner även utan Javascript, och följ riktlinjer för tillgänglig Javascript.

21 maj, 2012

Se till att webbplatsen kan användas även utan stilmallar

Gör det möjligt att använda webbplatsen även med webbläsare som inte stöder stilmallar, till exempel äldre eller textbaserade webbläsare. Användarna ska kunna ta del av innehållet och använda formulär, navigering och liknande. Presentationen behöver dock inte se likadan ut som i webbläsare med stöd för stilmallar.

21 maj, 2012

Skapa en flexibel layout

Formge webbplatsen så att den är flexibel, och anpassar sig efter användarnas förutsättningar och önskemål. Att använda responsiv webbdesign med hjälp av css ”media queries” är oftast en bra grund, men även mellan brytpunkterna mellan de olika skärmstorlekarna kan en viss flexibilitet behövas. Undvik att göra en låst layout.

21 maj, 2012

Gör det möjligt för andra att återanvända webbplatsens innehåll

Gör tjänster och information på er webbplats åtkomliga för andra system, så att andra kan återanvända ert innehåll. Överväg att själva syndikera och förädla material för att skapa större nytta åt era användare.

21 maj, 2012

Publicera i första hand dokument i html och skapa tillgängliga pdf:er

Publicera dokument, som rapporter och utredningar, i webbplatsens standardformat (html). Andra format gör det svårare att komma åt informationen, eftersom de ofta kräver extra programvara. Om du ändå behöver lägga ut en pdf, se då till att göra den tillgänglig.

21 maj, 2012

Gör det möjligt att prenumerera på information

Gör det möjligt att prenumerera på information från er webbplats. Då kan användarna enkelt hålla sig underrättade om vad som händer inom ert område.

21 maj, 2012

Basera inte viktig funktionalitet på format som kräver insticksprogram

Flash, Quicktime och liknande ger ofta problem för de som använder hjälpmedel, eller som inte använder mus, även när webbläsaren har ett insticksprogram för att hantera dem. Låt därför ert viktigaste innehåll vara användbart även utan insticksprogram.

21 maj, 2012

Se riktlinje 60

Om knappar i formulär. Se riktlinje 60.

21 maj, 2012

Se till att koden validerar

Se till att er webbplats har sidmallar och stilmallar som har en god kodkvalitet och följer standarder. Det ökar chansen att alla användare kan komma åt informationen och tjänsterna på webbplatsen, oavsett vilka verktyg de använder.

21 maj, 2012

Använd inte tabeller för layout

Formge inte er webbplats med hjälp av tabeller. Det finns nämligen en risk att användare som använder läshjälpmedel får informationen i tabellerna i fel ordning eller inte alls, beroende på hur komplexa tabellstrukturer som används. Även om tabellstrukturen fungerar så kommer vissa hjälpmedel att läsa upp information om tabellerna, vilket gör det svårare för användarna att förstå innehållet.

21 maj, 2012

Använd stilmallar för att separera presentationen från innehållet

Använd stilmallar (cascading style sheets, css:er), där ni samlar alla regler för webbplatsens utseende: hur textelement ska se ut, var på sidan objekt ska placeras och hur objektens utseende ska justeras.

21 maj, 2012

Utveckla webbplatsen enligt en standard, snarare än för en webbläsare

Följ en webbstandard när ni utvecklar er webbplats, så kan ni vara mer säkra på att koden kommer att fungera även i kommande webbläsare. Samtidigt underlättar ni för dem som använder webbplatsen med andra verktyg än de vanligaste.

21 maj, 2012

Följ standarder

Använd standarder så långt som möjligt. Ett skäl till att webben har blivit så användbar är att den bygger på öppna standarder. Tack vare detta kan vi utveckla och använda webben med verktyg från olika leverantörer. Öppna standarder möjliggör konkurrens, underlättar innovationer och är ett skydd mot att en eller ett fåtal aktörer tar över och kontrollerar webben.

21 maj, 2012

Brödsmulor eller länkstigar i e-tjänster

Ofta används länkstigar för att navigera på webbplatser. Men man stöter ofta på problem när man vill att de ska uppdateras även i tjänster, speciellt tjänster som sträcker sig över flera sidor.

21 maj, 2012

Ge tydlig återkoppling i e-tjänster

Ge tydlig återkoppling till användarna i ärenden som utförs via webben och e-tjänster. Vanliga automatiserade funktioner för kommunikation är meddelande, granskning, kvittens och mottagningsbevis.

21 maj, 2012

Integrera externa tjänster så att de smälter in

Tjänster som utvecklas och driftas externt blir allt vanligare. Även tjänster som utvecklas internt utvecklas ofta i separata system, och är skilda från webbplatsen. Sträva efter att integrera dem på webbplatsen så pass mycket att användaren inte upplever att de är fristående och så att de inte ser märkbart annorlunda ut. De ska smälta in i det grafiska formspråket och inte ha andra interaktionsmönster än webbplatsen i övrigt. På så vis förbättrar ni användarupplevelsen och tillgängligheten på webbplatsen.

21 maj, 2012

Var tydlig med förutsättningar för att kunna använda e-tjänsten

Användarna ska inte behöva avbryta en process för att de inte har förberett information som krävs för att slutföra processen. Var tydlig med vilken information som tjänsten kommer att begära.

21 maj, 2012

Kräv inte säkrare inloggning än vad informationen kräver

När ni väljer om en e-tjänst ska ha stöd för identifiering eller signering ska ni ta hänsyn till vilken information det gäller. Ha inte en för hög säkerhetsnivå. Det blir onödigt krångligt för användarna. Ha givetvis heller inte en för låg säkerhet som kan få negativa konsekvenser för användarna.

21 maj, 2012

Se till att infogade externa tjänster följer webbriktlinjerna

Se till att externa tjänster som infogas på webbplatsen är användbara, tillgängliga och följer de lagar och rekommendationer som gäller för webbplatsen i övrigt.

21 maj, 2012

Skriv lättbegripliga texter

Texter på webbplatser bör skrivas på ett så enkelt och begripligt språk som möjligt, för att vara effektiva att läsa, och för att kunna förstås av ett stort antal läsare.

21 maj, 2012

Skriv beskrivande rubriker och etiketter

Bra rubriker hjälper läsaren att hitta i texten. Rubrikerna är särskilt viktiga för personer som använder skärmläsare, som kan läsa upp en lista över rubrikerna på en sida. Rubrikerna ska vara lagom långa och sammanfatta vad sidan eller avsnittet handlar om. Alltför korta och allmänna rubriker ger inte användarna så mycket hjälp, till exempel ”Inledning” eller ”Aktiviteter”.

21 maj, 2012

Gör tydliga användbara knappar

Se till att knappar är lätta att förstå och använda. Namnge knapparna tydligt, och på vedertagna sätt.

21 maj, 2012

Anpassa textfältens storlek till det förväntade innehållet

Anpassa textfältens storlek till hur mycket information användarna ska fylla i. Postnummerfält bör till exempel vara kortare än e-postfält.

21 maj, 2012

Använd standardutseendet på formulärens element

Undvik att ändra utseende på formulärelement som textfält och kryssrutor, så att användarna lätt kan känna igen dem.

18 maj, 2012

Låt användarna fylla i information i valfritt format

Användarna ska enkelt kunna fylla i information som efterfrågas på webbplatsen, utan att få upp felmeddelanden som går att undvika genom programmering. Ett vanligt exempel är alla de sätt man kan skriva ett personnummer, till exempel 630125-0000 eller 196301250000. Skapa funktioner som ger det ifyllda det format som systemet behöver.

18 maj, 2012

Låt inte en webbadress sluta fungera

Det finns ett stort värde i de länkar som leder till er webbplats, både för användarna som vill kunna hitta den, och för er i sökmotorernas rankning. Se därför till att länkarna fortsätter att fungera även på lång sikt. De ska inte sluta fungera om ni byter publiceringsverktyg.

18 maj, 2012

Skapa tydliga och klickbara fältetiketter

För varje fält i ett formulär där användarna ska fylla i information, skapa en tydlig fältetikett (label) som förklarar fältets funktion.

18 maj, 2012

Optimera webbplatsen för bästa prestanda

Optimera tjänsten så att den laddar snabbt, svarar snabbt på interaktion och kräver så lite som möjligt av användarens utrustning och uppkoppling. Dålig prestanda leder till negativa användarupplevelser, hinder för användning, försämrat genomslag (till exempel genom sämre rankning i sökmotorer) och slöseri med resurser. Bra prestanda kan till exempel uppnås genom att inte överföra mer data än nödvändigt.