×

Porting Android 2.X app UIs to Series 40

When porting app UIs from Android to Series 40, you will find that the overall UI concepts can be quite easily mapped between the different platforms. Some restructuring of the navigation and organising the action items will still probably be needed.

You should also keep in mind that processing power varies hugely between different Series 40 devices, which may have an impact especially in the visual design side. Also, Android devices use capacitive touch screen technology with multi-touch support, whereas in some Series 40 devices the touch screens can be resistive, and in touch and type devices multi-touch is not available. From design perspective this means that the design should not rely too heavily on delicate touch interactions such as rapid tapping, which may not work reliably enough on resistive displays. Also, in Series 40 touch and type devices, the design should not rely on multi-touch events, but alternative means of accessing the same functionality should be offered.

It is important to remember that while the user interface designs and the components on both platforms may look similar, the three UI styles have distinct characteristics that make the user experiences different. The purpose of UI mapping is to ensure that there is a comfortable continuation of the user experience from the platform UI style to that of a third party app.

The five most important aspects of the UI to consider when porting are:

  1. Overall layouts & interaction in Series 40
  2. Navigation logic
  3. Back navigation
  4. Displaying common actions
  5. Displaying context specific actions

Each of these will be described in more detail in the following sections, where UI examples demonstrate how the RLinks application in Android could be mapped to Series 40 UI components, as well as to the Series 40 touch and type and Series 40 full touch UI styles in practice. Note that the depicted images differ from the actual ported RLinks application.

These basic rules should be followed irrespective of the UI framework used: LCDUI high-level components, LCDUI canvas, or LWUIT.

Note: This section describes how the components and layouts appear in Series 40 full touch and touch and type devices, but even though their look and feel are different, the APIs are the same for the most part so the implementation only needs to be done once.

For detailed information on designing apps that fit the platform style well, see the Series 40 Full Touch Design Guidelines and Series 40 Touch and Type UI Style Guide.

Overall layouts & interaction in Series 40

In Series 40 touch and type, the layout consists of the following zones :
  • Status zone at the top of the screen displays the application/view title as well as global status indicators like new messages and battery level, which in Android are displayed in the status bar. Status zone is non-interactive due to the small size.
  • Main zone in the middle of the screen is where the application content should be placed.
  • Softkey zone is at the bottom of the screen and usually contains two softkeys. Three softkeys should only be used when a middle softkey makes sense and adds value to the user.

The user experience follows single tap interaction: a single tap on any object will select and activate the command. Basic touch strokes and gestures are aligned across Nokia devices: content follows finger movement when dragging or flicking.

Most elements on the screen are touchable, but the status area and the scroll bar are only informative, not touchable. In full canvas the full screen is touchable. Design is optimised for use with one hand.

The mandatory physical keys in touch and type devices are Send & End keys, Lock key, and ITU-T or Qwerty keypad for text input.

Series 40 touch and type only supports portrait screen orientation.

In Series 40 full touch, the layout consists of the following zones :
  • Status zone at the top of the screen displays only the global status indicators like new messages and battery level, which are similarly displayed in the status bar in Android. Unlike the status bar in Series 40 touch and type, but similarly to Android, the status bar in Series 40 full touch is interactive. User can see latest notifications like missed call, new text, Wi-Fi found.
  • Header bar below the status bar contains the application/view title in lower case and icon based action buttons (Action 1 and Action 2). Header title is non-interactive. Action 2 in Java applications is always Options, dimmed if there are no commands defined. Action 1 cannot be defined, if the standard Java list component is used.
  • Main zone in the middle of the screen displays the application content.
  • Bottom navigation zone at the bottom of the display can contain either the category bar or just the Back button at the right corner.

Mandatory physical keys in Series 40 full touch devices are Send / End and Lock key. The device may have additional keys, for example volume keys. Text input is handled with a virtual keyboard.

Series 40 full touch supports both landscape and portrait orientations, like the Android devices.

Figure 1. Basic layouts in Series 40 touch and type and full touch

Navigation logic

In Android, many applications use tabs for navigation between parallel views. The same functionality is available for Series 40 full touch, where category bar is intended for parallel view navigation. In Series 40 touch and type devices, tab navigation is not supported. You should use drill down navigation instead.

Figure 2. Porting the Android tab navigation to Series 40

