Mobile Design Pattern: Applying Focus
Article Metadata
This design pattern is part of the Mobile Design Patterns series.
Contents |
Description
A means of indicating which object, element or control has focus within an application (and is therefore ready to be manipulated in some way).
Use when
The term ‘focus’ is primarily related to the indirect manipulation model as accomplishing tasks on such a device relies on explicit, real-time, onscreen cues, which must be ‘designed into’ the application.
Note: The term ‘selection’ is sometimes used in this context however it can be misleading as once an item has focus, a subsequent press may still be required to open, select or otherwise activate it.
On indirect manipulation devices, visual wayfinding is required to enable users to anticipate the result of a key-press. Simply put—if no object within a view has focus, it is difficult for the user to guess the likely result of an Up, Down, Left or Right click. It is therefore best practice to always focus (only) one object within each view.
With every navigational click, focus is then transferred to the next object providing users with continuous visual feedback in relation to their ‘position’ within the view. This is not typically necessary with direct manipulation devices.
Figure: Note that in this particular example, there are several cues to your position within the view; the scroll bar handle, the arrow to the right of the tabs and the active tab. Without the highlight however you would be unable to guess the result of an Up, Down or Center softkey click.
Direct manipulation devices allow the user to navigate and interact by simply manipulating (i.e. tapping, pressing, clicking or dragging) the controls with a finger or stylus. In this case, there is no need for the UI to pre-focus an object; as a matter of fact this can confuse matters as items that appear ‘selected’ are (almost) always that way due to a direct (prior) action on the part of the user.
Figure: There is no preset focus on most touch UIs. The user is free to (manually) press, tap or otherwise manipulate any icon or control to complete an action.
Use how
Indirect manipulation
Focus should be applied as follows on indirect manipulation devices and applications:
- When a view is loaded, there should immediately be one (and only one) item focussed within the view.
- The focussed item should typically be the top-most item within the view and/or first item in a list.
- In the case of a grid (and in left to right languages), the top left item is considered the first and should therefore be focussed.
- As is the case within S60, an exception to the above placement rule should be made if returning ‘Back’ from a view that is lower in the content hierarchy. In this case, the focus is placed on the item that spawned the lower view.
Figure: The first item within the list has focus.
Figure: While it is customary to pre-focus the first item in the list, an exception is made when the list is reached while travelling a ‘Back’ through the list hierarchy.
Direct manipulation
Focus should be applied as follows on direct manipulation devices and applications:
- When a view is loaded, there should be no pre-focussed item.
- A visual indicator of focus should be triggered as the user selects (i.e. presses) an object or control.
- This focused state typically only remains visible for 1-2 seconds as the system prepares to respond to the action i.e. launch an application, open a folder to reveal its contents or reveal an object’s detail view.
Figure: The focus highlight appears just long enough to confirm to the user that the intended item has been selected.
S60 5th Edition touch UI
S60 touch pre-focuses the topmost item in most vertical list views (including the Options menu). This has no immediate effect, as additional actions are required to actually interact with the list items. In S60 5th Edition, users can interact with focussed list items in the following ways:
- Apply a command to this list item via the options menu.
- Tap a second time to open or in some way activate the list item (i.e. press to focus then press to drill down further.)
- Tap a second time and hold to execute a ‘long-press’. This opens a contextual menu including options specific to the item.
See Touch Strategies within the Nokia Developer Design and User Experience Library for more information about these custom S60 5th Edition touch interactions.
Figure: In most lists within S60 5th Edition, the first item is focused (as it would have been on an indirect manipulation device).
Exceptions
There are exceptions to the customary direct and indirect manipulation approaches described above:
a. Default states
‘Default’ states or views may permanently be highlighted and therefore appear focussed. This will be most common on the mobile web where a highlight may permanently indicate the ‘section’ you are in. This provides wayfinding rather than focus.
Figure: The BBC Electric Proms web site permanently highlights the date and location. A third highlight is then created as the user navigates within the view and focuses on links or controls.
b. Tabs or panes
Tabs or carousel panes may provide a second point of focus within the view.
Figure: The ‘Inbox’ tab and first list item both have focus. Clicking Up or Down allows navigation throughout the list while Left and Right are permanently mapped to navigation between the tabs themselves.
c. Platform specific
Exceptions can also occur due to differences in interaction models within platforms or technologies on the device itself. Take for example the S60 browser. While most S60 devices use an indirect manipulation model within the operating system, the browser has adopted a approach that simulates direct manipulation through the use of an on-screen ‘cursor’.
The Web Runtime (WRT) widget platform is also built using the S60 browser, however WRT offers three distinct interaction models:
- Cursor navigation.
- Tab navigation.
- Customised navigation.
The approach to indicating focus should therefore vary based on the widget’s chosen interaction model.
Design Tips
- Focus is most often indicated through changes in size or colour.
- Changes in size are most appropriate when focussing icons or thumbnails as varying text size can be disruptive to the overall balance of the view. Note as well that a fine balance is required when varying size on focus. A slight change may be too subtle for many users to notice while a large change may be too disruptive to the layout.
- Creating a clear contrast between focussed an unfocussed items is crucial on mobile as the user may merely be glancing at the device while engaged in another task. The focussed item should be immediately obvious so that the user can proceed with the task.
03 Sep
2009
The article demonstrates a deep understanding of Mobile Design Patterns : Applying Focus, the examples and diagrams provided reflect well the authors thoughts. This article is recommended for reading by everyone who wants to implement this design pattern. The advantages, disadvantages, when and how to use has been explained properly. It also mentions some design tips which could be handy when designing. The article also explores the focus handling of list items in S60 5th Ed.
06 Sep
2009
It a good introduction to focus topic. Article is indeed well equipped with examples and it reads well. It explains the difference in focus on non-touch and touch devices and shows importance of having default focus.
I'd like to see improved is Design Tips section - it seems too short, lacks examples. I wonder whether there's some more article on subject of foucs - it'd be nice to have some references.