Interaction design presentation for my company

1. Idag ska vi prata
”Mjuka värden”

2. Interaktionsdesign
&
användbarhet
“Design is really an act of communication, which means
having a deep understanding of the person with whom
the designer is communicating.”
― Donald A. Norman, The Design of Everyday Things

3. 3
Hur utformar vi en digial värld som både är till nytta för användaren
och ger en tillfredsställande/givande upplevelse?

4. 4
Målgrupp
Lär känna din användare

5. 5
Lär känna din användare
Identifiera och analysera de viktigaste målgrupperna
Förstå målgruppens kontext, arbetssätt, mål
Vad ska systemet göra för användaren?
Identifiera några viktiga flöden och optimera dessa
Glöm inte ”experterna”

6. 6
Interaktionsdesign
Den mer akademiska termen som fokuserar på nytta och användbarhet.
Fokus på människa-dator interaktion och informatik
Designdisciplin, närmast besläktad med industridesign eller arkitektur.
Fokus på estetik och användarupplevelse
Generellt handar interaktionsdesign mer om systemets beteende än utseende.
Två huvudsakliga skolor:

7. 7
Varför?
Webben blir mer och mer ett arbetsredskap.
Besökaren otålig, mer datorvan, krävande, kräsen.
Ett system som inte används eller används fel kan bli väldigt kostsamt
Man kan spara en hel del pengar på att erbjuda användbara tjänster på
webben.
Egentligen det viktigaste steget i designprocessen.
Utan en genomtänkt interaktion kan ingen färg och form i världen
skapa en bra användarupplevelse.

8. 8
I utvecklingsprocessen
Wireframe
– skelettskiss av själva layouten
Flöde
– beskriver även förhållandet mellan
de olika delarna i layoten
Prototyp
– en möjlighet att testa flödet på ett tidigt stadium
Wireframes, flödesbeskrivning, prototyp

9. 9

10. 10

11. 11

12. 12
För vem?
Kan/bör vara ett underlag även för (backend)utvecklaren?
Underlag för testaren?
Bör utvecklare/testare vara med i framtagandet av interaktionsdesign?
Vad kan jag som utvecklare bidra med i denna fas?
Att jobba agilt redan i designfasen?
Diskussion

13. Användbarhet

14. 14
Ett par populära ”definitioner”
Effectiveness, efficiency, satisfaction
Effectiveness
– can users complete tasks, achieve goals with the product, i.e.
do what they want to do?
Efficiency
– how much effort do users require to do this? (Often measured
in time)
Satisfaction
– what do users think about the products ease of use?

15. 15
Visibility.
By looking, the user can tell the state of the device and the alternatives for action.
A good conceptual model.
The designer provides a good conceptual model for the user, with consistency in
the presentation of operations and results, and a coherent, consistent, system
image.
Good mappings.
It is possible to determine the relationships between actions and results, between
the controls and their effects, and between the system state and what is visible.
Feedback.
The user receives full and continuous feedback about the results of actions.
- Donald Norman, The design of everyday things

16. 16
Lär känna din användare (!)
Identifiera och analysera de viktigaste målgrupperna
Förstå målgruppens kontext, arbetssätt, mål
Vad ska systemet göra för användaren?
Identifiera några viktiga flöden och optimera dessa
Glöm inte ”experterna”

17. 17
Liten checklista:
Några grejer man kan ha i bakhuvudet

18. 18
Standarder/vedertagna mönster/konventioner
– ikoner som användare är vana vid, t ex papperskorg eller rött kryss för att
ta bort, menyer där menyer brukar ligga etc
Konsekvens – ett gränssnitt bör bete sig på ett konsekvent sätt, tex länkar,
knappar, formulär, menyer bör fungera på samma sätt över hela siten.
Få klick - klicka direkt på kolumner för att sortera
”servera” formulär/actions och andra viktig funktionalitet direkt på
startsidan
Återkoppling – tex. uppdatera lista med användare
färgmarkera en förändring, visualiesera knappklick

