Introduktion till Webbutveckling - F13

Transcript

1. Användbarhet
2. Vad är användbarhet?
3. ”Något som är enkelt att använda”
4. Är användbarhet svårt?
5. Varför är användbarhet svårt?
6. Definition av användbarhet (1) • “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)
7. Definition av användbarhet (2) Använd- barhet Lätt att lära Effektiv Ändamåls- enlig Fel- tolerans Engage- rande
8. Definition av användbarhet (3) • 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
9. 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
10. Är användbarhet svårt?
11. Utvecklare är inte användare
12. Användbarhet – med användaren i fokus Användare Utvecklare Kommunikation
13. Varför är användarna viktiga? • Det är användarna som ska använda systemet – inte utvecklaren
14. Användarna – vilka är de? • Demografisk information • Vad kan dem? • Vad kan de lära sig? • Vad är deras generella bakgrund? • Vad är deras domän?
15. Att lära känna användarna • Målgruppsanalys • Personas • Kontinuerlig kommunikation • Kontinuerliga tester
16. En misslyckad kampanj
17. ”Något som är enkelt att använda”
18. Användbarhet, vad ska man tänka på?
19. Vad kan vi göra?
20. Förståelse för hur man ska göra
21. Begränsningar på hur man kan göra
22. Konceptuella modeller
23. Mappning
24. Återkoppling
25. Igenkänning
26. Möjlighet att ångra
27. Konsekvent utseende
28. Förenkling / minimalism
29. Hur fungerar vi? • Människor ser de som de förväntar sig • Svårt att fokusera på mer än en sak • Lättare att känna igen än att komma ihåg
30. Tänk på en häst
31. Åt vilket håll har den huvudet?
32. Grov statistik • Huvudet åt vänster 65% • Huvudet åt höger 30% • Framifrån 3% • Annan 1% • Kan inte svara 1%
33. Minnet • Vi har tre typer av minne 1. Sensoriskt minne 2. Korttidsminne 3. Långtidsminne
34. Sensoriskt minne • Information från våra sinnen • Varar mindre än 1 sekund • Allt förs inte vidare i minneskedjan • Försvinner snabbt
35. Korttidsminnet • 7 +- 2 enheter • Cirka 30 sekunder • Störningskänsligt
36. Memorera raden i 10 sekunder • XPLSRKQMZJ
37. Kommer du ihåg alla bokstäverna?
38. Memorera raden i 10 sekunder • SAS IBM NATO
39. Kommer du ihåg alla bokstäverna?
40. Långtidsminnet • ”Ingen” informationsförlust • Kräver inlärning • Svårt att återkalla ”triggers” • Associationer i minnet • Komma ihåg vs. igenkänning
41. Färger och ikoner • Vi uppfattar färger och ikoner snabbt • Kan utnyttjas för t.ex. snabbare överblick • Var noga med att undvika missförstånd
42. Vilken färg har ordet? Blomma Hammare Häst Bil Affär Skata Bok
43. Vilken färg har texten Gul Röd Blå Rosa Lila Orange Grön
44. Bör undvikas GRÖNT PÅ ORANGE RÖTT PÅ GRÖNT GULT PÅ ORANGE RÖTT PÅ ORANGE ORANGE PÅ BLÅTT VITT PÅ GULT RÖTT PÅ BLÅTT
45. Färg • Grön: harmoni, balans, kreativitet • Gul: glädje, stimulans, optimism • Blå: exklusivt, lyxigt, svalt • Röd: livslust, provocerande, varmt • Brun: ombonat, mysigt, varmt • Grå: neutralt, sobert, anonymt • Svart: rebelliskt, syndigt • Vit: renhet, fräschör
46. Ikoner
47. Ikoner Kan öka begripligheten
48. Ikoner kan spara utrymme men kan också….. ….vara svåra att förstå
49. Gestaltlagar • Närhetslagen • Likhetslagen • Kontinuitetslagen • Figur-bakgrundslagen
50. Närhetslagen • Saker som ligger nära varandra uppfattar vi som att de hör ihop.
51. Likhetslagen • Saker som liknar varandra uppfattar vi som att de hör ihop.
52. Kontinuitetslagen • Vi strävar efter att fullfölja mönster för att skapa helheter.
53. Vi söker efter mönster
54. Vi letar efter mönster • Äppelmos • Lingonmos • Plåttermos
55. Att använda ord för att visualisera ett mönster
56. Hög användbarhet märks inte…
57. Användbarhet för vem?
58. Introduktion till användbaret för webben
59. Hur upplever användare en webbplats?
60. Vi söker aktivt efter det vi söker
61. Vi testar oss fram • Testar olika alternativ • Testar att söka • Vem läser manualer först?
62. 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
63. 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
64. Hierarki - Storlek •Mest Viktigt • Mindre viktigt • Minst viktigt
65. Relaterade saker ska synas tillsammans
66. Visuellt nästlade delar visar vilka delar som tillhör vad
67. Konventioner • 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.
68. 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”
69. Vad är klickbart? • Ser ut som en knapp • Muspekaren blir en ”hand”
70. Minimera ”störningar” • För mycket, dåligt strukturerad information • Förvirrade formgivning av webbplatsen • Less is more
71. Antal klick - Det gyllene måttet? • Ju färre klick, ju bättre?
72. Språk • Rätt språk/terminologi för målgruppen • Korrekt språk • Koncist • Extra viktigt vid navigation och informationssökning
73. 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”
74. 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
75. Hitta på en webbplats • Hittar inte användarna runt på en webbplats så kommer den inte att användas.
76. Web Navigation 101 1. Vi letar efter något 2. Vi väljer om vi vill fråga (söka) eller leta själva.
77. Sök-/bläddraprocess
78. 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
79. Gamla vs. Nya besökare
80. 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
81. Konventioner för navigering
82. Global Navigation • ”Don’t look now, but i think it’s following us” • Alltid tillgång till huvudsektionerna • Ger trygghet till användaren
83. Var är vi? • Markerade menypartier • Brödsmulor • Rubriker
84. Flikar – För tydlig struktur • Självförklarande • Svåra att missa • Stilrena • Illustrerar fysik plats
85. Trunk test 1. Logotyp 2. Global navigation 3. Lokal navigation 4. Rubrik 5. ”Du är här”-indikator 6. Sökruta • Mer noggrannare genomgång nästa vecka.
86. Navigation (1) • Följ standarder • Var tydlig • Tänk på minnets begränsningar
87. Navigation (2) • Navigera vs. Söka • Vad är effektivast och när är det effektivast • Ena, andra eller båda?
88. Navigation (3) • Konventioner: - Rätt storlek på rätt element - Gruppera tydligt • Var tydligt med vad som är klickbart • Var är jag?
89. Vad är användbarhet?
90. Utvecklare är inte användare