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
‘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.
- 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.
Table of Contents
Want this document along with example source code and resources?