19. 19
Relevanta felmeddelanden – relevant placering viktigt
Steg-guider om mycket information - Visa tydligt var man befinner sig
Gruppera information som hör ihop – tex långa formulär
Lätt att lära – lätt att komma ihåg - Designa för igenkänning
”Less thinking, more doing” – Undvik svåra benämningar,
använd vedertagna begrepp

20. 20
Vanliga misstag

21. 21
Otydliga klickbara element
- träffytan för liten, saker som ser ut att vara klickbara är inte klickbara
(färgskillnader i text, understrykningar, ikoner, bilder).
För dålig skillnad mellan länk och övrig text.
Relevanta länktexter (läs mer... Är ett sämre exempel), Knappar utan feedback.

22. 22
Onödiga bilder
– använd bara bilder där de är relevanta för informationen
eller ger ett mervärde.

23. 23
Laddningstid
– given frustration
Är det något som kräver en viss laddningstid,
visa det mha en loading bar

24. 24
Fattig 404/500
– bör innehålla relevant information och eventuella länkar

25. 25
För många val/vägar in
– felaktigt strukturerad information, djupa
menyer, för många menyelement etc.

26. 26
Kontraster/läsbarhet/typografi
– det är svårt att läsa på skärm. Dålig kontrast
och fel fontval/fontstorlek försvårar det hela
ännu mer.

27. 27
För mycket text/information
– information på webb måste vara lätt att skumma. Folk läser
generellt inte igenom en text på webben.
Ingresser, faktarutor, kort och koncis text.
Nyheter? Behövs de alltid? Och framför allt, behöver de alltid
ligga på startsidan?

28. 28
Gammal eller irrelevant information
– fokusera mer på målgruppen än verksamhetsstrukturen
Ta bort gamla nyheter

29. 29
Kontaktinfo
– det ska vara lätt att hitta kontaktuppgifter

30. 30
Dålig sökfunktion
– en sökfunktion som inte funkar är värdelös.
Hellre inget sök än en dålig sök!

31. 31
Onödig registrering/inloggning
– det är sjukt frustrerande att behöva logga in
och registrera sig i tid och otid.

32. 32
Obesvarade ”frågor”
– besökaren har förmodlgen en fråga hen vill ha svar
på. Besvara den! Ex öppettider, priser, adresser etc.
Använd ett personligt språk

33. 33
Popups/nya fönster
Undvik om möjligt

34. 34
Ofullständigt stöd för mobila enheter
– även tablets behövas stödjas. Touchskärmar kräver vissa
anpassningar. Ex större knappar, tydligare formulär etc. Ofta
glöms just tablets bort. Man anpassar endast för smartphones.

35. 35
Formulär – ett evigt gissel
Dela upp långa formulär i flera steg.
Se över om all information verkligen behöver samlas in.
Felmeddelanden ska vara tydliga och ge återkoppling direkt, gärna i anslutning
till fältet
Komplettera gärna servervalidering med klientvalidering för bättre
användarupplevelse. Validera tydligt, färg, ikoner etc.
Var tydlig med vilka fält som är obligatoriska.
Lägg fält i en logisk ordning.
Använd tekniken – tex geopositionering, cookies etc.
Hjälp användaren att fylla i – rättstavning, personnummer, telefonnummer,
postadresser, epost, lättförståeliga labels

36. 36
Ett par exempel
en favorit:

37. 37

38. 38

39. 39

40. 40

41. 41
Slutligen
Ofta får vi en färdig design i knät där någon redan har tänkt till men kanke inte alltid
hela vägen.
Vi som utvecklare är lite halvdåliga på att ge feedback på designval, men vi har ofta
mycket input att ge som teknikkunniga.
Tänk interaktion/anvädbarhet redan från start.
Lär känna användaren/målgruppen och syftet med webbplatsen.
Rita upp enklare flöden för specifika funktioner eller delar av en webbplats
Häng upp designskisser/flöden/wireframes på typ en tavla för att få en snabb
överblick
Testa gärna mha en enkel prototyp (papper eller ppt) på en kollega från ett annat
team.
Annat?