Föreläsning om användbarhet i kurserna Webbpublicering och Webbproduktion på Medieteknik, Malmö Högskola.

1. Användbarhet
- konsten att bryta regler rätt

2. Jakob Nielsen
www.nngroup.com

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

4. En skala
Viktigt
Subjektivt
Användbarhet / Usability
Verktyg
Kontrakt
Ej hugget i sten

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

6. Vad är användbarhet?
• Användbarhetsboken
• Användbarhet = nytta X användarvänlighet
• Skatteverket
• Aftonbladet
• Facebook
• Ling Cars: http://www.lingcars.com

7. De fyra dörrarna
tillgängligheten förtroende

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

10. ISO 9241-210

11. 1. Vad ska göras?
• Idé, syfte och målgrupp
• Övergripande
• Vision
• Mätbara mål
• Börja enkelt och utveckla allt eftersom

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

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

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

17. Observationer
Upplevelser
Data
$$$ ?
?
$$$
Tid
Färdig produkt
Övergripande
Detaljnivå

18. Vattenfallsmodellen
• I kontrast till en agil projektmetod

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

20. Användarens 9 frågor
• 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?

21. Konkreta
användbarhetsfaktorer

22. Webbprofil
• 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)

24. Textstorlekar
• 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

26. Typsnitt
• 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

27. Radavstånd
• 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

29. • 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

30. Rubriker
• 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

31. Bilder
• 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

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

33. Färghantering
• 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

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

35. • Har tre uppgifter
Logotyp
• Representerar webbplatsen
• Ange avsändaren
• Navigation till ingångssidan
• Tänk på att göra olika versioner till webben gentemot tryck

36. Animationer
• 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

37. Multimedia
• 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

38. Enheter
• 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

39. Om vi har tid!

40. Den röda tråden
• 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

42. 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?

43. Myt eller sanning
• 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

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

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