The importance of all-age user testing and the UIButton Touch Area

Of late I have been getting various users to try out an iOS app I have been building using Xamarin.iOS, and I got some interesting feedback which I thought I'd share.

The app runs on iPod Touch's / iPhone's so a common platform. One of the areas people commented on was Ease of Use. Interestingly most people commented that the app felt natural and looked easy to use, however about 30% of my responses contained "I struggled to accurately tap the response icons", "I kept missing the buttons and began to get frustrated", "Wearing gloves seemed to make it harder to tap the icons".

My first response to this was "really?", The icons by my standards were fairly large and didn't look too small, in fact I deliberately made them slightly larger than Apple's recommended 44x44 [ref: http://stackoverflow.com/questions/1928991/minimum-sensible-button-size-on-iphone]

So I found out more information from the affected users. Turns out all of my users that struggled to tap the icons were aged 40+ and the majority of which had larger than average hands, note I only did a quick visual, no measurements made :)

The observed problem

This left me with a decision to make, let the users simply get used to the hit area and hope they wont get frustrated and give up, increase the icon sizes further and have to rethink parts of the app design or could I add an error margin on to each icon tap and therefore increase the perceived target area.

The Hit Area I Wanted

I decided simply getting the users to get used to the sizes wasn't an option, so for now I will increase the target area for each icon and leave the visual design alone, I'm sure my designer will thank me later.

This is actually really simple to do.

First of all create a new class that inherits UIButton, I'm calling mine OverhitUIButton, and then override the PointInside method. This method simply takes a point and returns whether the point is within the current UIView (UIButton). I then changed this to see if the point exists within a configurable extended boundary for my UIButton instead of the real boundary. That's it no messing around with the HitTest method or anything, simply test for the point in an extended boundary.

public class OverhitUIButton : UIButton
{
    private int _errorMargin = 30;

    public override bool PointInside(PointF point, UIEvent uievent)
    {
            var bounds = Bounds.Inset(-_errorMargin, -_errorMargin);
            return bounds.Contains(point);
    }
        
    public int ErrorMargin
    {
        get
        {
            return _errorMargin;
        }
        set
        {
            _errorMargin = value;
        }
    }
}

 

It's worth noting I made the error margin configurable as depending on how the icons are spaced I might not want as large a hit area. From my own testing I noticed if had 1 icon in the middle of the screen I didn't need as large as hit area, however if I had a row of icons the ones at the extreme edges of the screen needed a larger hit area. I also used 30 as my default value just as this felt the most accurate without feeling over extended.

 

This update is only going into my next beta so I will report back on whether my users found this made touching my icons easier, based upon my own testing I noticed the difference so I am hoping others will.