×
Namespaces

Variants
Actions
(Difference between revisions)

Webinar Series 40 UI Design

From Nokia Developer Wiki
Jump to: navigation, search
Krebbix (Talk | contribs)
m (Krebbix - - Webinar Series 40 Full Touch UI Style Guide, part 1, 28.06.2012 and 04.07.2012)
hamishwillee (Talk | contribs)
m (Hamishwillee -)
 
(29 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Draft]]
+
[[Category:Mobile Design]][[Category:Series 40]][[Category:Webinar]]
{{Abstract|This article is companion for the Series 40 UI design webinars. It contains solutions and proposals for the webinar exercises and discusses open issues which could not be solved during the webinar Q/A session.}}
+
{{Abstract|This article is companion for the [http://www.developer.nokia.com/Blogs/News/blog/2012/04/24/nokia-developer-webinar-user-centric-design-of-series-40-apps/ Series 40 UI design webinars]. It contains solutions and proposals for the webinar exercises and discusses open issues which could not be solved during the webinar Q/A session and covers both parts:
 +
* part 1, 28.06.2012 and 04.07.2012, [http://forumnokia.adobeconnect.com/p6mlgo0b6t3/ webinar recording], [http://www.slideshare.net/nokia-developer/series-40-full-touch-ui-style-guide-part-1 slide deck]
 +
* part 2, 10.07.2012 and 13.07.2012, [http://forumnokia.adobeconnect.com/p4qjd5uxg7q/ webinar recording], [http://www.slideshare.net/nokia-developer/series-40-full-touch-ui-style-guide-part-2 slide deck]
  
 +
 +
Next UX related webinar:
 +
* Increase Your Nokia Store Success with User-centric Design of Series 40 Apps (About concept design and the benefits of a good UI.)
 +
* 22.08.2012, 10:00 Helsinki time,
 +
* 23.08.2012, 18:00 Helsinki time
 +
 +
}}
  
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
Line 26: Line 35:
 
}}
 
}}
  
''Italic text''== Webinar Series 40 Full Touch UI Style Guide, part 1, 28.06.2012 and 04.07.2012 ==
+
== Webinar Series 40 Full Touch UI Style Guide, part 1, 28.06.2012 and 04.07.2012 ==
  
 
===Problems===
 
===Problems===
Line 36: Line 45:
 
=====Proposal:=====
 
=====Proposal:=====
  
