Användbarhetsboken berättar hur man gör webbplatser tillgängliga och användbara. Läs den här, eller beställ från Bokus eller Adlibris.
Innehåll
Hoppa direkt till:
- Användbarhet
- Boken
- Användarorientering
- Varumärke
- Webbprofil
-
Grafisk design / Se
- 11 Formens funktion
-
12 Typografi och läsbarhet
-
12.1 Textstorlek
- 12.1.1 Använd mått som ger användaren kontroll över textstorleken - och aldrig liten text
- 12.1.2 Ge användaren färdiga alternativ att välja mellan
- 12.1.3 Sidorna måste vara användbara även när användaren ställer in en större textstorlek
- 12.1.4 Sidorna bör se bra ut även när användaren ställer in en större textstorlek
- 12.2 Typsnitt
- 12.3 Radavstånd
- 12.4 Spaltbredd
- 12.5 Textjustering
-
12.6 Rubriker
- 12.6.1 Gör rubriken som text
-
12.1 Textstorlek
-
13 Bilder
- 13.1.1 Använd bilder
- 13.1.2 Stäng av Internet Explorers bildverktyg
-
13.2 Bildtexter
- 13.2.1 Ge bilden en bildtext
- 13.2.2 Ange vem som skapat bilden
- 13.3 alt & longdesc - texter för dem som inte ser bilder
- 13.4 title - hjälptexter, bonusinformation och tips
- 13.5 Tumnagel
- 14 Luft
- 15 Färg
- 16 Symboler
-
17 Logotyp
- 17.1.1 Gör versioner av logotypen speciellt för webben
-
17.2 Sajtikon
- 17.2.1 Ge webbplatsen en sajtikon
- 18 Animationer
-
19 Multimedia
- 19.1.1 Starta inte multimediepresentationer automatiskt
- 19.1.2 Ge användaren möjlighet att stoppa multimediepresentationer
- 19.1.3 Multimedia skall vara lika tillgängligt som annat innehåll
- 19.1.4 Använd multimedieformat som har fria läsprogram för olika sorters datorer
- 19.1.5 Använd multimedia för att förklara, förmedla och roa
- 19.2 Video, presentationer och annat rörligt
- 19.3 Ljud
- 20 Webbsidan
- 21 Skärmstorlek
-
22 Ramar (frames)
- 22.1.1 Undvik att använda ramar
- 22.2 Tillgängliga ramar
- 23 Utskrift
- 24 Förhållande till andra sorters design
-
Språk / Läsa
- 25 Tilltal
-
26 Läsvänlighet
- 26.1.1 Skriv så enkelt som möjligt
- 26.1.2 Skriv det viktigaste först
- 26.1.3 Använd en stilguide
- 26.1.4 Språkgranska texter
- 26.1.5 Kontrollera stavning och grammatik
- 26.1.6 Kontrollera alltid om något redan fått ett ord, innan du hittar på ett eget
- 26.1.7 Förklara förkortningar
- 26.1.8 Formulera rubrikerna så att de är begripliga även när de läses fristående från den övriga texten
-
26.2 Skrivråd
- 26.2.1 Välj rätt mellan singular och plural
- 26.2.2 Var lagom exakt
- 26.2.3 Var återhållsam med kursiv text och versaler
- 26.2.4 Låt inte förkortningar eller tal avdelas
- 26.2.5 Använd typografiskt korrekta tecken
- 26.2.6 Skriv datum i klartext
- 26.2.7 Skriv datum med korrekt ordningsföljd
- 26.2.8 Närliggande datum bör skrivas med relativa tidsord
- 26.2.9 Skriv inte närliggande klockslag med relativa tidsord
- 26.2.10 Använd relativa tidsord när tidsavståndet är intressantare än tidpunkten
- 27 Webbplatser på flera språk
- 28 Användare som har svårt att läsa svenska
- 29 Språkets förhållande till designen
-
Informationsdesign / Hitta
- 30 Användare hittar på många olika sätt
-
31 Navigationen hjälper användaren rita en karta i sitt huvud
- 31.1 Bunta ihop och döpa
- 31.2 Struktur och navigation
-
32 Navigation
- 32.1 Navigationens byggstenar
- 32.2 Navigationsformer
-
32.3 Länk
- 32.3.1 Gör det tydligt vart länken leder
- 32.3.2 Låt inte identiskt formulerade länkar leda olika
- 32.3.3 Använd title för att ge mer information i länken
- 32.3.4 Låt inte title duplicera länktexten
- 32.3.5 Var återhållsam med uppmaningar
- 32.3.6 Markera om länken inte går till en webbsida
- 32.3.7 Skriv ut dokumentstorleken för stora dokument bredvid länken
- 32.3.8 Stryk aldrig under text som inte är länkad
- 32.3.9 Stryk under text som är länkad
- 32.3.10 Länken bör reagera när pekaren förs över den
- 32.3.11 Använd inte blått eller lila som färg på text som inte är länkad
- 32.3.12 Besökta och obesökta länkar skall ha olika färg
- 32.3.13 Gör inte den klickbara ytan för liten
- 32.3.14 Ge text med title streckad understrykning
- 32.3.15 Låt inte knappar fungera som länkar eller länkar som knappar
- 32.3.16 Rensa regelbundet webbplatsen från brustna länkar
- 32.3.17 Spara en egen kopia av viktiga webbsidor som du länkar till
- 32.4 Länkar till ingångssidan
- 32.5 Länk till nästa sida
-
32.6 Läs mer-länkar
- 32.6.1 Länka till likartade saker
- 32.7 Klickbar bild
- 32.8 Multiklickbar bild (image map)
-
32.9 Meny
- 32.9.1 Länkar i menyer behöver inte vara understrukna
- 32.9.2 Markera i menyn vilken sida man befinner sig på
- 32.9.3 Gruppera menylänkar som hör samman
- 32.9.4 Gör menyer med text, inte med bilder
- 32.9.5 Bygg menyer som tål att växa i
- 32.9.6 Ge plats för långa länkar i menyn
- 32.9.7 Menyer får inte vara tomma och bör bestå av fler än en länk
- 32.9.8 Gör hela området runt en menylänk klickbart
- 32.9.9 Använd användarspråk i menyerna
- 32.9.10 Menylänkarna bör vara ömsesidigt uteslutande
- 32.10 Global meny
- 32.11 Hjälpmeny
- 32.12 Flikar (tabs)
- 32.13 Rullgardinsmeny
- 32.14 Valboxmeny
-
32.15 Förteckning
- 32.15.1 Kombinera menyer och förteckningar - men var varsam i övergången
- 32.15.2 En sida som nås genom en förteckning måste ha en tydlig länk tillbaka till denna
- 32.15.3 Kombinera förteckningar med 'nästa sida'-länkar
- 32.15.4 Använd förteckningar för att göra navigationen tillgängligare
- 32.15.5 Förteckningar får inte vara tomma
- 32.16 Index-sida och introduktion
- 32.17 Löpsedel
- 32.18 Innehållsförteckning
-
32.19 Sakregister
- 32.19.1 Ge webbplatsen ett sakregister
- 32.20 Synlig sökväg (brödsmulor)
- 32.21 Framstegsindikator
-
33 Navigationens tema
- 33.1 Temalöst
- 33.2 Association
- 33.3 Modell
- 33.4 Ämne eller kategori
- 33.5 Målgrupp eller livssituation
- 33.6 Uppgift eller mål
- 33.7 Organisation
- 33.8 Egenskap
-
33.9 Tid
- 33.9.1 Bestäm om det är innehållets tid eller sidans tid som används
- 33.9.2 Använd sidans tid för att visa det som är nytt men innehållets tid när gammalt skall hittas
- 33.9.3 Bestäm vilken av sidans tider som används
- 33.9.4 Hantera kontinuerliga tider
- 33.9.5 Strukturera tid efter användarens dygn, inte efter klockan
- 33.9.6 Använd puffnotiserna för att bygga en tidsnavigation
- 33.10 Rubrik
- 33.11 Författare eller källa
- 33.12 Språk
- 33.13 Genre
- 33.14 Funktion
- 33.15 Geografi
- 33.16 Fysiska egenskaper & pris
- 33.17 Bild
- 33.18 Berättelse
- 33.19 Metafor
-
33.20 Social navigation
- 33.20.1 Undvik cirkelpopularitet
- 33.21 Vikt
- 33.22 Användarens historia
- 33.23 Sökning
- 33.24 Kombinerade teman
-
34 Sortering
- 34.1 Alfabete
- 34.2 Tid
- 34.3 Nummer
- 34.4 Rang
- 34.5 Förteckning
- 34.6 Slump
- 34.7 Databas(o)ordning
- 35 Urval
-
36 Topologi
- 36.1 Nät
- 36.2 Träd
- 36.3 Bok
- 36.4 Sökning
- 36.5 Flera topologier samtidigt
-
37 Bakåtknapp
- 37.1.1 Låt bakåtknappen fungera
- 37.1.2 Ändra inte sidorna på återfärden
-
38 Sökning
- 38.1.1 Webbplatsen bör ha sökning
- 38.2 Sökning utan konsekvens förvirrar
-
38.3 Bättre sökfunktion
- 38.3.1 Stavningskontrollera sökningen
- 38.3.2 Sök även på synonymer
- 38.3.3 Sökmotorn bör förstå böjningar
- 38.3.4 Sökningen bör göras på hela ord
- 38.3.5 Sökningen skall hitta sidor som innehåller minst ett av orden
- 38.3.6 Sökningen skall göras i alla på webbplatsen förekommande dokumenttyper
- 38.3.7 Sökmotorn skall klara av de speciella skrivsätt som är vanliga inom området
- 38.3.8 Sökmotorn skall vara okänslig för accenter och inte skilja mellan versaler och gemener
- 38.4 Bättre sökgränssnitt
-
38.5 Presentera sökresultatet
- 38.5.1 Ge sammanhang åt sökträffarna
- 38.5.2 Upprepa sökorden
- 38.5.3 Resultatsidan skall ha ett sökfält
- 38.5.4 Var hjälpsam när sökningen inte ger några träffar
- 38.5.5 Visa 50 träffar åt gången
- 38.5.6 Förladda de bästa träffarna
- 38.5.7 Visa bara väsentlig information i sökresultatet
- 38.5.8 Visa träffarna i relevans- och/eller tidsordning
- 38.5.9 Visa träffarna uppdelat på avdelningar
- 38.5.10 Styr vissa sökningar till bestämda sidor
- 38.5.11 Tipsa om andra webbplatser man kan söka på
-
39 Sökbarhet (sökmotoroptimering)
- 39.1.1 Uppmärksamma söktjänsterna på att webbplatsen finns
- 39.1.2 Varje sida bör handla om en sak
- 39.1.3 Titel och rubrik bör innehålla de viktigaste orden
- 39.1.4 Styr söktjänsterna till att söka i innehållet, inte i navigationen
- 39.1.5 Styr söktjänsterna bort från sidor du inte vill ha sökta
- 39.1.6 Märk länkar från användare så att söktjänster inte följer dem
-
40 Länkbarhet
- 40.1.1 Ge varje stycke ett ankare
- 41 Metadata
- 42 Sidtitel
-
43 Webbadress (url)
- 43.1.1 Webbadressen bör vara lätt att läsa och uttala
- 43.1.2 Webbadressen bör spegla webbplatsens struktur
- 43.1.3 Ge populära sidor en enklare webbadress
- 43.1.4 Låt aldrig en webbadress sluta fungera
- 43.1.5 Webbadressen bör inte vara teknikberoende
- 43.1.6 Webbadressen bör inte innehålla sessionsidentitet
- 43.2 Domännamn
- 44 Prenumeration via RSS och e-post
-
45 Navigation inom sidan
- 45.1.1 Länka till sidans topp
- 45.1.2 Ge långa sidor en sidinnehållsförteckning
- 45.1.3 Gör tabbordningen logisk och förutsebar
- 45.2 Kortkommandon
- 45.3 Genvägar på sidan
- 46 Innehåll som sträcker sig över flera sidor
-
47 Navigation mellan flera webbplatser
- 47.1.1 Se alla webbinitiativ samlat
- 48 Webbplatsens storlek
-
49 Inaktuellt innehåll
- 49.1.1 Rensa bort inaktuella sidor
- 49.2 När inaktuellt innehåll rensas ut
- 49.3 När inaktuellt innehåll finns kvar på webbplatsen
- 49.4 Arkiv
- 49.5 Rättelser
- 49.6 Versioner
-
50 Listor
- 50.1.1 Använd listkod för att skapa listor
-
50.2 Olika sätt att ordna en lista
- 50.2.1 Sortera listor
- 50.2.2 Låt användaren välja mellan olika sorteringar
-
50.3 Navigation i listor
- 50.3.1 Ge långa listor navigation
- 50.3.2 Gör det möjligt att se hela listan
- 50.4 Listor utan något innehåll
-
51 Tabeller
- 51.1.1 Tabeller skall konstrueras så att de är begripliga även när de läses upp som löpande text
- 51.1.2 Ge datatabeller en etikett
- 51.1.3 Ge datatabeller en sammanfattning
- 51.1.4 Gör tydliga rader och kolumner
- 51.1.5 Koppla datatabellens rader och kolumner till sina rubriker
- 51.1.6 Koda långa datatabeller så att de fungerar vid utskrift
- 51.1.7 Använd inte tabeller för layout
-
Interaktionsdesign / Använda
-
52 Formulär
- 52.1 Kontroller
- 52.2 Kryssruta
- 52.3 Radioknapp
-
52.4 Valbox
- 52.4.1 Håll valboxens alternativ korta, distinkta och inled med det som är mest relevant
- 52.4.2 Valboxar där inget alternativ skall vara förvalt kan inledas med en instruktion
- 52.4.3 Be inte användaren välja flera alternativ ur en valbox
- 52.4.4 Undvik långa valboxar
- 52.4.5 Gruppera och etikettera alternativen
- 52.4.6 Lägg populära alternativ först i långa valboxar
- 52.5 Vallista
- 52.6 Textfält
- 52.7 Flerradiga textfält
- 52.8 Lösenordsfält
- 52.9 Knapp
- 52.10 Skicka-knapp
- 52.11 Rensa-knapp
- 52.12 Avbryt-knapp
- 52.13 Aktionsknapp
-
52.14 Länk
- 52.14.1 Undvik länkar i formulär
- 52.15 Uppladdning av dokument
- 52.16 Etiketter och instruktioner
-
52.17 Grafisk design av formulär
- 52.17.1 Formulärets arbetsriktning skall vara från vänster till höger, uppifrån och ner
- 52.17.2 Använd inte för många olika sorters kontroller
- 52.17.3 Håll raka vänsterkanter
- 52.17.4 Gruppera och namnge formulärets delar
- 52.17.5 Gör kontroller inaktiva när de inte är meningsfulla
- 52.17.6 Högerjustera och avrunda numeriska fält
- 52.18 Obligatoriska uppgifter
-
52.19 Kontroll av inmatade uppgifter
- 52.19.1 Fria hellre än fäll vid kontroll av inmatade uppgifter
- 52.19.2 Tillåt mellanslag, snedstreck, plustecken och liknande tecken i nummer
- 52.19.3 När det blivit fel i formuläret, visa tydligt var och hjälp användaren göra rätt
- 52.19.4 Koppla samman kontroll och felmeddelande
- 52.19.5 Hjälp användaren rätta felet
- 52.19.6 Använd javascript för att kontrollera inmatningen medan den sker
- 52.20 Formulär trivs inte med navigation
-
52.21 Flersidiga formulär
- 52.21.1 Undvik att dela upp formulär
- 52.22 Välj rätt kontroller
- 52.23 Välj rätt flervalskontroll
-
53 Webbapplikationer
- 53.1 Några vanliga sätt att ordna webbapplikationer
- 53.2 Guide
- 53.3 Hjul
- 53.4 Piruett
- 53.5 Utan återvändo
- 53.6 Myndigheters e-tjänster
-
53.7 Användarvänlighet och tillgänglighet
- 53.7.1 Varje stycke information som användaren hanterar, skall vara möjlig för henne att skapa, hitta, läsa, ändra och ta bort
- 53.7.2 Om användaren kan skapa något skall hon kunna kontrollera att det blev rätt och kunna ångra eller ändra det
- 53.7.3 Be inte användare bekräfta sina handlingar utan gör det istället möjligt att ångra dem
- 53.7.4 När användaren matar in komplex eller omfattande information bör hon kunna pausa och spara
- 53.8 Webbapplikationer med multimediagränssnitt
-
54 Behörighet och identifiering
- 54.1 Roll
- 54.2 Kändhet
-
54.3 Session
- 54.3.1 Kom ihåg användaren länge
-
54.4 Autentisering (Inloggning)
- 54.4.1 Låt användaren själv välja sitt användarnamn och lösenord
- 54.4.2 Genererade lösenord bör skapas genom kombination av vanliga ord
- 54.4.3 Genererade lösenord bör vara korta och inte bestå enbart av siffror
- 54.4.4 Tvinga inte användaren att byta ut lösenordet med jämna mellanrum
- 54.4.5 Gör lösenord okänsliga för skillnaden mellan gemener och versaler
- 54.4.6 Gör det möjligt att byta användarnamn utan att förlora användarkontot
- 54.4.7 E-posta aldrig lösenord som användaren själv formulerat
- 54.4.8 Ge alternativa autentiseringsmetoder för användare som glömt sitt lösenord
- 54.4.9 Spara autentiseringen från session till session
- 54.4.10 Gör det lätt att bli glömd
- 54.4.11 Begränsa varifrån man kan använda webbplatsen
- 54.4.12 Autentisera inte innan eller mer än behörigheten kräver
- 54.4.13 Säkra pengarna istället för användarens identitet
- 54.4.14 Ge användaren ett sätt att logga ut
- 54.4.15 Lita inte på att användaren loggar ut
- 54.5 Användarkonto
- 54.6 Att skilja på människor och maskiner
- 54.7 Säkerhet och användarvänlighet
- 55 Kakor (cookies)
- 56 Felhantering
-
57 Nytt fönster
- 57.1.1 Undvik att öppna nya fönster
- 57.1.2 Ett fönster som återanvänds måste vara synligt
- 57.1.3 Förvarna om att ett nytt fönster kommer att öppnas, och ge en tydlig väg tillbaka
- 57.1.4 Öppna aldrig ett nytt fönster från en annan domän
- 57.2 Webbläsarens gränssnitt
- 57.3 Nya fönster som användaren öppnar
- 58 Tidsstyrning
-
59 Hastighet
- 59.1.1 Låt det inte ta mer än tio sekunder att börja använda sidan
- 59.1.2 Ladda viktiga delar av sidan först
- 59.1.3 Webbservern skall leverera sidan snabbt
- 59.1.4 Förladda sidor som användaren sannolikt går vidare till
- 59.1.5 Förbered webbplatsen för extrema belastningar
- 59.1.6 Prioritera användbarhet högre än snabbhet
-
52 Formulär
-
Förtroende
-
60 Tydlig avsändare
- 60.1.1 Det skall tydligt framgå vem som är utgivare till webbplatsen
- 60.1.2 Gör det lätt att komma i kontakt med organisationen som står bakom webbplatsen
- 60.1.3 Webbplatsens syfte bör vara tydligt
- 60.1.4 Ange vem som är ansvarig för webbplatsen
- 60.1.5 Ange vem som är ansvarig för sidan
- 60.1.6 Framhäv personen bakom informationen
- 61 Felfritt
- 62 Aktuellt och relevant
- 63 Respektera och skydda användarens integritet
-
60 Tydlig avsändare
- Tillgänglighet
-
E-handel
- 67 Snabbköpet - standardiserade produkter
-
68 Från köplust till köpbeslut
- 68.1 Letar
- 68.2 Värderar
-
68.3 Jämför
- 68.3.1 Ordna navigationen så användaren enkelt kan bläddra mellan olika närliggande alternativ
- 68.3.2 Gör det lätt att gå tillbaka till en produkt man tidigare besökt
- 68.3.3 Låt användaren vandra i kundvagnen
- 68.3.4 Låt användaren skapa jämförelsetabeller
- 68.3.5 Ge både snabba och djupa jämförelser
- 68.3.6span> Recensera produkterna
- 68.3.7 Gör det lätt att skriva ut produktbeskrivningen
-
68.4 Köpbeslut
- 68.4.1 Döp köpknappen till "Lägg i kundvagnen" eller "Köp"
- 68.4.2 Gör köpknappen framträdande
- 68.4.3 Ge en tydlig respons när användaren klickar på köpknappen
- 68.4.4 När användaren gjort sitt köp, visa vad hon gjort och passa på att sälja mer
- 68.4.5 Om användaren köper en produkt som redan finns i kundvagnen, varna henne
- 68.4.6 Ta inte tillbaka det som lovats ut
-
69 Kundvagn
- 69.1.1 Döp kundvagnen till "kundvagn" eller "varukorg"
- 69.1.2 Gör kundvagnen åtkomlig från alla butikssidor
- 69.1.3 Visa kundvagnen på alla butikssidor
- 69.1.4 Visa väsentliga uppgifter om innehållet i kundvagnen
- 69.1.5 Gör det lätt att ändra antalet av en produkt eller ta bort den helt
- 69.1.6 Sortera kundvagnen i den ordning saker lagts i den
- 69.1.7 Släng inte kundvagnen bara för att användaren tar en paus
- 69.1.8 Låt användaren spara produkter
- 69.1.9 Låt användaren skapa önskelistor
- 69.1.10 Låt användaren göra om kundvagnen till en offert
-
70 Kassan
- 70.1 Enkel kassa
- 70.2 Flersidiga kassor
-
70.3 Kassa med inloggning
- 70.3.1 Låt användaren välja mellan att vara gäst och inloggad
- 70.3.2 Spara användarens adress - men be henne bekräfta den innan den används igen
- 70.3.3 Om inte hela ordern kan skickas på en gång, låt användaren välja om hon vill ha delleveranser eller vänta
- 70.3.4 Gör en sammanställning av ordern
- 70.3.5 När affären är genomförd, bekräfta med ett kvitto
- 70.3.6 Skicka kvittot även som e-post
- 70.4 Kassa där sammanställning och betalning slagits samman
- 70.5 Kassa där betalningsinformation sparas tillsammans med adressen
- 70.6 Förenklade kassaprocesser
- 71 Resebyrån - anpassade produkter
- 72 Reservation
- 73 Betalning
- 74 Gåvor
-
75 Orderstatus och paketspårning
- 75.1.1 Låt användaren följa sin order
- 75.1.2 Låt användaren ändra sin order
- 76 Orderhistorik
-
77 Returer
- 77.1.1 Berätta hur man gör en retur
-
Teknik
-
78 HTML-kodning
- 78.1.1 Följ HTML-standarden
- 78.1.2 Använd den strikta varianten av HTML
- 78.1.3 Använd inte nedgraderade delar av HTML
- 78.1.4 Validera HTML-koden
- 78.1.5 Använd HTML-element utifrån betydelse
- 78.1.6 Gör HTML-koden så den fungerar även utan formatmallar
- 78.1.7 Använd inte HTML-text som symboler, pilar eller bilder
- 78.1.8 Markera i HTML-koden vilket språk som används
- 78.1.9 Använd webbservern, inte meta-taggar, för att eftersända
- 79 Formatmallar
-
80 Javascript
- 80.1 Fyra förhållningssätt
-
80.2 Tillgängligare javascript
- 80.2.1 Använd formatmallar istället för javascript
- 80.2.2 Använd inte javascript som förutsätter att användaren har mus
- 80.2.3 Ändra inte innehåll på sidan utan att ge användaren en möjlighet att bli uppmärksammad på detta
- 80.2.4 Flytta inte fokus
- 80.2.5 Använd händelsehanterare för att koppla javascript till länkar och formulär
- 80.2.6 Ge en alternativ text för webbläsare som inte klarar javascript
- 80.2.7 Använd den standardiserade dokumentobjektmodellen
-
81 Bildformat
- 81.1.1 Använd PNG för diagram och teckningar
- 81.1.2 Använd JPEG för foton
- 82 Webbläsare
-
83 PDF och andra dokumenttyper
- 83.1.1 Använd HTML, inte PDF eller andra dokumenttyper
- 83.1.2 Använd PDF som en tillgängligare alternativform av HTML-sidor
- 83.1.3 Använd dokumenttyper som har fria läsprogram för olika sorters datorer
- 83.1.4 Varje dokumenttyp skall ha en sida som presenterar den
- 83.1.5 Sätt en HTML-sida som ingång till PDF och andra dokument
- 83.1.6 PDF och andra dokument skall ha titel, metadata och tydligt filnamn
- 83.1.7 Gör PDF och andra dokument tillgängliga
- 84 RSS
-
78 HTML-kodning