The Role Of Design In The Kingdom Of Content

Advertisement

If content sits at the top of the food chain, why do we spend so much time talking about the finer points of design? Every day we debate, experiment with and discuss topics that easily fall into the category of aesthetics, enhanced functionality and layout; in fact, relatively rarely do we talk about content. Nevertheless, even though we should concede that content is king in this realm, this doesn’t mean that design should be devalued.

It may seem logical that the user experience lives and dies by how the user relates on an emotional level to the content on a website. But this is not necessarily the case. From a design perspective, our job is to maximize the value of every visitor, whether they love the content or hate it. The role of a UX designer is not always to make everyone feel all warm and fuzzy inside. A rich Web experience could include the emotion of happiness, humor, discontent, sadness, anger or enlightenment. A well-designed website enables us to attribute our emotion to its source and connect us to that environment through a range of senses. A UX designer should understand why and how to utilize the principles and techniques they have learned to support the website’s precious content.

Justifying User Experience Design

Investing in UX design as an amplifier of good content is not always an easy process. In many industries, a product that fills a demand and that works as it should is good enough. Most of us don’t care how an ink pen or a computer monitor makes us feel, as long as it works. A large portion of the Web still reflects this sentiment, as do clients and project managers who haven’t been educated in the value of UX.

A website is a much more involved product than an ink pen and calls for a different measurement of user satisfaction. A product that merely meets demand and works correctly does not suit a medium that is so highly interactive and saturated. As designers, our task sometimes is to convince other parties of the value of building a user’s personal engagement with the website’s content. Fortunately, we have examples of companies that have done UX right and that have the success to show for it.

As a geek who enjoys building computers, I look to Newegg as a good example of a company that has played to its strengths to deliver a superior user experience. In its early days, Newegg’s fair prices and lightning-fast delivery of computer components made it the place to shop for IT people. This was all great, but the real kicker was that users who loved to share product strengths and weaknesses with each other could do it all on Newegg’s website.

This turned out to be a fantastic benefit for new users, who were inclined to trust the experience and suggestions of people they regarded as peers. As a result, Newegg built a massive army of geeks who generated content and provided an extremely valuable experience to its users. If you had a device or component that was functioning oddly or not at all, chances are that someone had shared the cause and maybe even a solution in a Newegg review.

Newegg

Newegg acted on this opportunity the right way by using design to highlight its most valuable content. While its design may not be the slickest or most modern, Newegg provides a great experience and has high user satisfaction. Ratings and reviews by peers have become a driving force in Newegg’s design and populate nearly every page. As the design has evolved over the years, product reviews have floated to the surface of nearly every page, and the system for contributing reviews has grown in depth and functionality as well. Newegg even took this to the next level with a recent nationwide ad campaign and design. All of this came about because Newegg identified which of its content made for a strong user experience and built on it, which should be done in every Web project.

Identifying the content that makes you stand out is only the first piece of this puzzle. What we really want to explore is how to take everything we have learned about color theory, lines, shapes and visual movement and apply it to our content in a way that doesn’t just decorate it or even make it pop on the page, but rather that supports the conversion of a goal or delivery of a message. Much like how the primary function of petals on a flower is to attract insects to pollinate, good design ensures that your website will thrive. All of that great design talent needs to be applied not only to the content but to the layer before and after it as well.

The Delicious Design Sandwich

With virtually every website, good UX design can be sectioned into three parts or events: introduction, consumption and reaction. Content is at the core, the meat of what the user is looking for, and on both sides of the content are events that are driven by a well-executed design.

User Introduction

The Web is a world of first impressions, and quick ones at that. Users form an opinion of a website within the first few seconds of loading it. This means that the colors, the layout and the presentation of headings are all evaluated before any content is actually absorbed. Users are inclined to scan content until they zero in on something that piques their interest. Regardless of what your content actually says, the design around it controls what the users see first and how their eyes move across the sections of the page.

In addition to searching for interesting information, users will also be determining how credible this resource is. Despite being constantly taught that we shouldn’t judge a book by its cover, all of us are susceptible to trusting a resource based on our familiarity with it, what our peers think of it and the time and money that we estimate was put into its construction.

Living Social takes advantage of this in its design in multiple ways. A quick scan of the main page after the user has entered an email address and location reveals several techniques that have been implemented to elicit a reaction from the user.

Living Social

Perhaps most striking is the background image. In every city that Living Social serves, a background picture loads that the visitor can relate to. I immediately connected with this website because I did a double-take at the background image and realized that I pass by this area all the time: it’s just down the road from me!

Living Social has also done the little things right. A clear hierarchy is established on the page through the headings and content modules; the call to action is the most prominent element; and the interactions oriented around engagement are easily accessible. The counters that tell you how many people have bought the deal and how much time you have left generate sufficient peer pressure.

Living Social

When all is said and done, Living Social has invested in the introduction side of its design, which makes a lot of sense given its content. Living Social and the other daily deal websites thrive on a high volume of quick visits, which means they often live and die on first impressions. The heavy emphasis on the impression portion of this design begins with the content. Instead of fitting content into a design concept, Living Social has wrapped an appropriate design around the content that it wants to feature. But we aren’t done there.

