Latest revision as of 03:34, 14 January 2013

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.

Introduction

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

Problems

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 address (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

The view contains an immediately visible part (light pink) which is above the fold and a hidden part, which is above the fold and which becomes visible after scrolling. The Chrome contains Header, Options menu icon and Back button icon. There s no category bar Buy tickets - even it just got 6 votes it will the ultimate important item in this view - the business driver is behind and special care should be taken of this item. The initial layout places it in the action button !, but tests must verify that this position works for this item. If not, it must be moved to another position (likely in the upper part of the view) More information of the stadium is placed below the fold. It is not important according to the votes Show how many tickets have been bought for this game by this user + Display the e-tickets - are combined into button with dynamic text. Both items are placed up-most and right in the view Up-most because the information/link are so important Right because of optimizing for right-handler thumb use, e.g. if you are in the cue into the stadium, you might have one hand occupied, so the phone could be operated just with one hand and with thumb only. The majority of people is right-handler. People are likely to operate the phone with their preferred hand, since the phone in this case takes all their attention The up-most left corner is better for information-only items, since it is harder to reach with the thumb. Show start time - is rated very important and goes up-most, but to the left since this is information only and not relevant for further finger/thumb interaction More information about the soccer teams - is not very important, but can be linked with the club emblems, which were rated very important Show stadium name - this is "medium" important placed to the start time to complete time and place group. However, if there are troubles in designing the final layouts, this information can be moved further down as a title of the stadium information. Navigate me to the stadium - is of medium importance and grouped with the actual stadium information. Nevertheless, care should be taken that this link is still above the fold and visible from the first glance Show stadium address - this is one of the not important items. It goes to the lower part of the view. In our case it is makes sense to keep this information close to the "navigate" link Show emblems of soccer clubs - this information was rated very important is placed right after the info/link regarding the tickets; this is combined with a link to the teams info page, just giving the emblems a frame and a link

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