Websites: Design vs. Style—An Interview With Charles Cooper, The Rockley Group

So what’s the difference?

At its most elemental, style is the surface look; the font choice, color, the amount of white space, while design reflects the underlying decisions used to achieve the best way of getting your point (or information) across. I know that this distinction is not always adhered to and a brief discussion with some visual designers will show this. I’ve been party to this discussion in many businesses and you can see it played out on many boards and forums where layout and design are discussed. There are endless discussions regarding point size, kerning, leading and other typographic requirements, all they while the issue of the underlying design is ignored.

It matters because your message is best understood when both style and design work in harmony.

When I refer to design in this way, I’m talking about the underlying structure of the page that helps you to navigate the information you see, without being aware of it. I’m talking about the information architecture that defines how the components on the page relate to each other, and how the navigation works. I’m talking about organizing the different types of information so that it makes sense, and so that the information flows from page to page in a logical and efficient manner. I’m talking about designing the website.

When I’m talking about style, I’m referring to the ‘look and feel’. Probably the best online example of this can be found on the CSS Zen Garden page. It’s a location dedicated to showing off what Cascading Style Sheets (CSS) can do, and how they can separate content from formatting. It also separates design from style. With one click of a button, you can display the same content filtered through different style sheets. The underlying design/structure remains the same, but the style changes radically.

It’s important, because if your content is independent from its style you can store and reuse content in different locations and deliver it on different platforms (e.g. computer, , PDA, Smartphone, etc.) without worrying about how it looks. The platform tools will ensure it looks good on the platform.

You can have a site that looks good (that is, it’s visually pleasing), but if the underlying structure is poor, it will lack coherence and will be harder to use. If both the underlying structure and look and feel are good, the website will give you the best of both worlds.

TCW: That’s what we thought you’d say. Style and design are indeed different, yet related, concepts. We think one additional concept that is also yet to be fully understood is the impact of the delivery method on the way content is perceived. Does the method of publishing (traditional web, mobile, printed paper, ‘online paper’, i.e. PDF) affect the way the information is understood by those who need it?

CC: The method of delivering the information has a huge effect on the way we perceive it. This first thing to consider is the way we interact with it. How we deliver content depends on many factors, including market, when and where the content will be consumer, the age of the reader, and personal preferences. Many people are more comfortable, for instance, reading printed documents, rather than online ones.

There are simple factors, such as the ‘legibility gap’ between paper and online. In most cases, it’s easier to read a printed document because of the better typefaces, and how supplementary information can be displayed. For example, on a paper document, it’s easy to have supplemental information located in a sidebar located near the primary information. This is harder to do with information displayed on a small PDA or mobile screen. Both legibility and layout suffer on a screen the size of a playing card.

But there are other issues to deal with. Some of it goes back to the design/style question a few minutes ago. Say you’re looking for information about Usability, and find a PDF document on the web. At first glance, it appears to be just what you’re looking for, but because it’s a PDF, you have to zoom in to read the document, especially those bits that are in italic, and then you lose the information that’s located in the sidebar near the top of the page, so you zoom out again to look at that again, then you have to go to the next page, and because you’re working at a hotel with dodgy wireless it takes forever to get the next page, and now you’ve lost your train of thought… you get the point, I hope. Most likely, the PDF file you’re looking at has been formatted for paper, not the web, and you’re suffering for it.

Take that same document and print it and you’ll find that your comprehension goes way up and you can scan it much faster. There are drawbacks. The electronic version can be searched almost instantly and you can extract information from it to add to a report (with attribution, of course) without having to type it in.

On the other hand if that same document had been designed for viewing on the web, you could have the best of both worlds, easy visual accessibility and electronic access.

Now think about reading that same ‘designed for print’ PDF on a PDA, and imagine the problems you’re going to be faced with….

TCW: That’s some useful information, Charles, Now, let’s move to a personal preference question. Of all the various ‘features’ available to website designers, what feature do you hate to see on a website?

CC: I hate to see a splash screen. Usually, the only good part is the tiny little link that says, ‘click here to skip the introduction’. The ones I really hate are those that don’t give me the option of skipping it and going directly to the rest of the site.

TCW: We’re fairly sure we know the answer to this question, but we’re interested in why you hate introduction pages? Doesn’t every decent piece of content deserve a proper introduction?

