blink design library

Entry Suggestions

When there are a relatively small number of entry options for a field, a simple drop-down will do. But for some fields, there can be hundreds or thousands of entry options. People may or may not know the exact spelling or format required.

One option is a generating a drop-down dynamically based on the first few letters typed. In the example below, I've typed the letters "Ar"; in response, the system displays options that contain words starting with "Ar."

From: Facebook

Another approach is to wait until the user has completed their entry and then display a set of suggested entries. In the example below, the system was smart enough to see that I had misspelled "merino" and makes suggestions for the correct spelling:

 

From: Ravelry

Editable Fields

In forms that let users change previously-created information, a question that can arise about whether fields should be displayed initially in an editable state (running the risk that one or more might be accidentally changed) or in "locked" state with the option to edit.

This form uses a hybrid approach, locking the fields where accidental edits could have the most serious consequences:

From: Vox

This form also correctly displays the fields as inactive (vs. non-editable, which would display as plain text minus the field border). When a user clicks the associated "change" button the field becomes active.