AG-4: Input

We all had problems with input fields when using an application. Sometimes we forget what we are filling… or is this a problem of the application?

Here you will find some recomendations about the Input fields.

The problem

In addition to this problem, people normally uses Placeholders to guide the users, but sometimes its not the best way do deal with it.

Placeholder is just a word in the text box that indicates the user what to type.

placeholder

The use of placeholders alone saves the designer space for elements, but dissapears when the user starts typing, wich instantly removes all the context of the input field. They usually are presented with low contrast to the background, which may spoil the experience of users with visual impairments or users with situational disabilities caused by screen reflection in the screen.

Besides that, when an input field does not have a label, the hit area of that element is reduced, and this can cause troubles to some kind of users.

The recommendation

A solution of most of these problems is the appropriate use of label and placeholder together.

Labels have to be succinct, short and descriptive, so that users can quicly identify what information is required. Also, they must present the necessary information for the user.
For exemple: on a login form where the user can use a username or an email to access the account, the label must contain “username or email”.

The image below shows the use of the label and the placeholder together:

Account Creation

Placeholder and Labels should never be in all caps, as it’s more difficult to read and harder to quick scan.

Leave a Reply

Your email address will not be published. Required fields are marked *