0

I've been trying to improve form inputs in one of my clients app, and I ended with interesting conclusion. I'd like to ask you about opinion on this topic.

Problem is: I have small input fields (number fields) that are quite near each other. I wanted to make it easier to enter one.

My solution: I thought about enlarging them by half (max I could do to keep them separate and cleanish UI), but I thought about alternative approach. I kept their optical size the same and increased virtual size (area that respond to tap) by half. That way I believe user will try a bit more to aim with tap (because they seems a bit smaller) and virtual size aids him with that.

What do you think? Are there any studies on this topic?

  • not sure how do you want to increase the tap area when the fields are quite near each other..? – Aprillion Jul 5 '17 at 12:42
  • @Aprillion Fields are near, not adjacent. As I wrote, I could still increase optical size (maybe with loss to aesthetics). – Maciej Kozieł Jul 5 '17 at 13:01
1

I have some considerations for you:

  • It’s always important to consider your target audience in this kind of decision
  • Are you considering the platform guidelines ( Apple / Material ) and expected sizes for you users on this kind of components?
  • Other than pure visual and size consider to facilitate the real interaction of starting with the first input and going to the next? Do the user really needs to tap both? Can we facilitate by moving the focus from the previous field?

In general its always a good idea to have some more room for the tappable area, so you might choose to go that direction.

In my personal opinion when designing forms, and functionals steps of this kind, we should always prioritize functionality over aesthetics.

0

This is in line with Microsoft (among others) recommended guidelines. Sort of anyway. You have a visual target (the icon/field), some touchable whitespace, and then hopefully a slight buffer zone so you don't get accidental touches.

In general, set your touch target size to 9 mm square or greater (48x48 pixels on a 135 PPI display at a 1.0x scaling plateau). Avoid using touch targets that are less than 7 mm square. The following diagram shows how target size is typically a combination of a visual target, actual target size, and any padding between the actual target and other potential targets. enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.