Upplevelsedesign — Överblick. Mobilt. Webbformulär.

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

[email protected]

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

[email protected]?

mm, and e-mail?

0705451234

[email protected]

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

Per Axbom

Twitter: @axbom

+46 709 13 25 [email protected]