{|
+
{|class="wikitable"
 
|-
 
|-
 
| [[File:Webinar Series40 UI Design 02.png|200px]] ||
 
| [[File:Webinar Series40 UI Design 02.png|200px]] ||
:The original layout in Touch & Type is a canvas because of 2 reasons:
+
The original layout in Touch & Type is a canvas because of 2 reasons:
:* Lists do not allow different text formatting in one list item, e.g. title with black font and content with grey front is not possible; in addition a line break isn't possible neither
+
* Lists do not allow different text formatting in one list item, e.g. title with black font and content with grey front is not possible; in addition a line break isn't possible neither
:* Lists do not support the use of a Middle Soft Key (also there is no possibility to add an Action Button #1 to Full Touch lists)
+
* Lists do not support the use of a Middle Soft Key (also there is no possibility to add an Action Button #1 to Full Touch lists)
:The Touch & Type canvas can be transferred into a canvas again. The content layout stays unchanged and Back and Options are replaced automatically with icons. However, the primary function “Add” in the middle soft key (Touch and Type) is replaced with a new icon “plus” (Full Touch).  In Full Touch there is more content “above the fold” than in Touch & Type.
+
The Touch & Type canvas can be transferred into a canvas again. The content layout stays unchanged and Back and Options are replaced automatically with icons. However, the primary function “Add” in the middle soft key (Touch and Type) is replaced with a new icon “plus” (Full Touch).  In Full Touch there is more content “above the fold” than in Touch & Type.
 
|}
 
|}
  
<br />
+
====Create a sign-in view ====
 
+
====Create a sign-in view.====
+
  
 
It should contain:
 
It should contain:
Line 54: Line 61:
 
* Setting for auto-fill password
 
* Setting for auto-fill password
 
* Forgot password & help
 
* Forgot password & help
 
  
 
=====Proposal 1:=====
 
=====Proposal 1:=====
  
{|
+
{| class="wikitable"
 
|-
 
|-
 
| [[File:Webinar Series40 UI Design 03.png|200px]] ||  
 
| [[File:Webinar Series40 UI Design 03.png|200px]] ||  
:The environment is a Form screen. Username and password are filled via TextField and the Setting for auto-fill is done via a pop-up choice group. This proposal places Help and Forgot password under the Options menu. The login is done via the checkmark in Action Button #1
+
The environment is a Form screen. Username and password are filled via TextField and the Setting for auto-fill is done via a pop-up choice group. This proposal places Help and Forgot password under the Options menu. The login is done via the checkmark in Action Button #1
 
|}
 
|}
  
  
=====Proposal 2:=====
+
===== Proposal 2 =====
  
{|
+
{| class="wikitable"
 
|-
 
|-
 
| [[File:Webinar Series40 UI Design 04.png|200px]] ||  
 
| [[File:Webinar Series40 UI Design 04.png|200px]] ||  
:The environment is again a Form screen with 2 TextFields and 1 pop-up choice group. In addition, there is a StringItem formatted as a Button and a StringItem formatted as a hyperlink. There is no action in Action Button #1.  
+
The environment is again a Form screen with 2 TextFields and 1 pop-up choice group. In addition, there is a StringItem formatted as a Button and a StringItem formatted as a hyperlink. There is no action in Action Button #1.  
 
|}
 
|}
  
  
 
+
=====Discussion =====
=====Discussion:=====
+
 
The second proposal has everything available in the view, but it is not likely that it will work flawlessly with Touch & Type devices.  However, since the additional elements in the view (Login button and Help hyperlink) are more prominent, it is expected to reduce interaction bumpers if the design is optimized for Full Touch.
 
The second proposal has everything available in the view, but it is not likely that it will work flawlessly with Touch & Type devices.  However, since the additional elements in the view (Login button and Help hyperlink) are more prominent, it is expected to reduce interaction bumpers if the design is optimized for Full Touch.
  
Line 87: Line 92:
  
  
=====Proposal:=====
+
===== Proposal =====
  
{|
+
{| class="wikitable"
 
|-
 
|-
 
| [[File:Webinar Series40 UI Design 05.png|200px]] ||  
 
| [[File:Webinar Series40 UI Design 05.png|200px]] ||  
: The pop-up choice group in a Form screen offers single selection out of a list. Also the exclusive choice group would have been a good choice. It depends on the environment. Usually collapsing UI elements are preferred if there are many different settings slots in a single view, whereas static UI components are usually preferred in case only few settings slots are available.
+
The pop-up choice group in a Form screen offers single selection out of a list. Also the exclusive choice group would have been a good choice. It depends on the environment. Usually collapsing UI elements are preferred if there are many different settings slots in a single view, whereas static UI components are usually preferred in case only few settings slots are available.
<br />
+
  
: Please note, the LCDUI Tumbler (DateField) is not suitable for this task. It only can pick time and date, but no weekdays or any other values.
+
Please note, the LCDUI Tumbler (DateField) is not suitable for this task. It only can pick time and date, but no weekdays or any other values.
 
|}
 
|}
 
 
  
  
Line 104: Line 106:
  
  
{|
+
{| class="wikitable"
 
|-
 
|-
 
| [[File:Webinar Series40 UI Design 06.png|200px]] ||  
 
| [[File:Webinar Series40 UI Design 06.png|200px]] ||  
: You may find the following layout from a native application. Unfortunately, the single choice item is not available in the LCDUI.
+
You may find the following layout from a native application. Unfortunately, the single choice item is not available in the LCDUI.
 
|}
 
|}
  
Line 113: Line 115:
  
  
=====Proposal:=====
+
===== Proposal =====
{|
+
{| class="wikitable"
 
|-
 
|-
 
| [[File:Webinar Series40 UI Design 07.png|200px]] ||  
 
| [[File:Webinar Series40 UI Design 07.png|200px]] ||  
: The proposal is similar to the previous problem, except that the pop-up choice group contains only 2 items.
+
The proposal is similar to the previous problem, except that the pop-up choice group contains only 2 items.
: Another solution would be a multi selection choice group with only one item. Also an exclusive selection choice group with 2 items is possible to replace a switch. The choice depends in the end again from the environment:
+
 
: * pop-up choice group; best if used in a busy layout
+
Another solution would be a multi selection choice group with only one item. Also an exclusive selection choice group with 2 items is possible to replace a switch. The choice depends in the end again from the environment:
: * multi selection choice group (1 item), if there is a clear on/off metaphor (e.g. radio on/off)
+
* pop-up choice group; best if used in a busy layout
: * exclusive choice group if indicating the correct state is crucial, and on/off is not necessarily the right metaphor (e.g. dim light on/off vs.  dimmed light – full light)
+
* multi selection choice group (1 item), if there is a clear on/off metaphor (e.g. radio on/off)
 +
* exclusive choice group if indicating the correct state is crucial, and on/off is not necessarily the right metaphor (e.g. dim light on/off vs.  dimmed light – full light)
 
|}
 
|}
  
  
 
====Which views can have a button? Are there any limitations?====
 
====Which views can have a button? Are there any limitations?====
 
+
===== Proposal =====
 
+
=====Proposal:=====
+
 
[[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]]
 
[[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]]
  
 
* Alerts can have 0 – 3 buttons. Position and layout are predefined.
 
* 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 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 labeled 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 {{Icode|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.
 
* 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.
Line 139: Line 140:
  
 
===Open issues from Q/A===
 
===Open issues from Q/A===
 
 
====What happens with the keypad if BT keyboard is detected?====
 
====What happens with the keypad if BT keyboard is detected?====
  
<br />
+
Regarding connecting a Bluetooth enabled device to a full touch series 40 and getting input from the BT device into a custom 3rd party Java application, the following rules apply:
Regarding connecting a Bluetooth enabled device to a full touch series 40 and getting input from the BT device into a custom 3rd party Java application, the following rules apply:<br />
+
  
'''1.''' Direct connection of a BT device to a Java application is only possible if the BT device supports the Bluetooth Profiles that are coming with the JSR-82 (the Bluetooth API):
+
# Direct connection of a BT device to a Java application is only possible if the BT device supports the Bluetooth Profiles that are coming with the JSR-82 (the Bluetooth API):
:*SDAP - Service Discovery Application Profile
+
#*SDAP - Service Discovery Application Profile
:*RFCOMM - Serial Cable Emulation Protocol
+
#*RFCOMM - Serial Cable Emulation Protocol
:*L2CAP - Logical Link Control and Adaptation Protocol
+
#*L2CAP - Logical Link Control and Adaptation Protocol
:*OBEX - Generic Object Exchange Profile (GOEP) profile on top of RFCOMM and TCP  
+
#*OBEX - Generic Object Exchange Profile (GOEP) profile on top of RFCOMM and TCP  
<br />
+
# The Virtual Keyboard API does not provide any editor functionality. It merely launches and controls the virtual keyboard provided by the platform on low level Canvas and GameCanvas Components and returns into the application the key that was pressed with the help of the keyPressed(int key) method. So theoretically, one can call remotely the keyPressed(int key) method directly with a value that matches the integer value of the key that is supposed to be pressed.
  
'''2.''' The Virtual Keyboard API does not provide any editor functionality. It merely launches and controls the virtual keyboard provided by the platform on low level Canvas and GameCanvas Components and returns into the application the key that was pressed with the help of the keyPressed(int key) method. So theoretically, one can call remotely the keyPressed(int key) method directly with a value that matches the integer value of the key that is supposed to be pressed.
 
  
 
====Can text be formatted, e.g. rich text formatting?====  
 
====Can text be formatted, e.g. rich text formatting?====  
<br />
 
Regarding StringItem one can change the font. Fonts have three attributes:
 
Style (bold/italic), size (large or small) and face (monospace, proportional and system). One cannot change the color of a StringItem.<br />
 
  
It is not possible to format the text in TextBox screen.<br />
+
Regarding {{Icode|StringItem}} one can change the font. Fonts have three attributes:
 +
Style (bold/italic), size (large or small) and face (monospace, proportional and system). One cannot change the color of a {{Icode|StringItem}}.
 +
 
 +
It is not possible to format the text in {{Icode|TextBox}} screen.
 
   
 
   
Canvas allows free formatting.<br />
+
{{Icode|Canvas}} allows free formatting.
  
 
If formatting is needed for certain components, please have look into LWUIT if this is suitable for you.
 
If formatting is needed for certain components, please have look into LWUIT if this is suitable for you.
Line 167: Line 165:
 
====How is the image in an ImageItem being cropped in landscape orientation?====
 
====How is the image in an ImageItem being cropped in landscape orientation?====
  
Here is the example image:<br />
+
Here is the example image:
  
[[File:webinar_Series40_UI_Design_QA_01.png|400px]]
+
[[File:webinar Series40 UI Design QA 01.png|400px]]
  
 +
When the Layout is set to {{Icode|LAYOUT_LEFT}} or {{Icode|LAYOUT_CENTER}}, this is the result in portrait mode:
  
When the Layout is set to LAYOUT_LEFT or LAYOUT_CENTER, this is the result in portrait mode:<br />
+
[[File:webinar Series40 UI Design QA 02.png|200px]]
 +
[[File:webinar Series40 UI Design QA 03.png|200px]]
  
[[File:webinar_Series40_UI_Design_QA_02.png|200px]]
 
[[File:webinar_Series40_UI_Design_QA_03.png|200px]]
 
<br />
 
  
 +
When the Layout is set to {{Icode|LAYOUT_LEFT}} or {{Icode|LAYOUT_CENTER}}, this is the result in landscape mode:
  
When the Layout is set to LAYOUT_LEFT or LAYOUT_CENTER, this is the result in landscape mode:<br />
+
[[File:webinar Series40 UI Design QA 04.png|350px]]
 +
[[File:webinar Series40 UI Design QA 05.png|350px]]
  
[[File:webinar_Series40_UI_Design_QA_04.png|350px]]
 
[[File:webinar_Series40_UI_Design_QA_05.png|350px]]
 
<br />
 
 
The cropping matches the requested layout.
 
The cropping matches the requested layout.
  
Line 189: Line 185:
 
====How can you do custom gestures yourself?====
 
====How can you do custom gestures yourself?====
 
1. It is possible to use the existing gestures and build your custom gesture on top of it; here 2 examples:
 
1. It is possible to use the existing gestures and build your custom gesture on top of it; here 2 examples:
- if you want to make your application to sense a figure of "8" on your screen, use a "drag" gesture and use the x/y values for your pattern recognition
+
* if you want to make your application to sense a figure of "8" on your screen, use a "drag" gesture and use the x/y values for your pattern recognition
- if you want to use triple touch, e.g. to mark the entire text, use 3 single taps for your gesture recognition
+
* if you want to use triple touch, e.g. to mark the entire text, use 3 single taps for your gesture recognition
<br />
+
 
[http://www.developer.nokia.com/Resources/Library/Java/_zip/GUID-237420DE-CCBE-4A74-A129-572E0708D428/com/nokia/mid/ui/gestures/GestureEvent.html More information on how to use Gestures.]<br />
+
* [http://www.developer.nokia.com/Resources/Library/Java/_zip/GUID-237420DE-CCBE-4A74-A129-572E0708D428/com/nokia/mid/ui/gestures/GestureEvent.html More information on how to use Gestures.]
 +
 
 
Tap drag and release can also be implemented outside the Gesture API, with the standard LCDUI low level Canvas components.  
 
Tap drag and release can also be implemented outside the Gesture API, with the standard LCDUI low level Canvas components.  
[http://www.developer.nokia.com/Resources/Library/Java/#!developers-guides/ui-and-graphics/touch-ui/touch-interaction-in-series-40.html More information on Touch UI on Series 40.]<br />
+
* [http://www.developer.nokia.com/Resources/Library/Java/#!developers-guides/ui-and-graphics/touch-ui/touch-interaction-in-series-40.html More information on Touch UI on Series 40.]
  
 
2. It is possible to use the sensor API to e.g. get direct x/y/z information of the phone. this way, you can e.g. sense the position changes of the phone to detect if the user is writing a figure of "8" into the air (with the phone in her hand). The phone can detect accelerations between -2g and +2g.
 
2. It is possible to use the sensor API to e.g. get direct x/y/z information of the phone. this way, you can e.g. sense the position changes of the phone to detect if the user is writing a figure of "8" into the air (with the phone in her hand). The phone can detect accelerations between -2g and +2g.
Sensor API link will be added.<br />
+
Sensor API link will be added.
[http://www.developer.nokia.com/Resources/Library/Java/_zip/GUID-F031C633-5F4E-441E-A863-CE4E28A9CD55/overview-summary.html More information.]<br />
+
* [http://www.developer.nokia.com/Resources/Library/Java/_zip/GUID-F031C633-5F4E-441E-A863-CE4E28A9CD55/overview-summary.html More information.]
[http://www.developer.nokia.com/Resources/Library/Java/#!code-examples/mobile-sensors-arrowkeys.html Example 1]<br />
+
* [http://www.developer.nokia.com/Resources/Library/Java/#!code-examples/mobile-sensors-arrowkeys.html Example 1]
[http://www.developer.nokia.com/Resources/Library/Java/#!code-examples/mobile-sensors-cottage360.html Example 2]
+
* [http://www.developer.nokia.com/Resources/Library/Java/#!code-examples/mobile-sensors-cottage360.html Example 2]
 +
 
  
 
====Is it possible to store a small amount of data?====
 
====Is it possible to store a small amount of data?====
Yes it is. The persistent storage is done via RMS (Record Management System). <br />
+
Yes it is. The persistent storage is done via RMS (Record Management System):
[http://www.developer.nokia.com/Resources/Library/Java/_zip/GUID-0D0A1092-5037-4421-B466-B958CB777414/javax/microedition/rms/package-summary.html More information.]<br />
+
* [http://www.developer.nokia.com/Resources/Library/Java/_zip/GUID-0D0A1092-5037-4421-B466-B958CB777414/javax/microedition/rms/package-summary.html More information.]
[http://www.developer.nokia.com/Resources/Library/Java/#!code-examples/application-framework-persistentstorage.html Example.]
+
* [http://www.developer.nokia.com/Resources/Library/Java/#!code-examples/application-framework-persistentstorage.html Example.]
 +
 
  
 
====Is there a support to use the text editor API with full key event handling?====
 
====Is there a support to use the text editor API with full key event handling?====
Please check from here:
+
Please check in the JDL:
<br />
+
* [http://www.developer.nokia.com/Resources/Library/Java/_zip/GUID-237420DE-CCBE-4A74-A129-572E0708D428/com/nokia/mid/ui/TextEditor.html TextEditor information.]
[http://www.developer.nokia.com/Resources/Library/Java/_zip/GUID-237420DE-CCBE-4A74-A129-572E0708D428/com/nokia/mid/ui/TextEditor.html More information.]
+
* [http://www.developer.nokia.com/Resources/Library/Java/#!code-examples/application-framework-persistentstorage.html Example.]
<br />
+
 
[http://www.developer.nokia.com/Resources/Library/Java/#!code-examples/application-framework-persistentstorage.html Example.]
+
  
 
====Is it possible to create a choice group (ChoiceGroup) without a title and how would it look like?====
 
====Is it possible to create a choice group (ChoiceGroup) without a title and how would it look like?====
Yes it is possible. All you need is to give an empty title (i.e. “”) in the constructor as follows:<br />
+
Yes it is possible. All you need is to give an empty title (i.e. “”) in the constructor as follows:
mainForm = new Form("Simple ChoiceGroup");<br />
+
<code java>
:cg = new ChoiceGroup("", ChoiceGroup.EXCLUSIVE);<br />
+
mainForm = new Form("Simple ChoiceGroup");
:cg.append("option 1", null);<br />
+
cg = new ChoiceGroup("", ChoiceGroup.EXCLUSIVE);
:cg.append("option 2", null);<br />
+
cg.append("option 1", null);
:cg.append("option 3", null);<br />
+
cg.append("option 2", null);
:mainForm.append(cg);<br />
+
cg.append("option 3", null);
:Display.getDisplay(this).setCurrent(mainForm);<br />
+
mainForm.append(cg);
 +
Display.getDisplay(this).setCurrent(mainForm);
 +
</code>
 +
 
 +
 
 +
You will get the following result:
 +
[[File:Webinar Series40 UI Design QA 06.png|none]]
 +
 
 +
== Webinar Series 40 Full Touch UI Style Guide, part 2, 10.07.2012 and 13.07.2012 ==
 +
 
 +
===Problems===
 +
====How could these screens look in full touch?====
 +
 
 +
[[File:Webinar Series40 UI Design 13.png|200px]] [[File:Webinar Series40 UI Design 14.png|200px]]
 +
 
 +
 
 +
=====Proposal=====
 +
 
 +
{|class="wikitable"
 +
|-
 +
| [[File:Webinar Series40 UI Design 15.png|200px]] ||
 +
The drill down structure as found in Series 40 Touch and Type phones can be converted in a tab bar structure in Series 40 full touch phone. This will reduce one view. (Please note that this reasoning is just valid for 4 or less categories.)
 +
 
 +
The list items of the firs view are now tab bar items. This way they are immediately available and highlight certain features of the application.
 +
|}
 +
 
 +
 
 +
 
 +
====If Action Button 1 should be used for confirmation,  how would you build a multi selction view?====
 +
 
 +
=====Proposal=====
 +
 
 +
{|class="wikitable"
 +
|-
 +
| [[File:Webinar Series40 UI Design 20.png|200px]] || [[File:Webinar Series40 UI Design 26.png|200px]] ||
 +
The left image shows a list which still renders the dimmed check mark in action button #1. Currently it is not possible to hide the dimmed checkmark. From interaction design point of view, the dimmed check mark is something what could become a show stopper in your application.
 +
 
 +
To avoid this, you may want to use a Form with a multiple ChoiceGroup instead. A Form allows you place a check mark in action button #1.
 +
 
 +
'''Please note:'''
 +
It is possible to remove the choicegroup header. More information found from the Q/A section.
 +
|}
 +
 
 +
====Sketch an upload dialog which shows the remaining amount of data.====
 +
=====Proposal=====
 +
{|class="wikitable"
 +
|-
 +
| [[File:Webinar Series40 UI Design 25.png|200px]] ||
 +
The image shows a Form with a Gauge, which is displaying a determinate progress indicator. Below is a StringItem formatted as a button. The Cancel button is preferred  over the "Back" icon-button, since Back will not move the upload to the background, but rather cancel it. The user might not be aware of this and wonder if the upload went ok or not.
 +
 
 +
It is not possible to do this with an Alert, since the Alert cannot listen to any events from the application, but just to button-press of the Alert UI or timeout after a pre-set time. So the alert cannot detect of a process was finished or if an upload was successful.
 +
 
 +
|}
 +
 
 +
====Sketch a view====
 +
* 2 categories
 +
* 3 primary actions related to the view, not a single item out of the view (sorted by priority)
 +
** call
 +
** add
 +
** edit
 +
* 3 secondary actions related to the view, not a single item out of the view (sorted by priority)
 +
** Share FB
 +
** Share TW
 +
** Share Reddit
 +
* Options menu
 +
* Use chrome
 +
* maximize the content area
 +
 
 +
 
 +
=====Proposal=====
 +
{|class="wikitable"
 +
|-
 +
| [[File:Webinar Series40 UI Design 16.png|200px]] ||
 +
This is only one out of many possible designs. The design rationales for this view are as follows:
 +
* Place the most important action to Action button 1.
 +
* Place the other two primary actions as icons in the screen. In this solution the visibility of the primary actions is rated more important than having the entire screen available for the content.
 +
* the secondary functions are placed under the options menu.
 +
Depending on the actual use case, it might also be okay to place the "add" and "edit" as commands in the Options menu in addition to Share FB, Share TW, Share Reddit.
 +
|}
 +
 
 +
====How many touch elements fit the content area?====
 +
=====Proposal=====
 +
{|class="wikitable"
 +
|-
 +
| [[File:Webinar Series40 UI Design 18.png|230px]] || [[File:Webinar Series40 UI Design 19.png|150px]] ||
 +
* Screen is 240 px x 400 px, 3,0 inch
 +
* Content area 240 px x 342 px
 +
* 4 elements in a row, no truncation possible, no horizontal scrolling
 +
* 7 elements in a column, truncation possible, vertical scrolling is foreseen
 +
* - 1 element which is partially hidden by the Back button
 +
* 28 - 1 items
 +
|}
 +
 
 +
 
 +
 
 +
====How many touch elements fit the entire canvas?====
 +
=====Proposal=====
 +
With values taken from the previous problem:
 +
* 4 elements in a row, no truncation possible, no horizontal scrolling
 +
* 8 elements in a column, truncation possible, vertical scrolling is foreseen
 +
* 32 items
 +
 
 +
===Open issues from Q/A===
 +
 
 +
 
 +
====Does Series 40 phone book import contact photos from social media on internet  automatically? Providing auto update, etc.====
 +
No, native Series 40 Phonebook in full touch as such can only use images from gallery. these are without any dynamic update.
 +
If your application wants to use e.g. FB, it requires login. At least to our experience the token you receive from FB for permanent login times out after a certain time so people have to log in again (even it says permanent).
 +
However, if you create your own service, it is possible to do dynamic image update by yourself.
 +
 
 +
====Is it possible to run data saving in the background; in device or with a server connection?====
 +
As long as your application is in foreground you can run a thread to e.g. download a file in the background.
 +
This data can go into buffer and saved from there.
 +
Examples are found from here:
 +
* [http://developers.sun.com/mobility/midp/articles/threading/ Threading example 1]
 +
* [http://developers.sun.com/mobility/midp/articles/threading2/ Threading example 2]
 +
* [http://www.developer.nokia.com/Community/Wiki/Creating_threads_in_Java_ME Creating threads in Java ME]
 +
Please check also the Q/A about storing a small amount of data more upwards. Use the RMS (Record Management System).
 +
 
 +
 
 +
====Is Flowella continued?====
 +
This is not decided yet. Currently there hasn't been any service for Flowella, so it is outdated for the current devices.
 +
 
 +
'''Update, 17.07.2012:'''
 +
It's not being actively updated and there are no current plans for update.
 +
 
 +
====Where do I find Carbide to create Series 40 themes?====
 +
* [http://www.developer.nokia.com/Community/Wiki/Carbide.ui_plug-in_for_Series_40_Developer_Platform_2.0_(Full_Touch_UI) Wiki article]
 +
 
 +
 
 +
====Is it possible to have more than 1 ticker?====
 +
No, not with the standard LCDUI components.
 +
You can have only one ticker per displayable (Form, Canvas or List).
 +
 
 +
If you attempt to setTicker more than once on a displayable, you replace the old ticker with the new, but you don’t add tickers. You cannot modify the ticker’s position, this is determined by the implementation. On full touch devices, I can see that the ticker is placed under the header. On full screen mode Canvas, the ticker is not displayed (i.e. ticker is only displayable in normal mode for Canvas instances).
 +
 
 +
 
 +
====Where do I find porting information Android --> Series 40====
 +
There are several projects available. Please check from here:
 +
* [http://www.developer.nokia.com/Develop/Porting/ Porting main page]
 +
* [http://www.developer.nokia.com/Resources/Library/Porting_to_Series_40/#!index.html Library about porting from Android to Series 40]
 +
* [http://www.developer.nokia.com/Resources/Library/Porting_to_Series_40/#!porting-cases.html Porting cases]
 +
 
 +
 
 +
====How does it look like if I have 2 SIM cards inserted====
 +
{| class="wikitable"
 +
|-
 +
! App view !! Notification bar !! SIM card select !! Alert
 +
|-
 +
| SIM 1 || [[File:Webinar Series40 UI Design QA 07.png|200px]] || [[File:Webinar Series40 UI Design QA 08.png|200px]] || [[File:Webinar Series40 UI Design QA 09.png|200px]] || -
 +
|-
 +
| SIM 1, SIM 2 || [[File:Webinar Series40 UI Design QA 14.png|200px]] || [[File:Webinar Series40 UI Design QA 13.png|200px]] || [[File:Webinar Series40 UI Design QA 10.png|200px]] || [[File:Webinar Series40 UI Design QA 11.png|200px]]
 +
|-
 +
| - || - || - || - || Alert after selecting "my choices"
 +
 
 +
but without any SIM choices being made.
 +
|}
 +
 
 +
 
 +
===Add on===
 +
Due to current changes, the second session of the 2nd part of the webinar contained additional material:
 +
 
 +
Note about the use of DatePicker UI component (tumbler in Series 40 full touch UI)
 +
 
 +
Please note that the current tumbler implementation (13.07.2012) is with out any kinetic scrolling and therefore remains a with a usability problem which also might affect your application.
 +
As a workaround you might want to try a TextField with a certain format. Make sure you indicate the desired format to people using your application.
 +
{| class="wikitable"
 +
|-
 +
| [[File:Webinar Series40 UI Design 23.png|200px]] || [[File:Webinar Series40 UI Design 22.png|200px]] || The TextField indicate in the header the expected format. In most cases users obey this format as long as they are aware of it and in case they get an error message explaining what went wrong what to take of. Make sure the Keypad offers the separation character without changing the keypad, i.e. even a simple space might work well, as long as it speeds up the input procedure.
 +
|}
  
 +
===Try your new knowledge and check the Asha Touch Competition 2012Q3===
  
===Try your new knowledge and check the [http://www.developer.nokia.com/Community/Wiki/Asha_Touch_Competition_2012Q3 Asha Touch Competition 2012Q3]===
+
The competition page is here: [[Asha Touch Competition 2012Q3]].

Latest revision as of 08:35, 19 July 2013

This article is companion for the Series 40 UI design webinars. It contains solutions and proposals for the webinar exercises and discusses open issues which could not be solved during the webinar Q/A session and covers both parts:


Next UX related webinar:

  • Increase Your Nokia Store Success with User-centric Design of Series 40 Apps (About concept design and the benefits of a good UI.)
  • 22.08.2012, 10:00 Helsinki time,
  • 23.08.2012, 18:00 Helsinki time
Article Metadata
Compatibility
Platform(s):
Series 40
Article
Created: Krebbix (29 Jun 2012)
Last edited: hamishwillee (19 Jul 2013)

Contents

[edit] Webinar Series 40 Full Touch UI Style Guide, part 1, 28.06.2012 and 04.07.2012

[edit] Problems

[edit] How would this screen look in Series 40 Full Touch?

Webinar Series40 UI Design 01.png

[edit] Proposal:
Webinar Series40 UI Design 02.png

The original layout in Touch & Type is a canvas because of 2 reasons:

  • Lists do not allow different text formatting in one list item, e.g. title with black font and content with grey front is not possible; in addition a line break isn't possible neither
  • Lists do not support the use of a Middle Soft Key (also there is no possibility to add an Action Button #1 to Full Touch lists)

The Touch & Type canvas can be transferred into a canvas again. The content layout stays unchanged and Back and Options are replaced automatically with icons. However, the primary function “Add” in the middle soft key (Touch and Type) is replaced with a new icon “plus” (Full Touch). In Full Touch there is more content “above the fold” than in Touch & Type.

[edit] Create a sign-in view

It should contain:

  • Username
  • Password
  • Setting for auto-fill password
  • Forgot password & help
[edit] Proposal 1:
Webinar Series40 UI Design 03.png

The environment is a Form screen. Username and password are filled via TextField and the Setting for auto-fill is done via a pop-up choice group. This proposal places Help and Forgot password under the Options menu. The login is done via the checkmark in Action Button #1


[edit] Proposal 2
Webinar Series40 UI Design 04.png

The environment is again a Form screen with 2 TextFields and 1 pop-up choice group. In addition, there is a StringItem formatted as a Button and a StringItem formatted as a hyperlink. There is no action in Action Button #1.


[edit] Discussion

The second proposal has everything available in the view, but it is not likely that it will work flawlessly with Touch & Type devices. However, since the additional elements in the view (Login button and Help hyperlink) are more prominent, it is expected to reduce interaction bumpers if the design is optimized for Full Touch.


[edit] Which component would you use to pick one of the following?

  • Monday
  • Tuesday
  • Wednesday
  • Thursday
  • Friday


[edit] Proposal
Webinar Series40 UI Design 05.png

The pop-up choice group in a Form screen offers single selection out of a list. Also the exclusive choice group would have been a good choice. It depends on the environment. Usually collapsing UI elements are preferred if there are many different settings slots in a single view, whereas static UI components are usually preferred in case only few settings slots are available.

Please note, the LCDUI Tumbler (DateField) is not suitable for this task. It only can pick time and date, but no weekdays or any other values.


[edit] How would you replace a single choice item (aka switch)?

Webinar Series40 UI Design 06.png

You may find the following layout from a native application. Unfortunately, the single choice item is not available in the LCDUI.



[edit] Proposal
Webinar Series40 UI Design 07.png

The proposal is similar to the previous problem, except that the pop-up choice group contains only 2 items.

Another solution would be a multi selection choice group with only one item. Also an exclusive selection choice group with 2 items is possible to replace a switch. The choice depends in the end again from the environment:

  • pop-up choice group; best if used in a busy layout
  • multi selection choice group (1 item), if there is a clear on/off metaphor (e.g. radio on/off)
  • exclusive choice group if indicating the correct state is crucial, and on/off is not necessarily the right metaphor (e.g. dim light on/off vs. dimmed light – full light)


[edit] Which views can have a button? Are there any limitations?

[edit] Proposal

Webinar Series40 UI Design 08.png Webinar Series40 UI Design 09.png Webinar Series40 UI Design 10.png Webinar Series40 UI Design 11.png Webinar Series40 UI Design 12.png

  • 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 labeled 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.


[edit] Open issues from Q/A

[edit] What happens with the keypad if BT keyboard is detected?

Regarding connecting a Bluetooth enabled device to a full touch series 40 and getting input from the BT device into a custom 3rd party Java application, the following rules apply:

  1. Direct connection of a BT device to a Java application is only possible if the BT device supports the Bluetooth Profiles that are coming with the JSR-82 (the Bluetooth API):
    • SDAP - Service Discovery Application Profile
    • RFCOMM - Serial Cable Emulation Protocol
    • L2CAP - Logical Link Control and Adaptation Protocol
    • OBEX - Generic Object Exchange Profile (GOEP) profile on top of RFCOMM and TCP
  2. The Virtual Keyboard API does not provide any editor functionality. It merely launches and controls the virtual keyboard provided by the platform on low level Canvas and GameCanvas Components and returns into the application the key that was pressed with the help of the keyPressed(int key) method. So theoretically, one can call remotely the keyPressed(int key) method directly with a value that matches the integer value of the key that is supposed to be pressed.


[edit] Can text be formatted, e.g. rich text formatting?

Regarding StringItem one can change the font. Fonts have three attributes: Style (bold/italic), size (large or small) and face (monospace, proportional and system). One cannot change the color of a StringItem.

It is not possible to format the text in TextBox screen.

Canvas allows free formatting.

If formatting is needed for certain components, please have look into LWUIT if this is suitable for you.

[edit] How is the image in an ImageItem being cropped in landscape orientation?

Here is the example image:

Webinar Series40 UI Design QA 01.png

When the Layout is set to LAYOUT_LEFT or LAYOUT_CENTER, this is the result in portrait mode:

Webinar Series40 UI Design QA 02.png Webinar Series40 UI Design QA 03.png


When the Layout is set to LAYOUT_LEFT or LAYOUT_CENTER, this is the result in landscape mode:

Webinar Series40 UI Design QA 04.png Webinar Series40 UI Design QA 05.png

The cropping matches the requested layout.


[edit] How can you do custom gestures yourself?

1. It is possible to use the existing gestures and build your custom gesture on top of it; here 2 examples:

  • if you want to make your application to sense a figure of "8" on your screen, use a "drag" gesture and use the x/y values for your pattern recognition
  • if you want to use triple touch, e.g. to mark the entire text, use 3 single taps for your gesture recognition

Tap drag and release can also be implemented outside the Gesture API, with the standard LCDUI low level Canvas components.

2. It is possible to use the sensor API to e.g. get direct x/y/z information of the phone. this way, you can e.g. sense the position changes of the phone to detect if the user is writing a figure of "8" into the air (with the phone in her hand). The phone can detect accelerations between -2g and +2g. Sensor API link will be added.


[edit] Is it possible to store a small amount of data?

Yes it is. The persistent storage is done via RMS (Record Management System):


[edit] Is there a support to use the text editor API with full key event handling?

Please check in the JDL:


[edit] Is it possible to create a choice group (ChoiceGroup) without a title and how would it look like?

Yes it is possible. All you need is to give an empty title (i.e. “”) in the constructor as follows:

mainForm = new Form("Simple ChoiceGroup");
cg = new ChoiceGroup("", ChoiceGroup.EXCLUSIVE);
cg.append("option 1", null);
cg.append("option 2", null);
cg.append("option 3", null);
mainForm.append(cg);
Display.getDisplay(this).setCurrent(mainForm);


You will get the following result:

Webinar Series40 UI Design QA 06.png

[edit] Webinar Series 40 Full Touch UI Style Guide, part 2, 10.07.2012 and 13.07.2012

[edit] Problems

[edit] How could these screens look in full touch?

Webinar Series40 UI Design 13.png Webinar Series40 UI Design 14.png


[edit] Proposal
Webinar Series40 UI Design 15.png

The drill down structure as found in Series 40 Touch and Type phones can be converted in a tab bar structure in Series 40 full touch phone. This will reduce one view. (Please note that this reasoning is just valid for 4 or less categories.)

The list items of the firs view are now tab bar items. This way they are immediately available and highlight certain features of the application.


[edit] If Action Button 1 should be used for confirmation, how would you build a multi selction view?

[edit] Proposal
Webinar Series40 UI Design 20.png Webinar Series40 UI Design 26.png

The left image shows a list which still renders the dimmed check mark in action button #1. Currently it is not possible to hide the dimmed checkmark. From interaction design point of view, the dimmed check mark is something what could become a show stopper in your application.

To avoid this, you may want to use a Form with a multiple ChoiceGroup instead. A Form allows you place a check mark in action button #1.

Please note: It is possible to remove the choicegroup header. More information found from the Q/A section.

[edit] Sketch an upload dialog which shows the remaining amount of data.

[edit] Proposal
Webinar Series40 UI Design 25.png

The image shows a Form with a Gauge, which is displaying a determinate progress indicator. Below is a StringItem formatted as a button. The Cancel button is preferred over the "Back" icon-button, since Back will not move the upload to the background, but rather cancel it. The user might not be aware of this and wonder if the upload went ok or not.

It is not possible to do this with an Alert, since the Alert cannot listen to any events from the application, but just to button-press of the Alert UI or timeout after a pre-set time. So the alert cannot detect of a process was finished or if an upload was successful.

[edit] Sketch a view

  • 2 categories
  • 3 primary actions related to the view, not a single item out of the view (sorted by priority)
    • call
    • add
    • edit
  • 3 secondary actions related to the view, not a single item out of the view (sorted by priority)
    • Share FB
    • Share TW
    • Share Reddit
  • Options menu
  • Use chrome
  • maximize the content area


[edit] Proposal
Webinar Series40 UI Design 16.png

This is only one out of many possible designs. The design rationales for this view are as follows:

  • Place the most important action to Action button 1.
  • Place the other two primary actions as icons in the screen. In this solution the visibility of the primary actions is rated more important than having the entire screen available for the content.
  • the secondary functions are placed under the options menu.

Depending on the actual use case, it might also be okay to place the "add" and "edit" as commands in the Options menu in addition to Share FB, Share TW, Share Reddit.

[edit] How many touch elements fit the content area?

[edit] Proposal
Webinar Series40 UI Design 18.png Webinar Series40 UI Design 19.png
  • Screen is 240 px x 400 px, 3,0 inch
  • Content area 240 px x 342 px
  • 4 elements in a row, no truncation possible, no horizontal scrolling
  • 7 elements in a column, truncation possible, vertical scrolling is foreseen
  • - 1 element which is partially hidden by the Back button
  • 28 - 1 items


[edit] How many touch elements fit the entire canvas?

[edit] Proposal

With values taken from the previous problem:

  • 4 elements in a row, no truncation possible, no horizontal scrolling
  • 8 elements in a column, truncation possible, vertical scrolling is foreseen
  • 32 items

[edit] Open issues from Q/A

[edit] Does Series 40 phone book import contact photos from social media on internet automatically? Providing auto update, etc.

No, native Series 40 Phonebook in full touch as such can only use images from gallery. these are without any dynamic update. If your application wants to use e.g. FB, it requires login. At least to our experience the token you receive from FB for permanent login times out after a certain time so people have to log in again (even it says permanent). However, if you create your own service, it is possible to do dynamic image update by yourself.

[edit] Is it possible to run data saving in the background; in device or with a server connection?

As long as your application is in foreground you can run a thread to e.g. download a file in the background. This data can go into buffer and saved from there. Examples are found from here:

Please check also the Q/A about storing a small amount of data more upwards. Use the RMS (Record Management System).


[edit] Is Flowella continued?

This is not decided yet. Currently there hasn't been any service for Flowella, so it is outdated for the current devices.

Update, 17.07.2012: It's not being actively updated and there are no current plans for update.

[edit] Where do I find Carbide to create Series 40 themes?


[edit] Is it possible to have more than 1 ticker?

No, not with the standard LCDUI components. You can have only one ticker per displayable (Form, Canvas or List).

If you attempt to setTicker more than once on a displayable, you replace the old ticker with the new, but you don’t add tickers. You cannot modify the ticker’s position, this is determined by the implementation. On full touch devices, I can see that the ticker is placed under the header. On full screen mode Canvas, the ticker is not displayed (i.e. ticker is only displayable in normal mode for Canvas instances).


[edit] Where do I find porting information Android --> Series 40

There are several projects available. Please check from here:


[edit] How does it look like if I have 2 SIM cards inserted

App view Notification bar SIM card select Alert
SIM 1 Webinar Series40 UI Design QA 07.png Webinar Series40 UI Design QA 08.png Webinar Series40 UI Design QA 09.png -
SIM 1, SIM 2 Webinar Series40 UI Design QA 14.png Webinar Series40 UI Design QA 13.png Webinar Series40 UI Design QA 10.png Webinar Series40 UI Design QA 11.png
- - - - Alert after selecting "my choices"

but without any SIM choices being made.


[edit] Add on

Due to current changes, the second session of the 2nd part of the webinar contained additional material:

Note about the use of DatePicker UI component (tumbler in Series 40 full touch UI)

Please note that the current tumbler implementation (13.07.2012) is with out any kinetic scrolling and therefore remains a with a usability problem which also might affect your application. As a workaround you might want to try a TextField with a certain format. Make sure you indicate the desired format to people using your application.

Webinar Series40 UI Design 23.png Webinar Series40 UI Design 22.png The TextField indicate in the header the expected format. In most cases users obey this format as long as they are aware of it and in case they get an error message explaining what went wrong what to take of. Make sure the Keypad offers the separation character without changing the keypad, i.e. even a simple space might work well, as long as it speeds up the input procedure.

[edit] Try your new knowledge and check the Asha Touch Competition 2012Q3

The competition page is here: Asha Touch Competition 2012Q3.

This page was last modified on 19 July 2013, at 08:35.
199 page views in the last 30 days.