On the other hand, there are also plenty of Android applications with dashboard navigation from the main view. Design-wise this style can be quite easily transferred to both Series 40 touch and type and Series 40 full touch, where a list or a grid view with the same dashboard items can be used as the main view. However, grid layouts in Series 40 require some custom implementation as there is no ready-made UI component available.

Figure 3. Porting the Android dashboard navigation to Series 40

Some Android applications utilise the scrolling tabs concept with more than 4 parallel views. When adding more than 4 categories to the category bar in Series 40 full touch, the extended category bar is automatically taken into use and can be used for accessing the additional views. In Series 40 touch and type, the drill down navigation naturally supports any number of parallel views.

Figure 4. Porting the Android scrolling tabs navigation to Series 40

Back navigation

Back navigation logic is one of the key characteristics of any platform UI style. All the major platforms have adopted unique ways of implementing this feature. The Android UI style uses a hardware Back key for navigation within an app and for exiting the app: there is no back navigation button in the app's views. This gives a bit more screen real estate for the actual content, as space is not needed for displaying softkeys. On the other hand, the hardware Back key always goes to the previous activity which might as well be outside the application. Thus, the Back key functionality may not always be clear to the users and they might accidentally get away from the application.

In the Series 40 touch and type UI style, there is always a Back at the right softkey, which allows the user to backstep within the app. At the application main view, the label changes to Exit making it explicit to the end user that pressing the key actually closes the application. Also in Series 40 full touch the Back button is positioned at the bottom right corner of the display, but displayed as an icon, not text. The icon remains the same even at the main level of the application, so it may not always be clear to the end user that they are about to close the application.

Note: Back navigation is not handled automatically by the Series 40 platform, but the application developer must implement the correct softkey labelling and back navigation functionality.

It is very important to implement back navigation that is in line with the platform style, as users using the platform apps have come to expect certain back behaviour and might get very confused if the behaviour within a third party app differs from the platform style.

Figure 5. Backstepping in Android and Series 40 devices

Displaying common actions

In Android applications, the common actions (meaning actions that are not related to a specific view item) are placed in the options menu. In Android 2.3 or lower, users can reveal the options menu panel by pressing the hardware Menu key. In Series 40, the overall concept is similar even though accessing the menu differs from Android. In Series 40 touch and type, the left softkey is labeled Options and pressing this softkey launches the options list, where common actions should be placed. In Series 40 full touch, the common actions are also placed in the options list, but the menu is accessed by pressing the action button 2 in the header bar. If there are no common actions within the view, the action button 2 (Options) in Series 40 full touch is shown dimmed and the left softkey in Series 40 touch and type is left unlabeled.

Figure 6. Menu access in Android and Series 40

In Android 3.0 and higher, items from the menu are presented in the action bar as a combination of on-screen action items and overflow options. Similarly, in Series 40 full touch, the header bar with action buttons can display the primary action on the action button 1 at the right side of the application header, and in Series 40 touch and type the primary action can be shown in the middle softkey as a textual label.

Note: If using the standard Java list component, the support for adding the primary action in action button 1 is not available from the platform, but requires a custom list implementation.

Figure 7. The primary action position in Android and Series 40

Displaying context specific actions

In both Android and Series 40, the platform UI style supports context specific options menu for displaying the options that are related to a specific view item. These options are accessed by long pressing an item. In Series 40 Full touch, the context specific options appear floating next to the selected view item similarly as in Android versions before 3.0, whereas in Series 40 Touch and Type the long press launches a menu similar to the options list.

Figure 8. Accessing the context specific actions in Android before 3.0 and in Series 40

In Android 3.0 and newer versions, the long press behaves quite differently launching the contextual action mode, where user can select multiple items and then apply an action from the contextual action bar to these items. To achieve similar kind of functionality in Series 40, use multiselection list.

Component mapping examples

This section covers some examples of components that are typically needed for porting cases.

  Android Series 40 full touch Series 40 touch and type
List view: A view that shows items in a vertically scrolling list.

Android ListView displays a scrolling single column list by default.

In Series 40, the list layout varies based on four attributes: list type, optional icon attached to the elements, font, and fit policy for long elements. There are variables for defining, whether there are images in the list, what the image size is, and whether the text needs one or two lines.

The text can be wrapped to two lines. If any of the list elements require wrapping, all elements have two lines; otherwise the size of the icons determines the height of an element.

