Upload
microsoft-mobile-developer
View
1.136
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
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