Nokia X Design Guidelines

Welcome to Nokia X software platform Design Guidelines. This library contains an overview of the Nokia X software platform and guidance for the topics you should consider while porting your Android application to Nokia X. The topics also apply for any new app created for Nokia X.

Gestures

The gestures below are used in Nokia X phones. The table also shows the indicator symbols that are used within this library to visualise actions in the example UI flows.

Symbol Gesture Combination Description
Tap Press and release To tap, people touch the screen to trigger actions by pressing a button or a link. There is visual feedback on the touch down, and the action is carried out on the touch release.
Long press Press and hold To long press, people touch the screen leaving the finger motionless until the information is shown or the action occurs. This gesture can be used to enable edit mode of a view.
Swipe Press from the edge of the screen, drag, stop, release To swipe, people place the finger on the edge of the screen and swipe it horizontally or vertically. For example, swipe up is used in system apps to open Options menu.
Flick vertical Press, drag from up or down, release To flick vertically, people place their finger to the screen while in motion, continue the movement and lift their finger while still moving to the same direction. This gesture can be used for example to scroll content quickly.
Flick horizontal Press, drag from left or right, release To flick horizontally, people place their finger to the screen while in motion, continue the movement and lift their finger while still moving to the same direction. This gesture can be used to switch between tabs.
Drag (and drop) Press, drag, (stop), release To drag, people place their finger on the screen and move it to the desired direction. This gesture can be used, for example, for adjusting a slider or to move objects within the UI to organise items in the view. The view below can also move with the finger (panning). The movement ends with a release.
Pinch open Press with two fingers and open This gesture is used for zooming in.
Pinch close Press with two fingers and close This gesture is used for zooming out.
Double tap Press and release twice quickly This gesture can be used for toggling between zoomed in and zoomed out views.

Essentials

This section describes the main UI features and functionality of Nokia X software platform. It briefly discusses:

  • Glance screen
  • Notification drawer; notifications and wireless controls
  • Lock screen; locking and unlocking the screen
  • Main screens; Fastlane, Home, and Apps menu
  • Options menu
  • Hard keys

Stacked layers

Nokia X user interface is built around the concept of stacked layers that can be directly manipulated by the user.

Glance screen

Glance screen is the topmost stacked layer. It is shown whenever the display is locked by performing a short press on the Lock key. The display can also be locked automatically based on the automatic lock setting timeout. There are some apps where the screen is not locked automatically in case there are long periods of reading or watching content without further interaction: Browser, Camera, and Video player. Some other apps, such as games, also benefit from preventing the screen from locking. This can be done by refreshing the screen automatically in case there is no user input coming in.

Glance screen shows the current time and notification icons.

Notification drawer

Notification drawer is an extension of the status area and accessible for the user throughout the UI. As an exception, full screen applications have an option not to show the Notification drawer.

Notification drawer can be opened by swiping down the status area on top of any state except the Glance screen. Notification drawer contains two tabs, one for notifications and one for wireless controls. The drawer can be closed by pressing back key or swiping up.

Notifications

Notifications is the first tab of the Notification drawer. Tapping on a notification will activate the intent associated with the notification (usually opening the app). Notifications are visible in the tab until the user:

  • Clears them by swiping the notification to left or right.
  • Accesses the app which sent the notification.
  • Clears all notifications with the ‘Clear all’ action button.

Wireless controls

Wireless controls is the second tab of the Notifcation drawer. It provides instant access to SIM cards, settings, and some frequently used controls, such as WiFi, Bluetooth, Mobile data etc.

Lock screen

While on Glance screen, a press on the Lock key will invoke the Lock screen. The Lock screen’s main purpose is to prevent any accidental interactions with the phone while it is not in use. The Lock screen contains:

  • User selectable wallpaper image, or album art in case the music player is playing.
  • Current date and time.
  • Music/radio info and controls.
  • Notification icons.
  • Some setting indicators (sound profile, battery etc.)

Unlocking the phone

On lock screen, bezel swipes (i.e., swipes starting from the frame of the phone) perform the following actions:

  • From the bottom: unlocks the device. Previously opened view is shown. Security code is required if that feature is set on.
  • From the right: opens the camera. Security code is not required.
  • From the top: opens the Notification drawer. Security code is not required.
  • From the left: does nothing.

Main screens

Nokia X UI has three parallel main screens: Fastlane, Home, and Apps menu. The screens are adjacent to each other, and a horizontal flick swaps between these.