CC: Yes it does, but the key is, as you said, a ‘proper introduction’. In too many cases, the opening screen doesn’t provide any more information than a static 2k jpg image file would have. Despite the fact that various forms of high speed access are widely available, not everyone has access to them. It’s too easy to forget that.

Also, people on the web are not patient people. If I have to click an image to get past it to the information I want to see, I’m not a happy camper.

I love Jared Spool’s comparison of a splash page to bringing a mime to a grocery store. He speaks of having the mime step in front of each shopper and try to mime to them the location of the bread, or the freshness of the produce. Unless you can step away from the mime and go and do your business (the real life equivalent of pressing ‘skip the intro’) Jared figures that the most likely response of most shoppers would be to punch the mime.

All in all, not a good introduction to a website.

TCW: In the past, you have said that you don’t like animations of various types. Of course, the most obvious reason to dislike animation is when it is provided for gratuitous purposes. What are some of the main reasons why animation might be the best communication solution?

CC: There are a lot of reasons that a good animation might be the best solution. But, it has to be in a case where there is a need for it, and not just because ‘it’s neat’.

Take the case were a consumer is attempting to install a SIM card in a mobile phone. To explain how to do this using static diagrams and text might take half a dozen images, because the reader has to take the back off the phone, remove the battery, orient the SIM card in a particular manner, put the SIM in place locking any clips or hold-downs that the phone has, then replace the battery and back of the phone.

A simple and elegant animation would be able to show how to do this, just as well, if not better than the individual steps. On the other hand, animations don’t work all that well in a printed manual, so the individual images might still be required in some situations.

TCW: Over the past few years, high-speed broadband Internet access has become very common. This makes it possible for designers to create larger, more robust, visual images–especially animations. Do you really hate big animations? If so, why?

CC: I don’t really hate big animations, but I don’t see many that are really useful. Once again, it depends on the audience, their needs, the capabilities of their display device, and their web connection.

The most important questions are ‘what does my reader need?’ and ‘will an animation be the best method of conveying that information?’. If I’m providing a large animation that carries no content or information how does it help my reader/customer/user? Why am I providing the animation? Is it for them, or for me?

If the animation improves the user experience, and by that I mean answering their question, or helping them to solve their problem, then it’s probably a good idea. Otherwise, probably not.

Also, speaking now as a user – please let me control the animation.

TCW: Okay, we understand that line of thinking. So, do you feel the same about using sound on a website?

CC: Sound can be good, or really bad, depending on the site or intended audience. If the sound supports the content, fine.

If you feel sure that sound is a good option, then go for it. But make sure you do it right, and remember to give your audience the ability to turn down or mute the sound.

TCW: It seems that these last few questions about animation, sound, and file size is really related to whether a website is something that attracts visitors or chases them away. In your experience, what are some of the most useful things a website developer can do to attract visitors? And, what are some things website designers should avoid doing because they tend to drive site visitors away?

CC: Once again, know your audience. Ray Davies had it right ‘Give the people what they want’. It sounds trite, but unless you have information (music, artwork, explanations) that they want they won’t pay much attention to what you have to say. Once that’s in place there are a few things you can do to keep visitors.

• Make the content easy to scan
• Put the most important content up near the top where people can find it
• Use descriptive titles
• Don’t annoy them with sound, video or animation that doesn’t help them
• If you need rich media, give them the ability to control it

TCW: We know you think standards are an integral part of any well-planned solution. Standards provide all sorts of benefits and help prevent us from creating solutions that rely on a certain platform or technology. But, is it ever worthwhile to do something that is not standard, unusual even? If so, when?

CC: There are standards and then there are standards. Almost all websites have the navigation across the top, or down the left side of the screen. There’s research that shows that the location of the ‘navigation bar’ doesn’t have a lot of relevance in terms of usability. As long as users can quickly identify the navigation bar as a navigation tool, most people don’t have a problem with the location.

Mind you, this can feel like a big change, so why not try it? Just make sure that it’s recognizable and in a consistent location on your site, and users will be happy.

TCW: You’ve talked about making the page easy to scan, can you talk more about that?

CC: Sure. I’ve written a bit about it recently on the Rockley Blog, but I’ll be glad to spend a moment on it.

