HT23 - DA106A - Användbarhet (2)

1. Användbarhet
Del 2

3. Malmö stations dörrar…
Hur tänkte dem?

5. Föreläsningar
1. Användbarhet – Generellt
2. Användbarhet – Inriktning IT

6. Vad är användbarhet?

7. ”Något som är enkelt
att använda”

8. Vad är användbarhet?

9. Definition av användbarhet
“The extent to which a product
can be used by specified users to
achieve specified goals with
effectiveness, efficiency, and
satisfaction in a specified context
of use” (ISO)

10. Definition av användbarhet
Använd-
barhet
Lätt att
lära Effektiv
Ändamåls
-enlig
Fel-
tolerans
Engage-
rande

11. Definition av användbarhet
• Effektivitet
o Rätt funktionalitet
o Stödjer användarens
arbetsuppgifter
o Lätt att lära och komma ihåg
• Produktivitet
o Gör sällan fel
o Klarar många arbetsuppgifter
o Snabb
• Nöjda användare
o Kanske rent av kul
o Bra till mods
o Ej ohälsosamt
o Orsakar inte stress
o Orsakar inte arbetsskador
• Säkerhet
o Användarna kan inte ”förstöra”
av misstag
o Man kan ångra sig

12. Varför användbarhet?
Intern lönsamhet
 Ökar produktiviteten
 Ökar trivseln
 Minskar felen
 Minskar kostnader (support, utbildning m.m.)
 Minskar arbetsskador, vantrivsel
Extern Lönsamhet
 Ökar försäljningen
 Nöjda kunder
 Minskar support- och utvecklingskostnader

13. Gestaltlagar
Närhetslagen
Likhetslagen
Kontinuitetslagen
Figur-bakgrundslagen

14. Närhetslagen
 Saker som ligger nära varandra uppfattar
vi som att de hör ihop.

15. Likhetslagen
Saker som liknar varandra uppfattar
vi som att de hör ihop.

16. Kontinuitetslagen
 Vi strävar efter att fullfölja
mönster för att skapa
helheter.

18. Vi söker efter mönster

19. Vi söker efter mönster

20. Vi letar efter mönster
Rotmos
Äppelmos
Potatismos
Plåttermos
Lingonmos

22. Vad är detta?

23. Vad är detta?

24. Användbarhet - IT
Samma principer som vi gick igenom
förra veckan
Gränssnitt i fokus

25. Användbarhet för vem?

31. Hög användbarhet
märks inte…

33. Return of investment
Vad tjänar vi på att
investera i användbarhet?
Är det värt det?

35. Introduktion till användbaret
för webben

36. Hur upplever användare en
webbplats?

37. Vi letar aktivt efter det vi söker

38. Hur upplever användare en
webbplats?
 Hur läser användare webben?
 79% läser inte, de scannar
 Bara 16% läser delar av sidan ord-för-ord
 Under ett normalt besök, hur lite läser
användaren?
 Som mest 28% av orden
 Mer troligt 18% av orden
 Varför scannar vi istället för att läsa?
 Det är ”jobbigt” att läsa på en skärm
 Det går snabbare att scanna
 Det finns många sidor som konkurrerar om användarna

39. Heat maps

40. Så vad bör vi tänka på? – När
användare scannar sidor.
Markera nyckelord
Användbara rubriker och
underrubriker
Använd listor
En ”idé” per paragraf (ofta läses bara
de första orden i en paragraf)
Använd färre ord i bredd jämför med
”vanlig skrift”

42. Vi testar oss fram
Testar olika alternativ
Testar att söka
Vem läser manualer först?
Det är inte farligt att göra fel – eller
rättare sagt, det ska inte vara farligt
att göra fel.

43. Vi nöjer oss även med en
icke-optimal lösning
Vi har ofta bråttom
Att gissa fel är inte ”farligt”
Otydliga sidor ger oss inte mycket val
Det är roligare att gissa

44. Användare använder
tjänster != förståelse
 Det är inte viktigt för användare hur det
fungerar, utan att det fungerar
 Fungerar något håller vi fast vid det,
även om det är optimalt

45. Hierarki - Storlek
Mest Viktigt
Mindre viktigt
Minst viktigt

