2 Replies Latest reply on Sep 12, 2011 2:54 PM by Jason San Jose

    Augmenting the mobile button hit area to reduce miss-click

    korosif

      After working on a couple of iOS Flex apps, it seems that one of the biggest weakness is that you have a lot of case when button clicking (touching?) is not registered (10 to 20% of miss for me for navigation button for example)

      It really kills the UX of the apps, and cause a lot of user frustration, not help by the facts that it's not a problem in native apps.

       

      The cause is that a finger is not as precise of the mouse, and Flex often think that the use made a roll-out (or not touch the button) if the user touch the edge of the button.

       

      I've tested several other Flex iOS apps with this problem, and other devs have suffered from it (and you can see this in some apps reviews like Politifacts that have good reviews, but quite a few that point to "unresponsive buttons").

      It's even worse for the back button in the navigation bar, because of the short height of the beveled style.

       

      If you read the Apple iOS Interface guidelines, it is recommended to add a "hit-active" padding around buttons, to avoid this.

      It seems to me that we should  have a property in Flex to easily augment the hit area (like "ActivePaddingLeft","ActivePaddingTop", etc)

      I really think Adobe should consider this addition if we want good UX Flex app...

       

      For now, I know I should change the button mobile skin, but I'm not very strong in mobile as3-only skin, so I wanted to know what the best/easiest way to augment the hit area.

      I think have to add a alpha:0 Rectangle in the skin, but any help would be appreciated...