Research has shown over and over again that when we first come upon a web page, most of us don’t ‘read’ it, we scan it instead, looking for clues and bits of information that we grab onto and use to decide if we’re actually going to invest the time and effort required to actually read the page.  If we can scan the page and quickly extract the information we need, then we’re happy, and we’ll read the page. If we see that the information we want isn’t there we can click away, but still be happy, because we didn’t get the feeling that the writer was wasting our time. We might note the page or bookmark it for future use, because it did have some good information, but not what we wanted right now. Either way, the writers and or designers have left a good impression.

If, as a visitor to the site, I can’t quickly figure out if the site has the information I want, I’m likely to become frustrated – and with the rest of the internet just a click away, I’m not going to tax my poor, tired brain searching for information. One click, and I’m gone.

If we break the information on the page into easy to scan chunks, set them apart with easily definable headers or titles, it becomes much easier to find the clues the readers need to orient themselves.

TCW: Technology alone cannot solve all of our challenges. We both know that ‘Content is King’. But, it appears there are still many writers that have yet to grasp the difference between ‘good writing’ and ‘good writing for the web’. So, what’s the difference?

CC: There are a lot of similarities, but there are also differences. Earlier I said that if I can’t scan a page and know almost instantly if I want to actually read it I’ll probably click away and look somewhere else.

The same effect holds true for most things. If I can’t find the information I’m looking for in a book, I’ll put the book down, and look for another. However, finding the book was probably harder than finding the website. I had to go to a bookstore or library, find the book in a catalogue, find the shelf the book was on, take it down, read through the TOC or index, then flip to the page I think might have the information I want. Only now do I have a chance to ‘scan the page’.  Because I have more invested in the book than the web page, I’m more likely to spend more time deciding if I want to read it or not.

This means that the print version can be structured in a more open, less ‘information dense’ manner.

Still, I have to be able to find the information I want, or I’ll look somewhere else.

In general, when writing for the web you have to be more direct and focused than writing for paper.

TCW: We see rich media and mobile content as some of the highest growth opportunity areas over the next few years. User expectations are changing based on innovations like the Apple iPhone, which has dramatically changed the way that humans interact with content on a mobile device. The mobile phone industry will never be the same again as a result. But, what most folks don’t realize is that the entire Apple model is about content reuse and syndication. The value Apple brings to the mobile communication party is ease-of-use and intuitive user interface.

What does The Rockley Group think about rich media and mobile content? Are we indeed at the beginning of a big shift toward the development of more and more rich media?

CC: First, I agree that the proliferation of high speed networks have greatly improved connectivity and enhanced the adoption of rich media “over the air” as it were. Because the high speed connections are now broadly available we expect a significant increase in rich media.

There are limitations – the cost of data over the web is still a big problem. People with new phones and similar devices can get a shock when their first month’s bill comes in. Or worse, if they signed up and had a discounted rate for a few months, and have become accustomed to inexpensive data charges, they may get a nasty shock when the first ‘full fare’ bill arrives on the doorstep.

Also, high speed is relative. It’s not as fast as your laptop or desktop, and some people might be surprised by that. And, of course, there are limitations forced on the content by the size and capabilities of the mobile devices – a small screen is still small, no matter how clever the interface has become. Rich media and related content will truly come into it’s own when the providers of the content take both the strengths and limitations of mobile devices into account.

And regarding the iPhone, it has certainly changed the way a tiny percentage of people interact with content on a mobile device, we’ll have to see how it turns out.

TCW: Do you think mobile devices finally finding their home in business, thanks to their success in the consumer market? What do you think the future holds for mobile content? What should we expect to see in the future?

CC: Actually, I think that mobile devices have been leading the consumer side for years.

Advances in technology and therefore cost and usability have made it possible for mobile devices to trickle down to the consumer market. And no, I’m not kidding. Who had car phones in the 70’s? Business people. Who had beepers and then full text pagers? Business people. Who had the first mobile phones? Business people. Who had the first Blackberries? Business people, by and large, because home users couldn’t afford them.

What consumer devices have done is fostered widespread acceptance of mobile devices, and an expectation on the business side that they should be both powerful and easy to use, something for example that a 1970’s mobile phone was not!

TCW: Thanks for sharing your knowledge and experience with our readers, Charles. We really appreciate it.

CC: Thanks, Scott. I’m glad we found the time to chat about the web and information design. If your readers are interested, The Rockley Group publishes a blog on which we discuss content issues of interest to your readers. They can subscribe here (it’s free).