Column: Communication Design

As enablers of online conversations between businesses and customers, Web forms are often responsible for gathering critical information—email addresses for continued communications, mailing addresses for product shipments, and billing information for payment processing to name just a few. So it shouldn’t come as much of a surprise that one of the most common questions I get asked about Web form design is: “How do I deal with international addresses?”

But before we get into the nuances of address variations, it’s worth pointing out that addresses have a commonly understood structure. Through years of experience with mailing and postal systems, people have a pretty concrete idea of what constitutes an address block. This common understanding is so definitive that eyetracking data suggests, once people begin filling in a set of input fields that make up an address, they often cease looking at their labels. The basic structure of an address is so familiar, people don’t need the guidance labels provide. Read More

As the Web has grown, the cost of getting a new application online has plummeted. Web hosting services with unlimited bandwidth and storage now cost less than ten dollars a month. Free open source platforms can easily power the back-end of an application. Free development toolkits for client-side programming (JavaScript) and styling (CSS) make building the front-end of an application much faster. In aggregate, these factors enable a new Web application to get in front of a global audience very quickly and easily.

Under these circumstances, it’s possible to launch countless ideas online. We can roll out new services fast, add new features weekly—if not daily—and do optimization testing and refinement in near real time. In a world with such low barriers to entry, knowing that you can do something can quickly become secondary to knowing if you should do it.

To stand out from the burgeoning number of products online and help your organization make the right decisions about what to build, it’s crucial to develop and stay focused on a clear value for your Web application that is distinct and obvious. In other words, you need to know your product’s core:

• Be able to define your product clearly and concisely.
• Build what defines your product first and hold it sacred.
• Grow outward from your product’s core.

Read More

In a previous Communication Design column, “Refining Data Tables,” I alluded to the importance of Web forms in online commerce, communities, and creation. As arbitrators of checkout, registration, and data entry, forms are often the linchpins of successful Web applications.

But successful Web applications tend to grow—both in terms of capability and complexity. And this increasing complexity is often passed on to and absorbed by a Web application’s forms. In addition to needing more input fields, labels, and Help text, forms with a growing number of options may also require selection-dependent inputs.

Selection-dependent inputs are, in essence, a pretty simple concept: Once a user initially makes a selection from one or more options in a form, the user must provide additional input related to the selected option before submitting the form. Figure 1 illustrates this behavior by showing two steps from the eBay Create a Download Request form. After an eBay seller selects the Sold option in the Listings and records drop-down list, the form presents additional input fields for selecting a date range. Were the user to select a different option in the Listings and records list, completing the form would require a different set of additional options. Read More