Revision as of 15:06, 20 November 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: 13^th and 14^th November 2012.

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 will receive follow-up treatment in a 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:

• Webinar exercises and proposals for how to solve them.
• Open issues from Q/A
• Further links and references
• Future UX webinars
• Slide deck
• Link to recording (to be added).
• Webinar announcement

Proposals and solutions to webinar problems

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

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
• Besides it could be part of all menus

Besides, a link for visiting your web page where you could promote new games or sequels to this game should at least be part of all options menus.

What is wrong with this layout?

Layout to be updated	Proposal	Decription
		Layout to be updated: People with existing accounts or existing subscription will run into trouble with the 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 shows both options in an equal way and it explains both options. Here it is less likely that the user does press anything by accident. Also the wording has changed from subscribe to register – register is seen as a step being done before you can log in. If you are already registered – maybe somewhere else on desktop version, people might try this first and the text explains it.

Layout to be updated:

This is a simple example of how a bad or thoughtless design can screw up everything. There is a [ very nice example] found from 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)?

The ad is next to the header and could be either part of the chrome or be 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 you might get false clicks with this solution by trying to push the back button the ad is partially hidden, something what is not wanted by the ad provider or the company paying for the ad	The category bar and an ad placed next to it. However, even with a category bar you will run into trouble, since he category bar will disappear as soon as you drill down which will look like the 2nd image. Beside, the content area gets remarkably smaller.

As you can see, the bottom position is not really optimized for placing there any ads in Series 40 full touch

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

• 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, people might even want to return the app to you since they feel being cheated by you

Which checkout concept do you prefer and why?

Short checkout form with drill down	Long form	Description
		Usually the left example is preferred, since: The short checkout form assumes that you change nothing or very little (once you filled it, or it can retrieve the data from an desktop/online version of the service), so that you can combine several information into one field (e.g. credit card company and credit card number). The short form with drill down allows people to glance the checkout form without scrolling. 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.

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.

Further links and references

• In-app advertising
• In-app purchase
• Battle Tank (Nokia DRM demo app)
• Tourist Attraction (Custom DRM demo app)
• UI Components Demos App
• Functional description of in-app purchase
• Jacob Nielsen’s show case “Why WSJ Mobile App Gets ** Customer Reviews”.
• Mobile Design Pattern Gallery: UI Patterns for Mobile Applications. Theresa Neil (2012). ISBN-13: 978-1449314323
• Designing Mobile Interfaces. Steven Hoober, Eric Berkman (2011). ISBN-13: 978-1449394639

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.

• 11.12.2012, 10:00 Helsinki time (EET)
• 12.12.2012, 18:00 Helsinki time (EET)

Find more webinar announcements from this link