Webbdesign för människor som inte vill prata med dig

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

Transcript

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! TACK! TACK! TICK!
22. TACK! 3-STEGS- PLANEN VAR SUPER! TACK! RECEPTET VAR 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 MASKINER
37. MÄNNISKOR ÄR FÖRUTSÄGBARA
39. DET FINNS EN MAGISK FORMEL
40. JAG BYGGER EN WEBBPLATS
41. Uppgift (fram med penna och papper)
42. Designa en ny, häftig vas.
43. Hur jag kunde ha formulerat uppgiften annorlunda:
44. Skapa något som gör att Anna trivs bättre i sitt vardagsrum.
45. Vi har fastnat i att skapa vaser. Webbplatser Artiklar Sidor
46. Svaret på varje designproblem kan inte vara att bygga ett gränssnitt.
47. Svaret på varje designproblem kan inte vara att bygga ett gränssnitt. Svaret på varje informationsproblem kan inte vara en webbsida.
48. Ofta har vi inte en susning om vilket problem det är vi löser...
49. Det första en nyanställd undrar: NI HAR VÄL EN REDAKTION SOM SPRUTAR UT NYA ARTIKLAR PÅ LÖPANDE BAND?
50. 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?
53. Du har två öron och en mun.
54. Lyssna dubbelt så mycket som du pratar.
55. “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. FAQ Bevisföremål:
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. HAR DU KOLLAT MIN FAQ? DET STÅR NOG DÄR. GILLAR DU GANGNAM?
68. En FAQ på din webbplats är ett monument över hur dålig du är på att lösa problem. Det problemet verkar många ha jätteofta med vår produkt. Så vi la ut en förklaring på vår webb.
69. Vår förmåga att lägga komplexiteten hos användaren (typiskt hos formulär)
70. = =
71. = =
72. = =
73. = =
74. = =
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. Som ökar smärtan. SMÄRTA SMÄRTA
86. En bra upplevelse tidigt kan göra att övriga hinder känns mindre. SMÄRTA SMÄRTA SMÄRTA SMÄRTA WOW NYTTA ....
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: Button Label: Label: Label: Label: Label: Label: Label: Label: Label: Label: Label: Label: Label: Label: 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. Hur läser ni nyheter?
120. Så här konsumerar jag nyheter...
122. 1 kolumn är bäst just nu!
124. 20x längre 30% bättre
125. WEBB
126. WEBB WEBB WEBB WEBB WEBB WEBB WEBB WEB B WEBB WEBB
127. WEBB WEBB WEBB WEBB WEBB WEBB WEBB WEB B WEBB WEBB
132. Quantified Self
133. Hur många steg har ni gått idag?
134. withings.com fitbit.com Zombies, Run!
135. Hur har ni sovit?
137. Hur glada var ni förra måndagen?
138. Hur glada var ni i Örebro?
140. Det bästa du kan göra för människor: Stimulera alla sinnen!
141. Språk! (roligt och intresseväckande)
143. Vad är motsatsen till särskrivning?
145. vroom Sök företag Prospekt Urval individer Dina favoritaktiviter  Företag  Person  Begagnat  Karl Alexandersson VAG Bromma ! logga ut 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 2010-02-03 Prospekt Nullam ullamcorper risus eget (14) visa | ändra ta bort 2009-12-04 Annat Duis vestibulum magna sit amet (3) visa | ändra ta bort Dina sparade sökningar / bevakningar Ny kampanj Vägvisaren Karl Alexandersson September 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 Dina prospektlistor Start Välkommen Karl! Vad vill du göra idag? Söka företag | Dela med mig av vroom | Titta på film telefon: 08-55 60 35 90 support vardagar 9-17 ! Galaxer i mina braxer! Vill du radera “Set volutpat”? Nej, behåll den | Ja, ta bort den
146. Ljud!
148. Video.
149. SCA Packaging
150. Grafik
151. Studenter Digital mognad 15- till 24-åringar. Ökande. Natfak- katalogen Analoga och digitala info-källor 1 av 5 direkt från gymnasiet 9 av 10 under 27 år 55% 45% Naturvetenskapliga fakulteten 155 minuter på internet/dag 4 av 10 har en smartphone 8 av 10 läser bloggar 9 av 10 använder sociala medier 3 av 10 såg katalogen av dessa gillade 6 av 10 katalogen nybörjare fick info här förväntan su.se studera.nu SU utb-katalog 70% 70% studievägledare kompis/syskon 50% 50% 10% 10% var nöjda tog del av 80% 80% 50% 50% 10% 10% öppet hus annons inst.webb NATFAK-katalogen skolbesök studiebesök forskardagarna Hur kan ni skicka ut tjocka pappers- kataloger? “ “
152. Hur ofta skriver ni text utan att illustrera texten?
153. Hur ofta skriver ni text utan att illustrera texten? Tjänstefel!
154. 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.
156. Att föra anteckningar 2012
157. Lärande 2012
158. DragonBox+ DragonBox+
160. “If no one hates your website, there's a good chance no one loves it either.” http://per.ax/lingtalk YouTube — Ling Valentine
161. Ok, ibland måste vi faktiskt hjälpa användarna på traven att göra som vi vill.
162. Med större fokus på psykologi kan vi bygga webbplatser som påverkar människor. http://www.getmentalnotes.com/
163. Persuasive design
164. förtroende...
165. social validering förlustundvikande riskfritt tidsgränser
166. Positiv förstärkning
167. ✓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å?
168. ✓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å?
169. Dina reglage Stimulera / skapa känslor (hela hjärnan) Lyssna / förstå problemen / GOOB Skapa relation / vägled (psykologi) Öka interaktion/ komplexitet hos användaren
170. Dina reglage Stimulera / skapa känslor (hela hjärnan) Lyssna / förstå problemen / GOOB Skapa relation / vägled (psykologi) Öka interaktion/ komplexitet hos användaren
171. TACK!
172. 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
174. STOPP Nu har du bläddrat för långt...
175. 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/ www.awicons.com http://citywithaheart.org/
178. ALLT går att återuppfinna
179. SEB Innovation Awards
181. hej SEB!
182. bcxfqJv sen betalnin g klassiska problem: dalig planerin g fanns inte pen gar ovantade ut gifter
183. losnin g: vi bygger en robot som letar efter monster i betalnin garna
184. ...oc h talar om hur det ser ut: 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
185. Räknar du med att betala till Telia varje månad? Du betalar cirka 8000 i räkningar. Vill du bli varnad när du överskrider? ...oc h staller smarta fragor: JA NEJ JA NEJ 6 *) .-J
186. det kan ocksA bli vackra diagram: .1hQNM 0 50 100 150 200 jun jul aug sep
187. . roboten oc h kunden lever lyckliga tillsammans.
188. tack SEB!
190. 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