Blooper 18: Overusing Text Fields

    Images from GUI Bloopers, by Jeff Johnson. Used without permission.


    What's wrong with these?

    • The software marketplace and the Web are full of software that uses text fields for specifying structured or constrained data values such as times of day, volume levels, dates, telephone numbers, postal codes, money amounts, and numbers of dependent children.Text fields are too unstructured and unconstrained for such data.
    • Text fields give users little or no advance guidance about what values are acceptable. The feedback they do provide about the validity of values is after the fact.

    Design Rule: Avoiding this blooper

    Text fields should be used only for data that really is unstructured, free-form text. Examples of such text are names of people, user-defined passwords, comments, and transaction reasons. Examples of textlike data that is not completely free-form are telephone numbers, social security numbers, dates, state, city, font family, and zip codes.

    Alternatives to text fields

    • Text field specialized for a particular type of input. Bank automatic teller machines (ATMs) in the US require users to specify dollar amounts when making withdrawals, deposits or transfers. Most do so by displaying a data field and prompting users to type a dollar amount using the ATM's keypad. However, ATM users who want to deposit $35.75 do not have to type "$35.75" or even "35.75". They just type "3575" and the machine places the digits in their correct positions relative to the decimal point. Users cannot enter arbitrary text into ATM dollar amount fields because alphabetic characters are just an alternative interpretation of the same keys as the digits 0-9, and the dollar amount field interprets the keys as numbers.

    • Using multiple text fields, corresponding to the parts of the data. This reduces the likelihood of syntax errors. For example, data fields intended for telephone numbers can be broken up into several fields: country code, area code, exchange, and final digits. Similarly, dates can be broken up into day, month, and year. Labels can be used between the separate text fields to provide "built-in" punctuation.


    • Using datatype-specific controls that match the data's structure and constrain the input to valid values. For example, you can use a slider for a numerical value between 1 and 100, a digital clock for a time, radiobuttons for a small integer value like number of dependants, or a scrolling menu of states for a State data field.


    After all, the goal is presumably to design a GUI, in which the G stands for "graphical" not "textual".