Series 40 UI design port from Android webinar - companion article - Revision history

Hamishwillee: Hamishwillee - Fix categories

2013-01-14T00:35:18Z

Hamishwillee - Fix categories

Hamishwillee: Hamishwillee -

2012-12-11T03:54:31Z

Hamishwillee -

Hamishwillee: Hamishwillee - Add SeeAlso links to other related articles

2012-12-11T03:52:23Z

Hamishwillee - Add SeeAlso links to other related articles

Hamishwillee: Hamishwillee - Minor subedit

2012-10-12T03:55:28Z

Hamishwillee - Minor subedit

Krebbix: Krebbix - /* Introduction */

2012-10-10T12:28:44Z

Krebbix - - Introduction

Krebbix: Krebbix - /* Introduction */

2012-10-10T12:27:52Z

Krebbix - - Introduction

Krebbix: Krebbix - /* Q/A */

2012-10-10T12:26:20Z

Krebbix - - Q/A

Krebbix: Krebbix -

2012-10-10T12:25:38Z

Krebbix -

Hamishwillee: Hamishwillee - Tidy wiki text

2012-10-05T01:26:36Z

Hamishwillee - Tidy wiki text

Krebbix: Krebbix - /* Introduction */

2012-10-04T07:30:43Z

Krebbix - - Introduction

@@ Line 1: / Line 1: @@
-[[Category:Series 40]][[Category:Android]][[Category:Touch UI]][[Category:Porting]][[Category:Mobile Design]][[Category:Event]]
+[[Category:Series 40]][[Category:Android]][[Category:Touch UI]][[Category:Porting]][[Category:Mobile Design]][[Category:Webinar]]
 {{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.}}
 {{SeeAlso|

@@ Line 2: / Line 2: @@
 {{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.}}
 {{SeeAlso|
-* [[Series 40 UI design usabillity testing webinar - companion article]]
+* [[Series 40 UI design usability testing webinar - companion article]]
 * [[Series 40 UI concept design webinar – companion article]]
 * [[Series 40 UI game design tips webinar – companion article]]

@@ Line 1: / Line 1: @@
 [[Category:Series 40]][[Category:Android]][[Category:Touch UI]][[Category:Porting]][[Category:Mobile Design]][[Category:Event]]
 {{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.}}
+{{SeeAlso|
 {{ArticleMetaData <!-- v1.2 -->
 |sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->

@@ Line 1: / Line 1: @@
 [[Category:Series 40]][[Category:Android]][[Category:Touch UI]][[Category:Porting]][[Category:Mobile Design]][[Category:Event]]
-{{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 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.}}
 {{ArticleMetaData <!-- v1.2 -->
@@ Line 32: / Line 32: @@
 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 how to solve the problems.
+* 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://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://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]
@@ Line 42: / Line 42: @@
 == Webinar exercises ==
-This section contains problems raised in the webinar exercises. The recommended solutions will be added after the second session.
+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|1000px]]
+[[File:S40FT Webinar Android 01.png|none|1000px]]
-One solution could be the following proposal:<br />
+One solution could be the following proposal:
-[[File:S40FT Webinar Android 02.png|800px]]
+[[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 is using the following steps:
+Android OS 4.0 and newer use the following steps:
 # long press one item
 # selection mode opens
@@ Line 59: / Line 59: @@
 # press command (or open the overflow and press command from there)
-* Series 40 is using the following steps:
 # Select action (either from action button #1 or from options menu)
 # multi-selection lists opens
@@ Line 70: / Line 71: @@
 ===Are there any limitations in using buttons in Series 40 full touch?===
-[[File:Webinar Series40 UI Design 08.png|200px]] [[File:Webinar Series40 UI Design 09.png|200px]] [[File:Webinar Series40 UI Design 10.png|200px]] [[File:Webinar Series40 UI Design 11.png|200px]] [[File:Webinar Series40 UI Design 12.png|200px]]
+<gallery widths="200px" heights="350px">
 * 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 labeled button. It is only possible to show one button per row.
+* {{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 Form screen can host a button or a button group.
+* 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.
+* 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.
+* 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?===
 # 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 as compact. Therefore the navigation must be as simple as possible.
+# 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.
 == Q/A ==
-* Q: Is Adobe air supported in Series 40.
+'''Q:''' Is Adobe air supported in Series 40?'''<br />
-* A: No.
+'''A:''' No
 == Disclaimer ==

@@ Line 32: / Line 32: @@
 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 (we will add "recommended solutions" after the second webinar session)
+* Webinar exercises and proposals how to solve the problems.
 * Q/A from the webinar sessions
 * [http://www.slideshare.net/nokia-developer/porting-android-ui-design-to-series-40-touch Link to slide deck.]

@@ Line 28: / Line 28: @@
 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.
-We recommend that you never compare designs for different size screens because the screen real estate for relevant information and call-to-action becomes more and more of an issue when reducing the screen size.  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:
@@ Line 35: / Line 36: @@
 * Link to slide deck [will be added].
 * Link to recording [will be added]
-* [https://www.developer.nokia.com/Resources/Multimedia/Webinars.xhtml Webinar announcement]
+* [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]