Föreläsning på Sitevisiondagarna den 26 september 2012

1. Webbdesign för
människor som inte vill
prata med dig
Per Axbom
Axbom Innovation AB
@axbom på Twitter

5. After Gangnam Style

6. Vårt i särklass största
informationsproblem idag:

7. Vårt i särklass största
informationsproblem idag:
Vi bygger webbplatser.

8. Vårt i särklass största
informationsproblem idag:
I stället för att lösa problem så
bygger vi webbplatser.

10. “The world as we have created
it is a process of our thinking. It
cannot be changed without
changing our thinking.”

15. Ny teknik ger oss nya
möjligheter att prata med
människor, skapa visuell
information och lösa problem.
Men gör vi det?

16. Vad ser du framför dig när jag
säger att vi ska bygga en
webbplats?

20. Jag ser det här:

21. TACK!
TICK!
TACK!
TACK!

22. TACK!
3-STEGS- TACK!
PLANEN RECEPTET
VAR VAR
SUPER! LÄCKERT!

23. TACK!
JOBBET ÄR
STÖRTKUL!

24. TACK!
VILKA BRA
IDÉER VI FICK!!

25. TACK!
SCHAMPOOT
FUNKAR!

26. TACK?

27. Fråga till publiken:
Varför producerar du innehåll?

28. Vanliga frågor man får när
man jobbar med
användbarhet och UX:

29. Hur många länkar
får det vara i menyn?

30. Hur många ord
får jag skriva i min artikel?

31. Hur många personer
ska jag testa med?

32. Hur många sekunder
måste sidan ladda på?

33. Hur ska vi be om
personnummer
från användaren?

34. Akta er för konsulter som har
snabba svar på de frågorna.
— men vill ni ha längre svar sedan, fånga
mig efter föreläsningen ;)

35. Hur tänker personer
som frågar så här?
?

36. MÄNNISKOR ÄR
FÖRUTSÄGBARA

38. DET FINNS EN
MAGISK FORMEL

39. JAG BYGGER EN
WEBBPLATS

40. Uppgift
(fram med penna och papper)

41. Designa en ny, häftig vas.

42. Hur jag kunde ha formulerat
uppgiften annorlunda:

43. Skapa något som gör att Anna
trivs bättre i sitt vardagsrum.

44. Vi har fastnat i att skapa vaser.
Webbplatser
Artiklar
Sidor

45. Svaret på varje designproblem
kan inte vara att bygga ett
gränssnitt.

46. Svaret på varje designproblem
kan inte vara att bygga ett
gränssnitt.
Svaret på varje
informationsproblem kan inte
vara en webbsida.

47. Ofta har vi inte en susning om
vilket problem det är vi löser...

48. Det första en nyanställd undrar:
NI HAR VÄL EN
REDAKTION SOM SPRUTAR
UT NYA ARTIKLAR PÅ
LÖPANDE BAND?

49. Det första en nyanställd undrar:
HUR FÅR JAG BÄST HJÄLP
MED ATT KOMMA IGÅNG
OCH GÖRA BRA IFRÅN MIG
I MITT ARBETE?

52. Du har två öron och en mun.

53. Lyssna dubbelt så mycket som
du pratar.

54. VI VET REDAN
VAD FOLK
VILL HA

55. HAN HAR
INGEN
ANING...
VI VET REDAN
VAD FOLK
VILL HA

56. “Vill du ha uppdaterade nyheter
på webben/intranätet?”

57. “Vill du ha uppdaterade nyheter
på webben/intranätet?”
Fel!

58. “Hur ser en vanlig arbetsdag ut
för dig?”

59. “Vad retar du dig mest på i ditt
jobb?”

60. GOOB!

61. “Jahaa!! Är det sååå det funkar!”
“Jahaa!! Är det sååå de tycker!”

62. Bra förhållanden uppstår inte bara.
De tar tid, tålamod och två
människor som verkligen vill vara
tillsammans.

63. Samtidigt STRUNTAR vi i att
lösa de problem vi känner till.

64. Bevisföremål:
FAQ

66. Hur ska jag som har frågan för
första gången veta att det är en
vanlig, ofta ställd fråga?

67. GILLAR DU
GANGNAM?
HAR DU KOLLAT
MIN FAQ? DET STÅR
NOG DÄR.

68. Det problemet verkar
många ha jätteofta med vår
produkt. Så vi la ut en
förklaring på vår webb.
En FAQ på din webbplats är ett
monument över hur dålig du är
på att lösa problem.

69. Vår förmåga att lägga
komplexiteten hos användaren
(typiskt hos formulär)

70. =
=
Hos vem hamnar komplexiteten?