Note: If using the standard Java list component, the support for adding the primary action in action button 1 is not available from the platform, but requires a custom list implementation.
Options menu: the method for accessing the common actions

The options menu is where you should place actions that have a global impact on the app, such as Search, Compose email, and Settings.

If the app you are porting was developed for Android 2.3 or lower, users can reveal the options menu panel by pressing the Menu button. On Android 3.0 and higher, items from the options menu are presented by the action bar with function buttons.

In Series 40 full touch, options list is a UI component embedded in the header bar, positioned on left edge of the screen and always identified by an icon.

When options list is open, the whole content area in the background is dimmed. If no commands are defined for the options list, the icon is shown dimmed.

When there are more items than fit to the options list window, to hint that the menu is scrollable, the last item of the list is partially cut. While scrolling a scroll bar fades in to indicate the length of the list. Even though options list can be scrolled, it is recommended to avoid overloading.

In Series 40 touch and type, options list is launched by tapping the left softkey button labeled Options. If there are no actions to be placed in the options list, then the left softkey must be left unlabeled.

Options list opens into a popup list view, where the right softkey is labeled Back and other softkeys are left unlabeled.

Context menu: the method for accessing item specific actions

Android context menu is a floating menu that appears when the user performs a long-press on an element. It provides actions that affect the selected content.

If the app has been developed for Android 3.0 and higher, you are probably using contextual action mode to enable actions on selected content. This mode displays action items that affect the selected content in a bar at the top of the screen and allows the user to select multiple items. Contextual action mode does not have a direct equivalent in Series 40.

In Series 40 full touch, the context menu is also a floating menu activated by long-pressing an item. While the context menu is open, the content area background is dimmed. The object which the menu belongs to is highlighted under the dimming.

A single tap action for an object should not be duplicated in its context menu. It is recommended that the actions in the context menu are also made available in the next state down in the navigation hierarchy (for example, in the normal options list).

To achieve functionality similar to Android contextual action mode in Series 40, a multiselection list should be used.

Like in Android and Series 40 full touch, the context menu in Series 40 touch and type is launched by long-pressing an item. Also the context menu opens into a popup list view, where the right softkey is labelled Back and other softkeys un-labelled.

Tabs: navigation between parallel views

Fixed tabs:

TabWidget is typically used for navigation between parallel views in Android applications. Fixed tabs can host maximum four tabs, displayed as icon and label in Android versions before 3.0, and with label only in Android 3.0 and higher.

Scrolling tabs:

In Android 3.0 and further, also scrolling tabs can be used in the application navigation to display more than three tabs.

Category bar:

In Series 40 full touch, the UI component corresponding to the Android tabs is category bar placed at the bottom of the view in both orientations.

The rightmost location in the category bar is reserved for the Back button. The maximum number of categories is four in portrait, and six in landscape. Categories depend on the level in the UI hierarchy, meaning that they disappear when user drills down in hierarchy.

Category bar must not contain actions, only views of the application.

Category bar with More button (min 5 categories):

In Series 40 full touch, apps should preferably not have more than four categories. However, if the Android application to be ported uses scrolling tabs and has more than four tabs, this can be handled in Series 40 full touch by adding the extra tabs as additional categories. In this case, a More button is automatically added as the last item of the category bar.

By tapping More, the bar expands, showing all the available categories with the corresponding labels. The background is dimmed when the category bar is expanded. The expanded view collapses by tapping outside the bar, by dragging it down, or when selecting one of the available categories.

Category bar in extended state:

Extended category bar must always contain at least five items.

In Series 40 touch and type there is no tab component available and the UI style does not recommend using tabs. The preferred solution is to use drill down navigation instead.
Form elements

Android platform contains a number of ready-made form elements, including Edit Text, Checkbox, Radio Button and RadioGroup, DatePicker, Seek Bar, Toggle Button, and Button. These can be easily mapped to corresponding Series 40 form elements, except for toggle button (on/off switch) which is not available for Series 40.

The Series 40 Form component can contain similar types of Items as in Android. The supported Items in Series 40 include TextField, ChoiceGroup (which can be exclusive or multiple choice), DateField, and Gauge (slider). The look and interaction of the items differ slightly between Series 40 full touch and Series 40 touch and type, due to different text input mechanisms and basic navigation logic.

Last updated 10 July 2013

Back to top

×