Save 37% off PRO during our Black Friday Sale! »

HT21 - DA106A - Användbarhet (2)

HT21 - DA106A - Användbarhet (2)

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

October 14, 2021
Tweet

Transcript

  1. Användbarhet

  2. Viktig information Fredagens labb: 08.15 – 10.00 Enbart digital på

    Discord Frågor kring webbhotell är välkomna
  3. None
  4. None
  5. Moment: Användbarhet Två föreläsningar Del av inlämningsuppgift

  6. Föreläsningar ANVÄNDBARHET – GENERELLT ANVÄNDBARHET – INRIKTNING IT

  7. None
  8. Malmö stations dörrar… Hur tänkte dem?

  9. None
  10. Vad är användbarhet?

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

  12. Vad är användbarhet?

  13. 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)
  14. Definition av användbarhet Använd -barhet Lätt att lära Effektiv Ändam

    åls- enlig Fel- tolerans Engage -rande
  15. 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
  16. None
  17. 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)
  18. Definition av användbarhet Använd- barhet Lätt att lära Effektiv Ändamåls

    -enlig Fel- tolerans Engage- rande
  19. 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
  20. 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
  21. Gestaltlagar Närhetslagen Likhetslagen Kontinuitetslagen Figur-bakgrundslagen

  22. Närhetslagen Saker som ligger nära varandra uppfattar vi som att

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

    hör ihop.
  24. Kontinuitetslagen Vi strävar efter att fullfölja mönster för att skapa

    helheter.
  25. None
  26. Vi söker efter mönster

  27. Vi söker efter mönster

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

  29. None
  30. Vad är detta?

  31. Vad är detta?

  32. Användbarhet - IT Samma principer som vi gick igenom förra

    veckan Gränssnitt i fokus
  33. Användbarhet för vem?

  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. Hög användbarhet märks inte…

  41. None
  42. Return of investment Vad tjänar vi på att investera i

    användbarhet? Är det värt det?
  43. None
  44. None
  45. Hur upplever användare en webbplats?

  46. Vi letar aktivt efter det vi söker

  47. 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
  48. Heat maps

  49. 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”
  50. None
  51. 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.
  52. 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
  53. 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
  54. Hierarki Storlek Mest Viktigt Mindre viktigt Minst viktigt

  55. Relaterade saker ska synas tillsammans

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

  57. 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.
  58. 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”
  59. Vad är klickbart? Ser ut som en knapp Muspekaren blir

    en ”hand”
  60. Antal klick - Det gyllene måttet? Ju färre klick, ju

    bättre?
  61. Språk  Rätt språk/terminologi för målgruppen  Korrekt språk 

    Koncist  Extra viktigt vid navigation och informationssökning
  62. None
  63. Minimera ”störningar” För mycket, dåligt strukturerad information Förvirrade formgivning av

    webbplatsen Less is more
  64. None
  65. 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”
  66. None
  67. None
  68. 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
  69. None
  70. Att hitta på en webbplats Hittar inte användarna runt på

    en webbplats så kommer den inte att användas.
  71. Navigation 1. Vi letar efter något 2. Vi väljer om

    vi vill fråga (söka) eller leta själva.
  72. Söka eller Bläddra

  73. 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
  74. None
  75. None
  76. None
  77. None
  78. Gamla vs. Nya besökare

  79. None
  80. Navigation

  81. 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
  82. Global Navigation Alltid tillgång till huvudsektionerna Ger trygghet till användaren

    ”Don’t look now, but i think it’s following us”
  83. None
  84. Var är vi? Markerade menypartier Brödsmulor Rubriker

  85. Flikar som metafor

  86. Flikar – För tydlig struktur Självförklarande Svåra att missa Stilrena

    Illustrerar fysik plats
  87. Trunk test 1. Logotyp 2. Global navigation 3. Lokal navigation

    4. Rubrik 5. ”Du är här”-indikator 6. Sökruta
  88. Konsten att göra ”lagom” mycket

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

  90. The elements of user experience

  91. Vad är UX? En persons känsla för en produkt En

    helhetsupplevelse Subjektivt
  92. None
  93. 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.
  94. Elementen

  95. The Strategy Plane Vad vill vi göra? Vilka behov finns

    från användarna? Vilka mål har vi?
  96. The Scope Plane Vilka funktioner ska finns? Vilket innehåll ska

    finnas?
  97. 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?
  98. The Skeleton Plane Webbplatsens upplägg Informationsdesign, hur ska allt hänga

    ihop (wireframes) Grundläggande layout Navigationslayout
  99. The Surface Plane Visuell design, och allt vad det innebär.

  100. Att skapa en webbplats med fokus på användarna Hur går

    det till?
  101. 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.
  102. 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
  103. 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
  104. Iterativ utformning

  105. Hur mäter man användbarhet?

  106. Heuristik En metod som bygger på att man enligt: Expertutlåtanden

    Tumregler Beprövade riktlinjer Kvalificerade gissningar utvärderar ett system.
  107. 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
  108. 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
  109. 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
  110. 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
  111. 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
  112. 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 arbete med 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.