UI Patterns and Techniques

Fill-in-the-Blanks


From http://amazon.com

Use when:

Form input is required to perform some action. A property-sheet-style label/text-field format isn't self-explanatory, but you can verbally describe the action to be taken.

Why:

We all know how to finish a sentence! (A verb phrase or noun phrase will do the trick, too.) Seeing the input, or "blanks," in the context of a verbal description helps the user understand what's going on and what's required of them.

How:

Write the sentence or phrase, using all your wordcrafting skills. Put the controls in place of words. If you're going to embed the controls in the middle of the phrase, instead of at the end, this works best with text fields, dropdown lists, and combo boxes -- in other words, controls with the same "form factor" as words in the sentence.

Also, for controls in the middle of the phrase, make sure the baseline of the sentence text lines up with the text baselines in the controls, or it'll look sloppy. Size the controls so that they are just long enough to contain the user's choices, and maintain word spacing between them and the surrounding words.

Keep in mind that this pattern makes it very hard to properly localize the UI, since it depends upon word order in a natural language. You may have to rearrange the UI to make it work in a different language.

Examples:


From the InConcert Order Browser

From the Mac OS X system preferences