Upplevelsedesign — Överblick. Mobilt. Webbformulär.

UPPLEVELSEDESIGN Överblick. Mobilt. Webbformulär. Berghs School of Communication Per Axbom 2011-11-24

Per AxbomExperience DesignerDigital StrategistAxbom Innovation ABTwitter: @axbom

Axbom InnovationLivscykel för framgångsrika idéer ! !!!!!!!!! !!!!!!!! ! ! Mekanismer för återkoppling. Omvärld. Trender. version 1.0 !

Upplevelsedesign

http://www.youtube.com/watch?v=L1CxlyMoFRs

En röd knapp räcker.

Usability vs UXhttp://www.ﬂickr.com/photos/seguin_maxim/80205117/sizes/z/in/photostream/

Usability är en kaffekopp. UX är ett latteglas.

Allvarligt, skickadedu SMS med mig?

SMÄRTA NYTTAuppoffring fördelar

Usability Kan göraUX Vill göra Vill göra igen Rekommenderar

UI-designers tänker på detta...

UX-designers tänker också detta...

Guru-mytenDate

attractWow, did you interactknow....? Check FAIL this out...! WOW! CONVERSION

Hur gör vi användaren ledsen?

Samma storlek Samma färgLiten text Miljontals valGöm länkar Otydlig text...

Lista ut hur du skapar maximalsmärta för användaren. Gör tvärtom.

source: marketingprofs.com

67% 11%-1% 63% source: marketingprofs.com

ACE YOUR WEBSITE AWE YOUR USERS

Extend Attract E AWow W C Clarify A E Adapt Engage

För som vill . Tjänst: målgrupp/persona behov namn på produkt/tjänst Extend AttractWow Extend Attract Clarify E A Wow W C Clarify A E Adapt Engage Adapt Engage

MOBILT

En ny människa...

Flitiga mobildata-användare förväntastredubblas till en miljard år 2013.Upptagandet av mobilt internet är åttagå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 perdag 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 DubbelarbeteMobil Desktop Osynkade Presentationsidé från: http://underthebedstudios.com/blog/why-mobile-ﬁrst-isnt-enough/

AlltMobil Desktop däremellan? Presentationsidé från: http://underthebedstudios.com/blog/why-mobile-ﬁrst-isnt-enough/

Arbetsbelastning och risker ökarexponentiellt med antalet olika sajter du skapar.

FARAN FÖR ANVÄNDARE

oavsiktlig geni- upplevelse- design design design själv- aktivitets- design design http://vimeo.com/20881152

Mobila användare är alltid...på språngpå 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 KANKOMMA IN HUR SOM HELST?

DET ROLIGA MED APPAR

snabbtnärvaranderoliga effekter

UTMANINGEN MED APPAREn 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?

NATIVEBor på telefonenLaddas ner till enhetenByggs specifikt för en enhetProgrammeringsspråk (Objective C/Java)

WEBBBor på webbenÅtkomst via en webbläsareByggd med “webbspråk” (HTML/CSS/JS)

Native WebbInbyggd marknadsföring BilligareKräver mer för Kan integreras i beﬁntlig webbkundkännedom Snabb utveckling ochAccess till enheten (kamera, uppdateringskontrollmikrofon, accelerator) Inga tredjepartsavgifterAccess till andra appar TillgänglighetHosting Browserfunktionalitet (IP- ochStatistik GPS-baserad geolocation)Betala för att utveckla... Spara lokaltDet ﬁnns många enheter! Swipe detection (JS) http://vimeo.com/6353874

WEBBFORMULÄR

- Det kommer nästan ingen genom den 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 foruploading images.

Help the user publishphotos immediatelyafter they are taken.

Have task-oriented requirements and you will get innovative solutions.

LET’S ZOOM OUT 95

Impression Entry Completion Experience Expectation Interaction Exit 111

Market Web BusinessImpression Entry Completion Experience Expectation Interaction Exit 112

Market Web Business Customer ServiceImpression Entry Completion Experience Expectation Interaction Exit 113

FORM FLOW 114

CLEAR BUTTON 116

CLEAR BUTTON 117

DESIGN PATTERNS 118

AFFORDANCE AND AREA CODES Ibland kan det bli aktuellt att skicka material. Ange din postadress om det är ok att skicka material till dig. Adress Postnr Postadress Spara 123

PASSWORDSPassword ************* Strong Nsv!1v8# 124

PASSWORDSPasswordﬁdo Hide password as I type 125

PURPOSE OF BIG FIELDS• See what you are typing!• Fewer mistakes• Draw attention to the form 126

CONVERSATION(IT’S NOT CALLED A DIALOG BOX FOR NO REASON) 127

Name? Sara Andersson Social security number? 820917-2654 Phone? 0705451234 sara@andersson.net E-mail? Your message? My broadband isn’t working! You said social security number in the wrong format. Please go what? back and repeat. 128

Hi, what’s your name? Sara Andersson ok, what’s your social security number? 820917-2654 thanks, and 0705451234 your phone number? sara@andersson.net mm, and e-mail? ok, and your My broadband message is? isn’t working Great, thanks! Let me just double check. Did you say Yep. sara@andersson.net? 130

CONVERSATION 132

The web is a conversation. Make sure your website has a voice.

Talking web form!Label:   ! Required Field!Label:   ! Required Field!

MOBILE - TALKING WITH YOUR FINGERS Månadskostnader utöver lönekostnader 14 000 kr Under 2011 fyller jag 26 år eller 66 år eller 27-65 år mindre mer 135

MOBILE INPUThttp://www.elated.com/articles/banish-javascript-in-web-forms-with-html5/ 136

YOU CAN LOVE FORMS TOOOO MUCH... 137

POST DRAFTPathOrderSizeTrimDisruptiveResponsiveAlignmentFeedbackTone

Gör om!144

JOTFORM! 145

Per Axbom +46 709 13 25 00 per@axbom.seTwitter: @axbom

Upplevelsedesign — Överblick. Mobilt. Webbformulär.

by Per Axbom on Nov 24, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 10

Statistics

Upplevelsedesign — Överblick. Mobilt. Webbformulär. — Presentation Transcript

http://paper.li	9
http://a0.twimg.com	1