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

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

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

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

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

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

Att styra uppmärksamhet Storlek anger viktighet Alltid kontrasten som har betydelse www.aftonbladet.se 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

Visuell hierarki MDI, Webb och speciella behov 7

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

Text Max 55-65 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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