jump to navigation

A World Without Borders July 3, 2009

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

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.

The Maturity Gap May 18, 2009

Posted by dantemurphy in building a team.

It’s been a long time since I was entry level.  In fact, one could argue that I never was–by the time I knew that there was such a thing as Information Architecture, I’d already been doing it for years.  My path into the realm of User Experience professionals is not uncommon; a miscast developer with an empathetic heart and an appreciation for the often intangible things that make an experience delightful, I was a designer waiting to happen.  And with nobody else at my company interested in or empowered to effect the behavioral design of our software and websites, all I had to do was lay claim to the title and it was mine.

Times are different now.  Businesses have begun to embrace, even covet design, and UX consultancies are thriving even in dire economic times.  At the recent Interaction ’09 conference, Jared Spool led a panel discussion on this change and the potential scarcity of interaction designers and other qualified user experience professionals it would expose.  A link to the complete panel is included below.

Jared Spool’s panel at Ix09

The panelists each described the type of designer they were looking for, both in terms of skill and sensibility.  And while I agreed that the designers they described sounded great, I was dismayed by two things that I didn’t see evidence of; entry level hires, and a plan to develop those people into the superstars everyone wants on their team.

Of course, it’s relatively easy, when you work for frog design or IDEO or Adaptive Path (and others) to demand only top-tier talent and turn away those with incomplete credentials, unpolished portfolios, and imperfect instincts about design.  But when you’re the hiring manager at an agency without marquee recognition, or at a company looking to build or expand an internal design team, you can’t just roll out the red carpet and wait for the Josh Porter’s to come strolling up.

My question to the panel was this: what level of incompleteness are you willing to accept in a new hire, in order to turn that rookie into an all-star.  Skip ahead to the 53:00 mark of the panel and you’ll see why I walked away feeling that the panelists either couldn’t or didn’t want to answer that question.  (In their defense, as I mentioned earlier, they don’t have to think about this situation…yet.)

Like most people who ask a question at a conference of their peers, I had my own answer in hand and wanted to see how my thoughts compared to the thought leaders in my field.  And since they didn’t really answer the question, and it would have been presumptuous for me to answer it then and there, I’m going to answer it now.

At the individual level, the only criteria I demand of every person I hire are passion and intellect.  Experience is nice, and a mix of experience is absolutely necessary at the team level, but I would much rather hire a recent grad who has Louis Rosenfeld’s “polar bear book” on her summer reading list than the person who read it ten years ago, has been milling out websites ever since, but doesn’t know who Dan Saffer and Jennifer Tidwell and Barbara Ballard are.  I know this is true because I’ve done this time and again.

The results have been quite amazing.  Smart people who really love their job learn from experienced people at an alarming rate.  It’s like spending time with a pre-schooler…they notice everything.  And if you encourage their questions and theories, they will learn in two years what it took me ten to figure out because all I had to go on was instinct and trial-and-error.  (Mostly error.)

The key is to critique them and evaluate them on the quality of their process and ideas, remembering that it is equally important to recognize the achievements and the opportunities for improvement.  If the process and thinking are sound, even if they are not favored by your client, it is usually easy to quickly change course based upon your existing research by tracing back to a single “coin-toss” or judgment call.

Inexperienced designers do have one consistent shortcoming; the polish and aesthetic quality of their deliverables is often below par, simply because they are not as familiar with the tools and they haven’t had the repetitions.  Avoid the temptation to take over and beautify the prototype yourself (unless it’s mission critical); instead, work with your rising star patiently to continually improve and refine their documents and presentations.  Soon you will see that their fresh perspective extends beyond the product and into the process, influencing the way documents are drafted and presented or even the way in which problems are addressed.

Of course, while there are certainly more smart and eager entry-level candidates out there than there are Christina Wodtke’s, they still are a valuable commodity that you need to thoughtfully attract and retain.  Offer mentorship, access to training and professional conferences, and ensure them that they will work on meaningful projects and have client contact within their first 6 months.  Promise them the opportunity to experiment and learn by doing, but assure them that you will pay close enough attention to their work that they will be insulated from catastrophic failure.  Abolish the caste system at your workplace and give them the same tools that the senior designers have, especially if they are doing essentially the same work.

And above all else, map out a career path for them (and everyone in your organization, including yourself).  Make it clear that you want them to succeed and move ahead, that “a rising tide raises all boats” and that they will be recognized for their contributions.  Demonstrate that they have options to move to other departments or to define their own role, and make it clear that your vision for the department or agency is flexible and always evolving.

So why am I sharing my treasure map to the goldmine of untapped talent?  Because the integrity of our practice demands it.  As we continue to develop newer generations of Bill Moggridge’s and Bill Buxton’s, we’ll all benefit from the re-allocation of dollars from marketing to design,  And then, instead of the estimated 10,000 new designers Jared Spool postulated, we’ll need a million.

And I can’t make that many by myself.