Användbarhet för webben MDI, Webb och speciella behov 1

Storlek: px

Starta visningen från sidan:

Download "Användbarhet för webben MDI, Webb och speciella behov 1"

Lisbeth Hedlund
för 7 år sedan
Visningar:

1 Användbarhet för webben MDI, Webb och speciella behov 1

2 Hur används webben? Webbsidor läses inte, de skummas! Således, designa för att de ska skommas scanability Vi gör inga optimala val, vi söker något som är tillräckligt bra Användare tenderar att klicka på första bästa länk som verkar leda till det de söker, de fortsätter inte att läsa tills för att avgöra om det finns någon bättre. Vi skapar mycket enköla mentala modeller Se till så att användaren hittar rätt trots sin enkla mentala modell. MDI, Webb och speciella behov 2

3 Slå på ljuset! En väl utformad hemsida är som en väl belyst butik innehållet syns bättre! Användarens tillit, intresse mm. ökar med bättre design. MDI, Webb och speciella behov 3

4 Andra aspekter av webbdesign Utveckling och underhåll Sidans struktur, utseende och framtoning måste tåla kontinuerlig förändring Sidan måste vara utformad på ett sätt som gör den enkel och billig att förändra MDI, Webb och speciella behov 4

5 Navigering Hållpunkter - Visa var användaren befinner sig Visualisera en lämplig position i användarens mentala modell, inte sidans faktiska position på webbservern Naturligtvis viktigt att mappning mellan modell och verklighet håller En sida kan ofta nås från många olika håll Via navigeringsstruktur, via en sökmotor, via djuplänk Överblick Visa var användaren kan ta sig Sidkarta (Site map) Använd med förstånd ALLT behöver inte åskådligöras Var konsekvent, använd hierarkier och tänk på representationsrymderna! MDI, Webb och speciella behov 5

6 Att styra uppmärksamhet Storlek anger viktighet Alltid kontrasten som har betydelse Närhet Visuellt nära Samma stil (font, färg mm) Rama in Anfang drar till sig uppmärksamhet se upp med läsbarhet MDI, Webb och speciella behov 6

7 Visuell hierarki MDI, Webb och speciella behov 7

8 Typografi Typsnitt utan seriffer Tillräckligt stora bokstäver Textstorleken bör gå att anpassa Färger Mörk text på ljus botten Tvärtom endast mycket begränsat tex för att markera knappar (sourceforge.net) MDI, Webb och speciella behov 8

9 Text Max teckens radbredd Enkelhet och kort Ta bort onödiga ord Hälften av motsvarande tryckt text Första meningen viktigast En idé per stycke Skrollning Vid rätt tillfällen Exempel javadoc MDI, Webb och speciella behov 9

10 Bilder Bilder högt upp på sidan bör synas åtminstone delvis utan skrollning Bildtexter läses oftare än brödtext Använd inte bilder där det går att använda text På grund av laddningshastighet På grund av läsbarhet / skalbarhet MDI, Webb och speciella behov 10

11 Rubriker Kort och bra beskrivning 2-6 ord Uteslut en och ett (the på engelska) Informativa utan sitt sammanhang plain language Första ordet informativt MDI, Webb och speciella behov 11

12 Instruktioner Använd inte instruktioner! Användaren läser dem inte! I gränslandet mellan instruktion och navigeringshjälpmedel faller tex. site-maps. Utforma svåra interaktioner som steg-för-steg guider Dvs, begränsa antalet möjligheter till en början MDI, Webb och speciella behov 12

13 Sajtdesign Behåll sidhuvud, sidfot, bakgrund och grafisk profil genom hela sajten. Notera att en sajt kan vara utspridd över många servrar och många administratörer Förstasidan Var börjar jag? Besvara frågan Vad är syftet med den här sajten? Splash screens must die MDI, Webb och speciella behov 13

14 Konventioner och Metaforer Uppfinn inte hjulet igen Var innovativ med förstånd En ny ovanlig design måste vara betydligt bättre än en gammal bekant för att vara berättigad. Se till att användaren känner igen sig Ett bokningssystem ska se ut som ett bokningssystem, en e- handel som en e-handel och en sökmotor som just en sökmotor. Google vs MSN Om sidan innehåller flera saker bör uppdelningen vara mycket tydlig. MDI, Webb och speciella behov 14

