UI design formonetisation enablers forSeries 40 Full Touch1            © Nokia 2012 UI design for monetisation enablers fo...
Overview•       Advertisement•       Nokia store considerations•       Subscription and shop considerations•       Further...
Advertisement3   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Use advertisements correctly to stay inthe business.4   © Nokia 2012 UI design for monetisation enablers for Series 40 Ful...
Banner size is 216 x 36 pixels.5   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 201...
Ads could be repeated at key breaksinside long content.6   © Nokia 2012 UI design for monetisation enablers for Series 40 ...
Ads being part of the chrome shouldalways appear at the same position.7   © Nokia 2012 UI design for monetisation enablers...
The ad should always be selectable andnot interfere with any chrome.                                                      ...
Differentiate the ad from the actualcontent.9   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch....
Full screen ads should be used atbreakpoints, not within tasks.10   © Nokia 2012 UI design for monetisation enablers for S...
Allow to opt out advertisements within-app purchase.11   © Nokia 2012 UI design for monetisation enablers for Series 40 Fu...
Test with real-life ads in real phones,not only with optimized placeholders.12   © Nokia 2012 UI design for monetisation e...
Nokia Store considerations13   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11...
Nokia store allows applications and appextensions for sale.14   © Nokia 2012 UI design for monetisation enablers for Serie...
Nokia store does not allow physicalgoods or event tickets for sale.15   © Nokia 2012 UI design for monetisation enablers f...
Bundled in the app: Nokia DRM.     On a back-end server: Your solution.                               Nokia DRM           ...
Nokia DRM: Nokia restoration policy.     Your solution: Your restoration policy.                              Nokia DRM   ...
Subscription and shop                      considerations18   © Nokia 2012 UI design for monetisation enablers for Series ...
Make register and login equal.19   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 201...
Do not re-invent login. Make it easyand let it appear late in the flow.20   © Nokia 2012 UI design for monetisation enable...
A pre-filled checkout form allowsconvenient checkout.21   © Nokia 2012 UI design for monetisation enablers for Series 40 F...
Further guidelines22   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan ...
Promote the items you are selling. Donot hide them in menus only.23   © Nokia 2012 UI design for monetisation enablers for...
Explain what you are selling.24   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012...
Show the full price you will charge asearly as possible.25   © Nokia 2012 UI design for monetisation enablers for Series 4...
The app must work without additionalpurchases.26   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Tou...
Costs relate to money and downloadsize.27   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx...
Reserve ”buy” or ”purchase” for theactual purchase.28   © Nokia 2012 UI design for monetisation enablers for Series 40 Ful...
Mark sold items.29   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Kr...
Support your users if you want them tobuy again from you.30   © Nokia 2012 UI design for monetisation enablers for Series ...
Purchase flow examples31   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 ...
In-App-Purchase uses application UI, NokiaAccount UI and Nokia Store UI.32   © Nokia 2012 UI design for monetisation enabl...
In-App-Purchase: Purchase a product.                                                               Application UI         ...
In-App-Purchase: Purchase a product.     Application UI                                            Application UI         ...
In-App-Purchase: Purchase a product.     Application UI                                            Application UI         ...
In-App-Purchase: Purchase a product.     Application UI                                        Nokia Account UI           ...
In-App-Purchase: Purchase a product.     Nokia Account UI                                       Nokia Account UI          ...
In-App-Purchase: Purchase a product.     Nokia Account UI                                       Nokia Account UI          ...
In-App-Purchase: Purchase a product.     Nokia Account UI                                          Nokia Store UI         ...
In-App-Purchase: Purchase a product.     Nokia Store UI                                            Application UI40   © No...
In-App-Purchase: Restore a product.                                                               Application UI          ...
In-App-Purchase: Restore a product.     Application UI                                            Application UI          ...
In-App-Purchase: Restore a product.     Application UI                                            Application UI          ...
In-App-Purchase: Restore a product.     Application UI                                            Application UI          ...
In-App-Purchase: Restore a product.     Application UI                                            Application UI45   © Nok...
UX offering for Series 4046   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-...
There is a UI style guide.47   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11...
The Nokia’s Series 40 stencils supportInkscape.48   © Nokia 2012 UI design for monetisation enablers for Series 40 Full To...
Series 40 UI component demos appshowcases UI and code.49   © Nokia 2012 UI design for monetisation enablers for Series 40 ...
Series 40 UI DesignUX Library for Series 40 : http://www.developer.nokia.com/Resources/Library/Full_Touch/In-app advertisi...
Further readings about mobile designJacob Nielsen’s show case “Why WSJ Mobile App Gets **Customer Reviews”.http://www.usei...
Take home messages52   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan ...
Be honest if you want people tocontinue making business with you.53   © Nokia 2012 UI design for monetisation enablers for...
Do not reinvent login and checkout.54   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.0...
Ad placement is very delicate andrequires UX tests with real-life ads.55   © Nokia 2012 UI design for monetisation enabler...
Exercises56   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Exercise: Where would you place “buymore levels” button(s) in a game?57   © Nokia 2012 UI design for monetisation enablers...
Exercise: What is wrong with thislayout?58   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.ppt...
Exercise: Which problems occur if youplace the ad at the bottom of theview?59   © Nokia 2012 UI design for monetisation en...
Exercise: What is wrong with this flow(assume you are signed-in already toNokia Store).60   © Nokia 2012 UI design for mon...
Exercise: Which checkout concept doyou prefer and why?61   © Nokia 2012 UI design for monetisation enablers for Series 40 ...
Thanks to:Sanna HiukkaTuomo Kekoni62   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01...
Thanks ext-jan.krebber@nokia.com63   © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 ...
Upcoming SlideShare
Loading in …5
×

