Summary: When you design an input field for use on mobile devices, check whether it satisfies this list of 14 usability requirements.
Whether you're designing web pages, web-based applications (e.g., SaaS), or native mobile apps, one of the basic building blocks is the humble text-input field: a box where the user can enter some text. Uses of this widget are plenty and not the topic of this article. We should point out that there are many issues in application design relating to workflow and other big-picture questions that are important for good application user experience. (These topics are discussed in our full-day Application Design course.)
In this article, we focus on the nitty-gritty of input fields. Each of these issues may seem minor, but we repeatedly see these usability guidelines violated — particularly in mobile user interfaces, where even the smallest annoyance grows from a molehill into a mountain in terms of its ability to delay users and prevent them completing tasks with your design.
Here's how an input field should look:
Here's a checklist of 14 guidelines to follow for mobile input field UX:
|Should it be there at all||
|Filling it in for the user||
Go through your design and complete the checklist for every single input field. Yes, this is work, but better you suffer than the users suffer.
Ideally, you'll have 100% checklist compliance for 100% of the input fields in your site or app. Anything less, and you do have a substandard user experience.
Pragmatically, you may not have resources to deliver 100% on these UX requirements. In that case, prioritize the fields so that the ones that are used the most or are the most critical for task completion get the highest scores.