Vem vinner slaget om användarna? Den som har flest coola funktioner på sin sajt? Den som har snyggast design eller varumärkesupplevelse? Den sajt som är platt och avskalad, eller den som levererar mycket information på minsta möjliga yta? Svaret på ovan frågor är att den som kan leverera den bästa totala användarupplevelsen till sina kunder vinner. På webbspråk kallas detta UX, User Experience. Bra UX bygger på enkla principer, men fallgroparna är många. Skillnaden mellan inbjudande och irriterande eller mellan beröm och klagomål kan vara hårfin. Och vad är snyggt och funktionellt egentligen? Finns det verkligen ett ”rätt” svar?

1. #s nackamedmacka

2. Det går inte att visa bilden. Det finns inte tillräckligt med ledigt minne för att kunna öppna bilden eller så är bilden skadad. Starta om datorn och öppna sedan filen igen. Om det röda X:et fortfarande visas måste du kanske ta bort bilden och sedan infoga den igen.

3. UX
- med användarens upplevelse i centrum

4. AGENDA
08:00 08:45
Vad är UX? Förutsättningar Missar, myter Summering

9. UX = användarvänlighet
NOPE.

10. Reducera trösklar
användbarhet
Öka motivation
psykologi

11. + $ ?
?

12. Bra upplevelse
relevant

13. Affärsmål

14. Målgrupp

15. situation

16. TJÄNST

17. Och nyttiga fakta &
UX-missar,
myter

18. #1
” - UX är något man
kan stoppa in i slutet
av projektet
INNAN DU BÖRJAR

20. #2
MÅLGRUPP
” - Användare använder
alltid lösningen precis
som det är tänkt.

22. #3
MÅLGRUPP
” - Användare läser på webben.

23. 20%
JACOB NIELSEN

24. #4
KONTEXT
” - Funkar det för Apple
funkar det för mig.

26. #5
BETEENDE
” - Kan ni lägga allt innehåll
högst upp på sidan så att
man slipper skrolla?

27. FOLD

28. FOLD

29. #6
BETEENDE
” - Konverteringsdödare!

33. #7
” …och nu då?
BETEENDE

36. #8
BETEENDE
” Ibland blir det lite fel.

39. #9
Användarvänlighet – reducera trösklar
” - Varför behöver jag logga in?

42. #10
Användarvänlighet – reducera trösklar
” - Registrera i efterhand.

49. #11
Användarvänlighet – reducera trösklar
” - Är alltid färre klick
eller steg bättre?

51. #12
Användarvänlighet – reducera trösklar
” - Informationsöverflöd.

53. White Space:
Mellanrummet mellan olika
element på en websida.
ü Scanna sidans innehåll
ü Läsbarhet
ü Kan hjälpa vikta innehåll

56. #13
Användarvänlighet – reducera trösklar
” - Var ska jag klicka?

57. 16-20 mm

60. #14
Användarvänlighet – reducera trösklar
” - Hands off the keyboard!

62. #15
Användarvänlighet – reducera trösklar
” - Hur skulle jag göra nu igen?

65. #16
Användarvänlighet – reducera trösklar
” - Loading…

68. #17
Användarvänlighet – reducera trösklar
” - Vad betyder ikonen?

71. Fördelar med ikoner
ü Hjälpa navigering genom att sticka ut
ü Utrymmessparare
ü Visuellt tilltalande
Tänk på
ü Håll det enkelt!
ü Testa, testa, testa!
ü Använd textlabels?

76. #18
Motivation – få folk att agera
” Vilken produkt ska jag välja?

81. #19
Motivation – få folk att agera
” Nu blev jag nyfiken!

84. #20
Motivation – få folk att agera
” Bara en kvar!

88. #21
Att ständigt förbättra
” A/B test

90. #22
Att ständigt förbättra
” - Användartester?

92. #23
Att ständigt förbättra
” - Dags för en re-design?

93. 2010 2011 2012

94. 2010

95. UX - med användarens upplevelse i centrum
þ UX som en naturlig del tidigt i projektet
þ Relevant upplevelse = Affärsmål, Målgrupp, Situation, Tjänst
þ Användarupplevelse - reducera trösklar
þ Motivation – få användare att agera
þ Förbättra – användartester, A/B-testning

96. Bonusmaterial…
EXEMPEL

97. VolksWagen
”Stundtals komplex funktionalitet och branding i ljuv symbios.
Uppmuntrar till interaktion.”
www.vw.com

98. GOV.UK
”Avskalat med fokus på uppgiften. Information i fokus.
Bra användning av white space.”
www.gov.uk

99. Virgin america
”Komplext flöde som flyter på bra och är grafiskt tilltalande. Sajten fungerar även mycket bra responsivt.
Vid längre laddning för att hämta sökresultat presenteras relevant information medans man väntar. Använder sig av
snygga visuella cues för att scrolla i sidled i mobilen. Tydlig indikation för checka ut ur flödet som gäst, utan att skapa konto.”
www.virginamerica.com

100. FOLKS & VESPER
”Snygg använding av film i kombination med
tydliga visuella cues för ytterligare utforskning.”
www.folksverona.com www.vesperhotel.com

101. aquatilis
”Storytelling på hög nivå. Sätter tonen direkt med hjälp av videobakgrund och
visuell cue för vidare utforskning. Trevlig applicering av hamburgerikonen.”
www.aquatilis.tv

102. TACK!
Jonas Dahl
TACK!
Oscar Olin