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 som Wikipedia Google documents, Picasa, Last.fm. 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.
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
Exempel - Kurslista
Exempel - Utan CSS
Exempel - HTML
Exempel - XML
Hur används webben? Webbsidor läses inte, de skummas! Således, designa för att de ska skummas - 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
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
Designprinsiper Ta bara med den info som är allra viktigast Förändring Uppdatera ofta! 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 Korta nedladdningstider Ovana användare Inte alltid sant
Navigering 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 Visa var användaren kan ta sig Sidkarta (Site map) Använd med förstånd Landing page ALLT behöver inte åskådligöras Sökning med feedback Var konsekvent Använd hierarkier
Exempel www.transportnytt.se Hur ska vi visa att användaren kommit till en ny sajt? Öppna ett nytt fönster Lägga till en markör på länken Enbart markera förändringen genom gen grafiska utformningen När är det viktigt?
Navigationsstöd Den grafiska profilen Visar vilken sajt du är på Breadcrumb trail Navigeringsmenyer Topmeny (tabbar) Högermeny Vänstermeny Kartor Site maps Fysiska kartor
Sajtdesign Behåll sidhuvud, sidfot och grafisk profil genom hela sajten Notera att en sajt kan vara utspridd över många servrar och många administratörer Om förändringar i den grafiska profilen görs ska det finnas ett motiv till det Umu olika institutioner, olika färger Olika typer av sidor Hemsidan Delsidan Sidkarta (site map) Landningssida (landing page)
Förstasidan Besvara frågan Vad är syftet med den här sajten? Vem står bakom sidan? Var börjar jag? Sökfält Splash screens must die
Site map
Site map
Landing page En landningssida eller landing page är en sida optimerad för att nå via sökmotor eller reklambanners Landningssidor är skapade för en specifik kundkategori besökare, som t.ex. sökt på vissa sökord Landningssidor är således en typ av sökmotoroptimering Landningssidan har till uppgift att få användaren att känna att man hamnat rätt Det finns även helt kommerciella landningssidor avsedda att locka användaren att fylla i information i ett formulär och i förlängningen köpa något
Landing page
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)
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
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 laddningstid På grund av läsbarhet (t.ex. Bilndskrift) Använd alt-taggen På grund av skalbarhet På grund av sökbarhet
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
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 Utforma gränssnittet så att det inte går att göra fel. Felaktig inmatning av personnummer kan hanteras genom alternativ tolkning och snabb feedback
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.
Länkar Understrykning Mycket stark konvention Varianter För navigation För aktion ( köp, skicka ) Associativa ( se även ) Färgkodning Detta ser ut som en länk Använd nyckelord som länk, inte klicka här
Exempel Tydlig Mindre tydlig Klicka här
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 Var är jag? Vad kan jag göra här? Var kan jag ta mig?
Webbdesign för speciella behov
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)
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.
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, javaaplets, Flash-aplets mm.
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.
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
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
Referenser Don t make me think Steve Krug Designing Web Usability User-Centered Website Development User-Centered Web Design