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

PRODUKTION

2010 Thomas Mejtoft

Tillgänglighet och Användbarhet

2010-12-13 Thomas Mejtoft

3

• Tillgänglighet (Accessibility)

• Användbarhet (Usability)

Tillgänglighet och Användbarhet

2010-12-13 Thomas Mejtoft

4

• W3C – Web Accessibility Initiative (WAI)

– http://www.w3.org/WAI/

– http://www.w3.org/TR/WCAG10/

• Jakob Nielsen's Alertbox

– http://www.useit.com/alertbox/

Tillgänglighet och Användbarhet

2010-12-13 Thomas Mejtoft

5

• 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

– Unordered lists (<ul>, <li>) – Ordered lists (<ol>, <li>)

– Definition lists (<dl>, <dt>, <dt>)

• Kortkomandon

Tillgänglighet och Användbarhet

2010-12-13 Thomas Mejtoft

7

• Tangentbordsnavigering

– tabindex

Tillgänglighet och Användbarhet

<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>

2010-12-13 Thomas Mejtoft

8

• Validator

– http://wave.webaim.org/

Tillgänglighet

2010-12-13 Thomas Mejtoft

9

• 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ä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

Användbarhet (Usability)

2010-12-13 Thomas Mejtoft

11

• Utvärdera användbarhet genom användartester

– Representativa användare (t.ex. World of Warcraft och 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)

Användbarhet (Usability)

(Nielsen, 2003)

2010-12-13 Thomas Mejtoft (Krug, 2000, p. 144) 12

2010-12-13 Thomas Mejtoft

13

• 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)

• Bra navigationen för att öka användarvänligheten och tillgängligheten

• Grundmeny som alltid finns tillgänglig på webbplatsen

(Krug, 2006)

• ”Breadcrumbs”, för att skapa medvetenhet om var man befinner sig i sidstrukturen

Vanliga krav på användbarhet (1)

2010-12-13 Thomas Mejtoft

15

• Understrukna länkar för att visa vad som är länkar för de som har problem med att se färg

• Information om inte är länkar bör inte strykas under på webbplatsen

• Länkar som öppnas i ett egna fönster kommer att markeras med information om detta

• Rörelser, blinkningar och andra störande moment elimineras på webbplatsen för att öka tillgängligheten

(E-Nämnden, 2004)

Vanliga krav på användbarhet (2)

2010-12-13 Thomas Mejtoft

16

• Riktlinjer

– http://www.useit.com/alertbox/

– http://www.w3.org/WAI/

– http://www.w3.org/TR/WCAG10/

– http://www.statskontoret.se/upload/publikationer/2004/e200401.pdf

• Andvändbarhetstest

– http://www.inuse.se/anvandningstest/

• Validator

– http://wave.webaim.org/

Länkar

Solution. Indianapolis, IN: Wiley Publishing.

E-Nämnden. (2004). Vägledning 24-timmarswebben 2.0. Retrieved November 4, 2010, from http://www.statskontoret.se/upload/publikationer/2004/

e200401.pdf

Krug, S. (2000). Don’t Make Me Think! A Common Sence Approach to Web Usability. Indianapolis, IN: New Riders.

Krug, S. (2006). Don’t Make Me Think! A Common Sence Approach to Web Usability (2nd ed.). Indianapolis, IN: New Riders.

Nielsen, J. (2003) Usability 101: Introduction to Usability. Jakob Nielsen's Alertbox. Retrieved October 21, 2010, from

http://www.useit.com/alertbox/20030825.html

Nielsen, J. (2007) Top Ten Mistakes in Web Design. Jakob Nielsen's Alertbox.

Retrieved October 21, 2010, from http://www.useit.com/alertbox/9605.html

2010-12-13 Thomas Mejtoft

17