Monday, 12 September 2011

Quick UI tip - hit area and margin

In touch UIs it is very important to remember to setup controls' hit areas and control margins properly.

There are two basic mistakes that are easy to make but also easy to avoid if designers and developers are aware of them.

1) Too small hit area
Especially when implementing your own UI components it is very important to make sure that the component's hit area is physically large enough on all types of screens. 

2) Too small margins
Placing touch controls too close to other touch enabled controls can cause mistakes. In this app's case adding a bit more margin would make the user interface much more usable. There's also no reason tho have the save button to be that small. Why make it so difficult to users and leave the button bar almost empty?

What is the right size?
Google hasn't released specific guidelines of Android controls sizes but Apple and MS has. LukeW has a nice post about touch interface guidelines on different platforms.

A button should be at least 9mm x 9mm physical size. In Android terms that is about 50dp - 60dp.

Margin between two touch controls should be at least 2mm which in Android is about 13dp - 15dp.

Good example
Foursquare app is a very nice example of a nicely layout touch controls. Making mistakes with the UI is very rare. There's often no need to limit your design to the bare minimum size. Bigger buttons are much more pleasant to use!