Series 40 UX checklist webinar - companion article
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.
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:
- Webinar exercises and proposals for how to solve them.
- Open issues from Q/A
- Link to slide deck
- Link to recording
- Webinar announcement
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:
- 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
- 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.
- 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.
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.
Which icon sizes are used in Series 40 full touch?
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.
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.