WEBB PRODUKTION. Tillgänglighet och Användbarhet Thomas Mejtoft. Thomas Mejtoft

Transkript

1 WEBB 2010 PRODUKTION Tillgänglighet och Användbarhet

2 Tillgänglighet och Användbarhet Tillgänglighet (Accessibility) Användbarhet (Usability) Tillgänglighet och Användbarhet W3C Web Accessibility Initiative(WAI) Jakob Nielsen's Alertbox

3 Tillgänglighet och Användbarhet Skapa en korrekt struktur av olika nivåer i koden <h1>, <h2>, <p>... etc Beskrivningar av bilder <h1>produkter</h1> <p>här finns en lista på de produkter som vi erbjuder</p> <h2>verktyg</h2> <p>hammare, såg, skruvmejsel</p> <h2>förbrukningsmaterial</h2> <p>spik, skruv, gipsskivor</p> <img src="bilder/umu_logo.jpg" alt="umeå Universitet (logo)" /> Skapa listor Tillgänglighet och Användbarhet Unordered lists(<ul>, <li>) Ordered lists(<ol>, <li>) Definition lists (<dl>, <dt>, <dt>) Kortkomandon accesskey <div id="meny"> <ul> <li><a accesskey="s" href="introduktion.html">startsida</a></li> <li><a accesskey="p" href="produkter.html">produkter</a></li> <li><a accesskey="t" href="tjanster.html">tjänster</a></li> <li><a accesskey="k" href="kontakt.html">kontaktinformation</a></li> </ul> </div>

4 Tillgänglighet och Användbarhet Tangentbordsnavigering tabindex <form method="get" action="/search_local" id="local"> <input type="text" name="q" size="45" maxlength="100" tabindex="1" /> <input type="submit" name="submit" value="sök lokalt" tabindex="3" /> </form> <form method="get" action="/search_web" id="web"> <input type="text" name="q" size="45" maxlength="100" tabindex="2" /> <input type="submit" name="submit" value="sök på webben" tabindex="4" /> </form> Tillgänglighet Validator

5 Användbarhet (Usability) Definition Lärbarhet(Learnability): Hur lätt är det att utföra grundläggande uppgifter första gången man möter designen? Effektivitet(Efficiency): När användare har lärt sig designen, hur snabbt utför de uppgifter? Minne(Memorability): När användarna återvänder till designen, efter att inte använt den på ett tag, hur lätt kan de få tillbaka den skicklighet de hade? Fel(Errors): Hur många fel gör användarna, hur allvarliga är dessa fel och hur lätt de kan komma förbi de fel som de gör? Tillfredställelse(Satisfaction): Hur trevligt är det att använda designen? (Nielsen, 2003) Användbarhet (Usability) Användbarhetstest Ett snabbt och enkelt sätt att hitta svårigheter i en webbplats Kan vara strukturerade intervjuer fokuserade på specifika egenskaper i en prototyp eller existerande webb Deltagare ur målgruppen utför en serie uppgifter Anteckningar/ljudupptagningar/skärminspelningar hjälper sedan till att identifiera missförstånd, misstag och åsikter Många försöksobjekt ger en bättre bild över hur webbplatsen kommer att uppfattas Keeping testing simple so you do enough of it. (Krug, 2000, p. 138)

6 Användbarhet (Usability) Utvärdera användbarhet genom användartester Representativa användare (t.ex. World ofwarcraftoch Lantbrukarnas Riksförbund har olika typer av målgrupper) Utföra uppgifter som är vanliga och viktiga för webbplatsen Registrera och utvärdera (t.ex. direkt observation, användarlabb eller screen recorder) (Nielsen, 2003) (Krug, 2000, p. 144)

7 Användbarhet (Usability) Vanliga misstag i användbarhet Dåliga sökfunktioner (accepterar inte fel från användaren) PDF-dokument för skärmläsning Inte visa vilka länkar som redan besökta (ändrar inte färg) Stora textmängder som är svåra att överblicka Inte möjligt att andra typsnittsstorlek (t.ex. genom CSS) Titel som gör det svårt att förstå innehållet på sidan genom sökmotorer Viktiga budskap som är utformade som reklam (användare är bra på att ignorera reklam) Inkonsekvent design eller design som inte följer konventioner Pop-up fönster (upplevs irriterande och idag har de flesta webbläsare funktioner som gör att detta inte fungerar) Inte besvara det som användaren vill ha svar på!! (Nielsen, 2007) Vanliga krav på användbarhet (1) Bra navigationen för att öka användarvänligheten och tillgängligheten (Duckett, 2005) Grundmeny som alltid finns tillgänglig på webbplatsen (Krug, 2006) Breadcrumbs, för att skapa medvetenhet om var man befinner sig i sidstrukturen (E-Nämnden, 2004; Krug, 2006) Möjligt att komma tillbaka till första sidan från alla sidor på webbplatsen (E-Nämnden, 2004) Logisk tabbordningför att möjliggöra navigering utan pekverktyg för funktionshindrade (E-Nämnden, 2004)

8 Vanliga krav på användbarhet (2) Understrukna länkar för att visa vad som är länkar för de som har problem med att se färg (E-Nämnden, 2004) Information om inte är länkar bör inte strykas under på webbplatsen (E-Nämnden, 2004) Länkar som öppnas i ett egna fönster kommer att markeras med information om detta (E-Nämnden, 2004) Rörelser, blinkningar och andra störande moment elimineras på webbplatsen för att öka tillgängligheten (E-Nämnden, 2004) Länkar Riktlinjer Andvändbarhetstest Validator

9 Referenser Duckett, J. (2005). Accessible XHTML and CSS Web Sites, Problem Design Solution. Indianapolis, IN: Wiley Publishing. E-Nämnden. (2004). Vägledning 24-timmarswebben 2.0. Retrieved November 4, 2010, from e pdf Krug, S. (2000). Don tmake MeThink! A Common SenceApproach toweb Usability. Indianapolis, IN: New Riders. Krug, S. (2006). Don tmake MeThink! A Common SenceApproach toweb Usability (2nd ed.). Indianapolis, IN: New Riders. Nielsen, J. (2003) Usability 101: Introduction to Usability. Jakob Nielsen's Alertbox. Retrieved October21, 2010, from Nielsen, J. (2007) Top Ten Mistakes in Web Design. Jakob Nielsen'sAlertbox. Retrieved October 21, 2010, from