71. =
=
Hos vem hamnar komplexiteten?

72. =
=
Hos vem hamnar komplexiteten?

73. =
=
Hos vem hamnar komplexiteten?

74. =
=
Hos vem hamnar komplexiteten?

75. Ta ditt ansvar för att hjälpa
besökarna rätt!

76. Människor tar bättre beslut när
det finns färre alternativ.

77. Vad är exempel på att öka
komplexiteten?

78. - Det kommer nästan ingen genom
den där dörren.Jag visste väl att

80. Vad händer när vi ökar
komplexiteten?

82. Vad händer när du fäller dina
användare om och om igen?

84. NYTTA
SMÄRTA

85. Varenda interaktion på
din webb är ett
potentiellt hinder för
besökaren att nå målet.
SMÄRTA
SMÄRTA
Som ökar smärtan.

86. En bra upplevelse tidigt
kan göra att övriga
hinder känns mindre.
SMÄRTA
SMÄRTA
SMÄRTA
SMÄRTA
NYTTA
WOW
....

87. Hur många smärtpunkter kan
du räkna till?

88. Kontrast??

100. Hur gör vi för att minska
komplexiteten?

104. Det bästa du kan göra för
människor: Ta bort interaktion.

105. Vad står människan och säger?!
Ta bort interaktion?

109. HSBC Hong Kong.
Från 17 fält till 3.
Från $1M till $20M.
Label: Label:
Label: Label:
Label:
Label: Label:
Label:
Label: Label:
Label:
Label: Label:
Label: Label: Button
Label: Label:
Label: Label:
Label:
Button

110. Design är osynligt till dess att
det skapar problem.

111. Trend: Responsive

112. En ny teknisk lösning som ska
lösa övergången till mobilt.

117. Löste vi just någons problem
eller hittade vi på ett nytt sätt
att bygga en webbsida?

118. Mobile first, eller just mobile.

119. 1 kolumn är bäst just nu!
(det kanske alltid har varit det?)

121. 20x 30%
längre bättre

122. WEBB

123. WEBB
WEBB WEBB
WEB
WEBB WEBB
B
WEBB WEBB
WEBB
WEBB

124. WEBB
WEBB WEBB
WEB
WEBB WEBB
B
WEBB WEBB
WEBB
WEBB

129. Quantified Self

130. Hur många steg har ni gått
idag?

131. fitbit.com
withings.com
Zombies, Run!

132. Hur har ni sovit?

134. Hur glada var ni förra
måndagen?

135. Hur glada var ni på
Olof Palmes Torg 1 i
Örebro?

137. Det bästa du kan göra för
människor: Stimulera alla
sinnen!

138. Språk! (roligt och
intresseväckande)

140. Vad är motsatsen till
särskrivning?

142. vroom September Karl Alexandersson ! logga ut
Start Välkommen Karl! Vad vill du göra idag? Söka företag | Dela med mig av vroom | Titta på film
Dina favoritaktiviter 
Karl Alexandersson
Vägvisaren Ny kampanj
Sök företag VAG Bromma
Prospekt Dina sparade sökningar / bevakningar
Urval individer
Datum Typ Namn visa | ändra ta bort
2010-09-27 Företag Sed volutpat porttitor blandit (17) visa | ändra ta bort
Företag 
GalaxerPerson
2010-08-12
i mina braxer! cursus vel auctor (5)
Proin lacus risus, visa | ändra ta bort
! Vill du radera “Set ullamcorper risus eget (14)
2010-02-03 Prospekt Nullam volutpat”? visa | ändra ta bort
Person
2009-12-04 den
Nej, behåll |
Annat Ja, ta bort vestibulum magna sit amet (3)
Duis den visa | ändra ta bort
Begagnat  Dina prospektlistor
Datum Typ Namn visa | ändra ta bort
2010-09-27 Företag Sed volutpat porttitor blandit (17) visa | ändra ta bort
2010-08-12 Person Proin lacus risus, cursus vel auctor (5) visa | ändra ta bort
support vardagar 9-17 telefon: 08-55 60 35 90

143. Ljud!

145. Video.

146. SCA Packaging

147. Grafik

148. Studenter Natfak-
55% 45% katalogen
3 av 10 såg katalogen
1 av 5 direkt från 9 av 10
gymnasiet under 27 år av dessa gillade 6 av 10 katalogen
Analoga och digitala in
fo-källor
70% “ Hur kan ni skicka
ut tjocka pappers-“ 80% öppet hus inst.webb
50% kompis/syskon kataloger? forskardagarna annons
50% NATFAK-katalogen
fick info su.se studiebesök
studera.nu
här var nöjda skolbesök
SU utb-katalog
10%
studievägledare 10%
10% förväntan 50% 70% 10% tog del av 50% 80%
Naturvetenskapliga fakulteten ybörja
re
n
Digital mognad 15- till 24-å
ringar. Ökande.
4 av 10 har en 8 av 10 läser 9 av 10 använder
smartphone 155 minuter på
bloggar sociala medier internet/dag

