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!

5 comments:

  1. Excellent information. I've been evaluating the buttons on an app I'm working on. They seemed too small at 40dp, so your post was very timely!

    ReplyDelete
  2. Glad I was able to help, ProjectJourneyman. :)

    ReplyDelete
  3. Juhani,

    Thanks for analysis of margins. It was a problem for me.

    No doubt that your blog is the best blog about Android UI.

    Thank you man!

    ReplyDelete
  4. Thanks for these tips...
    how about maintaining size relative to the overall screen dimension of the device?

    ReplyDelete
  5. nice ! What about the margins from the sides of the screen ?

    ReplyDelete