Content Consumption

Even in the process of consuming content that we’ve proposed, design plays a huge role. The crucial rules of typography control the experience that users have when reading articles. The mood of images and video can vary drastically based on their aesthetic setting. If your primary content is user-generated, then the ability of users to interact with the website and each other will be driven by the interface you’ve designed.

More than anything else, content is an opportunity to set the tone of the website. We have all witnessed the untold damage that is done when content that should have a professional tone is set in Comic Sans. The font face, size and color can do an amazing job of controlling how your website says something that leaves an impression on users, which leads to the final piece of our sandwich. Along these lines, the way you frame entire portions of the website gives the audience clues as to what their emotional reaction should be.

We see this naturally develop with websites created by designers for their own peers. Portfolios, design-related apps, and websites for networks and conferences are all designed for tone. Of course, getting too extravagant in an attempt to impress is the opposite of what we are trying to achieve here. However, in the case of a conference about HTML and CSS, a website that experiments with the edges of what’s possible with HTML and CSS is an appropriate setting for the content.

The Combine

Like many websites for technology and design conferences, The Combine in Bloomington, Indiana, is highly design-driven. In addition to the slick HTML and CSS that will resonate with the professionals being targeted, the aesthetics intentionally reflect the small-town atmosphere of Bloomington. The same features that distinguish the location of this conference also encourage users to identify with the design.

User Reaction

This may be the most understated design-driven activity on a website, but it carries huge value. How the user responds to your content is pivotal to the website’s success. These days, merely delivering content is not enough. The Web has a wealth of information and options. In order for a website to enjoy any success, it must take advantage of referrals, links and maybe a bit of buzz on social networks. If we want to stand out on the Web, our users need to share our content with friends or contribute their own thoughts, reactions and content.

YouTube serves as a practical example of building an experience around the user’s reaction. YouTube kickstarted the concept of viral videos, but getting there required that the website be designed around the content itself. We all know that a massive amount of content is uploaded to YouTube every day, but the degree to which a video goes viral depends on how encouraged the user feels and how easily they are able to share or contribute to the experience.

YouTube

It doesn’t take a trained eye to see this in action all over any given YouTube page. Suggested and related videos are always available, along with the option to share a video on your favorite social network or embed it anywhere on the Web. Of course, the design was not made to look good on its own and then this functionality shoehorned in. Again, the emphasis is on the content, and the design elements that result in the user’s reaction are all rooted in sharing or exploring that content.

In a world driven by likes, tags, tweets, shares and votes, the follow-through that a website and its content facilitates becomes a massive factor in its success or failure. A user who visits a website, views the content and then leaves generates little value for the business. For this reason, we see blog articles sprinkled and even littered with related content, suggested videos that come up after you watch a clip, and quick and easy share and save buttons everywhere. The follow-through on each of these actions is highly design-driven. The color, shape, size and location of links and buttons determine whether a visitor sees them quickly or not. But, of course, we can’t expect everyone to play the role that we define for them…

Designing For An Experience

As important a role as design plays in the perception of and reaction to your content, people still argue that a user experience cannot truly be designed. Of course, the user ultimately decides how they engage with any design. If the goal of a design is to convert every single user into a customer, then failure is the only outcome. We can, however, design an experience that connects immediately with a target audience, delivers information with a clear tone and purpose, and encourages a response.

We want to design an experience for users who are willing to buy into it. Users come to your website most likely because they already have some interest in digging into the content, which means they are willing to play into the experience that you have designed. If a user stumbles on the website by mistake, then taking them all the way to the reaction stage of the experience becomes more of a bonus than a goal.

Different techniques for driving engagement with content can be found across the Web. If you’ve been to the blog xheight lately, you may have noticed its effort to prioritize the content in its posts. In addition to the minimalist design, the designer further isolates the content by fading elements out of view after your cursor has been idle for a few moments, leaving the article you are reading as the only element on the page.

X Height Blog Before

X Height Blog After

The jury is still out on whether this makes for a better or more distracting reading experience, but this design decision clearly centers on the content that the designer wants to deliver.

A different technique is apparent on the Livestrong website. When the user hits the browser’s address bar or tries to click away after reading an article, a modal window with related content pops up. It’s interesting that the modal window is enabled only in the blog section of Livestrong, and not by mistake. With a website this rich in content and from so recognizable a brand, the designers could assume that the majority of traffic to these articles would come from search engines. The goal here is to keep users from jumping back to Google for more content and to have them continue engaging with the content here.

Livestrong
Editor’s note: The Live Strong site no longer has this feature since it seems to have been modified right before we published this article.

Keep Designing

Now as much as ever, companies are recognizing the value that good design and a solid user experience can bring to them. UX design is about developing a road map for the user, encouraging certain actions, and developing a user base that wants to engage with your content.

The key to driving this engagement is to ensure that we value design in the right way, not simply as a template, theme or color scheme but as a support system for key content. We can use design to make a website unique and more memorable. We do this by laying the foundation of a good impression, enabling smooth and meaningful consumption, and encouraging engagement with the content. All three of these areas are opportunities to drive a user experience that is in harmony with our content.