46. Relaterade saker ska synas
tillsammans

47. Visuellt nästlade delar visar vilka
delar som tillhör vad

48. Konventioner/standarder
 Som regel blir konventioner till endast om
de fungerar
 Gör det enkelt för användaren att går
mellan sidor och känna igen sig
 Bra för utvecklare som riktlinjer då de är
utprovade metoder. Dessutom behöver
man inte uppfinna hjulet igen.

49. Dela upp layouten i delar
Så att användaren vet
1). Vad som är vad
2). Vad som är ”viktigt”
3). Vad som kan ”ignoreras”

50. Vad är klickbart?
Ser ut som en knapp
Muspekaren blir en ”hand”

51. Antal klick
- Det gyllene måttet?
Ju färre klick, ju bättre?

52. Språk
 Rätt språk/terminologi för målgruppen
 Korrekt språk
 Koncist
 Extra viktigt vid navigation och
informationssökning

53. Minimera ”störningar”
För mycket, dåligt strukturerad
information
Förvirrade formgivning av
webbplatsen
Less is more

55. Information Overflow
 Problem - För mycket onödig text på webben
 Gör sidor mindre förvirrande/störande
 Ger mer användbart innehåll
 Gör sidor kortare
 Användare har inte tid för ”small talk”

57. Instruktioner i överflöde
Många instruktioner är onödiga
Gör självförklarande istället för ”small
talk”
Använd t.ex. knappar/drop down-
menyer/checkboxar för att visa
användaren vad du vill ha för svar

59. Hitta på en webbplats
Hittar inte användarna runt på en
webbplats så kommer den inte att
användas.

60. Navigation
1. Vi letar efter något
2. Vi väljer om vi vill fråga (söka)
eller leta själva.

61. Sök-/bläddraprocess

62. Oklarheter kring webbplatser
Vi vet inte hur stora/små de är från
utsidan
Oklart om vilken väg vi ska ta
Oklart var vi är någonstans

67. Gamla vs. Nya besökare

69. Navigation

70. Fördelar med navigation
Ger oss något att ”hålla oss fast vid”
Berättar var vi är
Berättar hur vi ska använda en sida
Ger oss förtroende i de som byggt
den

71. Global Navigation
 ”Don’t look now, but i think it’s following us”
 Alltid tillgång till huvudsektionerna
 Ger trygghet till användaren

72. Var är vi?
Markerade menypartier
Brödsmulor
Rubriker

73. Flikar som metafor

74. Flikar – För tydlig struktur
 Självförklarande
 Svåra att missa
 Stilrena
 Illustrerar fysik plats

75. Trunk test
1. Logotyp
2. Global navigation
3. Lokal navigation
4. Rubrik
5. ”Du är här”-indikator
6. Sökruta

76. Att göra ”lagom” mycket

77. Användbarhet
Mer än bara grafiskt gränssnitt

78. The elements of user
experience

79. Vad är UX
En persons känsla för en produkt
En helhetsupplevelse
Subjektivt

81. En snygg sida är inte alltid
användbar
 Tydlig syfte – Vad är webbplatsens
strategi?
 Vad kan man göra – Vilka funktioner
finns?
 Struktur – Hur ska funktionerna fungera?
 Skelett – Hur är sidans upplägg/layout?
 Ytan – Den grafiska profilen.

82. Elementen

83. The Strategy Plane
Vad vill vi göra?
Vilka behov finns från
användarna?
Vilka mål har vi?

84. The Scope Plane
 Vilka funktioner ska finns?
 Vilket innehåll ska finnas?

85. The Structure Plane
 Hur ska webbplatsen fungera?
 Hur ska webbplatsen interagera
med användarna?
 Hur ska användarnas behov bli
besvarade?
 Hur ska informationen stuktureras?

86. The Skeleton Plane
Webbplatsens upplägg
Informationsdesign, hur
ska allt hänga ihop
(wireframes)
Grundläggande layout
Navigationslayout

87. The Surface Plane
 Visuell design, och allt vad
det innebär.

88. Skapa en webbplats med
fokus på användarna
Hur går det till?

