Overall UI model

Basic application view

The Symbian Overall UI Model is a set of UI architecture guidelines that apply equally to all applications on the Symbian platform. There should be no exceptions to the basic system navigation and windowing models. 

Figure 1. Window model for Symbian devices

The diagram above illustrates the window model for Symbian devices. It includes all the basic window types, and shows the navigational relationships within and between application windows and system windows (the Lock screen, the Home screen, Notifications, and Application menu).

All basic application views contain mandatory and optional components, placed in standard locations according to the following diagrams.

Figure 2. View elements

The Status bar is a required element in all but full screen views (see Full screen views section below). The Status bar displays system status icons, and feedback such as signal strenghts, battery life, Wi-Fi connectivity, and the system time.

Toolbar

The Toolbar is a required element in all but full screen views. It is fixed to the bottom of application views, and contains a Back button and a View menu button.  Simple views that lack context menus may omit the View menu button. See Sub-Task Views  for more information on designing the toolbar in interstitial views.

The area between the Back and View menu buttons may contain up to two other buttons.  Depending on the complexity of the application, these buttons may represent actions that apply to the view as a whole, or they may be used as “tabs” to switch between alternate views within the same application.  However, if your application is rich enough to require the use of a Tab bar, you do not need to use Toolbar buttons as tabs.

See Toolbars for more detail.

Content area

The Content area is reserved for application-specific controls and data.  In most cases, the Content area will consist of all the remaining space after the placement of the mandatory and optional View controls, such as the Status bar and the Toolbar. Lists, icons, grids, media, simple controls, components, or any combination of these elements are all available for use here. See UI components and stencils for more information on standard UI controls.

In rare cases, an application may fill the entire device screen with the Content area.  See the Full-screen view section below for more information.

Content options

The Symbian operating system provides a rich environment for communicating, using media, and consuming media in many forms.  It is important to provide a consistent and seamless experience for consuming and sharing content.  Presentation, interaction, and most global options should be simple, clean and consistent.

Understanding the context of use is also an important consideration in designing applications that satisfy and delight users.  Always consider the context, and provide appropriate application options grounded in real world scenarios. 

For example, a movie preview from an online store will play back in the same media player used to play locally saved content.  However, the menu options for the Store context should be tuned to user's goals and needs related to shopping – for example, making “Add to Cart” the default option and renaming the command “Play” to “Preview”.

Full-screen view

For applications that need to provide a more immersive experience, a Full-screen mode is available. It should be considered for use only when a full screen treatment clearly provides a superior user experience.  Two examples are the camera application and media player. 

When entering an application that uses this mode, basic application view controls are suppressed, leaving only the application's content area visible onscreen.  

The missing application navigation options are recalled using a single tap anywhere on the screen.  Note that the roster and appearance of these standard controls may differ from non-Full-screen applications.  For example, the background rectangle of the Toolbar might not be shown.  Instead, the Back and View menu buttons may appear “floating” in their respective corners.  Meanwhile, the Status bar might not be shown again until the full screen application is moved to the background or exited.

Information architecture and navigation models

Application’s navigation model should be thoroughly considered and the selection should be made based on the content and features of the application. If the navigation model is poorly chosen, it might hinder the user experience of your application.

There are two main navigation models available: Drill down and Parallel view navigation. Drill down navigation offers hierarchical navigation for applications that need to provide access to different levels of information. Parallel view navigation presents content in a flat structure. Therefore, navigating from one parallel view to another should not add entries to the application’s history stack.

Backstepping is also an important part of application navigation. It is discussed separately in Backstepping.

For more details on navigation models, see View Navigation.

Screen rotation: portrait and landscape

Typically, Symbian device screen content should change orientation based on the current position of the device.  This is a standard system behaviour, and has implications for the design of all kinds of applications.

Figure 3. Typical layout in portrait (left) and landscape (right) orientations

Because device form factors differ greatly, it is highly recommended that applications provide both portrait and landscape modes consistently.  Devices with slide-out keyboards will be used heavily in landscape mode, while devices with “candy bar” form factors will be used heavily in portrait mode.  Applications should not force users to change orientation in order to complete tasks.

For more information, please see  Rotation .


Last updated 14 February 2012
Nokia Developer aims to help you create apps and publish them so you can connect with users around the world.

京ICP备05048969号  © Copyright Nokia 2012 All rights reserved