15 Länkar Understrykning Mycket stark konvention Varianter För navigation För aktion ( köp, skicka ) Associativa ( se även ) Färgkodning Använd nyckelord som länk, inte klicka här MDI, Webb och speciella behov 15

16 Exempel Tydlig Mindre tydlig Klicka här MDI, Webb och speciella behov 16

17 Sammanfattning Don t make me think Även namnet på en mycket bra bok av Steve Krug Less is more Gör varje sida självförklarande MDI, Webb och speciella behov 17

18 Webbdesign för speciella behov MDI, Webb och speciella behov 18

19 Speciella behov Traditionella handikapp Synnedsättning / Färgblindhet / Total blindhet Dyslexi Rörelsehinder Kognitiva handikapp så som Autism, ADHD 10-20% av befolkningen har speciella behov i någon form Speciella omständigheter Handskar gör oss klumpiga Händerna kan vara upptagna av annat Dålig / liten display (tex. mobilder) MDI, Webb och speciella behov 19

20 Synnedsättningar Tydlig kontrast mellan text och bakgrund Gör texten skalbar Dvs, använd relativa storleksmått i css så som small, medium, large. Definiera storlekar på figurer, tabeller mm i em hällre än px. Gör en antassad stilmall för synskadade där kontraster och fonter är extremt stora CSS-mallar kan även användas för att anpassa utseendet på en sida beroende på vilken webbläsare som används. MDI, Webb och speciella behov 20

21 Webbsidor för blinda En sida måste gå att läsa med en punktdisplay och talsyntes Använd korrekt html-element (tex. H1 för förstarubrik) Gör sidans struktur tydlig även i html Placera innehållet i rätt ordning även i kod Tänk på att bilder inte kan läsas av tex. en talsyntes Detta gäller i viss mån även pdf-dokument, java-aplets, Flashaplets mm. MDI, Webb och speciella behov 21

22 Beskrivningstaggar Alt-attributet Alt-taggen ersätter en bild som inte kan visas, tex. vid läsning med talsyntes men även vid tolkning av en sökmotor. Dekorationsbilder förses med tom ALT-tag Title-attribut Title-taggen ger möjlighet att sätta en förklarinig på alla element, tex. en länk. MDI, Webb och speciella behov 22

23 Hörsel Ljud bör genomgående användas sparsamt på webbsidor, och när det används bör det inte vara enda källan till info. Tex. varningssignaler Videopresentation textade MDI, Webb och speciella behov 23

24 Kognitiva problem Särskilt fokus på Struktur Ordval Omfattning Dyslexi Tydlig indelning många rubriker Gör sidan sökbar, både med sökmotor och med webbläsarens sökverktyg. Autism / Adhd Visa inte stora textmassor Möjliggör för användaren att kontrolera vad som är synligt MDI, Webb och speciella behov 24

25 Rörelsehinder Musoberoende interaktion Specialanpassad inmatning MDI, Webb och speciella behov 25

26 Referenser Don t make me think Steve Krug Designing Web Usability User-Centered Website Development User-Centered Web Design MDI, Webb och speciella behov 26

27 Varför är webben extra viktig? Användningen av webbaserade aplikationer ökar mycket kraftigt och håller i vissa fall på att ersätta vanliga datorprogram. Webmail, Kallendrar, uppslagsverk som Wikipedia Google documents, Picasa, Google maps. Avståndet mellan utvecklare och användare är mycket litet Tydlig ram för design Webbläsaren Webbsidor ser olika ut på olika datorer Webbplatser förändras kontinuerligt Tänk på den evolutionära vs. revolutionära utvecklingen fr. Användbarhetsföreläsningen. MDI, Webb och speciella behov 27

28 Teknologier HTML/XHTML Beskriver sidans innehåll CSS - Cascading Style Sheets Beskriver sidans utseende Ofta finns ytterligare underliggande strukturer Databas -> Webbserver -> XML + XSL -> XHTML -> CSS -> Färdig sida JavaScript/AJAX Sidan genereras I webbläsaren med javascript. Sidan kan kommunicera med webbservern utan att behöva laddas om. Ex. Prisjakt.se MDI, Webb och speciella behov 28

Relevanta dokument

Användbarhet för webben

Användbarhet för webben Varför är webben extra viktig? Användningen av webbaserade aplikationer ökar mycket kraftigt och håller i vissa fall på att ersätta vanliga datorprogram. Webmail, Kallendrar, uppslagsverk