Användbarhet - konsten att bryta regler rätt

Jakob Nielsenwww.nngroup.com

Dagens agenda

• Vad är användbarhet? • Hur utvecklar ni en användbar webbplats? • Konkreta exempel? • Fyra dörrar?

Användbarhet / Usability

En skala

Viktigt

Verktyg

Kontrakt

Ej hugget i sten

Subjektivt

Vad är användbarhet?

• ISO 9241 • Användbarhet = ändamålsenlighet X effektivitet X

tillfredsställelse • Ändamålsenlighet = noggrannhet • Effektivitet = resursåtgång • Tillfredsställelse = frånvaro från obehag • Hänsyn ska tas till; uppgiften, sammanhang & användare

Kronox

Vad är användbarhet?

• Användbarhetsboken • Användbarhet = nytta X användarvänlighet

• Skatteverket • Aftonbladet • Facebook

• Ling Cars: http://www.lingcars.com

De fyra dörrarna

tillgängligheten förtroende

Användarorienterad design

• Samband mellan avsändare och besökare • Avsändare står gärna i fokus, ni ska skapa motvikt • Hur sätter man användaren i fokus? • Användarorienterad process

• ISO 9241-210 • Bjud in användaren tidigt • Hela tiden användaren i fokus

http://www.userfocus.co.uk/articles/iso-13407-is-dead.html

ISO 9241-210

1. Vad ska göras?

• Idé, syfte och målgrupp • Övergripande

• Vision • Mätbara mål

• Börja enkelt och utveckla allt eftersom

2. Lär känna användaren?

• Personer ur målgruppen • Metoder: Intervjuer, enkäter, fokusgrupper, iaktagelser m.m. • Bättre med ett fåtal användaråsikter än inga alls • Använd personas för att diskutera designaspekter • Användarens mål med att besöka webbplatsen

• Underhållen, information, e-handel o.s.v. • Designa efter målgrupp

3. Utforma webbplatsen

• Användbarhet = nytta x användarvänlighet, nyttan är utredd • Sätt nyttan i praktiken genom användarvänlig design

Enklare HTML

funktioner

4. Uppföljning

• Test eller sluttest/lansering • Behåll den höga kvaliteten på hela webbplatsen • Förändra en färdig produkt är en kostsam historia • Språket är viktigt

ObservationerUpplevelser

Data

?

?$$$

$$$

Tid

Färdig produkt

Övergripande

Detaljnivå

• I kontrast till en agil projektmetod

Vattenfallsmodellen

• Ytterligare en process • Vägskäl för att stämma av med kunden & målgruppen

Anvandbarhet.se

• Var är jag? Finns det jag söker här/kan det finnas här? • Hur tar jag mig dit jag vill? • Var har jag kommit? • Detta ser rätt bra ut men hur? • Är det sant kan jag lita på den här sidan? • Intressant finns det mer? • Hur tar jag mig tillbaka? • Hur är denna webbplats uppbyggd? • Hur hittar jag den artikeln som jag läste förra månaden?

Användarens 9 frågor

Konkreta användbarhetsfaktorer

• En grafisk profil fast för webben • Tar hand om användaren • Anger webbplatsens avsändare • Besökaren har ett syfte, undvik onödiga dekorationer, var

relevant • Funktionen styr formen (interaktionsdesign)

Webbprofil

• Text dominerar webben • Två behov: texten ska vara stor och texten ska vara överskådlig • Storleken anges oftast i px, % och em • Ge användaren möjlighet att ställa in textstorleken • Lägg fokus vid typografi istället för exakta sanningar

Textstorlekar

http://aftonbladet.se

• Tryck och skärm skiljer sig • Måste typsnittet vara installerat på användarens dator? • Verdana och Georgia är de två vanligaste för löptext och

specialutvecklade för visning på skärm • Typsnittet mindre betydelse vid stor text • Använd font-stack

Typsnitt

• 120% är standardinställning i webbläsarna • 130% - 150% brukar passa bättre för löptext/brödtext • Bredare spalt kräver större radavstånd • Testa alltid den valda typsnittet på målgruppen

