Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 08:25, 5 November 2012 by Krebbix (Talk | contribs)

Series 40 UX checklist webinar - companion article

From Wiki
Jump to: navigation, search

This article is companion for the UX Checklist for Series 40 Full Touch webinars to be held in October and November 2012. It covers both sessions: 31st October 2012 and 1st November 2012.

Article Metadata
Series 40
Created: Krebbix (29 Oct 2012)
Last edited: Krebbix (05 Nov 2012)



This webinar provides pointers you can use to perform a basic user experience (UX) check of your Series 40 full-touch app, even if you have no formal experience in UX design. In it we review a list of some of the worst UX mistakes that we found in real-world app testing, and provide some specific solutions to these problems.

This checklist covers some basic UX mistakes, and is 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:

Solutions to webinar problems

This section contains problems raised in the webinar exercises, along with recommended solutions.

A custom view acts as a launchpad screen. Which chrome elements do you add?

There are several possibilities:

  1. Full custom header without chrome: there is no chance to add neither any primary command nor any options menu. This could work in case the launch-pad view is just putting the user into the right flow, e.g. for a game:
    • Start new single player game
    • Start new multiple player game
    • Resume last game
    • Buy items
    • Edit online profile
    • Help
    • About
  2. Full custom header with one primary action: This works in case there is one first very important action, which the user is usually doing before continuing with any other action or which has to be always available, e.g. the play/pause button of a music player. The launch-pad view allows the user to continue directly with the main use cases.
  3. A view with predefined chrome, or chrome at the predefined position, it becomes now easy to clean up the launch pad from secondary items, i.e. Help and about might be moved to the Options menu.

S40UI checklist 01.png

How do you open the item menu and what do you place in there?

The item menu is opened with long press on the item. It contains only commands which directly affect only to the selected item (e.g. delete). It does not contain any commands which could act on multiple items (e.g. delete all). The latter go to the view menu. These are the design rationales for touch devices:

  • The focus is implied with the touch down, but not beforehand, so the phone cannot anticipate which item is chosen
  • The focus is lost with finger lift, so the phone cannot trace which item was chosen beforehand
  • There are just few working interaction pattern which would resolve these issues,
    • pointing at the item for longer time (all Nokia touch phones)
    • bringing the phone into a selection mode and from there select the item (e.g. Android 4.0 and higher)

How many touchable items can you fit into a full screen layout?

  • 4 items in one row in case you obey the minimum touch area. The 5th item does not fully anymore and it might interfere with the scroll bar (which is without function and just for indication purposes). However, it is not recommended to go below 7 mm x 7 mm touch area and 1mm margin. To fill the gaps, rather increase the touch area than squeezing in another item.
  • 7 items in a column are fully visible and 1 item is partially visible
  • 28 full items
  • 32 items the user is aware of

In case of a 5th column, take the back button into account, i.e. 40 – 1 items. However, in that case make sure the context of use allows smaller touch areas (e.g. no thumb use, i.e. the user will operate the phone always with 2 hands) or cover-up with certain techniques, e.g. fish-eye.

S40UI checklist 02.png

Which icon sizes are used in Series 40 full touch?

Please check from here.

Is the contrast of these two colors good enough for AAA compliance for text?

  • Foreground: 33FFAA
  • Background: AAFF33

Please check from here.
Fill the values . Those will result in something like the following image.

S40UI checklist 03.png

148 page views in the last 30 days.