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 over the next few weeks. Thanks for all your past and future contributions.

N9 Application Toolbar Development Guidelines

From Wiki
Jump to: navigation, search

This article is aimed for N9 UI designers, to to help in creation of effective Toolbar for N9 applications

Article Metadata
Created: SeemaB (14 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)



Designing an intuitive and useful Toolbar for your N9 application is a very critical task because it’s the most effective and commonly used control in mobile applications. Due to limitation of the available screen size on mobile makes this task even more challenging. In this article we are going to see what are the available toolbar options in N9 and how to make the best of what is available.

Toolbar Development Guidelines for N9

N9 Toolbar Actions

As mentioned above the screen size is a constraint on devices like mobile.
Although N9 has as 3.9 inches, it is not a good idea to crunch the space with too many tiny toolbar actions considering the usability factor. And thus there is a limitation on the number of ‘actions’ displayed in the N9 toolbar.

N9 toolbar is located at bottom and can have maximum of 5 toolbar actions:

  1. Back
  2. Optional action 1
  3. Optional action 2
  4. Optional action 3
  5. Action Menu

Toolbar Actions can be represented as icons or buttons.
N9 has a fixed ‘back’ action at left and ‘Action Menu’ on right; which leaves us only with 3 quick access toolbar actions for our application.

Choosing Right Actions

It is very important to choose what actions we want to show in those 3 available spaces.
For this the developer needs to ask himself a Question – “Which actions will the user will do most frequent?”
For example in case of a messaging application following actions can be performed: Copy message, find a text in message, Move to folder, font size, message meta data details, etc…
But are the most common actions - Reply, Forward, Delete. User is going to perform these actions the most and will require handy way to perform it and that is toolbar. Rest of the actions can go in Action Menu.

N9 Toolbar Icons

Next important thing to consider is the toolbar icons.
Icons must appear beautiful, simple and must be intuitive.
Its purpose should be easily known from its representation.
To make sure that your Icons will be easily understood by users, show those icons to someone who has no clue about your icons and ask them to determine its possible purpose. This way you can get a clear indication if your users will be able to understand what you have designed.

  • Guidelines for Designing N9 Toolbar Icons:

N9 Toolbar.png

This page was last modified on 13 June 2012, at 10:55.
56 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.