×
Namespaces

Variants
Actions
(Difference between revisions)

Series 40 UI design port from Android webinar - companion article

From Nokia Developer Wiki
Jump to: navigation, search
Krebbix (Talk | contribs)
m (Krebbix -)
 
hamishwillee (Talk | contribs)
m (Hamishwillee - Minor subedit)
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Draft]]
+
[[Category:Series 40]][[Category:Android]][[Category:Touch UI]][[Category:Porting]][[Category:Mobile Design]][[Category:Event]]
''Delete instructional text in italic''
+
{{Abstract|This article is companion for the ''UI design techniques for porting Android apps to Series 40 full touch'' webinars held in October 2012. It covers both sessions: 4 October 2012 and 10 October 2012.}} 
  
{{Abstract|This article explains how to ... }} ''Replace the abstract text with a short paragraph (or sentence) describing what the topic covers.''
 
 
''Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use''
 
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 12: Line 9:
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate= <!-- Format YYYYMMDD -->
+
|creationdate= 20121003
|author= <!-- Display as link [[User:username]] -->
+
|author= [[User:Krebbix]]
 
}}
 
}}
  
 
== Introduction ==
 
== Introduction ==
 +
 +
Porting an application design from Android to Series 40 is not as difficult as it might first appear. While Series 40 phones are cost-optimized, their smartphone-like experience is provided by a UI with many comparable features.
 +
 +
For the webinar examples we’re comparing designs for devices with similar sizes: Series 40 Full touch (3’’ screen) and e.g. Galaxy Mini (3,14’’ screen). Some of the advice may also apply to devices with larger sizes.
 +
 +
The webinar addresses basic UI design aspects when porting a design from Android "Jelly Bean" to Series 40 full touch. This wiki page is the "companion" to the webinar. It includes:
 +
* Webinar exercises and proposals for how to solve them.
 +
* Q/A from the webinar sessions
 +