Fastlane

Fastlane contains notifications, most recent apps, and upcoming events. Users can open ongoing active tasks, access content items, and initiate related actions such as replying to a conversation. Unfinished tasks like draft messages or draft contact cards can also be found from the Fastlane.

Home

Home is a user-customisable view that contains:

  • App shortcuts
  • Folder shortcuts
  • Widgets

User can personalise the Home screen in the following ways:

  • Reorder the items.
  • Add and remove widgets.
  • Add and remove app shortcuts.
  • Resize the app shortcuts.
  • Resize widgets (if enabled by the widget).
  • Change the app shortcut background colour.

Apps menu

Apps menu lists all the installed apps in alphabetical order.

User can perform the following actions in the Apps menu:

  • Access apps.
  • Create folders.
  • Access alphabet shortcut by pressing on the alpha button.
  • Uninstall apps.
  • Pin app or folder shortcuts to Home screen.
  • Search device content.

Options menu

Options menu indicator is displayed at the bottom of the view. The menu can be revealed by swiping up from the bottom of the view.

Please note that this options menu is available only for the system applications and those applications that are supporting Android version 3.0 (API level 11) or smaller.

Hardware key behaviour

There are five hardware keys in Nokia X phones; Home button, Back button, Lock/Power key, and Volume keys.

Home button

Home button is located under the display. When the Home button is tapped, the recently visited main screen (Fastlane / Home / Apps menu) is shown. Tapping Home button on Fastlane or Apps menu opens the Home screen.

Back button

Back button is located under the display and is used to go back to the previous activity.

Pressing and holding the Back button opens ongoing tasks view.

Lock/Power key

Lock/Power key combines screen locking and powering on/off functions. Short press of the lock key locks the phone, and long press of the key will start powering off or powering on sequences.

Note: Lock key is reserved by the system and cannot be used for anything else than the above explained functions.

Volume keys

Volume keys are used for adjusting the volume of the ringer, calls, and volume in other apps when audio is enabled, similar to what you see with Android phones. The following output channels can be controlled by hardware volume key on the phone:

  • Built-in loudspeaker.
  • Accessory (wired or Bluetooth).
  • Earpiece.

If the phone is connected to an accessory, volume keys on the accessory can also control output volume. The volume keys always control the volume levels, except when the Camera application is in the foreground. When Camera is being used, the volume keys control the zoom level.

New in 2.0

Nokia X software platform 2.0 brings new features and improvements, and supports API level 18. The differences between 1.0 and 2.0 are listed below.

Changes in Mental model

  • Home and Back buttons. Instead of having only Back button as in 1.0, Nokia X 2.0 introduces also Home button. This is to ease the navigation between the main screen layer and application layer. In Nokia X 1.0 an application was put to background with a long press on Back button. In Nokia X 2.0 a single tap on Home button does the same.
  • New main screen layer experience. In Nokia X 1.0 there were two main screens, Fastlane and Application home, Nokia X 2.0 introduces three screens: Fastlane, Home, and Apps menu.
    • Fastlane stays unmodified from 1.0 behaviour.
    • Home is user-customisable screen for app shortcuts and widgets.
    • Apps menu lists all installed applications on the device
  • Improved multitasking On Nokia X 2.0, user can quickly access the ongoing task list by long-pressing on the Back button. On Nokia X 1.0 the recent applications were only gathered in the Fastlane, but on 2.0 they are visible both in Fastlane and in ongoing tasks view.
  • Notification drawer. In order to improve the compatibility between Android notification handling, Nokia X 2.0 introduces a Notification drawer which is always accessible for user from the top of the screen.
    Note: On Nokia X 2.0 the notifications are still visible on Fastlane, in which they behave the same as in Nokia X 1.0. So the previous guidance on Fastlane notifications still stands.

Daydream

Daydream is a user-selectable screen saver that is now supported in Nokia X. User can select a Daydream that shows clock, photos, news, website, etc.

Lock screen widgets

Lock screen widgets are not supported in Nokia software platform 2.0.

Notifications

In Nokia software platform 2.0 there are some changes in notifications:

  • Only notification icons are shown on Lock screen.
  • Glance screen and Status area now support notification icons.
  • Number of stacked notifications is not supported.
  • Notification priority is supported, except on Fastlane.
  • Auto-cancel flag is supported in the Notification drawer but not on Fastlane.