Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Post on 13-Nov-2014
1286 Views
Preview:
DESCRIPTION
Transcript
UPPLEVELSEDESIGNÖverblick. Mobilt. Webbformulär.
Berghs School of CommunicationPer Axbom
2011-11-24
Per AxbomExperience Designer Digital StrategistAxbom Innovation AB
Twitter: @axbom
Mekanismer för återkoppling. Omvärld. Trender. �
!!!!!!!!!!
!!!!!!!!!!
Axbom Innovation Livscykel för framgångsrika idéer
version 1.0 !
Upplevelsedesign
http://www.youtube.com/watch?v=L1CxlyMoFRs
En röd knapp räcker.
http://www.flickr.com/photos/seguin_maxim/80205117/sizes/z/in/photostream/
Usability vs UX
Usability är en kaffekopp.UX är ett latteglas.
Allvarligt, skickade du SMS med mig?
SMÄRTA NYTTAuppoffring fördelar
Usability Kan göra
UX Vill göra
Vill göra igen
Rekommenderar
UI-designers tänker på detta...
UX-designers tänker också detta...
Date
Guru-myten
attract
interact
FAIL
WOW! CONVERSION
Wow, did you know....? Check
this out...!
Hur gör vi användaren ledsen?
Samma storlek
Samma färg
Liten text
Miljontals val
Göm länkar
Otydlig text...
Lista ut hur du skapar maximal smärta för användaren. Gör tvärtom.
source: marketingprofs.com
source: marketingprofs.com
67% 11%
-1% 63%
ACE YOUR WEBSITEAWE YOUR USERS
Attract
Clarify
Engage Adapt
Wow
Extend
A C
E A W
E
Attract
Clarify
Engage Adapt
Wow
Extend
A C
E A W
E
Förmålgrupp/persona
som villbehov namn på produkt/tjänst
. Tjänst:
Attract
Clarify
EngageAdapt
Wow
Extend
MOBILT
En ny människa...
Flitiga mobildata-användare förväntas tredubblas till en miljard år 2013.
Upptagandet av mobilt internet är åtta gånger snabbare än desktop.
Smartphone-försäljning slår ut global PC-försäljning innan 2012.
Över hälften av Android och iPhone-användare spenderar mer än 30 minuter per dag med mobila applikationer.
http://www.email-marketing-reports.com/wireless-mobile/smartphone-statistics.htm
MOBILT ÖKAR DIN FÖRMÅGA
ALLA SÄGER “MOBILE FIRST”
VAD ÄR MOBILT?
Mobilt är allestädes närvarande - inte ett separat silo.
FARAN MED MOBIL WEBBPLATS
Separata kodbaser
Separata team
Dubbelarbete
OsynkadeMobil Desktop
Presentationsidé från: http://underthebedstudios.com/blog/why-mobile-first-isnt-enough/
Mobil DesktopAllt
däremellan?
Presentationsidé från: http://underthebedstudios.com/blog/why-mobile-first-isnt-enough/
Arbetsbelastning och risker ökar exponentiellt med antalet olika sajter
du skapar.
FARAN FÖR ANVÄNDARE
själv-design
oavsiktlig design
geni-design
aktivitets- design
upplevelse-design
http://vimeo.com/20881152
Mobila användare är alltid...
på språng
på en långsam uppkoppling
bara intresserade av snabb interaktion
?
86% ANVÄNDER EN MOBIL ENHET FRAMFÖR TV-N
http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html
Vid val mellan att behålla mobil eller TV skulle 64% välja mobilen!
SÅ OM ANVÄNDARNA KAN KOMMA IN HUR SOM HELST?
DET ROLIGA MED APPAR
snabbt
närvarande
roliga effekter
UTMANINGEN MED APPAR
En fast yta.
Roterande skärm.
Många skärmar!
Människor balanserar iPaden på magen, lägga inte viktiga knappar
där.
http://gizmodo.com/5133070/iphone-app-store-hits-500-million-downloads-we-break-down-the-numbers
NATIVE VS WEBB?
NATIVE
Bor på telefonen
Laddas ner till enheten
Byggs specifikt för en enhet
Programmeringsspråk (Objective C/Java)
WEBB
Bor på webben
Åtkomst via en webbläsare
Byggd med “webbspråk” (HTML/CSS/JS)
Native
Inbyggd marknadsföring
Kräver mer för kundkännedom
Access till enheten (kamera, mikrofon, accelerator)
Access till andra appar
Hosting
Statistik
Betala för att utveckla...
Det finns många enheter!
Webb
Billigare
Kan integreras i befintlig webb
Snabb utveckling och uppdateringskontroll
Inga tredjepartsavgifter
Tillgänglighet
Browserfunktionalitet (IP- och GPS-baserad geolocation)
Spara lokalt
Swipe detection (JS)
http://vimeo.com/6353874
WEBBFORMULÄR
- Det kommer nästan ingen genomden där dörren.Jag visste väl att
webben inte skulle leverera!
Requirement specification
✓ User should be able to log in.
✓ It should be easy.
http://per.ax/rcube
The solution will depend...
...on the question asked.
Create a form for uploading images.
Help the user publishphotos immediately after they are taken.
Have task-oriented requirements and you will get innovative solutions.
LET’S ZOOM OUT
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
ExpectationImpression
InteractionCompletionEntry
ExitExperience
111
Market Web Business
112
ExpectationImpression
InteractionCompletionEntry
ExitExperience
Customer Service
113
Market Web Business
ExpectationImpression
InteractionCompletionEntry
ExitExperience
FORM FLOW
114
115
CLEAR BUTTON
116
CLEAR BUTTON
117
DESIGN PATTERNS
118
119
120
121
122
AFFORDANCE ANDAREA CODES
Ibland kan det bli aktuellt att skickamaterial. Ange din postadress om det ärok att skicka material till dig.
Postnr Postadress
Adress
Spara
123
PASSWORDS
*************PasswordStrong
Nsv!1v8#
124
PASSWORDS
fidoPassword
Hide password as I type
125
PURPOSE OF BIG FIELDS
• See what you are typing!
• Fewer mistakes
• Draw attention to the form126
CONVERSATION(IT’S NOT CALLED A DIALOG BOX FOR NO REASON)
127
Name?
Social security number?
Phone?
Your message?
Sara Andersson
820917-2654
You said social security number in the wrong format. Please go
back and repeat.
E-mail?
0705451234
sara@andersson.net
My broadband isn’t working!
what?
128
129
Hi, what’s your name?
ok, what’s your social security number?
thanks, and your phone
number?
ok, and your message is?
Sara Andersson
820917-2654
Great, thanks! Let me just double check. Did you say
sara@andersson.net?
mm, and e-mail?
0705451234
sara@andersson.net
My broadband isn’t working
Yep.
130
131
CONVERSATION
132
The web is a conversation. Make sure your website has a voice.
Label:
! Required Field!
Label:
! Required Field!
Talking web form!
MOBILE - TALKING WITH YOUR FINGERS
26 år eller mindre 27-65 år 66 år eller
mer
Under 2011 fyller jag
Månadskostnader utöver lönekostnader
14 000 kr
135
MOBILE INPUT
136
http://www.elated.com/articles/banish-javascript-in-web-forms-with-html5/
YOU CAN LOVE FORMS TOOOO MUCH...
137
138
139
140
141
142
POST DRAFT
Disruptive
Responsive
Alignment
Feedback
Tone
Path
Order
Size
Trim
144
Gör om!
JOTFORM!
145
top related