Newfangled works with independent agencies to create lead development web platforms for their clients.

Newfangled works with independent agencies to create lead development web platforms for their clients.

How Design Helps Users Get to Know Your Content



We all judge on appearances. When we do it to other people, it betrays our prejudices—most of them sub-conscious—and often causes us to miss out on meeting people with whom we could possibly have a great relationship.

The same thing is true with information. We judge information sources just as quickly, and just as harshly, as we do other people. Our sub-conscious kicks in and, in the blink of an eye, assesses what we are looking at on a number of levels—its perceived clarity, trustworthiness, detail, etc. The trouble is that we're not as good at discerning this stuff as we think we are. An attractive, well-organized webpage might contain useless or even incorrect information, whereas one that is poorly designed might contain gold. But if there's the slightest doubt cast upon information within those first seconds, we're not going to give it the time of day, no matter how reliable it might be.

This means that the way we design content needs to anticipate how it might fail to pass a user's first, brief judgement: Is it hot, or not?

 

Hot vs. Not

Let's compare two common approaches to the design of content-focused webpages:

On the right is a simplified version of what is (sadly) a typical article detail page. In fact, other than the simplified header and footer (which both examples share), this is an almost exact "trace" of a real webpage—I won't name names.

While it's rife with problems, let me highlight a couple in particular:

  • Advertising: If you hadn't already guessed this, the dark rectangles represent advertisements. What's immediately made clear by highlighting them in this way is that the page's main content takes a backseat to advertising. There are 15 unique advertisements on this page, which is not an uncommon number for a mass-media website. But because this is so common, it becomes the way most people think a professional webpage should look. But what is the purpose of a webpage like this? Is it to communicate information, or to sell advertising? Right. It's to sell advertising. Is that the point of your webpage? No. So why would you want to interrupt yourself and prioritize someone else's content?
  • Noise: Besides the advertising, this page's design is not setting any reader up for success. Again, we know that the priority of this page isn't the message in the content; the content is bait that is switched for ads once the site has a user on the hook. But let's say that the publisher of this page was interested in it being read. The first thing to do would be to order the information intentionally and hierarchically. That would give the user the ability to ease into reading it. Unfortunately, this is not happening.

On the left is an greatly improved version that prioritizes the user's ability to read the page, which again, I assume is its purpose. Here's what's working:

  • Typography: Don't get too hung up on the typeface. What we are more interested in here is the hierarchy within the page's text. The page title is the largest text style on the page. From there, the other styles are distributed in a prioritized way—from sub-title, to author credit, to headings, to the body text. It's very easy to scan, which gives users the chance to quickly verify whether the content is relevant to them. This is one of the things that happens in a user's first 10 seconds on the page.
  • Intentions: This page is clear about what it's offering: content. It's also clear about what it wants: user engagement. A user can either share the content, comment on it, or respond to a call to action. To do this right, you need to ask yourself what action you want a user who has read your content to take. The call to action is prioritized and isolated, and as has been heavily discussed in other articles on our website, clear, concise, and compelling.

 

How a Good Design Works

Looking at the two simplified examples provides a great rubric for how design should serve content. Here, in order of importance, are the four most important aspects of a webpage's design:

  1. Purpose: Is the page's title the most important text on the page? Does it clearly explain the purpose of the content? If it takes a more editorial slant—which is definitely ok—is there a subtitle or heading that clarifies it?
  2. Clarity: Is it immediately clear what is primary content (e.g. the article, video, etc. that the page contains) and what is secondary (e.g. related content, promotions, etc.)? Is the main content column designed to be easy for a user to scan as well as have a deeper, more focused reading experience? The content area is sacred. Don't interrupt yourself, even to promote your own content from elsewhere on the site (this will come up in a usability test later).
  3. Action: Identify and prioritize the actions you want a qualified user—one who has read the page's content—to take. The most important action should be easily identifiable and follow the conventional geography—users expect CTAs to be on the right side of the page, and are likely to miss or misinterpret them if they are located somewhere else. Too many CTAs is an indicator of a lack of intention and stability.
  4. Social: Is it easy for a reader to help you spread the word by sharing the page's content on the networks you care about? Be selective. Again, overloading a page with social media icons shows a lack of intentionality.

With this rubric in mind, I'd like to share two examples. Both are from websites we've launched recently with agency partners. Also, both are actually much longer pages, but I've truncated them here in order to show the full page template of each:

 

Example 1: ReCourses.com

ReCourses.com is the website for David Baker's agency consultancy. It was designed by the talented team at Milkshake.

Using the same four-point rubric, here's a rundown of what's working on David's article:

  1. Purpose: The title of this article, Positioning Challenge: Combining Strategy & Execution, is the largest text on the page, making it clear that it is the title and the most important idea to understand right away. David is saying that he's going to discuss three easily identifiable and important concepts: positioning, strategy, and execution.
  2. Clarity: Because the design of the site keeps peripheral content to a minimum—really, the only additions to this page are the call to action and "related content" widget—it's extremely clear to a user what is the primary content of the page. David has formatted it in a way that makes it easy to scan, and the content column is optimized—by it's width and text size—for long-term, focused reading.
  3. Action: David has chosen two calls to action for this article. On the top right of the page, he has included a simple form to subscribe to his content. At the bottom of the page, he has included a link to download the article in PDF format.
  4. Social: Smart social links in the page's footer make it easy to share this particular page on all the networks that David cares about.

