Would you like to tell us how we are doing?

You bet No thanks

Highlight behavior

Highlighting helps users identify the item that they're acting on. The highlight on a component behaves differently depending on the component and the context. If you use BlackBerry UI components, highlighting is built into the component.

Best practices for highlighting custom components

For binary interactions, highlight the component when a user touches it. Remove the highlight when the user moves their finger off the control. The highlight should return when the control is touched again, unless the control scrolls with the view.

If users scroll through a list or view (for example, a grid view), don't highlight individual items.

If an item requires continuous interaction (for example, a slider), highlight the item until the user releases their finger. In this case, you might need to lock other items that allow scrolling, such as lists.

Don't let users highlight items they can't act on. Disable components by dimming them or remove them from the screen.

Device showing an example of highlight behavior.

Highlighting in action: Touch and hold highlight

Users can touch and hold list and grid items to bring up context menus. To give the user a visual clue that the context menu will be triggered, the item cycles through a three-step highlight progression:

Grid items

Diagram showing a grid item in the first highlight transition state.
The user begins the touch and hold action. A solid 4-pixel border appears around the grid item.
Diagram showing a grid item in the second highlight transition state.
As the user continues to hold, a gradient forms inside the solid border. This effect is subtle so that the content of the grid item (which is often a photo) is not obscured.
Diagram showing a grid item in the third highlight transition state.
As the user releases their finger, a solid 8-pixel border appears around the grid item and the context menu appears.

List items

Diagram showing a list item in the first highlight transition state.
The user begins the touch and hold action. A solid 4 pixel border appears around the list item.
Diagram showing a list item in the second highlight transition state.
As the user continues to hold, the interior of the list item begins to fill with a gradient.
Diagram showing a list item in the third highlight transition state.
As the user releases their finger, the fill gradient solidifies and the context menu appears.


Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus