×
Namespaces

Variants
Actions
(Difference between revisions)

Series 40 UI concept design webinar – companion article

From Nokia Developer Wiki
Jump to: navigation, search
Krebbix (Talk | contribs)
m (Krebbix -)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:User Experience]][[Category:Series 40]][[Category:Mobile Design]][[Category:Event]]
+
[[Category:User Experience]][[Category:Series 40]][[Category:Mobile Design]][[Category:Webinar]]
{{Abstract|This article is companion for the [http://www.developer.nokia.com/Blogs/News/blog/2012/08/08/two-webinars-this-month-for-series-40-developers/ Series 40 UI concept design webinars] held in September 2012. It covers both sessions ([https://forumnokia.adobeconnect.com/_a799911421/ux-design-s40-ssn1/event/registration.html 22 August 2012] and [http://forumnokia.adobeconnect.com/ux-design-s40-ssn2/event/registration.html 23 August 2012])}}.  See [[#Future webinars]] for information about our next webinars, planned in September.
+
{{Abstract|This article is companion for the [http://www.developer.nokia.com/Blogs/News/blog/2012/08/08/two-webinars-this-month-for-series-40-developers/#usercentricsection Series 40 UI concept design webinars] held in September 2012. It covers both sessions ([https://forumnokia.adobeconnect.com/_a799911421/ux-design-s40-ssn1/event/registration.html 22 August 2012] and [http://forumnokia.adobeconnect.com/ux-design-s40-ssn2/event/registration.html 23 August 2012])}}.  See [[#Future webinars]] for information about our next webinars, planned in September.
 +
{{SeeAlso|
 +
* [[Series 40 UI design usabillity testing webinar - companion article]]
 +
* [[Series 40 UI concept design webinar – companion article]]
 +
* [[Series 40 UI game design tips webinar – companion article]]
 +
* [[Series 40 UI design port from Android webinar - companion article]]
 +
* [[Series 40 UX checklist webinar - companion article]]
 +
* [[Series 40 UI design for monetization enablers webinar - companion article]]
 +
}}
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20120821
 +
|author= [[User:Krebbix]]
 +
}}
  
 
== Introduction ==
 
== Introduction ==
Line 10: Line 40:
 
* Steps to design your application
 
* Steps to design your application
 
* Problems, solutions and proposals for the webinar exercises  
 
* Problems, solutions and proposals for the webinar exercises  
* Link to [http://www.slideshare.net/nokia-developer/increase-your-nokia-store-success-with-user-centric-design-of-series-40-apps slide deck] and recording
+
* Link to [http://www.slideshare.net/nokia-developer/increase-your-nokia-store-success-with-user-centric-design-of-series-40-apps slide deck] and [http://forumnokia.adobeconnect.com/p95ca39lnw9/ recording]
  
 
==Check list==
 
==Check list==
Line 60: Line 90:
 
#** Show stadium name (info) [5]
 
#** Show stadium name (info) [5]
 
#** Navigate me to the stadium (link) [4]
 
#** Navigate me to the stadium (link) [4]
#** Show stadium adress (info) [2]
+
#** Show stadium address (info) [2]
 
#** Show emblems of soccer clubs (info) [8]
 
#** Show emblems of soccer clubs (info) [8]
 
  
 
==Proposals and solutions==
 
==Proposals and solutions==
Line 91: Line 120:
 
** Use if there are zero, one or multiple choices possible
 
** 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
 
** 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===
 +
{|class="wikitable"
 +
|-
 +
| [[File:webinar serie40 concept design-01.png|200px]] ||
 +
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 ==
 
== Future webinars ==

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.

Article Metadata
Compatibility
Platform(s):
Series 40
Article
Created: Krebbix (21 Aug 2012)
Last edited: hamishwillee (14 Jan 2013)

Contents

[edit] 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

[edit] Check list

[edit] 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)?

[edit] 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

[edit] 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]

[edit] Proposals and solutions

[edit] 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.


[edit] 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


[edit] Compose a view

Webinar serie40 concept design-01.png

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

[edit] 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
This page was last modified on 14 January 2013, at 03:34.
127 page views in the last 30 days.