jump to navigation

A World Without Borders July 3, 2009

Posted by dantemurphy in design research.
trackback

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.

earth

borders

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.

the "frame"

the "frame"

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.

the search for "SUPPORT"

the search for "SUPPORT"

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”.

the "cut line"

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.

a triumph of simplicity...or a catastrophe of clutter?

a triumph of simplicity...or a catastrophe of clutter?

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.
transparency withotu context

transparency without context

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.

"freedom from choice"...a manageable matrix of options

"freedom from choice"...a manageable matrix of options

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.

About these ads

Comments»

1. Phillip Hunter - July 3, 2009

Great analysis, Dante. Helps me understand why I didn’t want my own site to seem like the norm. This also relates to the frustrations and failures of search as the all-encompassing means of interaction with the info on the web. We would do much better to serve “find” and “explore”, as you suggest.

2. Utopie - Web Site Design Liverpool - July 5, 2009

I hope a lot of people read this as not too many people know or understand this. Knowledge of the few {Esoteric}

3. Marty - July 10, 2009

Great post with good real-life examples.

4. Tim - July 10, 2009

excellent post.

I love the term “scroll to hide.” That should be the official term of description for that mannerism. I do that all the time, cause screw all that noise, I wanna read the article. I think news on the internet needs to get with it the most.

5. Joan Vermette - July 10, 2009

I don’t know, Dante – clearly the business context is different in the first two examples than in the last two. And you might note that in the Google example, you’ve still got an ad between the primary nav and the content: same as in the CNN example. The difference is in textual vs. graphical ad, and that the ‘cut line’ is higher in the Google example, which still keeps the page’s focus on the primary content as you recommend.

The thing is, marketing is a stakeholder in web products – but your article isn’t directly addressing the issue of effective persuasion. This is what I’d guess the Tufte example is after: putting the noise at the bottom of the page in an attempt to make good on the ‘seducible moment’ (Spool) after the main task of the page – reading about upcoming seminars – is accomplished.

Did I get this wrong or miss anything, here? What do you suggest to meet the needs of marketers? What’s a page that does that particularly well, to your thinking, without binding and gagging the main focus of the page?

Thanks.

dantemurphy - July 22, 2009

Joan-
Thanks for your thoughtful response.

This was a pretty big topic, and it’s not surprising that I haven’t fully convinced you in the original text. Let me try to clarify. There are two main areas where we as designers need to apply more discipline in order to achieve the “seducible moment”. One is good layout, understanding the perceived “frame” that our audience places around content and how they interact differently with peripheral and focal content. That’s the crux of the first two examples.

The Google example is intended to illustrate a heavy-handed technology-based solution to the other problem, that of editorial promiscuity. While the CoolPreviews add-on allows me to see exactly what is on the target page while still in the context of my search for images of hippos, there are still too many targets and not enough context. Tufte falls victim to the same problem; he doesn’t know why you are on his home page, so rather than applying a clean, hierarchical design he just crams a ton of unrelated stuff onto the page. Putting the noise at the bottom may diminish its impact, but wouldn’t a page with no noise at all be better?

So what I’m recommending is this; minimize the “frame” around your content, and make informed editorial choices about the links you present. To use the most trite example possible, consider the iPod; the design canvas is essentially unbound, and the number of choices to consider at any given time is very limited. If we extend this to content and commerce, the goal is the same. No sensible marketer is trying to sell the entire store at once, and related-item strategies like kits and bundles that include all the cables, batteries, carrying cases, etc. that you need to fully enjoy your product are highly valued by both customer and merchant.

When we extend this thinking to the entire experience, not just the check-out line, then we’ve eradicated the borders that frustrate and stultify our audience by giving them meaningful and manageable options at every turn.

Thanks for your comment!
Dante


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: