Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.
Webinar Series 40 UI Design
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:
- part 1, 28.06.2012 and 04.07.2012, webinar recording, slide deck
- part 2, 10.07.2012 and 13.07.2012, webinar recording, 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
Webinar Series 40 Full Touch UI Style Guide, part 1, 28.06.2012 and 04.07.2012
How would this screen look in Series 40 Full Touch?
Create a sign-in view
It should contain:
- Setting for auto-fill password
- Forgot password & help
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 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.
Which component would you use to pick one of the following?
How would you replace a single choice item (aka switch)?
You may find the following layout from a native application. Unfortunately, the single choice item is not available in the LCDUI.
- 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.
Open issues from Q/A
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:
- 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
- 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?
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.
How is the image in an ImageItem being cropped in landscape orientation?
Here is the example image:
When the Layout is set to LAYOUT_LEFT or 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 landscape mode:
The cropping matches the requested layout.
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.
Is it possible to store a small amount of data?
Yes it is. The persistent storage is done via RMS (Record Management System):
Is there a support to use the text editor API with full key event handling?
Please check in the JDL:
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);
You will get the following result:
Webinar Series 40 Full Touch UI Style Guide, part 2, 10.07.2012 and 13.07.2012
How could these screens look in full touch?
If Action Button 1 should be used for confirmation, how would you build a multi selction view?
Sketch an upload dialog which shows the remaining amount of data.
Sketch a view
- 2 categories
- 3 primary actions related to the view, not a single item out of the view (sorted by priority)
- 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
How many touch elements fit the content area?
How many touch elements fit the entire canvas?
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
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:
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?
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:
How does it look like if I have 2 SIM cards inserted
|App view||Notification bar||SIM card select||Alert|
|SIM 1, SIM 2|
|-||-||-||-|| Alert after selecting "my choices"
but without any SIM choices being made.
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.
Try your new knowledge and check the Asha Touch Competition 2012Q3
The competition page is here: Asha Touch Competition 2012Q3.