UI design for monetisation enablers for series 40 full touch

1,403 views

Published on

How you design and present monetisation interactions requires as much attention to user experience as does the rest of your app. If you use in-app ads or in-app purchasing, this UX webinar presentation is for you. The presentation walks you through the recommended flows of various monetisation stories in Series 40 full touch. It also demonstrate common mistakes that developers make and will propose solutions for those problems.

Published in: Technology
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,403
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
60
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

UI design for monetisation enablers for series 40 full touch

  1. 1. UI design formonetisation enablers forSeries 40 Full Touch1 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  2. 2. Overview• Advertisement• Nokia store considerations• Subscription and shop considerations• Further guidelines• Purchase flow examples• UX offering• Take home messages• Exercises 2 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  3. 3. Advertisement3 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  4. 4. Use advertisements correctly to stay inthe business.4 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  5. 5. Banner size is 216 x 36 pixels.5 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  6. 6. Ads could be repeated at key breaksinside long content.6 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  7. 7. Ads being part of the chrome shouldalways appear at the same position.7 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  8. 8. The ad should always be selectable andnot interfere with any chrome. ?8 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  9. 9. Differentiate the ad from the actualcontent.9 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  10. 10. Full screen ads should be used atbreakpoints, not within tasks.10 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  11. 11. Allow to opt out advertisements within-app purchase.11 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  12. 12. Test with real-life ads in real phones,not only with optimized placeholders.12 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  13. 13. Nokia Store considerations13 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  14. 14. Nokia store allows applications and appextensions for sale.14 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  15. 15. Nokia store does not allow physicalgoods or event tickets for sale.15 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  16. 16. Bundled in the app: Nokia DRM. On a back-end server: Your solution. Nokia DRM Custom solution16 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  17. 17. Nokia DRM: Nokia restoration policy. Your solution: Your restoration policy. Nokia DRM Custom solution17 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  18. 18. Subscription and shop considerations18 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  19. 19. Make register and login equal.19 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  20. 20. Do not re-invent login. Make it easyand let it appear late in the flow.20 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  21. 21. A pre-filled checkout form allowsconvenient checkout.21 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  22. 22. Further guidelines22 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  23. 23. Promote the items you are selling. Donot hide them in menus only.23 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  24. 24. Explain what you are selling.24 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  25. 25. Show the full price you will charge asearly as possible.25 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  26. 26. The app must work without additionalpurchases.26 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  27. 27. Costs relate to money and downloadsize.27 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  28. 28. Reserve ”buy” or ”purchase” for theactual purchase.28 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  29. 29. Mark sold items.29 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  30. 30. Support your users if you want them tobuy again from you.30 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  31. 31. Purchase flow examples31 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  32. 32. In-App-Purchase uses application UI, NokiaAccount UI and Nokia Store UI.32 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  33. 33. In-App-Purchase: Purchase a product. Application UI Application UI33 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  34. 34. In-App-Purchase: Purchase a product. Application UI Application UI Application UI34 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  35. 35. In-App-Purchase: Purchase a product. Application UI Application UI Nokia Account UI35 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  36. 36. In-App-Purchase: Purchase a product. Application UI Nokia Account UI Nokia Account UI36 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  37. 37. In-App-Purchase: Purchase a product. Nokia Account UI Nokia Account UI Nokia Account UI37 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  38. 38. In-App-Purchase: Purchase a product. Nokia Account UI Nokia Account UI Nokia Store UI38 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  39. 39. In-App-Purchase: Purchase a product. Nokia Account UI Nokia Store UI Application UI39 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  40. 40. In-App-Purchase: Purchase a product. Nokia Store UI Application UI40 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  41. 41. In-App-Purchase: Restore a product. Application UI Application UI41 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  42. 42. In-App-Purchase: Restore a product. Application UI Application UI Application UI42 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  43. 43. In-App-Purchase: Restore a product. Application UI Application UI Application UI43 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  44. 44. In-App-Purchase: Restore a product. Application UI Application UI Application UI44 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  45. 45. In-App-Purchase: Restore a product. Application UI Application UI45 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  46. 46. UX offering for Series 4046 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  47. 47. There is a UI style guide.47 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  48. 48. The Nokia’s Series 40 stencils supportInkscape.48 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  49. 49. Series 40 UI component demos appshowcases UI and code.49 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  50. 50. Series 40 UI DesignUX Library for Series 40 : http://www.developer.nokia.com/Resources/Library/Full_Touch/In-app advertising: http://www.developer.nokia.com/Distribute/In-app_advertising/In-app purchase:http://www.developer.nokia.com/Resources/Library/Full_Touch/#!in-app-purchase.htmlBattle Tank (Nokia DRM demo app): https://projects.developer.nokia.com/JMEBattleTank/Tourist Attraction (Custom DRM demo app):https://projects.developer.nokia.com/JMETouristAttractions/wikiUI Components Demos App: https://projects.developer.nokia.com/s40uivisualisationFunctional description of in-app purchase:http://www.developer.nokia.com/Resources/Library/Java/#!developers-guides/in-app-purchase/introduction/functional-description.htmlWiki companion article for this webinar:http://www.developer.nokia.com/Community/Wiki/Series_40_UI_design_for_monetization_enablers_webinar_-_companion_article50 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  51. 51. Further readings about mobile designJacob Nielsen’s show case “Why WSJ Mobile App Gets **Customer Reviews”.http://www.useit.com/alertbox/mobile-startup-screen.htmlMobile Design Pattern Gallery: UI Patterns for MobileApplications. Theresa Neil (2012).Designing Mobile Interfaces. Steven Hoober, Eric Berkman(2011).51 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  52. 52. Take home messages52 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  53. 53. Be honest if you want people tocontinue making business with you.53 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  54. 54. Do not reinvent login and checkout.54 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  55. 55. Ad placement is very delicate andrequires UX tests with real-life ads.55 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  56. 56. Exercises56 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  57. 57. Exercise: Where would you place “buymore levels” button(s) in a game?57 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  58. 58. Exercise: What is wrong with thislayout?58 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  59. 59. Exercise: Which problems occur if youplace the ad at the bottom of theview?59 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  60. 60. Exercise: What is wrong with this flow(assume you are signed-in already toNokia Store).60 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  61. 61. Exercise: Which checkout concept doyou prefer and why?61 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  62. 62. Thanks to:Sanna HiukkaTuomo Kekoni62 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
  63. 63. Thanks ext-jan.krebber@nokia.com63 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

×