Design för mobil användarupplevelse


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Design för mobil användarupplevelse

  1. 1. Design för mobilanvändarupplevelse Tom Airaksinen, Antrop Sheraton Hotel 2011-05-26
  2. 2. 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
  3. 3. Dold agenda๏ Sluta se mobilen som lillebror๏ Tänka kanalstrategi๏ Komma igång och göra appar
  4. 4. 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
  5. 5. Antrop
  6. 6. Mobila begränsningar och möjligheter
  7. 7. Dator vs mobilSyskonstatus Storebror Lillebror Skärm Stor, smaskig JättelitenTextinmatning Hederligt, mysigt tangentbord Fipplig inmatning
  8. 8. Liten skärm?
  9. 9. Liten skärm?
  10. 10. Liten skärm?
  11. 11. Liten skärm? Startsida Artikelsida
  12. 12. Liten skärm?
  13. 13. Liten skärm?” ” Snyggt! Det var inte nåt rörigt, utan det var rätt enkelt, liksom.Jag gillar nästan appen bättreän hemsidan. Det är liksom detsom behövs, den har blivit merkoncentrerad ” Inte lika rörigt som hemsidan, jag tycker det är ett fint upplägg
  14. 14. Jobbig textinmatning? Källa: Svensk Telemarknad 2010, PTS
  15. 15. Jobbig textinmatning?
  16. 16. Dator vs mobil, rond 2 Alltid med Nä !Tillräckligt bra Jodå !Nya möjligheter Nja !
  17. 17. Alltid med
  18. 18. 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. archive/index.php/t-82570.html
  19. 19. En hemlig formel ?
  20. 20. En hemlig formel Value ? Pain > Inspiration: Scott Jenson, f.d. Manager of Mobile UX, Google
  21. 21. 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)
  22. 22. Mobila beteenden
  23. 23. En bild som inte stämmerFoto: Tim Bishop
  24. 24. Användning över dagen
  25. 25. 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
  26. 26. Men...๏ 84% använder mobilen hemma๏ 64% på jobbet - Compete’s Smartphone Intelligence Quarterly, jan-feb 2010
  27. 27. Och...๏ 69% använder mobilen när de shoppar๏ 62% medan de tittar på teve - Compete’s Smartphone Intelligence Quarterly, jan-feb 2010๏ Mobilen används i allt större utsträckning samtidigt som annan aktivitet!
  28. 28. 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
  29. 29. 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...
  30. 30. Köpa kärra?
  31. 31. Mobile First
  32. 32. Mobile First
  33. 33. Inte bara Google๏ "Were 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
  34. 34. Men hur gör man då?
  35. 35. 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
  36. 36. Upplevelsestrategi Webb Mobil Mobil Butik Telefon Kundtjänst Butik Användarupplevelse
  37. 37. Upplevelsekarta Date: 3/22/10 Starbucks Experience Map Eric - Repeat Customer Enriched Experience Purpose: To work/drink coffee Tasty drink Free Wi-Fi Good drink Flavorable Appropriate temperature Aroma Polite People watching Crowd conversation noise Ambience Quick, convenient Sofa chair is comfortable Good byes baseline Greeting Fake Audible Sensations Closing time Worrying Loud Factory line Impersonal Poached Experience Second guessing Blasting air conditioning Loud music Distracting Unwilling to try something new, risk Annoyed about closing time Repeating, not my taste Cold, drafty Feeling rushed Annoyed about where I sat Slightly crowded Back hurts Not large work spaces Not large work spaces Feedback Furniture not ideal for computer work Confusing Lack of personal space Lack of seating Inconsistent Unstructured Lack of outlets Uncomfortable wooden chairs Anticipate Enter Engage Exit ReflectTouchpoints Office Car Walk-In Line Order Pay Sit Drink Work Pack Up Walk Out Car 1.a Discussing 1.c Hoping 2.a Notice 3.a The wait- 4.a The Barista 5.a The barista 6.a Grab my 7.a The cub is 8.a I place my 8.f I enjoy the 9.a The barista 10.a I pack my 11.a I head to with team the to find a close that there are ing line occu- acknowledges tells me the drink and look hot, steaming, drink on the free wireless walks by me things up and my car and local places to parking spot. a couple of pies the main me with a total and I pay for a place to but withstand- table next me and the unlim- and makes an head out the wish that I grab a coffee. people in line. traffic way. smile. with my credit sit. ing in my and place my ited use. The announce- door. could have 1.d Hoping card. He asks hand. bag on the signal strength ment to the stayed longer 1.b Decid- Starbucks is 2.b Notice the 3.b The 4.b I can see me if I want 6.b I need, floor. is adequate. tore that it 10.b The re- to work. I ing to go to not overly narrow, con- menus across the menu bet- my receipt, I most im- 7.b Smells will be closing maining staff know that Starbucks and crowded and fined layout. the counter ter now, but I decline. portantly, an roasty and 8.b I remove 8.g The music shorty -10 pm. tell me to have once I get work on de- will have avail- are hard to feel rushed to outlet and a sweet. my computer is really both- a good night. home, I will be sign reports. able seating. 2.c Enjoy the read while in order a drink. 5.b My inter- workspace. and accesso- ering me. I put 9.b I would like in the wrong aroma of line. action ends 7.c First sip is ries and now my head- to continue mind state 4.c I feel 1.e Consider- roasted coffee with him say- 6.c I notice too hot, but am shifting my phones on and to work. I feel to continue forced to ing alternative and mixed 3.c The line ing thank you. that there are flavorful. I’m coffee to find play my mp3 10pm closing working. make a quick places just in sweet, robust moves slow, He doesn’t use only a few happy with room for all of songs. time is much beverage se- case.. smells. people who my name. locations in the taste and my things on too early, 11.b The cof- lection. I play it just ordered the seating ar- my choice. this little cof- 8.h The bat- especially in a fee was very safe by having 2.d The light- ing is pleasant, 5.c Now I 7.d The are still in the same area. what I always eas that have outlets. This is fee table. tery use on my computer is a college town. good, but I get. move to the was disap- not overly Becomes discouraging. continued 8.c The table concern now. 9.c I stand pointed in the bright and not left of where is too low to crowded. 4.d The baris- sips remain I will begin up and walk environment. too dim. i paid. Once work from 6.d Most looking for
  38. 38. MålstyrningEffektmålVarför bygger vi detta?MålgrupperVilka realiserar affärsmålen?Användningsmål och scenarierVad är användarnas syfte och mål?Hur beter de sig på aktuell plattform?Hur kommer det att användas?Tjänster, funktionerVilka tjänster erbjuder vi?Vilka funktioner behövs?Vilka aktiviteter ska vi göra?
  39. 39. Prioritera hårt 80 20
  40. 40. En saga om två adressböcker
  41. 41. En saga om två adressböcker
  42. 42. En saga om två adressböcker
  43. 43. En saga om två adressböcker
  44. 44. Utnyttja möjligheterna
  45. 45. Jobba hårt med gränssnittet
  46. 46. Jobba hårt med gränssnittet
  47. 47. Följ designriktlinjer๏ Apple iOS (iPhone/iPad) - mobilehig/ - MobileHIG.pdf (samma som PDF)๏ Android - -๏ Mobilwebb - - considerations.php
  48. 48. 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)
  49. 49. 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!
  50. 50. 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
  51. 51. Case – Mathem
  52. 52. Mathem
  53. 53. Demo
  54. 54. Mathem – Skärmdumpar
  55. 55. Mathem – Skärmdumpar
  56. 56. Mathem – Skärmdumpar
  57. 57. Mathem – Skärmdumpar
  58. 58. 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
  59. 59. Slutligen
  60. 60. 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
  61. 61. Tack! Tom Airaksinen