Designing the Focused Element

• Related Topics:
• Pressed Style
• GUI Concepts
• CSS Basics

In most screens the user is able to focus various items. The focused style is used to highlight the current item. You can, however, use item-specific styles for each element as well by defining a [style-name]:hover style.

You are not limited in the design, typically you will use a different background or a different border for the focused state of an item, but depending on the item you can also exchange icon-images, font-styles, effects, animations and so on. Please refer to the visual guide for details on the design possibilities for each item.

In the above screenshot we just exchange the orange border against a black border for the currently focused mail box by using the mailbox:hover CSS style:

colors {
	focusedFontColor: #111;
	focusedBorderColor: #444;
	mailBoxBgColor: #eee;
	mailBoxBorderColor: #fe0;
	mailBoxFontColor: focusedFontColor;
}

.mailBox {
	padding: 2;
	padding-left: 9;
	padding-right: 9;
	background {
		type: round-rect;
		color: mailBoxBgColor;
		border-color: mailBoxBorderColor;
	}
	font {
		style: bold;
		size: small;
		color: mailBoxFontColor;
	}
	layout: expand | left;
}

.mailBox:hover {
	background-border-color: focusedBorderColor;
}

As you can see in the above example, you can modify the focused state of a CSS style by using the [style-name]:hover selector (same as on normal webpages). You also should consider to implement the focused style, because this style is used whenever there is no specialized :hover selector for an element. The usage of the focused style also unifies the user experience, since the currently focused element will be rendered the same on all screens and menus (not counting elements with :hover selectors).

Tips and Tricks

You should aim to keep the user interface calm when the user moves the focus to another item. Here are some tips for designing the focused style of an element:

• Same Size: the focused item should have the same size as the not-focused one. So if you add or increase a border for marking the focused state, you should add the corresponding paddings or margins to the not-focused style of that item, too. The same applies to other changes that influence the item's size like a (different) before/after/icon image, a change of paddings/margins, and so on.
• Keep Layout: You should stick to the layout of the item. So do apply the same layout to the focused as well as the not-focused states of the item.
• Trim Icons to the Same Size: Bring all icon sizes of one menu/one screen to the same size. This eases the layout.
• No Font Size Change: Do not change the font size unless you really know the font sizes on your target device, so that you can adjust the paddings and margins accordingly.

The following example shows the above example in which we increase the border width in the focused state. We accordingly adjust the margins, so that there is no wobbling when the user moves to the next item:

.mailBox {
	margin: 1;
	padding: 2;
	padding-left: 9;
	padding-right: 9;
	background {
		type: round-rect;
		color: mailBoxBgColor;
		border-color: mailBoxBorderColor;
	}
	font {
		style: bold;
		size: small;
		color: mailBoxFontColor;
	}
	layout: expand | left;
}

.mailBox:hover {
	margin: 0;
	background-border-width: 2;
	background-border-color: focusedBorderColor;
}

Programming

You can get the currently focused item of any screen by calling UiAccess.getFocusedItem( Screen screen ) and the index of the currently focused item by calling UiAccess.getFocusedIndex( Screen screen ).

You can get notified when the user changes the focus by registering a ScreenStateListener on that screen. Do this by calling UiAccess.setScreenStateListener( Screen screen, ScreenStateListener listener ).

Last but not least you can change the focused element of a screen by calling UiAccess.setFocusedIndex( Screen screen, int index ) or UiAccess.setFocusedItem( Screen screen, Item item ).
You can focus an item and showing the corresponding screen at the same time by calling Display.setCurrentItem( Item item ).

JavaDoc

• UiAccess
• ScreenStateListener