×
Namespaces

Variants
Actions
(Difference between revisions)

Series 40 UI design for monetization enablers webinar - companion article

From Nokia Developer Wiki
Jump to: navigation, search
Krebbix (Talk | contribs)
m (Krebbix - - Which problems occur if you place the ad at the bottom of the view (in series 40 Full Touch)?)
kiran10182 (Talk | contribs)
m (Kiran10182 - Project migration task)
 
(12 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:User Experience]][[Category:Series 40]][[Category:Touch UI]][[Category:Mobile Design]][[Category:Mobile Design Patterns]][[Category:Event]][[Category:In-App Advertising]][[Category:In-App Purchasing]]
+
[[Category:User Experience]][[Category:Series 40]][[Category:Touch UI]][[Category:Mobile Design]][[Category:Mobile Design Patterns]][[Category:In-App Advertising]][[Category:In-App Purchasing]][[Category:Webinar]]
 +
{{FeaturedArticle|timestamp=20121202}}
 
{{Abstract|This article is companion for the ''UI design for monetisation enablers for Series 40 Full Touch'' webinars held in November 2012. It covers both sessions: 13<sup>th</sup>  and 14<sup>th</sup> November 2012.}}   
 
{{Abstract|This article is companion for the ''UI design for monetisation enablers for Series 40 Full Touch'' webinars held in November 2012. It covers both sessions: 13<sup>th</sup>  and 14<sup>th</sup> November 2012.}}   
 
+
{{SeeAlso|
 +
* [[Series 40 UI design usability testing webinar - companion article]]
 +
* [[Series 40 UI concept design webinar – companion article]]
 +
* [[Series 40 UI game design tips webinar – companion article]]
 +
* [[Series 40 UI design port from Android webinar - companion article]]
 +
* [[Series 40 UX checklist webinar - companion article]]
 +
* [[Series 40 UI design for monetization enablers webinar - companion article]]
 +
}}
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 37: Line 45:
 
* Future UX webinars
 
* Future UX webinars
 