Additional Resources

(al)

↑ Back to top

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

  1. 1

    Good post.

    I’m curious to know how you ‘activate’ the mentioned technique on the Livestrong site. “When the user hits the browser’s address bar or tries to click away after reading an article, a modal window with related content pops up.”

    I’m trying to get to see the popup-technique you mention, clicking address bar, by clicking back, etc. but I can’t get it to show.
    Thanks.

    0
    • 2

      The modal will only display if you are on an article or blog post and click outside of the page area. This is why I kind of like this little trick. The goal is to capture attention of people who are going to manually make a related search. Instead of the user going back to google or a different web site to get more information the Livestrong site suggests related content for them.

      0
      • 3

        Popping modals like that is quite possibly the most annoying user experience you could ever inflict upon your site visitors.

        You may think you are capturing their attention, but I’d bet dollars to donuts that all you are really doing is annoying them and creating ill will.

        12
        • 4

          I agree. I’d wager they removed that functionality because it was likely so obnoxious. It’s an automatic no-go for me when a site starts pushing pop-ups/modals.

          3
    • 5

      I’m wondering if they’ve got some A/B Testing going on there? Could be they determined quickly some folks have quite the disdain for disruptive modals.

      0
  2. 6

    I see no popups.

    BTW, livestrong (and some of your other exemples) is an UX nightmare :

    - 1st rule of UX : your website must load fast. Livestrong or Livingsocial are very badly optimized. Large background must be avoided or defered

    - 2nd rule of UX : do not strip your user choice. No targer blank (everywhere on Livestrong), no stupid popup)

    - 3rd rule of UX : streamline the navigation. No bloated nav like livestrong.

    My advice : do not follow random so called “UX expert” and look at Nielsen’s studies : a FAST website is always better than a beautiful one.

    -8
  3. 7

    Jason, I don’t think I would disagree with anything you have said—although, like others, I might perhaps have differing opinions about your examples. Your article does raise an ongoing frustration and disappointment however.

    As someone old enough to have done his training and gained by far the most of his experience in the pre-internet days of print design I would ask why web designers appear to insist on almost perpetually re-inventing the wheel.

    Yes the technology behind (now-not-so) new media is very different and as such imposes its limitations and offers its own opportunities. Yes, the means of delivery is very different and as such . . . etc. etc. However all of that notwithstanding the basic principles of good design and good typography remain unchanged. Please, (and I address this to all web-designers, not just you Jason) don’t keep on trying to re-invent that which has been developed-tried-and-tested for decades. Have a good look at what designers were doing pre-internet, learn, and adapt.

    4
  4. 8

    I feel as if the author thinks that the content and design are in conflict, in battle, in zero-sum game.

    That is not the case.

    The content is what the user came to the website for. This can be textual content, video, pictures, some service layer thing, etc.

    Design is here to make that content available. Everything we do, not just in design, but in HTML/CSS/JS code as well as backend programming (as well as server infrastructure) serves to make that content accessible. Clever information architecture? Makes content accessible. Thoughtful graphics? Makes content accessible. Website opens fast? Makes content accessible. Website displays properly in all (most) browsers? Makes content accessible. Servers do not fail when users come? Makes content accessible. Copywriting? Makes content accessible. Typography? Makes content accessible. Etc…

    Content is the king. Design is a channel through which users see the king.

    3
    • 9

      We are more on the same page here than you think. All of your points are correct and my goal with this article was to support the arguments that you’ve made here.

      The role of design is to support and improve the content, not be in conflict with it

      0
  5. 10

    No mention of craigslist?! Possibly the king of the no-design, all content website.

    2
    • 11

      In an article discussing methods for using design to support a content structure the king of the no-design doesn’t serve as the best example. Not to mention craigslist is cited by many articles and wouldn’t raise any new points.

      I stuck with the YouTube example because I feel as though YouTube was an origin for content that drives action and served to bring the importance of the method to light in the design community.

      2
  6. 12

    Mark "Chief Alchemist" Simchock

    October 25, 2011 5:29 pm

    Am I the only one who’s a bit “confused” by the fact that design and UX are used interchangeably?

    I’d like to add that there’s no direct mention of user expectations, nor anything about using analytics to refine the interaction based on the data. What about how medium (e.g., large screen vs small) effects consumption?

    I appreciate the ideas and concepts Jason is trying to communicate but I honestly have to say I’m a bit disappointed by the results.

    Maybe it’s just me?

    1
  7. 13

    Jason–a brilliant post! Well done and thank you.
    Inspired my own post on it.
    http://jer979.com/igniting-the-revolution/contentmarketing2/

    0
  8. 14

    Better to compare the website content for more websites using any web galleries
    go to http://uicart.com and check the gallery menu for various web ui elements

    0
  9. 15

    content just like food…the important things is nutrient..but the container affects the appetite, feel and love

    0
  10. 16

    Design and Content, both makes a better team. Just like any other design outside, design vs functionality especially Apple’s product works wonder together.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top