You can view David's original article, Positioning Challenge: Combining Strategy & Execution, here.

 

Example 2: CallahanCreek.com

Callahan Creek is a Kansas-based agency focused on working with specialty brands. They provided their own design. The screenshot I'm showing is from an article by Kent Stones.

Here's a rundown of what's working on Kent's article:

  1. Purpose: The title of this article, What Specialty Brands Can Learn From Art, is the largest text on the page, making it clear that it is the title and the most important idea to understand right away.
  2. Clarity: This webpage also has a pretty minimal design. Other than the content column, there is only one call to action and no other widgets serving up peripheral content. This makes it clear what the user should read. Kent has formatted his article with headings and lists that make it easy to scan for an overview.
  3. Action: Kent has selected one call to action for this article—a content subscription form—which is located at the top right of the page.
  4. Social: At the top right of the page, there is an expandable tool that gives the user the ability to share this article on Facebook, Twitter, LinkedIn or via email.

You can view Kent's original article, What Specialty Brands Can Learn From Art, here.

 

Now let's take this evaluation approach and make a reproducible test out of it.

 

How to Do Ten-Second Webpage Testing

There are, of course, many methods for evaluating a webpage's design. What I'm about to describe is just one of them, and is by no means the most scientific process you could follow or the only form of usability testing you should do. A ten-second test is essentially a shortened version of our approach to simple website usability testing for individual webpages. Here's the basic process:

  1. Set up a computer with a webcam and screen-capture software.
  2. Choose a single webpage to test and open it in your browser. Expand the browser to fill the screen so there are no distractions for your volunteer.
  3. Instruct your volunteer that they will have 10 seconds to view a webpage. They may scroll the page up and down but may not click any links.
  4. When your volunteer is ready, begin recording.
  5. After ten seconds have passed, instruct your volunteer to stope and minimize the browser window.

While still recording, ask the volunteer the following questions:

  1. Based upon your short scan, what was the page about?
  2. Would you continue reading this page? Why or why not?
  3. What stood out to you most from the page?
  4. What would you search for in order to find this page?

 

Example Ten-Second Tests

I recorded eight ten-second test sessions and have included four of them as examples in this article. Each video below includes two sessions testing two different content-focused webpages. I've included the instructions in an introduction at the start of each one except the third where I edited them out due to sound interference.

Observations:

  • In the first test, Lisa remembered the website name, ReCourses, but did not remember the words of article title. She mentioned the colors as an attribute that stood out to her.
  • In the second test, Lisa remembered the domain name, the exact title of the article, as well as other keywords. She specified the clean design and title/subtitle distinctions as things that stood out.

 

Observations:

  • In the first test, Chris was not able to remember any words from the page he viewed. He noticed a subscribe call to action, as well as general page structure attributes.
  • In the second test, Chris also did remember specific words from the page. He also noted the page's design.

 

Observations:

  • In the first test, Lindsey was very disoriented by the page's design. She was able to recall specific terms from the page, but had difficulty discerning what was content and what was not. One way this could be improved would be by not including advertisements within the content area.
  • In the second test, Lindsey was able to recall the exact title as well as other key terms from the article. She noted that the page's design and responded to it positively.

 

Observations:

  • In the first test, Chris was able to recall the domain and the general subject of the page's content. He noted that the blog's banner image—Threat Level—stood out and distracted him from scanning the rest of the page.
  • In the second test, Chris recalled the title incorrectly.

 

General Testing Observations

This kind of testing is obviously not a scientific method. One issue that became clear after doing many testing sessions is that each volunteer's recall improved after their first test. The effect was relatively minor—there were some volunteers who were not able to recall exact words in any of their sessions—but it's still something to consider when evaluating the volunteer's feedback. Also, the webpages I selected for the volunteers were somewhat arbitrary. Aside from including the two client sites I evaluated earlier in this article, I randomly chose other pages that were content-focused. Out of the eight sessions I recorded, only two did not include the two client websites I evaluated above; I left these out because those volunteers were already familiar with each website. Ideally, the entire volunteer pool would evaluate the same pages so that a wider breadth of data could be collected. In this case, I was more interested in demonstrating how the testing sessions would work and what kinds of issues would arise from them.

Interestingly, Craig Mod's article, Books in the Age of the iPad, repeatedly demonstrated the advantages of its design. It's title was large enough to demand attention from each volunteer and was easily recalled later by just about every volunteer. In addition, each one commented on the design of the page, both how aesthetically pleasing it is as well as how intentional it felt—one volunteer describe the design as "important."

Though Craig's webpage didn't have some of the same considerations that the two examples I evaluated earlier had—namely, the focus on generating leads through calls to action—the consistency with which volunteers were able to recall important information and details after their ten-second tests demonstrates the ways in which design plays a major role in user engagement with content.





