Designing Perfect Text Field: Clarity, Accessibility and User Effort

For any app or web application, nothing will ever happen without some initial and ongoing input from the user. It is, therefore, critical that product designers, developers, and product managers understand the best ways to allow them to do so.

In this article, we’ll examine key factors that improve data input by focusing on text fields. Keep in mind that these are general guidelines and there are exceptions to every rule.

Text Field

A text field is a basic text control that enables the user to type a small amount of text. No matter what app you use, you’re bound to run across some little text field requiring your personal information. Even typing a question into Google is considered filling out a form which has only one text field.

Clarity

Clear Text Label

The users wants to know what kind of data to enter in an input field and clear label text is one of the primary ways to tell them that. Of course there are situation when users can rely on icon in order to figure out the meaning of the field (e.g. users recognize a magnifying-glass icon as meaning ‘search’ even without a textual label), but in most cases you should provide clear, always visible labels for each input field.

Clear labels makes users feel more confident that they are understanding things in the right way, and taking the right actions.

Short Text Label

Labels are not help texts. You should use succinct, short and descriptive labels (a word or two) so users can quickly scan it. If extra information, clarification or context is required use help text to do this rather than long rambling labels.

Proper Field Size

If input fields are sized according to their expected input they are both easier to read and to interpret for users. Your field should be big enough so that most possible field values are visible.

Focus for Input Field

You should provide a clear visual notification that the focus has moved to the input field when user click/tap on it— change color, fade in a box, flash in an arrow, whatever.

Input Hints

Data comes in many formats. Of course, you should always try to design input fields in a way that they be compatible with how users enter information. But it’s not always possible to do that for your input.
For example, a simple phone number can be written with a ‘+’, a country code, an area code, or without any of these. You can solve this problem by showing instructions, examples or hints to help users figure out what format they should use for this field. A problem with the format of a telephone number can be solved in the following ways:

• • The phone number field can be auto-formatted. This eliminates any formatting ambiguity the customer might have had.

• Input field placeholder text can also be used for short descriptions and formatting examples, although they have the inherent drawback of disappearing as the customer types.

Helpful Information

Helpful information (or accompanying text) should be used only where needed, such as to explain why credit card data is being requested or how a birth date will be used or to link to the “Terms and conditions.” It can be a great way of eliminating confusion and possible errors that the user might face when dealing with input field. As a rule of thumb, do not exceed 100 words of explanation.

Mobile-only: Match the Keyboard With the Required Text Inputs

Users appreciate apps that provide an appropriate keyboard for text entry. In the example below, you can see that the user is required to tap the number key in the keyboard to enable number entry when text keyboard was provided for the field that requires a numeric entry.

Accessibility

Goal: Make input field easier to scan/fill out for users of all abilities

Avoid Caps Labels

You should never use all caps, or else the labels would be difficult to read and much harder to quickly scan, as there are no differences in character height any more.

UPPERCASE text is harder to read because the shapes of all the uppercase letters are all rectangular and users are not used to reading text that way:

Font Size

Your fonts have to be big enough to be legible. A safe bet is to use 16 pixels for body copy. The sizing, of course, depends on the context and how many other things are on the page, but when in doubt, try to make things bigger.

Label Color

The label’s color should reflect your app’s color palette, while also meeting appropriate contrast ratios (shouldn’t be too bright or too dark). The W3C recommends the following contrast ratios for body text:

• Small text should have a contrast ratio of at least 4.5:1 against its background.
• Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

Provide Easily Tappable Areas

It is likely these days that someone is using your input field on a touch device. When you’re designing mobile interfaces, it’s best to make your targets big enough so that they’re easy for users to tap. A rule of thumb is 45–57px for a touch target, but for mobile that often result in fields which look obnoxiously large. Sizing input fields between 32px and 40px in height makes your field finger-friendly and not very large at the same time.
The default input field in Bootstrap 3 is 34px in height, this is a good base size. Input fields shouldn’t be smaller than that to be easily tappable.

Desktop-only: Make Input Field Keyboard-friendly

Users should be able to trigger and edit every field using only the keyboard. Power users, who tend to use keyboards heavily, should be able to easily tab through the fields and make necessary edits, all without lifting their fingers off the keyboard. You can find detailed requirements for keyboard interaction pattern in W3C’s Authoring Practices for Design Patterns.

User Effort

Goal: Minimize user input

Smart Defaults

Entering data into fields is a chore and not a fun activity. Thus, you should anticipate frequently selected items and make data entry easier for the user by providing fields with pre-populated smart default values — you can compute them based on other info (e.g. state based on zip code) — or prompts based on previously entered data.
For example, pre-select the user’s country based on their IP address. WhatsApp is one app that makes entering phone numbers easy. If you access the app from the USA, the country code is pre-filled based on location services by default.

Autocomplete and Autosuggestion

Autocomplete presents real-time suggestions or completions in dropdowns, so users can enter information more accurately and efficiently. It’s especially valuable for users with limited text literacy or who have difficulty with spelling, especially if they are using a non-native language.
The purpose of the autosuggestion is to display a list of related keywords and phrases, which may or may not match the precise query string. While autocomplete helps people finish an original phrase, autosuggest actually throws most probable variations of the original phrase.
Proper autocomplete and autosuggestion functionalities significantly speeds up the user’s actions. Google uses both autocomplete and autosuggest functions to provide a highly responsive search experience.

Conclusion

You should make the process of data enter as easy as possible. Even minor changes such as helpful text or indicating what information goes in each field can significantly increase input field usability together with overall UX.

About the Author: Nick Babich is a software developer and author of a blog dedicated to usability