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.

(Difference between revisions)

Series 40 UX checklist webinar - companion article

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee -)
kiran10182 (Talk | contribs)
m (Kiran10182 - FA template added)
Line 1: Line 1:
[[Category:User Experience]][[Category:Series 40]][[Category:Touch UI]][[Category:Mobile Design]][[Category:Mobile Design Patterns]][[Category:Event]]
[[Category:User Experience]][[Category:Series 40]][[Category:Touch UI]][[Category:Mobile Design]][[Category:Mobile Design Patterns]][[Category:Event]]
{{Abstract|This article is companion for the ''UX Checklist for Series 40 Full Touch'' webinars held in October and November 2012. It covers both sessions: 31<sup>st</sup> October 2012 and 1<sup>st</sup> November 2012.}}   
{{Abstract|This article is companion for the ''UX Checklist for Series 40 Full Touch'' webinars held in October and November 2012. It covers both sessions: 31<sup>st</sup> October 2012 and 1<sup>st</sup> November 2012.}}   

Revision as of 09:45, 17 December 2012

Featured Article
16 Dec

This article is companion for the UX Checklist for Series 40 Full Touch webinars 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: kiran10182 (17 Dec 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?

The Chrome, or "screen furniture" is the framework-provided notification area containing system indicators, view titles and other important navigation information. It is fixed to the upper and/or lower edge of the screen and does not scroll away. Different chrome elements are appropriate depending on your use case.

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 just puts 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 if there is a single very important action which the user will most often select, or which always has to be 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. This approach makes it easy to remove secondary items from the launchpad: 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 must contain only commands which directly the selected item (e.g. delete). It must 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 fit in one row if you use the minimum touch area. A 5th item will not fit completely and might interfere with the scroll bar (which is without function and just for indication purposes). We recommend you do not reduce the touch area below 7 mm x 7 mm and 1mm margin. If you need to fill the gaps, increase the touch area in preference to 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

If using a 5th column, take the back button into account (i.e. 40 – 1 items). In this case make sure the context of use allows smaller touch areas (i.e. the user will always operate the app with 2 hands so thumb use is not required) or compensate using techniques like fish-eye.

S40UI checklist 02.png

Which icon sizes are used in Series 40 full touch?

See answer here.

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

  • Foreground: 33FFAA
  • Background: AAFF33

A document is AAA compliant if it can be used by people who are visually impaired. Though not stated directly, AAA compliance also means that your document (or application) can be accessed more effectively by non-disabled users in a non-optimum environment, e.g. with sunlight shining directly on the display. More information can be obtained here.

After testing the values in a contrast checker, we see that the answer is "No". The colour contrast results in something like the image below:

S40UI checklist 03.png

You can check colour contrasts using sites like

Open issues from Q/A

Question: How do I have to scale the printout to match the phone's screen size (to have correct sized images for paper prototypes) ?
Answer: Scale the printout to 46% of the original size.

Future webinars

The next (planned) UX related webinar is: UI design for monetisation enablers for Series 40 full touch.

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.

  • 13.11.2012, 10:00 Helsinki time, register
  • 14.11.2012, 18:00 Helsinki time, register

Find more webinar announcements from this link

140 page views in the last 30 days.