upplevelsedesign — Överblick. mobilt. webbformulär
DESCRIPTION
Presentation vid föreläsning på kursen Digital Management på Berghs School of Communication.TRANSCRIPT
![Page 1: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/1.jpg)
UPPLEVELSEDESIGNÖverblick. Mobilt. Webbformulär.
Berghs School of CommunicationPer Axbom
2011-11-24
![Page 2: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/2.jpg)
Per AxbomExperience Designer Digital StrategistAxbom Innovation AB
Twitter: @axbom
![Page 3: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/3.jpg)
![Page 4: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/4.jpg)
Mekanismer för återkoppling. Omvärld. Trender. �
!!!!!!!!!!
!!!!!!!!!!
Axbom Innovation Livscykel för framgångsrika idéer
version 1.0 !
![Page 5: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/5.jpg)
Upplevelsedesign
![Page 6: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/6.jpg)
http://www.youtube.com/watch?v=L1CxlyMoFRs
![Page 7: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/7.jpg)
![Page 8: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/8.jpg)
En röd knapp räcker.
![Page 9: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/9.jpg)
http://www.flickr.com/photos/seguin_maxim/80205117/sizes/z/in/photostream/
Usability vs UX
![Page 10: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/10.jpg)
Usability är en kaffekopp.UX är ett latteglas.
![Page 11: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/11.jpg)
Allvarligt, skickade du SMS med mig?
![Page 12: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/12.jpg)
![Page 13: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/13.jpg)
SMÄRTA NYTTAuppoffring fördelar
![Page 14: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/14.jpg)
Usability Kan göra
UX Vill göra
Vill göra igen
Rekommenderar
![Page 15: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/15.jpg)
UI-designers tänker på detta...
![Page 16: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/16.jpg)
UX-designers tänker också detta...
![Page 17: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/17.jpg)
Date
Guru-myten
![Page 18: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/18.jpg)
attract
interact
FAIL
WOW! CONVERSION
Wow, did you know....? Check
this out...!
![Page 19: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/19.jpg)
![Page 20: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/20.jpg)
Hur gör vi användaren ledsen?
![Page 21: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/21.jpg)
Samma storlek
Samma färg
Liten text
Miljontals val
Göm länkar
Otydlig text...
![Page 22: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/22.jpg)
![Page 23: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/23.jpg)
![Page 24: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/24.jpg)
Lista ut hur du skapar maximal smärta för användaren. Gör tvärtom.
![Page 25: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/25.jpg)
![Page 26: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/26.jpg)
![Page 27: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/27.jpg)
![Page 28: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/28.jpg)
![Page 29: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/29.jpg)
source: marketingprofs.com
![Page 30: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/30.jpg)
source: marketingprofs.com
67% 11%
-1% 63%
![Page 31: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/31.jpg)
ACE YOUR WEBSITEAWE YOUR USERS
![Page 32: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/32.jpg)
Attract
Clarify
Engage Adapt
Wow
Extend
A C
E A W
E
![Page 33: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/33.jpg)
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
![Page 34: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/34.jpg)
MOBILT
![Page 35: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/35.jpg)
En ny människa...
![Page 36: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/36.jpg)
![Page 37: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/37.jpg)
![Page 38: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/38.jpg)
![Page 39: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/39.jpg)
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.
![Page 40: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/40.jpg)
http://www.email-marketing-reports.com/wireless-mobile/smartphone-statistics.htm
![Page 41: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/41.jpg)
MOBILT ÖKAR DIN FÖRMÅGA
![Page 42: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/42.jpg)
ALLA SÄGER “MOBILE FIRST”
![Page 43: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/43.jpg)
VAD ÄR MOBILT?
![Page 44: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/44.jpg)
![Page 45: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/45.jpg)
Mobilt är allestädes närvarande - inte ett separat silo.
![Page 46: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/46.jpg)
FARAN MED MOBIL WEBBPLATS
![Page 47: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/47.jpg)
Separata kodbaser
Separata team
Dubbelarbete
OsynkadeMobil Desktop
Presentationsidé från: http://underthebedstudios.com/blog/why-mobile-first-isnt-enough/
![Page 48: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/48.jpg)
Mobil DesktopAllt
däremellan?
Presentationsidé från: http://underthebedstudios.com/blog/why-mobile-first-isnt-enough/
![Page 49: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/49.jpg)
Arbetsbelastning och risker ökar exponentiellt med antalet olika sajter
du skapar.
![Page 50: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/50.jpg)
FARAN FÖR ANVÄNDARE
![Page 51: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/51.jpg)
![Page 52: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/52.jpg)
![Page 53: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/53.jpg)
![Page 54: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/54.jpg)
![Page 55: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/55.jpg)
![Page 56: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/56.jpg)
![Page 57: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/57.jpg)
![Page 58: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/58.jpg)
![Page 59: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/59.jpg)
själv-design
oavsiktlig design
geni-design
aktivitets- design
upplevelse-design
http://vimeo.com/20881152
![Page 60: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/60.jpg)
Mobila användare är alltid...
på språng
på en långsam uppkoppling
bara intresserade av snabb interaktion
?
![Page 61: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/61.jpg)
86% ANVÄNDER EN MOBIL ENHET FRAMFÖR TV-N
http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html
![Page 62: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/62.jpg)
![Page 63: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/63.jpg)
Vid val mellan att behålla mobil eller TV skulle 64% välja mobilen!
![Page 64: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/64.jpg)
SÅ OM ANVÄNDARNA KAN KOMMA IN HUR SOM HELST?
![Page 65: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/65.jpg)
![Page 66: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/66.jpg)
DET ROLIGA MED APPAR
![Page 67: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/67.jpg)
snabbt
närvarande
roliga effekter
![Page 68: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/68.jpg)
UTMANINGEN MED APPAR
En fast yta.
Roterande skärm.
Många skärmar!
![Page 69: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/69.jpg)
![Page 70: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/70.jpg)
![Page 71: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/71.jpg)
Människor balanserar iPaden på magen, lägga inte viktiga knappar
där.
![Page 72: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/72.jpg)
![Page 73: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/73.jpg)
![Page 74: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/74.jpg)
![Page 75: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/75.jpg)
![Page 76: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/76.jpg)
http://gizmodo.com/5133070/iphone-app-store-hits-500-million-downloads-we-break-down-the-numbers
![Page 77: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/77.jpg)
NATIVE VS WEBB?
![Page 78: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/78.jpg)
NATIVE
Bor på telefonen
Laddas ner till enheten
Byggs specifikt för en enhet
Programmeringsspråk (Objective C/Java)
![Page 79: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/79.jpg)
WEBB
Bor på webben
Åtkomst via en webbläsare
Byggd med “webbspråk” (HTML/CSS/JS)
![Page 80: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/80.jpg)
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
![Page 81: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/81.jpg)
![Page 82: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/82.jpg)
WEBBFORMULÄR
![Page 83: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/83.jpg)
- Det kommer nästan ingen genomden där dörren.Jag visste väl att
webben inte skulle leverera!
![Page 84: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/84.jpg)
Requirement specification
✓ User should be able to log in.
✓ It should be easy.
![Page 85: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/85.jpg)
![Page 86: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/86.jpg)
![Page 87: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/87.jpg)
![Page 88: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/88.jpg)
![Page 89: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/89.jpg)
http://per.ax/rcube
![Page 90: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/90.jpg)
The solution will depend...
...on the question asked.
![Page 91: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/91.jpg)
Create a form for uploading images.
![Page 92: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/92.jpg)
Help the user publishphotos immediately after they are taken.
![Page 93: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/93.jpg)
![Page 94: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/94.jpg)
Have task-oriented requirements and you will get innovative solutions.
![Page 95: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/95.jpg)
LET’S ZOOM OUT
95
![Page 96: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/96.jpg)
96
![Page 97: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/97.jpg)
97
![Page 98: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/98.jpg)
98
![Page 99: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/99.jpg)
99
![Page 100: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/100.jpg)
100
![Page 101: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/101.jpg)
101
![Page 102: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/102.jpg)
102
![Page 103: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/103.jpg)
103
![Page 104: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/104.jpg)
104
![Page 105: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/105.jpg)
105
![Page 106: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/106.jpg)
106
![Page 107: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/107.jpg)
107
![Page 108: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/108.jpg)
108
![Page 109: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/109.jpg)
109
![Page 110: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/110.jpg)
110
![Page 111: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/111.jpg)
ExpectationImpression
InteractionCompletionEntry
ExitExperience
111
![Page 112: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/112.jpg)
Market Web Business
112
ExpectationImpression
InteractionCompletionEntry
ExitExperience
![Page 113: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/113.jpg)
Customer Service
113
Market Web Business
ExpectationImpression
InteractionCompletionEntry
ExitExperience
![Page 114: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/114.jpg)
FORM FLOW
114
![Page 115: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/115.jpg)
115
![Page 116: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/116.jpg)
CLEAR BUTTON
116
![Page 117: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/117.jpg)
CLEAR BUTTON
117
![Page 118: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/118.jpg)
DESIGN PATTERNS
118
![Page 119: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/119.jpg)
119
![Page 120: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/120.jpg)
120
![Page 121: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/121.jpg)
121
![Page 122: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/122.jpg)
122
![Page 123: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/123.jpg)
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
![Page 124: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/124.jpg)
PASSWORDS
*************PasswordStrong
Nsv!1v8#
124
![Page 125: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/125.jpg)
PASSWORDS
fidoPassword
Hide password as I type
125
![Page 126: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/126.jpg)
PURPOSE OF BIG FIELDS
• See what you are typing!
• Fewer mistakes
• Draw attention to the form126
![Page 127: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/127.jpg)
CONVERSATION(IT’S NOT CALLED A DIALOG BOX FOR NO REASON)
127
![Page 128: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/128.jpg)
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
My broadband isn’t working!
what?
128
![Page 129: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/129.jpg)
129
![Page 130: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/130.jpg)
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
mm, and e-mail?
0705451234
My broadband isn’t working
Yep.
130
![Page 131: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/131.jpg)
131
![Page 132: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/132.jpg)
CONVERSATION
132
![Page 133: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/133.jpg)
The web is a conversation. Make sure your website has a voice.
![Page 134: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/134.jpg)
Label:
! Required Field!
Label:
! Required Field!
Talking web form!
![Page 135: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/135.jpg)
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
![Page 136: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/136.jpg)
MOBILE INPUT
136
http://www.elated.com/articles/banish-javascript-in-web-forms-with-html5/
![Page 137: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/137.jpg)
YOU CAN LOVE FORMS TOOOO MUCH...
137
![Page 138: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/138.jpg)
138
![Page 139: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/139.jpg)
139
![Page 140: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/140.jpg)
140
![Page 141: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/141.jpg)
141
![Page 142: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/142.jpg)
142
![Page 143: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/143.jpg)
POST DRAFT
Disruptive
Responsive
Alignment
Feedback
Tone
Path
Order
Size
Trim
![Page 144: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/144.jpg)
144
Gör om!
![Page 145: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/145.jpg)
JOTFORM!
145
![Page 146: Upplevelsedesign — Överblick. Mobilt. Webbformulär](https://reader031.vdocuments.net/reader031/viewer/2022013003/546484efaf7959e7138b53c0/html5/thumbnails/146.jpg)