UI design for monetisation enablers for series 40 full touch

1

UI design for monetisation enablers for Series 40 Full Touch

© Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

Overview

2 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

• Advertisement • Nokia store considerations • Subscription and shop considerations • Further guidelines • Purchase flow examples • UX offering • Take home messages • Exercises

Use advertisements correctly to stay in the business.


Banner size is 216 x 36 pixels.


Ads could be repeated at key breaks inside long content.


Ads being part of the chrome should always appear at the same position.


The ad should always be selectable and not interfere with any chrome.


?

Differentiate the ad from the actual content.


Full screen ads should be used at breakpoints, not within tasks.


Allow to opt out advertisements with in-app purchase.


Test with real-life ads in real phones, not only with optimized placeholders.


Nokia Store considerations


Nokia store allows applications and app extensions for sale.


Nokia store does not allow physical goods or event tickets for sale.


Bundled in the app: Nokia DRM. On a back-end server: Your solution.


Nokia DRM Custom solution

Nokia DRM: Nokia restoration policy. Your solution: Your restoration policy.


Nokia DRM Custom solution

Subscription and shop considerations


Make register and login equal.


Do not re-invent login. Make it easy and let it appear late in the flow.


A pre-filled checkout form allows convenient checkout.


Further guidelines


Promote the items you are selling. Do not hide them in menus only.


Explain what you are selling.


Show the full price you will charge as early as possible.


The app must work without additional purchases.


Costs relate to money and download size.


Reserve ”buy” or ”purchase” for the actual purchase.


Mark sold items.


Support your users if you want them to buy again from you.


Purchase flow examples


In-App-Purchase uses application UI, Nokia Account UI and Nokia Store UI.


In-App-Purchase: Purchase a product.


Application UI Application UI



Application UI Application UI Application UI



Application UI Application UI Nokia Account UI



Application UI Nokia Account UI Nokia Account UI



Nokia Account UI Nokia Account UI Nokia Account UI



Nokia Store UI Nokia Account UI Nokia Account UI



Nokia Store UI Nokia Account UI Application UI



Nokia Store UI Application UI

In-App-Purchase: Restore a product.



UX offering for Series 40


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 47

The Nokia’s Series 40 stencils support Inkscape.


Series 40 UI component demos app showcases UI and code.


Series 40 UI Design


UX 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.html Battle Tank (Nokia DRM demo app): https://projects.developer.nokia.com/JMEBattleTank/ Tourist Attraction (Custom DRM demo app): https://projects.developer.nokia.com/JMETouristAttractions/wiki UI Components Demos App: https://projects.developer.nokia.com/s40uivisualisation Functional description of in-app purchase: http://www.developer.nokia.com/Resources/Library/Java/#!developers-guides/in-app-purchase/introduction/functional-description.html Wiki companion article for this webinar: http://www.developer.nokia.com/Community/Wiki/Series_40_UI_design_for_monetization_enablers_webinar_-_companion_article

http://www.developer.nokia.com/Resources/Library/Full_Touch/

http://www.developer.nokia.com/Distribute/In-app_advertising/

http://www.developer.nokia.com/Resources/Library/Full_Touch/

https://projects.developer.nokia.com/JMEBattleTank/

https://projects.developer.nokia.com/JMETouristAttractions/wiki

https://projects.developer.nokia.com/s40uivisualisation



http://www.developer.nokia.com/Resources/Library/Java/











http://www.developer.nokia.com/Community/Wiki/Series_40_UI_design_for_monetization_enablers_webinar_-_companion_article





Further readings about mobile design


Jacob Nielsen’s show case “Why WSJ Mobile App Gets ** Customer Reviews”. http://www.useit.com/alertbox/mobile-startup-screen.html Mobile Design Pattern Gallery: UI Patterns for Mobile Applications. Theresa Neil (2012). Designing Mobile Interfaces. Steven Hoober, Eric Berkman (2011).

http://www.useit.com/alertbox/mobile-startup-screen.html

http://www.useit.com/alertbox/mobile-startup-screen.html

Take home messages


Be honest if you want people to continue making business with you.


Do not reinvent login and checkout.


Ad placement is very delicate and requires UX tests with real-life ads.


Exercises


Exercise: Where would you place “buy more levels” button(s) in a game?


Exercise: What is wrong with this layout?


Exercise: Which problems occur if you place the ad at the bottom of the view?


Exercise: What is wrong with this flow (assume you are signed-in already to Nokia Store).


Exercise: Which checkout concept do you prefer and why?


Thanks to: Sanna Hiukka Tuomo Kekoni


Thanks [email protected]


UI design for monetisation enablers for series 40 full touch

Technology

Transcript of UI design for monetisation enablers for series 40 full touch