A while back on Twitter I asked if anybody had any recommendations on how large interactive UI elements should be in touch-based apps. The game that I’m currently working on has one variation in which a dozen different game pieces of varying shapes are on-screen at the same time, and the user needs to be able to select any one of them and manipulate it in various ways: dragging them around the screen, rotating them, and flipping them over. I’m not assuming that users will rely on the stylus, so making sure that the graphics are sized properly is obviously rather important.
One suggestion was to check out Nokia’s recommendations on this, as they most likely would have researched the issue in some depth in the course of developing the 5800. I got sidetracked and never looked further into the issue, but in reading the Flash Lite UI Design Guide for Keypad and Touch Devices I stumbled across some information about this. The Guide notes that the “S60 UI style defines the target minimum size for a UI element as … 7x7 mm with 1x1 mm gap for index finder …” so I thought I’d apply that to the 5800 and see what it means in terms of designing interactive elements in Flash.
The 5800’s screen is 360 pixels wide by 640 pixels high (assuming portrait mode). Physically, by my measurement it’s 40 mm wide by 70 mm high. As a result, the pixels per millimetre (ppm) is exactly 9 ppm horizontally and a little over 9 ppm vertically (so just call it an even nine).
So from this it seems like the hit area for UI elements should be a minimum of 63 pixels square. This actually seems rather large, especially in comparison to some of the UI elements on the phone. For example, the slider in the scroll bar appears to only be 2 mm (18 pixels) wide, and I find it relatively easy to use with my thumb (even though the S60 recommendation in that respect is even larger than for the index finger). I think the key thing to remember is the difference in hit area vs. the visible element itself - users will have some sense of ‘close enough’ if they try to interact with an object using their finger, so if the defined hit area of the element doesn’t take this into account - “I’m pressing the button, why isn’t it doing anything?” even though their finger isn’t actually ‘on’ the button - then the user experience will suffer. Ultimately the best course of action is to actually test your app on actual users to see whether you need to tweak your hit areas.
(Of course, if you have a reason to believe that your users will definitely use the stylus, then presumably this isn’t an issue.)
(Still haven’t fully resolved the issue to my satisfaction in the current project, however!)