Did I touch it or not?

On touch user interfaces, visual feedback is as important as it is on non-touch UIs. But it?s a bit different.

With a non-touch UI you need to indicate which UI element is currently in focus in order to operate with it. In a mobile context this is usually done with a highlight on the elements. One element is always highlighted, and the highlight is then moved with a navigation key and selection done with the selection key.

On touch UI there is no need for the constant focus highlight anymore; in fact if used, the UI becomes less intuitive to use. Visual feedback on touch UI is shown with touch-down; when you see the highlight you know that the app has recognized your finger. This can be compared to moving the highlight on the wanted element with the navigation key in non-touch. With the touch-release the action is triggered and the highlight disappears; this is comparable to pressing the selection key on non-touch.

Visual feedback on touch UI simply means that all touch-down events should be visually indicated. This will ensure that the user knows that something happens and that their tap was recognized. The highlight can even be the same than for your non-touch UI; it just only shows when the element is touched.

Touch event feedback is automatically handled when using ready-made components. But it?s easily forgotten for custom UI elements.

If using custom components the highlight can be done in different ways. Let?s take a button as an example; you can use a highlight color on the entire button as done with Windows Phone 8 or use a ?pressed down graphic? as done with Series 40 Full touch, which is a bit more subtle way. And actually, in Full touch they simply rotate the graphic by 180 degrees to make it press down graphic!

Take your pick, but remember to react to people?s actions:

• Indicate the touch-down event visually ? with touch-release the highlight should disappear.


• Actions are triggered with touch-release ? this enables cancelling by dragging finger away from the element.


• And check the color contrast for your highlight color!

If the application behaves in a different way, people may perceive the application as broken.

Happy developing,

Sanna

crawled from : Nokia