Comments

Alex | September 27, 2011 7:22 AM
LOVED the audio examples at the beginning. They were a great way to show what can or can't happen in that time. This really hit home when I watched the test videos, where ten seconds felt even shorter! Great tips and examples, thanks!
Hendrik-Jan Francke | September 27, 2011 8:58 AM
Your audio example is superb!
Joel Hughes | September 27, 2011 10:12 AM
Great post & I agree with Alex - the audio example is superb.

Joel
Jessica | September 27, 2011 10:45 AM
Thanks for this article! I have always felt that cramming advertising into every bit of available whitespace makes understanding and navigation confusing. I have many customers who think it's essential to fill all "empty" space. I'm glad to have the 10-second statistic that I can share with them. Thank you!
AJ | September 27, 2011 4:26 PM
I agree with everyone, I really love the ten-second audio example.

But I do have a question. You said that the test process you're using isn't scientific, but I kind of feel like there should be a more scientific approach that we use before these others. What about heat-mapping or that kind of thing?
Christopher Butler | September 27, 2011 5:04 PM
Alex, Hendrik, and Joel: Thanks so much! I wanted to try to introduce a new kind of sensory experience into these articles. I'm glad you like it!

Jessica: I completely agree!

AJ: In general, I agree with you. I wish there was a one-size-fits-all, scientifically-reliable approach to evaluating whether a website is doing the right things. But if you think about it, that kind of evaluation is very, very broad. The "right" things are very specific to each website, and evaluating them comes down to asking a number of questions unique to each one as well.

Instead of one surefire approach to testing out a website, there are lots of different ones. All of them are valuable, none are good enough to stand alone. A few that come to mind are A/B testing, heatmapping (as you mentioned), focused user studies, and the more casual user tests that I've written about lately. The thing is, they're all tainted in some way by subjectivity. With A/B testing, you decide what is A and what is B. That's subjective. Even though the test may reveal something objective about the two options, the choice of options to compare is not objective. Focused user testing will always have some flaw: too-educated users, too-uneducated users, faulty equipment, not enough data, etc. Heatmapping is very "scientific," but it only tells you where users are looking. But we want to know more than that, don't we?

What I like about the simple usability studies I wrote about back in April is that they are focused around the unique goals of each website. The method of the procedure is standardized by its general structure and the equipment you use, but the test itself is customized every time. It's centered around questions that only make sense to the specific site being tested. With these tests, the time limit helps to focus them on one question: What are users able to perceive about your page in 10 seconds, and what ways does its design affect that?

This reminds me of a quote I love from David Kelly, founder of IDEO. He did a talk for Stanford's Entrepreneurial Thought Leader Speaker Series in which he said:
"You don't find anything out until you start showing it to people."
I think this serves as the perfect mantra for how website testing should work in the broader sense. I love casual usability studies because you learn things from the volunteers doing the tests, but you also learn how to ask the right questions by doing the testing, which turns into new kinds of tests.
finn | September 27, 2011 10:34 PM
Clever title! Nice read, too.
Scott | September 29, 2011 10:26 AM
Right on. This is great ammo to back up my reasoning with my clients. Thanks for the clearly and logically written article.
maximilon.baddeley | October 4, 2011 1:21 AM
Great job with the videos!

Perhaps next time you could start with the websites minimized, that way we get to see the site the same time as the testers do!
debraboudreau | October 8, 2011 9:28 AM
hi, ur post is great and im agree with u
Karen | October 9, 2011 1:27 PM
I totally agree and am a huge fan of minimalist design, but for sites (like mine) that survive by being ad supported, how on earth do you strike a balance? The examples of good design are just stripped of all ads, an unrealistic option for some of us... any suggestions?
Christopher Butler | October 16, 2011 7:24 PM
Finn Thanks!

Scott: Glad to hear this will be helpful to you. Fire away!

Max: That's not a bad idea. I'll try that out!

Debra: Thank u

Karen: That's a great question. I should say that this post was geared more toward those websites that don't rely upon advertising for support. Specifically, I really had in mind websites that are doing content marketing. One problem I have noticed is that even for those doing content marketing--where advertising wouldn't really make sense--the aesthetics or visual impression that advertisements make has an undue influence upon their thinking about how a "professional" website should look. In other words, some people think, often on a subconscious level, that advertising enhances the seriousness of a website. It's too bad that's often not the case, if not the opposite!

So, in cases like your's, I'd recommend finding a way to include advertisements that has the least distraction potential. There are a couple of ways to do this. One would be to limit and standardize the real estate--so that ads are always on the right, beneath any other site-specific content widgets, for example, but never in the content column or on the left. Another might be to limit the color scheme and/or type sizes of the ads you display, so that the text of ads never dominates the text of headlines on the page. That's probably much harder to do, especially to the degree that you are depending upon the advertising. The balance of power/influence when it comes to advertising subsidized publishing is key. The New York Times website can definitely call the shots and levy strict guidelines on their advertising. A smalltime website, probably not.

I hope that's helpful. I might have other ideas if I was able to take a look at your site. What's the URL?

↑ top