Date post: | 13-May-2015 |
Category: |
Technology |
Upload: | microsoft-mobile-developer |
View: | 1,136 times |
Download: | 0 times |
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
Advertisement
3 © 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 in the business.
4 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
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
Ads could be repeated at key breaks inside long content.
6 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Ads being part of the chrome should always 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
The ad should always be selectable and not 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
?
Differentiate the ad from the actual content.
9 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Full screen ads should be used at breakpoints, not within tasks.
10 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Allow to opt out advertisements with in-app purchase.
11 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
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
Nokia Store considerations
13 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Nokia store allows applications and app extensions for sale.
14 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Nokia store does not allow physical goods 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
Bundled in the app: Nokia DRM. On a back-end server: Your solution.
16 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Nokia DRM Custom solution
Nokia DRM: Nokia restoration policy. Your solution: Your restoration policy.
17 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Nokia DRM Custom solution
Subscription and shop considerations
18 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
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
Do not re-invent login. Make it easy and 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
A pre-filled checkout form allows convenient checkout.
21 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Further guidelines
22 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Promote the items you are selling. Do not 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
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
Show the full price you will charge as early as possible.
25 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
The app must work without additional purchases.
26 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Costs relate to money and download size.
27 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Reserve ”buy” or ”purchase” for the actual purchase.
28 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Mark sold items.
29 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Support your users if you want them to buy again from you.
30 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Purchase flow examples
31 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
In-App-Purchase uses application UI, Nokia Account 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
In-App-Purchase: Purchase a product.
33 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Application UI Application UI
In-App-Purchase: Purchase a product.
34 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Application UI Application UI Application UI
In-App-Purchase: Purchase a product.
35 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Application UI Application UI Nokia Account UI
In-App-Purchase: Purchase a product.
36 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Application UI Nokia Account UI Nokia Account UI
In-App-Purchase: Purchase a product.
37 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Nokia Account UI Nokia Account UI Nokia Account UI
In-App-Purchase: Purchase a product.
38 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Nokia Store UI Nokia Account UI Nokia Account UI
In-App-Purchase: Purchase a product.
39 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Nokia Store UI Nokia Account UI Application UI
In-App-Purchase: Purchase a product.
40 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Nokia Store UI Application UI
In-App-Purchase: Restore a product.
41 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Application UI Application UI
In-App-Purchase: Restore a product.
42 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Application UI Application UI Application UI
In-App-Purchase: Restore a product.
43 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Application UI Application UI Application UI
In-App-Purchase: Restore a product.
44 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Application UI Application UI Application UI
In-App-Purchase: Restore a product.
45 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Application UI Application UI
UX offering for Series 40
46 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
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.
48 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber 48
Series 40 UI component demos app showcases UI and code.
49 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber 49
Series 40 UI Design
50 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
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
Further readings about mobile design
51 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
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).
Take home messages
52 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Be honest if you want people to continue 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
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
Ad placement is very delicate and requires 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
Exercises
56 © 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 “buy more 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
Exercise: What is wrong with this layout?
58 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Exercise: Which problems occur if you place the ad at the bottom of the view?
59 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Exercise: What is wrong with this flow (assume you are signed-in already to Nokia Store).
60 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Exercise: Which checkout concept do you prefer and why?
61 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Thanks to: Sanna Hiukka Tuomo Kekoni
62 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber
Thanks [email protected]
63 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber