design för mobil användarupplevelse

Design för mobil användarupplevelse

Tom Airaksinen, AntropSheraton Hotel 2011-05-26

Agenda๏ Intro

๏ Mobila begränsningar och möjligheter

๏ Mobila beteenden

๏ Vad tänka på när man gör något mobilt?

๏ Case: Mathems iPhone-app

Dold agenda๏ Sluta se mobilen som lillebror

๏ Tänka kanalstrategi

๏ Komma igång och göra appar

Jag๏ Tom Airaksinen, User Experience Designer

๏ Fil. mag. kognitionsvetenskap

- Inriktning mot interaktionsdesign och tjänstedesign

๏ Jobbat fem år som interaktionsdesigner

- Framförallt design av mobila gränssnitt

๏ Tidigare på Ocean Observations Stockholm och Tokyo

Antrop

Mobila begränsningar och möjligheter

Dator vs mobil

Syskonstatus Storebror Lillebror

Skärm Stor, smaskig Jätteliten

Textinmatning Hederligt, mysigt tangentbord Fipplig inmatning

Liten skärm?

Liten skärm?Startsida Artikelsida

Liten skärm?

Liten skärm?

”Jag gillar nästan appen bättre än hemsidan. Det är liksom det som behövs, den har blivit mer koncentrerad

”Inte lika rörigt som hemsidan, jag tycker det är ett fint upplägg

”Snyggt! Det var inte nåt rörigt, utan det var rätt enkelt, liksom.

Jobbig textinmatning?

Källa: Svensk Telemarknad 2010, PTS

Jobbig textinmatning?

Dator vs mobil, rond 2

Alltid med Nä !

Tillräckligt bra Jodå !

Nya möjligheter Nja !

Alltid med

Tillräckligt bra

”It is somewhat slow but it definitely works, in fact my teen daughter uses hers constantly online. Among other things she uses it to keep in touch with her friends.

http://www.mobileread.com/forums/archive/index.php/t-82570.html





?

En hemlig formel

?

En hemlig formel

Value > PainInspiration: Scott Jenson, f.d. Manager of Mobile UX, Google

Mobila möjligheter๏ Kompass, accelerometer/gyro, GPS

๏ Multitouch

๏ Ljussensor för omgivande belysning

๏ Närhetssensor (närhet till andra föremål)

๏ Mikrofon, högtalare

๏ Kamera för bilder och video (ibland två kameror)

๏ Bluetooth, wifi, 3G

๏ Push-notifieringar

๏ NFC (Near-Field Communications, ex. SL Access)

Mobila beteenden

http://www.flickr.com/photos/29881930@N00/2086643318/Foto: Tim Bishop

En bild som inte stämmer

http://www.flickr.com/photos/29881930@N00/2086643318/



Användning över dagen

Visst...๏ 80% använder mobilen i pauser under dagen

๏ 74% när de köar eller väntar på någon/något

- Compete’s Smartphone Intelligence Quarterly, jan-feb 2010

Men...๏ 84% använder mobilen hemma

๏ 64% på jobbet


Och...๏ 69% använder mobilen när de shoppar

๏ 62% medan de tittar på teve


๏ Mobilen används i allt större utsträckning samtidigt som annan aktivitet!

Folk orkar läsa i mobilen๏ “I love it! Nice and clean look, easy to navigate and easy

to read. Well done! But... can you put a bit more news on there?”

๏ “...the ‘Sorry, this article isn’t yet available on the mobile site’ message was bloody annoying. Ended up having to install a browser that spoofs the user agent and renders the full desktop site.”

- Två läsare reagerar på The Guardians nya mobilsajt

Folk köper i mobilen๏ Folk vana att betala

- Förr: ringsignaler, bakgrundsbilder...

- Idag: appar, spel, tilläggsfunktioner, prenumerationer, SL-biljetter...

๏ Flera sätt att ta betalt

- App stores, in-app purchases, premium-SMS, mobilräkningen...

๏ Nya möjligheter på gång

- NFC, kortläsare till iPhone...

Köpa kärra?

Mobile First

Inte bara Google๏ "We're just now starting to think about mobile first and

desktop second for a lot of our products."

- Kate Aronowitz, Design Director på Facebook

๏ “My goal was initially just to make a mobile companion, but I became convinced it was possible to create a version of Facebook that was actually better than the website.

- Joe Hewitt, utvecklade Facebook-appen på iPhone

๏ "We really need to shift now to start thinking about building mobile first. This is an even bigger shift than the PC revolution."

- Kevin Lynch, CTO på Adobe

Men hur gör man då?

Designa för mobilen๏ Ha en genomtänkt upplevelsestrategi – hur passar

mobilen in i helheten?

