Back

Beta pattern. Last updated 18th February 2010

Authors: Emma Pickering, Martina Joisten – Vodafone UE

What it is...

A function that allows a user to return to the page they were on previously within the same widget (or application). Back should follow the user’s historical path through the widget.

Use it when...

The user may need to navigate from the current page to the one previously visited. Use it also when stepping the user through a long task to allow them to go back and make an amend to an earlier choice without quitting the whole task.

How to use…

Provide a back function on all pages where there is no menu present which would allow a user to navigate back;
A back function should only take the user back one step to the page they have just been on (only exception: the user has already come to the previous page via ‘back’) – do not jump them back further than one page.
It is recommended that you place the back button on the left-hand side of the widget to mimic going back for a left-to-right reading direction.
A back function is usually represented as a button or a key function on a non-touch;
The back function should be operated by a single touch or click.
Back buttons are typically represented by a left-facing arrow - it is recommended that you also use such a symbol as it is a common and accepted way to indicate back;
You may prefer to use a text label – in which case a simple and consistent ‘Back’ label is recommended, however, again if you are developing for different cultures a text may need translating;
It is not recommended that you use breadcrumb navigation or have the back button move back through a hierarchy on mobile, because this takes up too much space and is awkward to use on a mobile.

‘Back’ on a touch phone

1) The first page of a music widget – note there is no ‘back’ function present as there is no need at this stage. When the user clicks on My Library... 2) ...the My Library page opens up. A back button is now present as the user can go back to the first page. The back function is shown as a left arrow symbol in the top left of the titlebar (which is the convention for this platform).

3) There is also a back button on the Artists page. If the user follows the steps here and clicks this button they would be returned to the previous page – My Library. If they had accessed the Artists page from elsewhere then they should be returned there 4) Here the user has clicked on the artist ‘The Biscuits’ and can see their single track. Again if the user clicked ‘back’ in this sequence then they would be returned to the Artists page.

‘Back’ on a non-touch phone

The pattern for ‘back’ is the same for a non-touch phone as for a touch phone except that there is usually a key on the handset that will take the user back;
If a command bar is not possible on a non-touch phone then have a ‘back’ function placed at the top left of each page, because it’s visible there and easy to access.

1) The first page of an apps shop without a back button. When the user clicks on categories… 2) … the category page opens and a back button is present in the upper left corner. The user can easily navigate back.

3) The back button is consistently implemented at the same place throughout the whole application. This enables the user to quickly click back via several pages.

Vodafone Specifics

Developer always need to implement a back button (widget runtime flaw);
H1/M1: Place back on command bar;
S60 non-touch: Place on upper left corner.

1) Since the upper left corner on the Vodafone Samsung H1 / M1 widget runtime is reserved for “close”, … 2) … the back-button should be placed on the Command Bar. If several functions sit on the command bar, the back-button should be placed on the left side of the command bar.