Formatted Text Input

Problem

People often need textual decoration to more effectively communicate in text.

Solution

Provide a tool to enable people to decorate their text using standard markup features.

Context

• The target technology can support rich/formatted text.
• You deem it is more likely than not that people will need to (or want to) decorate the text in question.
• More often than not, the text to be entered should be free-form and open-ended, i.e., it is uncommon to provide for formatting of basic text fields (such as name, email address, etc.). Sometimes formatting can get in the way visually and/or in the usage of the data being entered (a marked up email address could cause problems with systems trying to use it).

Rationale

Since the early days of printing, we have been decorating our text with markup to enhance our ability to communicate aspects of language not readily shown in the verbal language itself—things that we would otherwise communicate with tone, emotion, and emphasis. We’ve also developed ways of marking up to indicate other more technical purposes (such as the use of italics for publication references in some styles and, now, underlining for links).

In short, we have come to rely on additional formatting as a means to enhance our communication, so it is often desirable to include these facilities in a software solution that allows people to express themselves via text. HTML is the lingua franca for the Web and even many desktop applications; however, RTF, PDF, and now XPS are also common rich document formatting options. Supporting one or more of them has become fairly standard in modern software solutions.

Implementation

Creating a formatted text control can be quite difficult and involved, so generally speaking, you should avail yourself of what is available as a ready-made UI control. Some are free and there are also more robust options available from vendors.

If you do want to try to build your own, you should probably keep it simple and just provide the more basic Bold, Italic, and Underline options along with (if your target format supports it) hyperlink and inline image support. It is typical to show these as buttons using standard icons right above the input area, but you should also support the standard keyboard commands for your platform (e.g., CTRL-B and Command-B for Bold, CTRL-X and Command-X for Cut, etc.).

If you have a length limit, you will want to specify that and even display the number of characters left while the user is typing to give them real-time feedback. However, it is more common, for rich text input, to not have predefined limits; if you do, be sure to not count invisible formatting characters against the total as that will confuse users.

It is best to show a What You See Is What You Get (WYSIWYG) editor to provide immediate feedback as to what the various formatting options do to the text; however, you can support formatted text entry by simply allowing users to define tags around text. This should be considered a last option given the extra burden of effort and imagination it puts on users.

Once you have a formatted text control, you should place it on your UI, usually below some sort of label or prompt that makes it clear what the formatted text is for. You should almost always provide for multiple lines to show at once and have it be wide enough in proportion to the surrounding content and the expected amount of text entered, i.e., more expected text should typically mean a bigger input area.

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

Formatted Text Input pattern is implemented in the following ASP.NET control: WebHtmlEditor. Check out the samples browser to see it in action.

 

Sources

Jennifer Tidwell, Designing Interfaces

Tags

Text Input, Data Entry, Form.