Nokia has released very little information about the next update to the Symbian platform, other than saying that it is in development, features flexible widgets on the homescreen, moves away from sofkey driven menus and has a new look status bar. There has been no official word on timing, but an announcement at Nokia World in October is the most likely scenario.
The design guidelines do not offer a complete look at the new UI, but they do provide a useful overview. They are targeted at developers using the Qt Quick Components 1.0 for Symbian and aim to make it easier to design fresh looking application that fit in with the current and upcoming native look and feel of the Symbian platform.
As the guidelines note:
Symbian releases after Anna will introduce a number of changes in the design and user experience. Qt Quick components 1.0 for Symbian is the first implementation that follows the new Symbian design guidelines. By using Qt Quick components 1.0 for Symbian, applications will not only have a fresh new look, but will also comply with the evolving Symbian style.
Today, deploying apps that follow these guidelines means that your app will differ slightly from what consumers currently have installed on their Symbian device. The change is for the better, though — it includes a more modern design and will match the user’s experience of soon-to-come releases of Symbian.
Below, we've outlined some of the changes and additions; additional detail is available in the full Design Guideline documents. All the images below come from the Design Guideline documents.
- Status bar
- Toolbar
- Tab bars
- Notifications / status panel
- Lists
- Applications views
- Backstepping
- Homescreen
- Rotation
- Dialogs
- Tumblers
- Gestures
- Haptic feedback
Status bar
The status bar will be slimmed down, with status icons (signal strength, battery, time) on a single line.
Toolbar
The softkey driven menu (Options menu) and bottom toolbar will be combined together, using half the amount of space previously used. The Close button will be replaced by a universal back button (back arrow icon).
The Options button will be replaced by a menu button (three horizontal lines icon). This will still drive a pop-up menu (in most instances), but it is envisioned that this will used less as the key commands will occupy the now universal two middle buttons (Share and Search in the example below).
A toolbar can contain two, three or four items/buttons. The back button is obligatory, but the other three buttons can be customised. Toolbars will contain the key action items for a given view.
Toolbars in portrait and landscape
Tab bars
Tab bars let you switch between multiple parallel views in the same application (e.g. switching between list and group view in Contacts). A tab bar can comprise two, three or four tabs. Tabs can be labelled with an icon or with an icon and text.
Tab bars are always displayed immediately below the status bar and are expanded so they stretch across the screen, making them more finger touch friendly by giving a bigger target area. Tab bars do exist in the current Symbian UI, but are not used extensively and are one of the best examples of a UI object that was not very sucessfully translated in the move to touch.
Notifications / Status Panel
There will continue to be two type of notifications in Symbian - modal, which require user action (e.g. a dialog) and modeless, which do not require user interaction (e.g. universal or status indicators and 'info banners'). There will be a greater use of modeless notifications, with some notifications switching to the info banner type. Info banners (e.g. currently used to notify of incoming SMS) will display across the full width of the top of the screen and can, optionally, be interacted with. They will auto-dismiss after a fixed period of time.
The big change is the use of a pull down (from the top) status panel, similar to that used in Android. The top portion of this status panel holds universal indicators (status icons). Tapping on one of the universal indicators will activate an associated action (e.g. toggle Bluetooth on or off). The lower part of the panel holds notifications about missed events (e.g. calls, messages, and emails) and activities (ongoing events, information on progress, connection information).
Lists
List views remain the most commonly used control in Symbian, but will gain some additional variations and a new look. Changes are likely to include greater use of list headers, improved multiple select interaction and greater use of accompanying labels and or icons.
Application views
Belle will expand and tweak the design look and feel for application views in Symbian. In general, previously, the predominant view has been hierarchical (drill down). This pattern will continue to be used, but is made easier and more consistent to use with the presence of the back button, as shown below.
However, a drill down hierarchy does not support all use case instances. Tab or parallel views are used in some instances (tabs in Contacts) already, but Belle will likely make much greater use of them, giving a flatter overall hierarchy to the UX. Parallel views will use tabs to switch between different views.
Additionally, an application may design a view to be two-sided and such views can be "flipped" using an animated transition (e.g. a photo view - one side image, one side meta data). A flipped view is a special case parallel view.
A key difference between drill down and parallel / flipped views is their behaviour in the history stack (what happens when you press the back button). Drill down views are considered multiple steps (one for each level), whereas parallel/flipped view represent a single step. Thus pressing back in a parallel / flipped view will leave the application or move one hierarchy level up.
The combination of these three views are very similar to those used in Android and iOS and should give Symbian Belle a more contemporary feel. In the most part this is an evolution, as these ideas were already present to some extent, but they were, perhaps, not presented in as user friendly way as they could have been.
Backstepping
The presence of a near-universal back button will make the user experience in Belle feel more fluid. The intention is that this will be the primary way to move through the user interface (though home button and multi-tasking will allow 'jumps').
There will no longer be a concept of existing 'applications', but rather back stepping to the previous view. In part, this is intended as a way of moving away from the rigid application-centric model and an acknowledgement that applications frequently flow into one another.
All applications will support backstepping, with the ultimate destination being the top level homescreen. This backstepping approach is reminiscent of that used by UIQ.
Homescreen
Although the new Symbian Design Guidelines make little mention of the homescreen, this is an area that will also be updated for Symbian Belle. The key change is the introduction of variable sized widgets, which will allow greater flexibility in laying out homescreens.
There is still likely to be an underlying grid, but as a minimum it will allow for single space widgets (e.g. an icon shortcut), long widgets, double sized widgets and more. The Symbian Design Guidelines offer a hint of this in the 'Arranging Items' section:
Rotation
The new UI supports three way rotation (portrait, landscape-right-up and landscape-left-up) - currently, Symbian only supports two way rotation. Portrait layout is the dominant orientation, but devices with physical keyboards may use the landscape orientation by default.
The guidelines recommend using the same layout in landscape and portrait unless an advantage in user experience can be offered (e.g. album art view in Music player).
Dialogs
Dialogs will get a new look, with buttons sitting within the dialog box, rather than beneath it. There will also be no blank button spaces - rather, single button instances will be centred. Furthermore, all dialogs will sit in the middle of the screen, rather than being attached to the toolbar. As noted above, more extensive use will be made of info banners, a type of auto dismissing modeless dialog.
Tumblers
Belle will also introduce some new UI elements. One example of this is Tumblers, which give a way to select a value, or set of values from one or more sets of discrete, familiar values (e.g. time). Each tumbler is like a rotating drum with a full scroll around. These are described as reducing errors and giving a more delightful user experience. Tumblers will be used for setting times and dates (e.g. on first start up and for alarms).
Touch input policy (gestures)
The existing gestures continue to be supported (touch down, touch release, tap, long tap, double tap, drag, move, drop, flick, pinch, but an additional gesture, 'rotate' is now supported. The rotate gesture would likely be used in Maps and Photos applications.
Haptic feedback
The guidelines go into detail to describe the advantage of haptic feedback and describe 35 different types of haptic feedback effects. This suggests a greater use of haptic feedback throughout the UI, with a greater variance of effects for different situations.
Rafe Blandford, AAS, 11 July 2011