Revision as of 15:15, 24 August 2012 by Krebbix (Talk | contribs)

Series 40 UI concept design webinar – companion article

From Nokia Developer Wiki
Jump to: navigation, search

This article is companion for the Series 40 UI concept design webinars held in September 2012. It covers both sessions (22 August 2012 and 23 August 2012). See #Future webinars for information about our next webinars, planned in September.



Success in Nokia Store is dominated by apps with four- or five-star user ratings. Big companies know this and hire full-time UX specialists to ensure high ratings. The Series 40 UI concept design webinars provide essential guidance for those who don't have a dedicated UX specialist, walking you through a simple process of focusing on UX-design principles that are critical for the growing market for Nokia Asha Touch apps. The ideas are easy to follow, and after the webinar, you should be able to apply user-centric design to your own application projects.

This article contains possible solutions to the exercises covered in the webinar. It includes:

  • Check list before you start designing the app
  • Steps to design your application
  • Problems, solutions and proposals for the webinar exercises
  • Link to slide deck and recording

Check list

Answer the following questions before you start the design

  • Which problem does your application solve?
  • Who will be using your application?
  • When and where will people use your application?
  • What makes your application mobile?
  • What makes your application better than others?
  • How do you make money with your app?
  • How do you sustain your app (why do people continue buying your app or its content)?
  • What is the name of your application (the shorter the better)?

Steps to design your application

  • Idea
  • Write down all goals - with somebody else
  • Introduce and group goals
  • Vote for groups (vote per person = groups/2)
  • Prioritize by votes - and business drivers
  • Create a flow-end based on a goal
  • Define a start point (maybe the splash screen of your application)
  • Fill the necessary steps between the start point and the flow end
  • Create flows for all goals
  • Sort the flows (which flows belong together)
  • Group flow steps to views
  • Find a matching navigation structure
  • Prioritize functions and information
  • Compose your view
  • Test it
  • Re-design where necessary
  • Continue testing and adjusting the design


  1. When do you choose a tumbler instead of a list? Do not restrict this problem to Series 40 Full Touch LCDUI or Nokia UI.
  2. What are the differences between radio buttons and check boxes? When to use them?
  3. Check ”panta rhei” from www.wikipedia.org
  4. Compose a view
    • Business driver is to sell e-tickets for a soccer game within an entire soccer league
    • In the previous view, the user has chosen this certain game. For this game she wants to buy tickets
    • Only Series 40 full touch
    • No category bar, standard header bar and Back button
      • View items [amount of votes, max 8]
      • Buy tickets (link) [6]
      • More information about the stadium (info) [1]
      • Show how many tickets have been bought for this game by this user (info) [8]
      • Display the e-tickets [6]
      • Show start time (info) [7]
      • More information about the soccer teams (link) [1]
      • Show stadium name (info) [5]
      • Navigate me to the stadium (link) [4]
      • Show stadium adress (info) [2]
      • Show emblems of soccer clubs (info) [8]

Proposals and solutions

When do you choose a tumbler instead of a list?

  • General:
    • Use a list or a tumbler as picker; meaning use them in case you pick a value out of a defined set of values
    • Use a list or tumbler if it is slower and more laborious to type
  • Normal lists
    • Use a list if you have just value to set
    • Utilize the entire view, which makes them easier to operate.
    • Provide more screen real estate to place the gestures and more space to show additional information
  • Tumblers
    • Use a tumbler if you have multiple fields to fill and the drums have just a small amount of entries e.g. for a reservation system you just can fill times between 12 - 16 o'clock every 15 minutes
    • Usually just show 5-6 values of a single drum
    • Require to move a value into a certain slot instead of just tapping an item, this takes more time and is more laborious and less pleasant especially in a hectic situation while operating the UI with a thumb
  • Use text input if you have many predictable items in your tumbler, e.g. for setting a date or for setting a time, since it is simply faster and many times less laborious
  • Do not use a tumbler just because you can or just because it looks cool. The Tumbler should be faster than all other solutions - which is many times not the case.

What are the differences between radio buttons and check boxes? When to use them?

  • Radio buttons
    • Use if there is only one choice possible at a time
    • Use always in a group (two or more items)
    • Include a "not selected state" if there is
    • Never allow the radio button group to be without any selection at all
  • Check boxes
    • Use if there are zero, one or multiple choices possible
    • Can be used as a substitute for a on/off switch where check equals "on" and uncheck represents "off", this should be done only if the values are truely opposite to each other and could be mapped to a checked/unchecked state

Compose a view

Webinar Series40 UI Design 15.png

The drill down structure as found in Series 40 Touch and Type phones can be converted in a tab bar structure in Series 40 full touch phone. This will reduce one view. (Please note that this reasoning is just valid for 4

Future webinars

The next (planned) UX related webinar is:

  1. User-centric Design of Series 40 Apps: Games (preliminary title). This will cover game interaction paradigms, menus, etc.
    • 13.09.2012, 10:00 Helsinki time
    • 19.09.2012, 18:00 Helsinki time
106 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.