Follow me on Twitter!

Dont Trust This Guy why not take my word for it? A blog by Jim Jeffers

Content is Effective Web Design

Ever hear someone say “don’t judge a book by its cover” before? Well, they’re absolutely right – especially when it comes to designing for the web. In contrast to a book, designing for the web raises a much more complex dilemma: we don’t have the reader’s undivided attention and we’re often telling more than one story. We’re addressing several different readers with different needs through the same medium.

In reality, web designers have they’re work cut out for them. It’s not as simple as creating a pretty template and plugging some content into it. The design itself is an outcome of the content. To quote someone else:

We’re essentially creating a framework for communication and messaging.

Our work in web design is all about the content. The visual design is intended to effectively deliver and support our content. So to judge the quality of a website, you really have to judge it by it’s content. Next time you critique a website try to answer these three questions:

  • Who is this website serving?
  • Why are they coming here? (specifically, what is it they need to do?)
  • How does the site inform the reader or guide them through a process?

Who is your website serving?

A lot of our upfront design research is dedicated towards understanding our users and segmenting them by the types of tasks they need to accomplish so that we can derive mental models and personas. One key benefit of doing such research is so that we can get the right content to the people who matter.

Why are readers coming to your site?

Remember that we goto websites for a reason. It could be to learn something, such as reading an article, to achieve something, such as checking my facebook inbox, or simply to be entertained, such as playing an online game. No matter what, we visit web sites for one reason or another. We need to write our content and structure our design to facilitate these motivations. Your readers came to your site to do something; get to the point.

How is your website informing its readers?

It’s still all too common to see brochureware websites. These sites are organization centric and are chock full of information that tends to be informative but irrelevant to the user and their task. For example, if you’re in retail chances are most people coming to your site because they want to buy something or find out how to get to your store. They probably don’t care about staff policies, or how the business was founded twenty years ago, etc..

Let’s use the copy for a staffing company as an example – a good approach would be to write to the user directly in a tone like this: “You can get hired today find out how!” not “Welcome to our website. We’ve been helping professional candidates get the positions they deserved for twenty years!”. One version engages the reader directly. The other simply builds up the company. To learn more about writing user centric task orientated copy I recommend reading Gerry McGovern’s comprehensive guide: Killer Web Content

Taking Content and Copy Seriously

Jakob Nielsen doesn’t dance around the topic:

Text is a UI.

Nielsen says that it’s all too common for design teams to only consider full fledged GUI’s as interaction design. He points out that email and even the URLs your website use are forms of interaction and need appropriate amounts of attention. He also states that the shorter your text is, the more important it is to design text for usability.

Think about short text in your design. Are the terms you’re using to describe each section in your primary navigation correct? It’s really important you get this stuff right.

The guys over at 37 signals have been saying this for years now:

Copywriting is interface design. Great Interfaces Are Written. If you think every pixel matters then you also need to think every letter matters.

Designers and clients can bicker all they want about the color, drop shadow, and font-face used on a button. But more important than all of those things, even its placement/positioning, is what the label on that button says. If a user notices and reads your call to action but doesn’t understand what it means than all of that effort was pointless. This is not to discount art direction, visual hierarchy, and aesthetics, but rather to put them in their place. You need to know what you’re saying before you get into any of those details.

“It looks good, but what did it say?”, that’s what Jamie Dihiansan asks when designing the marketing sites for 37 signals. Dihiansan says “You have to make your site memorable. Your site has to speak clearly.” If you don’t your project was nothing more than an exercise in aesthetic awaiting to be succeeded by more modern implementations in the fashionable world of commercial visual design.

Copy Alters the Entire User Experience

Bill DeRouchey does an excellent job pointing out that even the tone of the content can make a big difference in the overall user experience of a web site. We can write content in a way that it strikes us, or even throws us off. The point of the story is that you can create a richer and more powerful experience by writing your content in a way that gives your site some personality. If you have some time I strongly encourage you to watch Bill’s talk below:

7 Responses to This Article.

  1. Chuck Reynolds Says:

    Nice post (again)… typography is always the forgotten element in design… the best typographic designs are usually the minimalistic sites that lack in graphic design… it’s somewhat rare to see a lot of thought put into graphic design AND type design. I’d rather the latter and be able to read it easier.

  2. Jim Jeffers Says:

    @Chuck Reynolds:

    it’s somewhat rare to see a lot of thought put into graphic design AND type design.

    Yes but what I’m talking about is the actual terminology used. It’s not how that type is presented but what it says that needs to be thought out and tested first and foremost. Typography and visual hierarchy come later.

  3. Matt Gist Says:

    Jim, you just don’t post enough. Excellent post.I appreciate this because it’s a nice, concise group of references/pointers. Sometimes it can be difficult to drum up an emotional connection for why content is necessary to achieving an end goal within design. Your post is a good resource for collaboration and clients alike in the future.

    Not to be a downer, but it’s wise to recognize that some aspects of Content Creation is not easy. I think many designers fool themselves into believing they can create the content. What many designers may fail to see is that they may create content within a vacuum so that they may design for their content in the same vacuum; similar to a designer with limited coding ability designing for his/her limit. If it’s necessary, there are people who really specialize in the Content Creation side of things and it’s not bad to seek one of those people out. In the end, Content that works well on it’s own is incredibly freeing and inspiring to design.

  4. Jim Jeffers Says:

    @Matt Gist:

    If it’s necessary, there are people who really specialize in the Content Creation side of things and it’s not bad to seek one of those people out.

    Yes in fact the first article I quoted in this post, “The Content Conundrum“, goes into depth on just that. You should give it a read!

  5. Sandra Murphy Says:

    Well I never. I’m a keen designer myself.

  6. drew s levin Says:

    edicated towards understanding our users and segmenting them by the types of tasks they need to accomplish so that we can derive mental models and personas. One key beneNice post, thanks.

  7. Matt Gist Says:

    @Jim Jeffers:

    Yes but what I’m talking about is the actual terminology used. It’s not how that type is presented but what it says that needs to be thought out and tested first and foremost. Typography and visual hierarchy come later.

    You can delete this, I was figuring out how your respond tool worked… I forgot how the multiple nesting looks.Hope you’re well d00d.

Leave a Reply

Meta Information

This post was filed under design and tagged with: , , , .

This Post as a Feed

The content of this post and it's comments can be subscribed to as an RSS feed.

DontTrustThisGuy.com and all contents copyright 2003-2009 by Jim Jeffers, unless otherwise noted.Written in valid XHTML and a participant of XFN while being powered by WordPress
Contents under Creative Commons License. Visual design, layout and Cascading Style Sheets may not be reused without permission.
Entries (RSS) and Comments (RSS)