Plain Text Input
Problem
People need to provide information using natural language.
Solution
Give people an input that accepts open-ended plain text.
Context
- You don’t need information in a peculiar format or are able to parse it effectively as in Forgiving Format.
- You don’t need or want rich text formatting as in Formatted Text Input.
Rationale
The plain text input is the primordial data input control. In theory, if you had nothing else, you could get by with this one. People have become accustomed to filling in forms, both in paper and digitally, and a text box is one of the most well-known inputs.
Implementation
Pretty much every software platform has a text box input control, but if you don’t, you would need to draw a box, position a cursor in the box when it has focus, capture keyboard (or virtual keyboard) input, echo back the characters as they are typed and advance the cursor accordingly. Supporting platform key operations is also desirable, such as arrow keys for navigation amongst characters, select all (CTRL-A on Windows and Command-A on Mac, for instance), cut, copy, paste, and deletion. Allow for selection, usually by holding down shift and using arrow keys, or clicking and dragging the mouse across the characters.
Most text boxes allow you to set dimensions, either width and height or rows and columns (or both). It is generally good to try to communicate the amount of text expected using the size of the box, but you should also try to normalize text box lengths within a form or grid for visual harmony, so balance between those needs.
If you have a maximum length and the text box control supports that, use it. Another option is to tell people what the maximum is and dynamically update how much they’ve used and how much they have left. This is way better then letting them try to submit a form and then giving an error message, so try to guide them as much as possible up front as to the appropriate length of text.
Help Me Get There
Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.
ASP.NET
Plain Text Input pattern is implemented in the following ASP.NET controls: WebTextEditor, WebHtmlEditor. Check out the samples browser to see it in action.
Windows Forms
You can use the NetAdvantage for Windows Forms WinTextEditor Control to implement this pattern.
WPF
You can implement this pattern using the NetAdvantage for WPF XamTextEditor Control.
Examples
The primary example from FaceBook takes an interesting approach to the multi-line text box. Instead of using its own scrollbar, the text box automatically expands vertically as people type to show the full text of the message. It takes advantage of the browser scrollbar to enable scrolling, should the message get so long as to go off the screen.
http://quince.infragistics.com/113q
This is the most basic approach. You should generally try to allow for the entire text to be displayed without scrolling.
http://quince.infragistics.com/1100
This example from the Infragistics Windows Forms toolkit uses overflow indicators that alert people that the full text is not displayed. In cases where it is critical for people to know the full text is not displayed, you should consider this approach.
http://quince.infragistics.com/117n
This shows a basic multi-line plain text input. Note that it wraps the text within the box so no horizontal scrolling is necessary. This is generally preferable and should not require people to enter Return at the end of each line. The vertical scrollbars are disabled until the height of the text exceeds the visible area. Another approach is to only show the scrollbar when needed.
http://quince.infragistics.com/10zq
TweetDeck, one of the many Twitter clients, is an example of a multi-line text box that provides dynamic feedback to people to let them know how much more they can type in the box, and when it exceeds it, rather than just disabling further input, it shows how much too long the text is and indicates the overrun by turning the input box red. This is usually better because if someone pastes text in that makes it too long, this allows them to intelligently trim it down to fit.
http://quince.infragistics.com/11be
This example from Gmail shows that highlighting the current text box can be a helpful way to reinforce user focus. It also illustrates one of the millions of ways that you can complement plain text input with assistive devices (the Add Cc and Bcc links) that help people provide appropriate information.
http://quince.infragistics.com/115n
This sample from the Infragistics ASP.NET toolset shows how you can complement plain text input with a spell checker to help people complete forms without spelling errors.
http://quince.infragistics.com/110x
Sources
Jennifer Tidwell, Designing Interfaces
Sakuzaku, Approaches to Character Limit Cutoffs
Tags