149. Hur ofta skriver ni text
utan att illustrera
texten?

150. Hur ofta skriver ni text
utan att illustrera
texten?
Tjänstefel!

151. Varför audiovisuellt funkar
Kognitivt
Emotionellt
Känslor spelar en viktig roll i beslutsfattande
och inlärning. De påverkar mekanismerna i
rationellt tänkande.
1. Fler förstår. 2. Fler besöker. 3. Fler delar med sig.
4. Det blir synligt i fler kanaler.

153. Att föra anteckningar
2012

155. Lärande 2012

156. DragonBox+
DragonBox+

158. “If no one hates your website,
there's a good chance no one
loves it either.”
— Ling Valentine
http://per.ax/lingtalk YouTube

159. Ok, ibland måste vi faktiskt
hjälpa användarna på traven att
göra som vi vill.

160. Med större fokus på psykologi
kan vi bygga webbplatser som
påverkar människor.
http://www.getmentalnotes.com/

161. Persuasive design

162. förtroende...

163. social validering tidsgränser
riskfritt förlustundvikande

164. Positiv förstärkning

165. ✓ Finns det regelbundna aktiviteter att
se fram emot?
✓Får du användaren att le?
✓ Belönar du henne?
✓Kan hon påverka?
✓Känner mottagaren att hon har viss
äganderätt?
✓Överraskar du henne då och då?

166. ✓ Finns det regelbundna aktiviteter att
se fram emot?
✓Får du användaren att le?
✓ Belönar du henne?
✓Kan hon påverka?
✓Känner mottagaren att hon har viss
äganderätt till följd av investering?
✓Överraskar du henne då och då?

167. Dina reglage
Lyssna / förstå problemen / GOOB
Stimulera / skapa känslor (hela hjärnan)
Skapa relation / vägled (psykologi)
Öka interaktion/ komplexitet hos användaren

168. Dina reglage
Lyssna / förstå problemen / GOOB
Stimulera / skapa känslor (hela hjärnan)
Skapa relation / vägled (psykologi)
Öka interaktion/ komplexitet hos användaren

169. TACK!

170. Jag heter Per Axbom.
Om något jag sa fick dig att
tänka till får du gärna tala om
det. För mig eller hela världen ;)
axbom.se/sitevision2012

172. STOPP
Nu har du bläddrat för långt...

173. Photos & icons:
http://www.flickr.com/photos/eugene/60786350/
http://www.flickr.com/photos/lucasstanley/4648624339/
http://www.flickr.com/photos/antrover/7058633719/
http://www.flickr.com/photos/seandreilinger/2200673679/
http://www.flickr.com/photos/defenceimages/7197354648/
http://www.flickr.com/photos/btindrelunas/3481894506/
http://www.flickr.com/photos/dieselbug2007/431125750/
http://www.flickr.com/photos/thehutch/2465788044/
http://www.flickr.com/photos/rkfionn/7848480870/
http://www.flickr.com/photos/jeffwerner/1316397786/
www.awicons.com
http://citywithaheart.org/

176. ALLT går att återuppfinna

177. SEB Innovation Awards

179. hej SEB!

180. klassiska problem:
sen betalning
cxfqJv
fanns inte
b
pengar
ovantade
utgifter
dalig
planering

181. losning:
vi bygger en robot som letar
efter monster i betalningarna

182. ...oc talar om hur det ser ut:
h
Snart månadsskifte!
1. Det ser ut som
om du har 2000 kr
mer i räkningar
denna månad.
2. Du brukar betala
cirka 500 kr till Telia
varje månad men
du har inte matat
in en sådan
räkning...
FORTSÄTT

183. ...oc staller smarta fragor:
h
Räknar du med
*) .-J
att betala till Telia 6
varje månad?
JA NEJ
Du betalar cirka
8000 i räkningar.
Vill du bli varnad
när du överskrider?
JA NEJ

184. det kan ocksA bli vackra diagram:
hQNM
200 .1
150
100
50
0
jun jul aug sep

185. roboten oc kunden lever
h
lyckliga tillsammans.
.

186. tack SEB!

188. Människan i fokus
Skapa en relation
Visualisera för förståelse
Minimera interaktion
Visa målbilden (“Tack SEB!”)
Idéer utanför företaget