When consuming content on the web, scrolling isn’t natural—that’s what an eye-tracking survey from Jakob Nielsen reveals. A minority of users will scroll to look at information below the fold, but they tend to scan it superficially:
This hasn’t stopped countless sites from creating the endless homepage, on the off chance the extra territory will generate additional clicks. This layout tends to translate to articles, as well, except when they’re paginated (generally to the detriment of the user experience).
But recently some examples of an alternative layout have cropped up. And while they might not be suitable for the homepage of a website—where users have been so conditioned to certain kinds of layouts that deviating from them is likely always to the detriment of their usability—they do suggest a future in which the web reading experience is a great deal more pleasant than it is now.
New Interaction Models, Old Ways Of Displaying Content
The key to the possible resurgence of horizontal site layouts is the end of the tyranny of the mouse, scroll wheel and scroll bars. Touch interfaces—be they touchpads or tablets—allow users to navigate content in any direction, not just up and down.
The first thing these interfaces recognize is that we are most comfortable reading text in columns of a certain width. Most websites do not respect this design dictate—even the site you’re on now displays text in columns roughly twice as wide as would be optimal (it depends on the font size). There’s a reason magazines and newspapers all use columns of approximately the same width.
Given the magazine background of its creator, it’s no surprise that the web-based magazine layout engine TreeSaver, assembled by Roger Black’s team, utilizes both the column layout and horizontal pagination. Here’s a screen-grab from a food magazine in the TreeSaver portfolio:
But the case for a new model for reading on the web has been made most compellingly by designer Frank Chimero, who argues in his (horizontally laid-out) essay Horizontalism and Readability:
With smaller columns placed horizontally, the eye can move left to right to read a line, move down to take in the next, then when finishing a column, can jump to the next and disregard previously read columns.
The amount of horizontal movement required of the eye can be balanced with a reasonable vertical measure (the height of the column). The horizontal orientation also allows for something we take for granted with pagination in books: the ability to disregard and not reread text we’ve already read.
Rereading and losing position, in fact, is a common problem with long, vertical swaths of text. It’s difficult to disregard already read text, and the flow of the eye is not balanced because the implied movement is usually so strongly vertical. The reader is also frequently interrupted by the need to reorient the text by scrolling to produce new paragraphs to read. It’s not torture, but I think the readability is worse than we realize due to our acclimation to the vertical reading environment. We do so much of it, we had to adapt. But that doesn’t mean it’s optimal.
Chimero’s argument is best experienced in its original format.
All of this is part of a renaissance in making the web reading experience more pleasant. From e-ink to better control of fonts in HTML 5 and softer contrast text, as well as the ongoing shift away from print and onto screens of every dimension, the web reading experience has the potential to become a great deal more like the print reading experience.
An overwhelming majority of websites have yet to respect these conventions, and seem little enough changed from ten years ago. It’s a shame—and could even be one of the reasons that the web has yet to match the prestige, advertising rates, and revenue earned by print.