๏ När projektet påbörjas, använd målstyrning för att se till att de funktioner som byggs verkligen svarar mot affärsmålen

๏ Prioritera hårt, var inte rädd att offra funktioner

๏ Utnyttja mobilens unika möjligheter

๏ Jobba hårt med detaljerna i gränssnittet och följ designriktlinjer för plattformen

Upplevelsestrategi

Webb Mobil Telefon Butik

Användarupplevelse

Webb Mobil KundtjänstButik

Upplevelsekarta

EnterAnticipate Engage ReflectExit

Enri

ched

Exp

erie

nce

Po

ach

ed E

xper

ien

ce

Touchpoints CarOffice Walk-In Line Order Pay Sit WorkDrink Pack Up Walk Out Car

1.a Discussing with team the local places to grab a coffee.

1.b Decid-ing to go to Starbucks and work on de-sign reports.

1.c Hoping to find a close parking spot.

1.d Hoping Starbucks is not overly crowded and will have avail-able seating.

2.a Notice that there are a couple of people in line.

2.b Notice the narrow, con-fined layout.

2.c Enjoy the aroma of roasted coffee and mixed sweet, robust smells.

2.d The light-ing is pleasant, not overly bright and not too dim.

2.e The music seems ethnic, extended vocals, soft in style, volume too load and but my taste.

1.e Consider-ing alternative places just in case..

3.a The wait-ing line occu-pies the main traffic way.

3.b The menus across the counter are hard to read while in line.

baseline

3.c The line moves slow, people who just ordered are still in the same area. Becomes crowded.

3.d The order-ing process seems too slow. Inconsis-tent structure of service.

4.a The Barista acknowledges me with a smile.

4.b I can see the menu bet-ter now, but I feel rushed to order a drink.

4.c I feel forced to make a quick beverage se-lection. I play it safe by having what I always get.

4.d The baris-ta confirms my selection and asks my name to write on the cup.

4.e He writes down my name and some code on the cup and hands it off to another barista who will make it when he is finished with other orders.

2.f The room climate seems intentionally cold.

5.a The barista tells me the total and I pay with my credit card. He asks me if I want my receipt, I decline.

5.b My inter-action ends with him say-ing thank you. He doesn’t use my name.

5.c Now I move to the left of where i paid. Once again I feel crowded and out of place. People are walking by me. There isn’t a designated waiting ,sitting area.

5.d As I stand, the drinker maker shouts finished orders and places them on a drink stand. He screams Grande Chai.

5.e Confu-sion. Is this my drink? Why did he not call out my name or name and drink? I pick up the drink and see that it has Eric writ-ten on it.

6.a Grab my drink and look for a place to sit.

6.b I need, most im-portantly, an outlet and a workspace.

6.c I notice that there are only a few locations in the seating ar-eas that have outlets. This is discouraging.

6.d Most places are occupied. No outlets are available.

6.e The work-spaces seem small and impractical. Most are just have a small round wooden table with two wooden chairs.

6.f I find an empty reclined cushioned armchair. Next to it is a small wooden table shared by another person sitting in the other arm chair.

6.g The chair is comfortable and I continue to sit in it.

7.a The cub is hot, steaming, but withstand-ing in my hand.

7.b Smells roasty and sweet.

7.c First sip is too hot, but flavorful. I’m happy with the taste and my choice.

7.d The continued sips remain satisfying.

8.a I place my drink on the table next me and place my bag on the floor.

8.b I remove my computer and accesso-ries and now am shifting my coffee to find room for all of my things on this little cof-fee table.

8.c The table is too low to work from there, so I place my laptop in my lap. My drink remains on the table, my bag on the floor.

8.d I’m feel-ing crowded. I have no room to use my wire-less mouse. I now use the surface of the arm chair as my mouse pad. Not very effective.

8.e The crowd talking doesn’t bother me after awhile, but the music is way too loud and beginning to become a distraction.

8.f I enjoy the free wireless and the unlim-ited use. The signal strength is adequate.

8.g The music is really both-ering me. I put my head-phones on and play my mp3 songs.

8.h The bat-tery use on my computer is a concern now. I will begin looking for another table to work at.

8.i The air conditioning seems inten-tion. It’s cold outside and cold inside. I slip my jacket on.

8.j I continually finding myself people watch-ing while I work. There are interesting people here, so I’m not too bothered. I never like feel-ing alone. any

9.a The barista walks by me and makes an announce-ment to the tore that it will be closing shorty -10 pm.

9.b I would like to continue to work. I feel 10pm closing time is much too early, especially in a college town.

9.c I stand up and walk around until I find a hidden trash can to throw my cup into.

10.a I pack my things up and head out the door.

10.b The re-maining staff tell me to have a good night.

11.a I head to my car and wish that I could have stayed longer to work. I know that once I get home, I will be in the wrong mind state to continue working.