* [http://www.slideshare.net/nokia-developer/ui-design-for-monetisation-enablers-for-series-40-full-touch Slide deck]
 
* [http://www.slideshare.net/nokia-developer/ui-design-for-monetisation-enablers-for-series-40-full-touch Slide deck]
* Link to recording (to be added).
+
* [http://forumnokia.adobeconnect.com/p6nb1gr5ztg/ Recording]
 
* [http://www.developer.nokia.com/Resources/Multimedia/Webinars.xhtml Webinar announcement]
 
* [http://www.developer.nokia.com/Resources/Multimedia/Webinars.xhtml Webinar announcement]
 
  
 
==  Proposals and solutions to webinar problems ==
 
==  Proposals and solutions to webinar problems ==
Line 64: Line 71:
 
Layout to be updated:
 
Layout to be updated:
  
* People with existing accounts or existing subscription will run into trouble with the this layout.   
+
* People with an existing account or subscription may run into trouble with this layout.   
 
* Users (also existing subscribers) tend to click the upper button automatically and wonder why they have to pay again.
 
* Users (also existing subscribers) tend to click the upper button automatically and wonder why they have to pay again.
  
Line 75: Line 82:
 
|}
 
|}
  
<!--
+
For more examples and information on how design impacts sales and how to fix app designs, please visit [http://www.useit.com/ Jacob Nielsen's blog] and the [http://www.useit.com/alertbox/mobile-startup-screen.html WSJ mobile app example].
Layout to be updated:
+
  
 +
=== Which problems occur if you place the ad at the bottom of the view (in series 40 Full Touch)? ===
  
 
+
As you can see in the two images below, the bottom of the view is not really suitable for ad placement on Series 40 full touch.
This is a simple example of how a bad or thoughtless design can screw up everything. There is a [ very nice example] found from [http://www.useit.com/ Jacob Nielsen's www.useit.com]. -->
+
 
+
=== Which problems occur if you place the ad at the bottom of the view (in series 40 Full Touch)? ===
+
  
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
| [[File:S40UI monetization 06.png]] || [[File:S40UI monetization 07.png]] || [[File:S40UI monetization 08.png]]
+
| [[File:S40UI monetization 07.png|frame|none|The ad is part of the "bottom" chrome and does not move anywhere.]] || [[File:S40UI monetization 08.png|frame|none|The category bar with an advertisement placed next to it. ]]
 
|-
 
|-
| The ad is next to the header and could be either part of the chrome or part of the list (and scroll away with it) || The ad is chrome and does not move anywhere, but now it is partially hidden by the back button, which is not a good solution since
+
|
 +
The ad is partially hidden by the back button, which is not a good solution because:
 
* you might get false clicks with this solution by trying to push the back button
 
* you might get false clicks with this solution by trying to push the back button
 
* the ad is partially hidden, something what is not desired by the ad provider or the company paying for the ad  
 
* the ad is partially hidden, something what is not desired by the ad provider or the company paying for the ad  
  
|| The category bar with an advertisement placed next to it. The first problem with this approach is that the category bar will disappear as soon as you drill down (resulting in something like the 2nd image). Secondly, the area available for content is reduced signification.  
+
|| The first problem with this approach is that the category bar will disappear as soon as you drill down (resulting in something like the 2nd image). Secondly, the area available for content is reduced significantly.  
 
|}
 
|}
  
As you can see, the bottom of the view is not really suitable for ad placement on Series 40 full touch.
+
We highly recommended you position the ad as part of the "top" platform chrome as shown in the following image. The benefits of having as part of the chrome is that it doesn't change position when you scroll away or drill down a level. In addition, it doesn't interfere with the Back button as shown in the previous examples.
In case you use the platform chrome and you want to make the ad being part of the chrome (i.e. not scroll away) the position as shown in the left example is highly recommended.
+
 
 +
[[File:S40UI monetization 06.png|frame|none|The ad is next to the header and could be either part of the chrome or part of the list (and scroll away with it)]]
  
 
=== What is wrong with this purchase flow? ===
 
=== What is wrong with this purchase flow? ===
Line 117: Line 123:
 
* The short form allows people to get all information from the checkout form without scrolling.
 
* The short form allows people to get all information from the checkout form without scrolling.
 
* The "place order" button is above the fold and immediately visible to the user.  
 
* The "place order" button is above the fold and immediately visible to the user.  
* Especially for returning customers it is faster to proceed, once all the fields are filled.
+
* Once all the fields are filled this is much easier/faster to use. So this forum is particularly good for returning customers.
 
|}
 
|}
  
Line 129: Line 135:
 
* [http://www.developer.nokia.com/Distribute/In-app_advertising/ In-app advertising]
 
* [http://www.developer.nokia.com/Distribute/In-app_advertising/ In-app advertising]
 
* [http://www.developer.nokia.com/Resources/Library/Full_Touch/#!in-app-purchase.html In-app purchase]
 
* [http://www.developer.nokia.com/Resources/Library/Full_Touch/#!in-app-purchase.html In-app purchase]
* [https://projects.developer.nokia.com/JMEBattleTank/ Battle Tank  (Nokia DRM demo app)]
+
* [https://github.com/nokia-developer/battle-tank Battle Tank  (Nokia DRM demo app)]
* [https://projects.developer.nokia.com/JMETouristAttractions/wiki Tourist Attraction (Custom DRM demo app)]
+
* [https://github.com/nokia-developer/tourist-attractions Tourist Attraction (Custom DRM demo app)]
* [https://projects.developer.nokia.com/s40uivisualisation UI Components Demos App]  
+
* [https://github.com/nokia-developer/s40-ui-component-demos UI Components Demos App]  
 
* [http://www.developer.nokia.com/Resources/Library/Java/#!developers-guides/in-app-purchase/introduction/functional-description.html Functional description of in-app purchase]
 
* [http://www.developer.nokia.com/Resources/Library/Java/#!developers-guides/in-app-purchase/introduction/functional-description.html Functional description of in-app purchase]
 
* [http://www.useit.com/alertbox/mobile-startup-screen.html Jacob Nielsen’s show case “Why WSJ Mobile App Gets ** Customer Reviews”.]
 
* [http://www.useit.com/alertbox/mobile-startup-screen.html Jacob Nielsen’s show case “Why WSJ Mobile App Gets ** Customer Reviews”.]

Latest revision as of 23:39, 31 October 2013

Featured Article
02 Dec
2012

This article is companion for the UI design for monetisation enablers for Series 40 Full Touch webinars held in November 2012. It covers both sessions: 13th and 14th November 2012.

Article Metadata
Compatibility
Platform(s):
Series 40
Article
Created: Krebbix (12 Nov 2012)
Last edited: kiran10182 (31 Oct 2013)

Contents

[edit] Introduction

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 is for you. The webinar will walk you through the recommended flows of various monetisation stories in Series 40 full touch. It will also demonstrate common mistakes that developers make and will propose solutions for those problems. As usual for Nokia Developer UX webinars, the presentation will feature exercises that receive follow-up treatment in a (this!) Nokia Developer Wiki article.

The webinar and the wiki article are a great starting point if you’re not a UI design expert. Check out Series 40 UI design library for more advanced information and resources.

This wiki page is the "companion" to the webinar. It includes:

[edit] Proposals and solutions to webinar problems

This section contains problems raised in the webinar exercises. In addition, it contains proposals and possible solutions to solve the problems.

[edit] Where would you place “buy more levels” button(s) in a game?

Place the "buy more levels" here:

  • Landing page (after the splash screen)
  • Level selection page
  • Score overview
  • It could be present on all menus


Also, a link for visiting your web page should minimally be part of all options menus (for example, in order to promote new games or sequels to this game).

[edit] What is wrong with this layout?

Layout to be updated Proposal Decription
S40UI monetization 01.png S40UI monetization 05.png

Layout to be updated:

  • People with an existing account or subscription may run into trouble with this layout.
  • Users (also existing subscribers) tend to click the upper button automatically and wonder why they have to pay again.


Proposal:

  • This layout layout presents and explains both options with equal weight; this way it is much less likely that the user select the wrong button "automatically".
  • The wording has changed from subscribe to register, and what is meant by registration has been explained clearly in the text. Registration is a better choice because it implies something that you do once to access a service across multiple devices, while subscription may be interpreted as something you need to do for every device.

For more examples and information on how design impacts sales and how to fix app designs, please visit Jacob Nielsen's blog and the WSJ mobile app example.

[edit] Which problems occur if you place the ad at the bottom of the view (in series 40 Full Touch)?

As you can see in the two images below, the bottom of the view is not really suitable for ad placement on Series 40 full touch.

The ad is part of the "bottom" chrome and does not move anywhere.
The category bar with an advertisement placed next to it.

The ad is partially hidden by the back button, which is not a good solution because:

  • you might get false clicks with this solution by trying to push the back button
  • the ad is partially hidden, something what is not desired by the ad provider or the company paying for the ad
The first problem with this approach is that the category bar will disappear as soon as you drill down (resulting in something like the 2nd image). Secondly, the area available for content is reduced significantly.

We highly recommended you position the ad as part of the "top" platform chrome as shown in the following image. The benefits of having as part of the chrome is that it doesn't change position when you scroll away or drill down a level. In addition, it doesn't interfere with the Back button as shown in the previous examples.

The ad is next to the header and could be either part of the chrome or part of the list (and scroll away with it)

[edit] What is wrong with this purchase flow?

Note, this assumes you are already signed-in to Nokia Store.

S40UI monetization 02.png
  • The flow does not tell the total costs, but rather tries to trick the user with a low price per unit.
  • People would expect that you charge them daily - which does not hurt that much than paying over 100€ at once.
  • The flow shown above is very likely to cause complaints and bad ratings in the store. Users may even want to return the app since they feel they are being cheated.


[edit] Which checkout concept do you prefer and why?

Short checkout form with drill down Long form Description
S40UI monetization 03.png S40UI monetization 04.png Usually the left example is preferred, since:
  • The short checkout form assumes that you change nothing or very little once it is filled it (data may also be retrieved from a service). This also allows you to combine information into related fields (e.g. credit card company and credit card number).
  • The short form allows people to get all information from the checkout form without scrolling.
  • The "place order" button is above the fold and immediately visible to the user.
  • Once all the fields are filled this is much easier/faster to use. So this forum is particularly good for returning customers.

[edit] Open issues from Q/A

Question: About the IAP, what if user has same account for 2 phones?
Answer: The re-downloads are not locked to an IMEI. They are based on the account. So the user could upload to 10 different devices as long as that content supports those devices. Thanks Sherwin :-)

[edit] Further links and references


[edit] Future webinars

The next (planned) UX related webinar is: Debug your design for Series 40 full touch.

It is important to test your application, not only code wise but also from UX point of view. The webinar will show you very simple and “one-man-band” compatible test methods to find UX bugs and how to deal with them. As usual, this UX webinar will have a wiki companion article for the exercises.

Find more webinar announcements from this link

This page was last modified on 31 October 2013, at 23:39.
423 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×