A World Without Borders July 3, 2009Posted by dantemurphy in design research.
As the internet, once the domain of academics and think-tanks, grew to become a world-wide web of consumer, social, and artistic content hyperlinked together and indexed by ever more powerful search engines, the vision of a world without borders became the next Utopia. To the pundits of social media, user-generated content, and ubiquitous computing, that vision prevails. But when it comes to the most basic unit of the web, the humble and persistent page, the web becomes an environment of harsh structure and unforgiving constraint, often by our own design. The fluidity of content and experience is strictly constrained, and the potential of the web remains largely unrealized.
The first barrier faced in the development of the web was the hardware we used to view it; computers of the mid 1990s lacked the processing power to display more than 640×480 pixels, and the “web-safe” color palette of 216 colors could not support high-resolution imagery. The content itself was constrained. Some of these concerns persist for mobile devices, partially alleviated by platform-specific stylesheets and zoom-in features, but for the desktop and laptop environment screen size and color depth are rarely a concern.
The problem now lies in our ability to acknowledge and design for the mental model our users have of the web browsing experience itself, independent of the content they are viewing. Layout, content strategy, and short-term revenue opportunities sabotage our most effective use of the web as a channel for informing, entertaining, and empowering our users.
The layout of most web pages consists of a “body” that represents the main value proposition of the page surrounded by items of ancillary (or often no) value to the user. In the most common (and most extreme) cases, this encirclement is complete, with banners and utilities at the top of the page, navigation on the left, and related content or advertisements on the right.
In recent research I’ve conducted, users refer to this layout as “the frame”, and treat the items that constitute the “frame” with the same regard frames usually get in art museums…none. In addition to their comments about the frame, eye-tracking data confirms that many users focus only on the clearly delineated center-of-the-page zone, even when the content in the periphery maps to their primary task or area of interest.
In the example below, our participant was looking for “support” for a mental health condition her child had been diagnosed with; despite using her exact word (in bold, 24-point type), she spent over 90 seconds scouring every inch of the “page” and never once saw the link that would have immediately addressed her needs. Her concept of the “page” was defined by the borders she identified.
This becomes more apparent the more you observe the behavior of users in the wild. Nearly every user we tested exhibited a behavior we now refer to as “scroll to hide”, where they would scroll the page down (using the mouse wheel) such that any perceived advertisements rolled off the top. In some cases, the offending item was not even an advertisement, but rather a content element that would have been relevant and interesting had it been rendered differently. The result for the user was usually more of the content “body” visible on the screen; the space that had been occupied by the “frame” was now available for content of interest.
But there were ancillary, unintended consequences. In some cases, the layout of the page had the banner ad below the global navigation; the result here was a site whose primary means of navigation was never on screen. Whereas we once spoke of the “fold line” for placement of content, we must now be aware of the “cut line”.
What this highlights is a fundamental problem in the way we approach design. In our attempt to increase engagement or revenue, we’re not giving the user choices, we’re giving her distractions. This is especially true when the online behavior is task-oriented, and even more so when the task is related to a core personal value such as health or finance.
There are implications here for the information architecture of our websites, certainly, but the larger implication is on our overall content strategy. User journeys, cross linking, and related content are still valid concepts, they are just executed poorly as we attempt to manage the exponential growth of content available online. The reality, as observed both in the direct and indirect behavior of real users performing real tasks, is that too many choices are noise, and choices of too many kinds are static. Providing links to a single article, tool, reference, and advertisement requires the construction of a multi-dimensional mental model in the mind of the user to process information they didn’t even ask for.
Even our own heroes fall victim. Consider the website of Edward Tufte, the recognized maestro of information design. What begins as a fairly elegant page focused on upcoming seminars degenerates into a potpourri of unrelated chat topics, review, images for sale, and even some offline contact information (not pictured). this is not intended to suggest that I know more about design than Tufte, or that anyone does; it’s merely intended to illustrate that even the greatest minds among us fall victim to the siren song of free pixels and never-ending scrollbars.
The solution is to revise our content strategy and overhaul our design process. As the architects of an experience, we need to transition from promotion of the value of each element to transparency of its value and let the content speak for itself.
There are numerous techniques for doing this. One is to provide hover-state previews that do not require a new page or tab to load and provide on-demand relevant information. Different previews are appropriate for different types of content; specifically, a narrative video benefits from a trailer, a short article might benefit from ratings or tag clouds for sharing or comparing, and a research paper benefits most from a synopsis. The key is to combine the best practices of content description from other channels with the interactive capabilities of the web.
Preview technologies such as CoolPreviews begin to erase the boundaries of the web (by displaying a preview of the destination page in a <div> layer), but their success is limited in several important ways.
- The user must install and maintain a browser extension, and is therefore bound to a proprietary solution.
- The preview is only evident on rollover of the target, and a click is still required to display the preview pane.
- The preview pane simply shows a smaller version of the destination page, but does not explain the value or relevance of the link.
- Pages with a high link density suffer from cognitive dissonance, with too many targets in too small an area.
- The preview pane obscures other potential content of interest.
The key to limiting the number of choices without constraining the experience is to establish a solid understanding of the underlying needs and values of each primary persona, segment, or archetype, and to create or catalog an efficient network of related content. Providing links to every possible pathway from the current page is not democratic or inclusive, it’s lazy. The web is inherently editorial, and needs to stop pretending to be otherwise. Making good editorial choices is far more valuable than not making any; this efficiency in content and sourcing is what has made Wikipedia so successful.
Most of the links related to the subject are presented within the body of text, and in context. A handful of links are provided to the source material for the content, and a small number of related links are also offered. Compared to the number of links one could find that might be of interest, this is a paucity; but the finite nature of these lists invites the visitor to explore, knowing that each site is another node on an infinite neural network of hyperlinked content.
The borders are gone, and now the internet invites rather than intimidates. As each site in each industry grows to realize that it is better to excel at one thing than to toil at many, I firmly believe that the contextualization of choice will prevent users from creating borders between themselves and what could be an engaging, educational, or entertaining online experience.