11.b The cof-fee was very good, but I was disap-pointed in the environment. Distracting music, small workspace, lack of power outlets.

Date: 3/22/10Eric - Repeat CustomerPurpose: To work/drink coffee

Ambience

Aroma

Audible Sensations

Second guessing

Worrying

Cold, draftySlightly crowded

Greeting

Unwilling to try something new, risk

Feeling rushed

Lack of personal spaceUnstructured

Fake

Factory line

Quick, convenient

Impersonal

Polite

FeedbackConfusingInconsistent

Loud

Lack of seatingLack of outlets

Not large work spaces

Sofa chair is comfortable

Uncomfortable wooden chairs

Tasty drink

Flavorable

Appropriate temperature

Not large work spaces

Furniture not ideal for computer work

Crowd conversation noise

Loud musicDistractingRepeating, not my taste

Blasting air conditioning

Free Wi-Fi

People watching

Closing time

Good byes

Annoyed about closing time

Good drink

Annoyed about where I sat

Back hurts

Starbucks Experience Map

http://www.littlespringsdesign.com/wp-content/themes/LSD%20theme/images/experiencemap1.pdf



Målstyrning

Effektmål Varför bygger vi detta?

Målgrupper Vilka realiserar affärsmålen?

Användningsmål och scenarier Vad är användarnas syfte och mål? Hur beter de sig på aktuell plattform? Hur kommer det att användas?

Tjänster, funktioner Vilka tjänster erbjuder vi? Vilka funktioner behövs? Vilka aktiviteter ska vi göra?

Prioritera hårt

8020

En saga om två adressböcker

Utnyttja möjligheterna

Jobba hårt med gränssnittet

Följ designriktlinjer๏ Apple iOS (iPhone/iPad)

- http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/

- http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf (samma som PDF)

๏ Android

- http://developer.android.com/guide/practices/ui_guidelines/index.html

- http://www.mutualmobile.com/2011/android-design-guidelines-version-1-1-honeycomb/

๏ Mobilwebb

- http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml

- http://www.uxmatters.com/mt/archives/2011/01/designing-for-the-mobile-web-special-considerations.php

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/




http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf




http://developer.android.com/guide/practices/ui_guidelines/index.html

http://developer.android.com/guide/practices/ui_guidelines/index.html

http://www.mutualmobile.com/2011/android-design-guidelines-version-1-1-honeycomb/

http://www.mutualmobile.com/2011/android-design-guidelines-version-1-1-honeycomb/

http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml

http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml

http://www.uxmatters.com/mt/archives/2011/01/designing-for-the-mobile-web-special-considerations.php




App eller webb?๏ Webb är bra om:

- Alla måste kunna komma åt tjänsten, oberoende av telefontyp

- Er tjänst inte är beroende av avancerad interaktion

๏ Appar är bra om:

- Prestanda är viktigt

- Er tjänst kräver integration med annat i telefonen (hårdvara som kamera eller gyro, men även mjukvara som adressbok eller kalender)

- Ni vill ta betalt

- Tjänsten ska funka off-line (även om detta delvis kan göras även på webben)

Annat att tänka på๏ Webb

- Alltid uppdaterad, inga hinder för publicering

- Enkelt testa vad som funkar med A/B-tester osv

๏ App

- Upplevs som mer direkt åtkomlig än bokmärken

๏ Vad föredrar användarna?

- Svårt säga – olika studier tyder på olika saker

- Förmodligen beror det mest på typ av tjänst!

Alternativa vägar๏ App för en eller ett par plattformar, mobilwebb för resten

- Optimal upplevelse för viktigaste målgrupperna

- Okej upplevelse för de flesta

๏ Hybridappar

- Ett “native-skal” runt en webbvy

- Kan vara en OK lösning beroende på typ av tjänst

๏ SMS/MMS

- Ibland behöver man inte krångla till det

Case – Mathem

Mathem

Mathem – Skärmdumpar

Mathem i mobilen๏ Vågade välja bort

๏ Stöder både sök och bläddring

๏ Mobilunika funktioner som streckkodsscanning

๏ Komplement till webben, samma inköpslistor, favoriter osv

๏ Stöder samarbete över kanalerna

๏ Än så länge iPhone, mobilwebb nästa steg

Slutligen

Kom ihåg๏ Begränsningar är en styrka

๏ Den hemliga formeln är Value > Pain

๏ Mobilen är ofta ett perfekt komplement till andra kanaler

๏ Ha en genomtänkt upplevelsestrategi och underlätta byten mellan kanalerna

๏ 80/20: Rensa hårt, men snarare bland funktioner än innehåll

Tack!

Tom Airaksinen

[email protected]

design för mobil användarupplevelse

Documents