MockVisual
Published in

MockVisual

Design Better Input Fields

The input field is the affordance

Summary: Blank fields afford action, and the style of an input communicates what information is needed.

There are many guidelines to take into consideration when designing forms. This article focuses specifically on how the styling of input fields impacts usability.

Obscure design deters action

The input field is an affordance. Without an explicit visual cue, a user may not understand where the input area is and fail to enter information accurately.

Field width communicates what’s required

The size of the input communicates the length of the content needed. In the left design in the above illustration, the “Zip Code” field width communicates to the user that the basic version of the zip code is needed. The design on the right presents an arbitrary length, which confuses the user on what is required (ex. 94887–3829 vs. 94887).

The design on the left works well for U.S. addresses and should be localized to other countries. If the country is not known, it is better to use the generic design on the right. For more information on localization and internationalization read, Form Internationalization Techniques.

Structure communicates format

The structure of an input communicates the required format. The designs on the right in the above image makes it clear how the entry should be formatted and guides the user when doing so.

The top design on the right employs an input mask on focus. This implementation benefits from the blank input acting as an affordance and guides entry when a user clicks into the input field. This aids user understanding and reduces the chance of an erroneous entry.

Again, it is important to note that the design on the right is structured for U.S. phone numbers. It should be localized to the user’s respective country. If the country is not known, it is better to use the generic design on the right.

Placeholder text causes confusion

Placeholder text diminishes the visual cue for action. It also misleads users to think the placeholder text is an entry. For more thoughts on Placeholder text, read Alternatives to Placeholder Text.

--

--

--

https://mockvisual.com/

Recommended from Medium

How To Develop A Product That Sticks.

A design of the topic by a Charisol Designer

UNDERSTANDING UX AND UI DESIGN

What Apple can teach us about product design

Heuristic Evaluation Tesla Model 3 app

Advanced UX lab techniques: Don’t just listen to users

Illustration of 2 people discussing notes o a wall

Small Giants and the Power of Design

15 Tools to Increase your Productivity as a (UI/UX) Designer in 2020

Learnings from my time in the NHS coronavirus universe

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrew Coyle

Andrew Coyle

Building @mockvisual (YC S19) • Formerly @Flexport @Google @Intuit • Interested in platforms

More from Medium

How to use color to improve user experience

Accessible app design: how to get started

Four layouts of an audiobook app displaying book recommendations, a player, different genres, and book reviews by users.

Responsive layout grid guide for designers

breakpoints example

Google Chrome’s Dark Design