Radavstånd

• Fri spaltbredd, spalten anpassar sig efter fönsterstorleken. • Låst spaltbredd, 50-70 tecken bred rekommenderas. Ingen

avstavning på webben så spaltbredden blir i praktiken oftast mindre.

• Spaltbredd i em gör så att antal tecken per spalt bibehålls om textstorleken förändras

• Minimum och maxbredd på spalten • Centrerad och högerjusterad text är svårläst (ojämn

vänsterkant)

Spaltbredd

• Kan göras som bilder eller som kod • Används för att sökoptimera sidan • Läsaren skannar innehållet, rubriker ger struktur • Innehållshanteringssystem, CMS, • Använd Google web-fonts

Rubriker

• En bild säger mer än tusen ord • Bilder förhöjer stämningar, förklarar, personifierar, förtydligar,

snabba att tolka för användaren • Sidor blir tyngre med bilder • Använd bildtexter, ökar värdet på bilder

• Bildtexter tillsammans med rubriker är de mest lästa texterna på nätet

• Använd alt-texter och longdesc • Även title kan vara bra

Bilder

• Lämpliga i galleri • Bättre översikt • Förminska och/eller beskär, huvudpoängen är att man ser vad

det är

Thumbnails

• Gör inte sidan beroende av färgnavigering, tänk på färgblinda • Hög kontrast mellan förgrund och bakgrund • Kontrast på bilder • Färger skiljer sig mellan olika skärmar och enheter, även

skillnader i photoshop och webbläsare förekommer • Tänk på att blå text associera till länkar • Vad är webbsäkra färger

Färghantering

• Kombinera symboler med text, används för att förtydliga • Använd symboler på ett konsekvent sätt • Symboler ska ”symbolisera” en funktion

Symboler

• Har tre uppgifter • Representerar webbplatsen • Ange avsändaren • Navigation till ingångssidan

• Tänk på att göra olika versioner till webben gentemot tryck

Logotyp

• Var försiktiga med epilepsiframkallande blinkningar • Var försiktig med animationer överlag, stör lätt användaren • Använd inte animationer för att fånga uppmärksamhet

Animationer

• Använd för att tydliggöra, förklara och roa • Ge användaren valmöjligheten att starta och stoppa • Tillgängligheten kan vara begränsad • Använd ljud med försiktighet, irritationsmoment för många • Spela ljud endast en gång

Multimedia

• Tänk på att webbplatsen kommer öppnas på olika enheter med olika förutsättningar • Skärm, tänk på bredden (max 1000px) • Uppkoppling

• Olika webbläsare • Explorer • Safari • Firefox • Chrome

• Print, extern CSS för utskrift

Enheter

Om vi har tid!

• Ge ögat en startpunkt • Led vidare från det viktigaste till det mindre viktiga, skapa

hierarki • Håll ihop det som hör ihop • Håll isär det som inte hör ihop • Var konsekventa

Den röda tråden

• Vad var det för webbplats? • Vart tittade ni först? • Upptäckte ni information om högskoleprovet? • Upptäckte ni Hitta schema- och itslearning-länken? • Vill studera och är student?

Den röda tråden

• Fråga användaren så löser det sig • Ja men användarna lär sig • Vi som utvecklar webbplatsen vet redan alla fel, vi jobbar med

det varje dag • Användbarheten ökar utvecklingskostnaderna och försenar

projektet • Ha självförtroende men var lyhörda och öppna för förändring

Myt eller sanning

Sammanfattning

• Vad är användbarhet? • Hur utvecklar ni en användbar webbplats? • Konkreta exempel? • Fyra dörrar?

Läshänvisningar

• Kapitel 5 i HTML & CSS-boken; 109-144 • Introduktion till CSS • Länkar :

• http://www.anvandbart.se/ab/ • http://anvandbarhet.se/start • https://www.youtube.com/watch?v=sELOUAmFHjA • http://www.webdesignerdepot.com/2013/03/serif-vs-sans-

the-final-battle/ • http://www.n-solut.de/service/user-interface-design.php?

lang=en