* [http://www.slideshare.net/nokia-developer/porting-android-ui-design-to-series-40-touch Link to slide deck]
 +
* [http://forumnokia.adobeconnect.com/p4e4rn0zq25/ Link to recording]
 +
* [http://www.developer.nokia.com/Resources/Multimedia/Webinars.xhtml Webinar announcement]
 +
* Register [https://events-emea1.adobeconnect.com/content/connect/c1/799911421/en/events/event/shared/default_template_simple/event_landing.html?sco-id=1082327868&_charset_=utf-8 4 October 2012] or [https://events-emea1.adobeconnect.com/content/connect/c1/799911421/en/events/event/shared/default_template_simple/event_landing.html?sco-id=1082145809&_charset_=utf-8 10 October 2012]
 +
 +
{{Note|The webinar covers porting from Android OS 4.1 "Jelly Bean" only. Some of the advice may apply when porting from other versions.}}
 +
 +
== Webinar exercises ==
 +
This section contains problems raised in the webinar exercises along with recommended solutions (solutions will be added after the second session).
 +
 +
=== How would you change the following structure for Series 40 full touch?===
 +
[[File:S40FT Webinar Android 01.png|none|1000px]]
 +
 +
One solution could be the following proposal:
 +
 +
[[File:S40FT Webinar Android 02.png|none|800px]]
 +
 +
 +
===How do Android Jelly Bean and Series 40 full touch differ in their use of the “select multiple items” pattern?===
 +
Android OS 4.0 and newer use the following steps:
 +
# long press one item
 +
# selection mode opens
 +
# select item(s)
 +
# press command (or open the overflow and press command from there)
  
  
 +
Series 40 uses the following steps:
 +
# Select action (either from action button #1 or from options menu)
 +
# multi-selection lists opens
 +
# select items
 +
# confirm (usually by pressing the check-mark in action button #1)
  
== Summary ==
+
===Which device has more pixels, the Samsung Galaxy Mini S5570 or the Nokia Asha 311?===
 +
* Galaxy Mini S5570 with 240 x 320 pixels = 76800 px, 3,14''
 +
* Nokia Asha 311 with 240 x 400 pixels = 96000 px, 3''
  
+
===Are there any limitations in using buttons in Series 40 full touch?===
''Remove Category:Draft when the page is complete or near complete''
+
<gallery widths="200px" heights="350px">
 +
File:Webinar Series40 UI Design 08.png
 +
File:Webinar Series40 UI Design 09.png
 +
File:Webinar Series40 UI Design 10.png
 +
File:Webinar Series40 UI Design 11.png
 +
File:Webinar Series40 UI Design 12.png
 +
</gallery>
  
 +
* Alerts can have 0 – 3 buttons. Position and layout are predefined.
 +
* {{Icode|StringItem}} in a Form screen can be dressed as a button or as a labelled button. It is only possible to show one button per row.
 +
* The {{Icode|CustomItem}} in {{Icode|Form}} screen can host a button or a button group.
 +
* The full screen Canvas can contain buttons. The 4th image shows custom surround-shaped push-buttons with icons and with additional text below the push button. If the button is based on icons it is many times beneficial to add text explaining the action being mapped to the button.
 +
* A Canvas with a custom toolbar, as shown in the 5th image. Do not place more than 5 items in a toolbar.
  
''The "platform categories" will be displayed here in '''preview''' only - Copy paste relevant categories into text here''
+
===What are the benefits of Series 40 full touch backstep paradigm?===
 +
# It is not possible to show unknown screens to the user.
 +
# Backstep contains only the previous views (but no parallel views, i.e. it does not jump between categories in the category bar).
 +
# It is optimized for small screen, where the information has to be compact. Therefore the navigation must be as simple as possible.
 +
# It is in line with previous Nokia backstep paradigms from other platforms like Symbian.
  
{{VersionHint|Versions will be visible from this template when viewed in preview. You can delete this or leave it in the page as it is not displayed in final version}}
+
== Q/A ==
 +
'''Q:''' Is Adobe air supported in Series 40?'''<br />
 +
'''A:''' No
  
''Add categories below using category selector.''
+
== Disclaimer ==
 +
Portions of this wiki page contains modifications or is reproduced based on work created and shared by the [http://code.google.com/policies.html Android Open Source Project] and used according to terms described in the [http://creativecommons.org/licenses/by/2.5/ Creative Commons 2.5 Attribution License].
 +
* [http://developer.android.com/index.html Android development]
 +
* [http://developer.android.com/design/index.html Android UI design]

Revision as of 06:55, 12 October 2012

This article is companion for the UI design techniques for porting Android apps to Series 40 full touch webinars held in October 2012. It covers both sessions: 4 October 2012 and 10 October 2012.

Article Metadata
Compatibility
Platform(s):
Series 40
Article
Created: Krebbix (03 Oct 2012)
Last edited: hamishwillee (12 Oct 2012)

Contents

Introduction

Porting an application design from Android to Series 40 is not as difficult as it might first appear. While Series 40 phones are cost-optimized, their smartphone-like experience is provided by a UI with many comparable features.

For the webinar examples we’re comparing designs for devices with similar sizes: Series 40 Full touch (3’’ screen) and e.g. Galaxy Mini (3,14’’ screen). Some of the advice may also apply to devices with larger sizes.

The webinar addresses basic UI design aspects when porting a design from Android "Jelly Bean" to Series 40 full touch. This wiki page is the "companion" to the webinar. It includes:

Note.pngNote: The webinar covers porting from Android OS 4.1 "Jelly Bean" only. Some of the advice may apply when porting from other versions.

Webinar exercises

This section contains problems raised in the webinar exercises along with recommended solutions (solutions will be added after the second session).

How would you change the following structure for Series 40 full touch?

S40FT Webinar Android 01.png

One solution could be the following proposal:

S40FT Webinar Android 02.png


How do Android Jelly Bean and Series 40 full touch differ in their use of the “select multiple items” pattern?

Android OS 4.0 and newer use the following steps:

  1. long press one item
  2. selection mode opens
  3. select item(s)
  4. press command (or open the overflow and press command from there)


Series 40 uses the following steps:

  1. Select action (either from action button #1 or from options menu)
  2. multi-selection lists opens
  3. select items
  4. confirm (usually by pressing the check-mark in action button #1)

Which device has more pixels, the Samsung Galaxy Mini S5570 or the Nokia Asha 311?

  • Galaxy Mini S5570 with 240 x 320 pixels = 76800 px, 3,14
  • Nokia Asha 311 with 240 x 400 pixels = 96000 px, 3

Are there any limitations in using buttons in Series 40 full touch?

  • Alerts can have 0 – 3 buttons. Position and layout are predefined.
  • StringItem in a Form screen can be dressed as a button or as a labelled button. It is only possible to show one button per row.
  • The CustomItem in Form screen can host a button or a button group.
  • The full screen Canvas can contain buttons. The 4th image shows custom surround-shaped push-buttons with icons and with additional text below the push button. If the button is based on icons it is many times beneficial to add text explaining the action being mapped to the button.
  • A Canvas with a custom toolbar, as shown in the 5th image. Do not place more than 5 items in a toolbar.

What are the benefits of Series 40 full touch backstep paradigm?

  1. It is not possible to show unknown screens to the user.
  2. Backstep contains only the previous views (but no parallel views, i.e. it does not jump between categories in the category bar).
  3. It is optimized for small screen, where the information has to be compact. Therefore the navigation must be as simple as possible.
  4. It is in line with previous Nokia backstep paradigms from other platforms like Symbian.

Q/A

Q: Is Adobe air supported in Series 40?
A: No

Disclaimer

Portions of this wiki page contains modifications or is reproduced based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.

169 page views in the last 30 days.