89. Vad ska göras? - Syfte
 Vad är målet med webbplatsen
 Hur ska vi kontrollera att målen
uppnåtts? Skapa en lista som är mätbar.
 Tänk på att målen kan komma att
förändras eller blir flera. Det är naturligt i
en utvecklingsprocess.

90. Vem är användarna?
Viktigt att förstå användarna – De är
ju de som ska använda systemet
sedan.
Metoder för att förstå användarna:
- Intervjuer
- Enkäter
- Fokusgrupper
- Gillar/ogillar

91. Användarnas röst
Det behöver inte vara samma
användare som är med genom hela
projektet, utan användarna kan
delas in i olika grupper.
Slutanvändare
Referensgrupp
Domänexperter
Användbarhetsexperter

92. Iterativ utformning

93. Hur mäter man
användbarhet?

94. Att mäta rätt sak?

95. Att mäta på rätt sätt?

96. Vem ska vi testa
 Viktigt att testa relevanta personer
 Akta sig för felkällor:
- Val av testperoner (slumpvis valda)
- Bortfall
- ”Valfria” undersökningar
 Viktigt för rapporten (läsarna) att veta
vilka testpersonerna är

97. Heuristik
En metod som bygger på att man
enligt:
- Expertutlåtanden
- Tumregler
- Beprövade riktlinjer
- Kvalificerade gissningar
utvärderar ett system

98. Om heuristisk utvärdering
"Heuristic Evaluation", in Usability Inspection Methods, edited by J. Nielsen and R. Mack, John Wiley and Sons, Inc., 1994
 Use a team of evaluators
 One evaluator => between 20% and 51% of the problems
 Two evaluators => can identify over 50 % of the problems
 Three evaluators => can identify over 60 % of the problems
 The curve flattens after five evaluators; it would take more then 15 evaluators to identify 90% of
the usability problems
 The evaluators should do their evaluations independently of each other and only compare
results after each of them has looked at the design and written his/her evaluation report

99. Shneiderman’s 8 Golden
Rules (1987):
1. Strive for consistency
2. Enable frequent users to use shortcuts
3. Offer informative feedback
4. Design dialogs to yield closure
5. Offer error prevention and simple error
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load

100. Norman’s 7 Principles (1988):
1. Use both knowledge in the world and knowledge in
the head.
2. Simplify the structure of tasks.
3. Make things visible.
4. Get the mappings right.
5. Exploit the power of constraints, both natural and
artificial.
6. Design for error
7. When all else fails, standardize

101. Nielsen’s 10 Usability
Heuristics (1994):
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Help users recognize, diagnose and recover from errors
6. Error prevention
7. Recognition rather than recall
8. Flexibility and efficiency of use
9. Aesthetic and minimalist design
10. Help and documentation

102. Heuristisk utvärdering
tillvägagångssätt
 4-5 st går igenom gränssnittet, var och
en för sig.
 Noterar ”brott” mot riktlinjerna
 Värderar problemen, hur allvarliga de
är
 Resultatet sammanställs i en rapport

103. Viktning av problem
1. Ingen påverkan -Detta problem påverkar inte användarens arbete.
2. Väldigt liten påverkan -Kosmetiskt problem som har en mycket liten påverkan på
användarens arbetemed detta program. Denne lägger ingen större tyngd vid
problemet men är medveten om det.
3. Liten negativ påverkan -Mindre problem som skulle behöva korrigeras. Problemet
har en liten negativpåverkan på användarens arbete. Irritation kan uppstå i
arbetet i och med problemet
4. Stor negativ påverkan -Stort problem som verkligen skulle behöva korrigeras.
Problemet har en stor negativ påverkan på användarens arbete och är ett hinder
som gör att arbetet tar längre tid att utföra
5. Mycket stor negativ påverkan -Väldigt stort problem där det är av största vikt att
det korrigeras. Problemet har en mycket stor negativ påverkan på användarens
arbete. Det är ett stort hinder som gör att arbetet ej kan utföras inom rimlig tid eller
överhuvudtaget.

104. Intressanta webbplatser
• https://www.nngroup.com/topic/web-usability/
• http://sensible.com/dmmt.html
• https://www.usability.gov/