Readability is the most important principle for organizing and displaying content on your web page. Your web page should allow visitors to easily read, understand, and act on your content. The desired action you have in mind for your visitors may be to click on and read additional content, share the content with others, or perhaps make a purchase.
Poorly organized content will lead users to leave your website before engaging with your content for long enough to complete the desired action.
The figures show two examples of website readability. In this figure, Craigslist.org was searched for an apartment in New York.
Source: craigslist.org
The search results are structured like a list, and you can limit the content displayed using the filters and search forms. Each listing has multiple attributes, such as a description, the number of bedrooms, the neighborhood, and, most importantly, the price. Comparing similar attributes from different listings takes some effort — notice the jagged line your eye must follow.
The following figure shows the results of a search conducted at Hipmunk.com for flights from New York to London.
Source: hipmunk.com
As with the Craigslist search results, you can limit the content displayed using the filters and search forms. Additionally, each flight listing has multiple attributes, including price, carrier, departure time, landing time, and duration, which are similar to the attributes of the apartment listings. Comparing similar attributes from different flights is much easier with the Hipmunk layout, however. Notice how the content, in contrast to Craigslist’s, has a layout that allows your eye to follow a straight line down the page, so you can easily rank and compare different options.
Don’t underestimate the power of simplicity when displaying content. Although Craigslist’s content layout may look almost too simple, the site is one of the top 50 most visited websites in the world. Reddit.com is another example of a top 50 website with a simple layout.
Before displaying your content, ask yourself a few questions first:
Does your content have one attribute with related data, or does it follow sequential steps? If so, consider using lists.
Does your content have multiple attributes suitable for comparison? If so, consider using tables.
Do you need to collect input from the visitor? If so, consider using forms.
Don’t let these choices overwhelm you. Pick one, see how your visitors react, and if necessary change how you display the content. The process of evaluating one version against another version of the same web page is called A/B testing.
