From 1995:
An edited version of this now appears in the Dutch book, Website Graphics Now
Listen up, this one’s a no-brainer. Building a successful website is as simple as an Easy-Bake Oven.™ Although it’s a lot of hard work, it isn’t very difficult to understand. The directions are clear.
Here’s the list of ingredients-and there are only six:
Content
Information Design
Performance
Compatibility
Visual Design
Interaction Design
Each of these ingredients is important and not one can be left out. Would you leave out sugar in a cake recipe? Would you bake bread without yeast? Of course not, but that’s what 95% of the websites on the Internet are doing-especially the commercial sites where it is even more important. Most sites serve up pages like half-baked cookies without everything necessary to make them delicious. They usually get the sugar in there but they often forget even more essential elements like flour and water, making their servings hard to swallow and even more difficult to stomach.
A successful website might be able to get by with only five of these ingredients-if they are exceptionally strong and well-crafted-but you can’t expect a site to attract diners unless all six courses are served, especially as the competition in the market heats up.
Content
OK, for the first ingredient, we’ll need heaps of content-and, like caviar, only the best content will do. Anything less is just fish eggs. High-quality, interesting content can go a long way. You don’t even need that much if it is good, but this is critical to understand and practice. Just copying text and images onto a server and making it available isn’t enough. Most people won’t stick around to finish a meal that isn’t tasty in the beginning. The sites that have good content are the ones that make you laugh, think, get upset, get motivated, become informed, or, most importantly, come back for more.
Many sites can’t miss with content. For example, the Sundance Film Festival website has some of the most interesting, beautiful, and innovative film footage on the Net. Unfortunately, it’s about the only course they serve. There isn’t anything to do there but download film clips that leave you thirsting for something more. Now, whetting people’s appetite is important, but stimulating their hunger without feeding them isn’t morally defensible-nor good business.
Freshness Counts
When you make a salad, how fresh are the ingredients? Do you use week-old lettuce? Month-old tomatoes? Ancient cucumbers? Why then do people assume that websurfers want to devour out-of-date content that’s stale and uninteresting. Granted, some content requires some age, and can last forever while being just as appealing as when it is fresh. Dishes like sauerkraut, lutefisk, Roquefort, and fine red wines exist and find an audience, but they are by far the minority of dishes and often require special palettes and experience to appreciate them. Unless you own content like Shakespeare, Orwell, or Zen proverbs (and even these pass into the public domain), don’t count on making a living off tired material. Resign yourself to preparing fresh content daily or weekly-even hourly if appropriate.
So Does Quality
Sites that have the hardest time with content are those that aren’t in the content business. Most companies, for example don’t have Disney characters tied to their products. Most don’t even deal with the public. To compensate, they hire marketeers to dream up slick promotions and fancify simple messages, often creating freakish or silly content that is wholly inappropriate. Don’t put up your marketing drivel and be satisfied that you’ve filled your site with content. What you’ve done is pack your site with empty filler instead of nutritious content.
If you aren’t a content king, don’t try to be. Use the best of what you have and concentrate on other attributes (hint: pass directly to the section in this paper describing Interactivity and collect an extra 2 million hits).
Publishers often chant the mantra “Content is King” with the fervor of a religious convert. They speak to each other at conventions about how they have more expertise about content than anyone else in the industry-and they are correct. However, content alone is not enough and most of these publishers are so busy convincing themselves that they are the key to successful interactive media, that they can see no further than putting their existing content on the Net without the slightest change to address the medium. Newspapers have shown themselves to be particularly adept at this as they put their news on the Web and can’t figure out why they can’t get people to register for their site, let alone subscribe and pay money. What they are forgetting is that the term “Interactive Media” starts with the word “Interactive” and that they know less than most about creating interactive experiences.
You Can’t Please All of the People All of the Time
Lastly, too many sites try to address everyone by serving up a bland blend of content. By trying to be “ubiquitous” or “objective,” they end-up creating a site with no personality and no flavor, that ultimately appeals to noone. Objectivity does not exist. Even a dictionary is subjective. Your voice, your point of view, is exactly why people will come to your site.
To summarize:
• Less is often more (“Tastes great, less filling”)
• More is often more (especially if it’s high-quality and appropriate)
• Concentrate on what you’ve got and don’t try to fancify weak material (Frosted Rice Cakes! Yummm!)
• Be sure that your site has a voice.
Information Design
Next, you will need generous amounts of organization and clarity in your site. Unless your site is supposed to be difficult to navigate, unclear in purpose, and curiously defined-and some sites creating interesting experiences might possibly be-your site better be well-defined, easy to navigate, and help your audience understand what it-and you-is all about it.
To begin, map out everything you have to present: every piece of content you envision and every interaction. Next, mix well and separate into different arrangements until you find one that is more successful than others in meeting your objectives. This may take some time and you shouldn’t try to skip this step. Leave enough time to experiment with organizations and by all means, stay away from metaphors. Nothing confuses audiences more than trying to navigate a site based around a poorly matched and ridiculously implemented analogy that is fundamentally incapable of applying to interactive media. If your metaphor cannot gracefully deal with abstract actions (like hyperlinks, perhaps?) then shoot it in the head and put everyone out of their potential misery early.
Navigation is more than merely telling people where they can go. It is the artful setting of context that allows people to know what to expect, what to do, what they can do, and even, to some extent, how to do it. This is called a cognitive model and represents everything people understand and remember about your site when it isn’t actually in front of them. Think about showing up at an exotic restaurant without knowing anything about the cuisine. What should you wear? How do you order? How do you pronounce it? What’s good? Where’s the bathroom? And what’s it all going to cost? If your audience has to ask too many tough questions about what they are to do and where they can go within your site, you can bet they won’t stay around for long. I would bet that you won’t be available online to help them either, so your site should provide this as well.
Be sure that the navigation in your site allows your audience easy access to the breadth and depth of your site. Don’t require them to return to the homepage every time they need to backtrack or access a different portion of your site. The bigger and more varied your site, the more important this is.
Great sites that are easy (and clear) to navigate and understand are not numerous, but they are, thankfully, becoming more common. The amount of content and interaction at your site is no excuse for a poorly organized one. While Pathfinder will retort that they just have too much to say, others know that they are just trying to say too much-and in a confusing way.
Elements of good navigation include giving your audience the ability to navigate in many ways. Can they get around without going to a “map” or back to the home page? Can they distinguish how deep they are in a site and in which section (called signposting)? Can they backtrack up the organization gracefully to any point between them and the homepage? Can they tell what they can expect in a section before they even click to get there? If not, your site’s organization is still half-baked and needs more time in the oven before it’s ready. You need to spend more time experimenting with possibilities or need to hire someone who can help you see possibilities where you can’t. This would be an information designer and there are actually a few around these days. Get on the Net, go to hotbot and do a search for “information design” if you don’t know how else to find one. Next, listen to them when they tell you that you’re approaching your site too conventionally. After all, you don’t really want to serve up the same dull meal everyone else is, do you? This medium is far to young to have established the best ways to do anything.
Now, don’t confuse a site’s organization, its information design, with the representation of its organization or its visual design. How a site looks is important, but the representation is ultimately not as important as its organization. Also, don’t try to rush this important process. This is as important a step as chopping and preparing ingredients before you start combining them. It may not be glamorous and it may not look like you’re getting anywhere, but you are laying the groundwork for the future of your site. Good meals do not simply get thrown together. They are the result of careful planning.
Lastly, don’t organize too much. I know, I know, this sounds contradictory. Skip to the end to read a bit about interactivity or just try to remember that what you are creating is an experience that plays-out over time. It is always linear in your customer’s experience. Everything may not be best presented in neatly ordered rows and columns. The power and magic of your site’s experience may be lost when everything is clearly relegated to its own orderly section of the site. Consider that, perhaps, having a page of testimonials isn’t as good a sell (since most people won’t go there anyway) as interspersing them around an entire section of the site so that they pepper the mix of content. This is sometimes a better way of handling less essential content, giving it more flavor overall.
Note: for more on interaction design, see Unified Field Theory of Design.
To summarize:
• Successful sites are clearly organized and easy to navigate.
• Successful sites have a clear cognitive model that describes the organization. This may or may not be a metaphor (and probably isn’t).
• Successful sites should make it clear where you are and where you can go, flattening hierarchies and reducing navigational steps.
• Don’t organize the life out of your site.
Performance
Have you ever been to a restaurant where the service was so bad or so over-taxed by the crowd that you didn’t want to stay no matter how good the food was? How about a simple meal that should have taken 20 minutes to get to your table but it took 30 and you’ve only got a basket of bread to show for it so far? You might even consider waiting that long for a meal at the best place in town, but you wouldn’t wait even 10 minutes for a Quarter-Pounder at McDonalds. Well, neither will your customers on the Web. You know that feeling you get when you’re told by the maitre-d’ that it will be a 50 minute wait to get a table? That’s how your customers feel when surfing your site at 14.4 and it takes more than a minute to download your homepage. The result is the same, they leave and probably never come back.
Now, while some may be able to get by with the swanky patronage of the “I’ve got plenty of time to wait” set, I doubt that you and your customers fall into that category. You need to get used to the trade-off between speed and elaboration. Just because it looks great on a T1 line, doesn’t mean it’s worth waiting for over a 14.4 connection.
The first thing you need to do is determine who your audience is: are they surfing at T1 speed? ISDN? 28.8? 14.4? Less? Yes, many people do. This is even more compounded by online services like America Online, wireless connections, or overseas connections. Looking to attract an international following? Then count on half the performance your domestic customers get. I know this is disappointing and throws a wrench into your plans for an incredible site, but get used to it. You have no recourse until the Net is capable of more bandwidth and until your customers get better wiring.
If your customers are not consumers, then by all means, cater to whatever they can handle. Some companies can get away with an ISDN or T1-rated site since the majority of their customers (if not all) have workstations connected to fast lines. These companies don’t have to reach consumers through AOL, so they can (should they desire to) serve a much richer meal with a higher budget because their customers expect it and can afford it. However, if you are trying to sell to “consumers,” don’t even think about building a site that requires anything more than a 14.4 modem connection.
What does this mean? Well, assume that any total page size (the total size of all elements on a page) equals (roughly) the time in seconds to transmit it across the Net. Now, times do vary greatly due to server loads, network traffic, destination, noise, and about fifteen other issues, but this is a good measure based on timed experience and not simply theoretical calculations. For example, if you homepage adds up to 30K, then you can bet it will take up to 30 seconds on average to download to your customer. Yes, it may take less. Optimum conditions may deliver it in half that time (15 seconds), but you have to be realistic. And if you haven’t actually been on a 14.4 connection for awhile and experienced what 30 seconds is like waiting for a page to download, you should. It’s worse than waiting through a commercial break for an episode of Star Trek to resume.
You need to count the size of all graphic elements on your page to get a realistic estimate but you can probably ignore the size of the ASCII text file (unless it is a huge list or directory). For the most accurate count, you should count the size as displayed on your server or on your hard drive without any special icons associated with the file.
You can invoke lots of tricks to make graphic files smaller and get the most out of them. These include:
• GIF for graphics, JPEG for photographs
• Graphic styles of illustration and design (large expanses of colors)
• Vertical gradients vs. horizontal gradients
• Adaptive color palettes and small color depths
• Reuse of graphic elements
• Height and Width tags
• Interlacing JPEGs
The first four have to do with the files themselves. Choosing a graphic style with less detail will make your graphic files smaller. Styles that are more graphic with simple and broad color will compress much better than detailed, complex imagery. In general, use GIFs for graphic files and JPEG for photographs, but sometimes, the same photographic image can still compress smaller under GIF than JPEG so you need to experiment a bit. Because of the way GIF files compress, horizontal gradients (those that change from left to right) compress worse than those that gradate from top to bottom. Lastly, if you use colors out of the Netscape palette, you will get both better appearance and better performance. Use these colors and save your GIFs with adaptive palettes that are as small as possible (such as 3-bit, 4-bit, and 5-bit palettes).
The last three tricks are easy: reuse graphic elements (referencing the same element in the same directory) as much as possible and the elements won’t need to be downloaded again (they will be cached in memory on your audience’s computers). Use Netscape’s HTML Height and Width tags and your pages will begin to format more quickly, not waiting for the graphic to load fully before downloading text and format. Of course, this doesn’t decrease the actual download time, but it does give the illusion of a faster-loading page. Lastly, interlacing images can also give them the impression of a faster load, but I wouldn’t recommend interlacing images of people as it makes them appear pretty ghoulish for most of the download.
Remember that not everyone surfs with images on-even though they can. This is because images may make their already slow connection even more unbearable. Your site should work well in text-only mode so that you won’t need to build a separate text-only mirror site. To do this, use the HTML Alt tags to label graphics and make text navigation available throughout your site.
While you’re at it, be sure to let your audience know what they are getting when they download a sound or video file-or any other large file. Label each with the size of the file (extra credit if you add an estimate of the download time, but this isn’t required). Also label with the file format and remember to offer every media file in several versions so that Windows, UNIX, and Macintosh users can all see what you have to share. For example, I recommend sound files in .AU, .WAV, and .AIFF formats (you can also use .MOV which is QuickTime’s file format). Video files should be in .MOV (QuickTime), .AVI, and .MPEG formats.
Some developers build several sites that offer different performance, but only the most sophisticated sites switch sites automatically based on the browser and platform of the user requesting pages. You can offer your audience the choice of sites, but if you don’t tell them what this means, you might as well be speaking another language.
Now, that wasn’t so bad, was it?
To summarize:
• Fast sites are successful site
• Determine who your audience is and what speed they surf at
• Use a graphic style that compresses well
• Use HTML alt, height, and width tags
• Use the Netscape palette
• Reuse graphic files wherever possible
• Offer media files in multiple formats and always label them with their size
Compatibility
While not every restaurant takes American Express, you cannot afford not to. If your audience cannot shop, see, eat, or visit your site without downloading a browser or plug-in they may not have–and may not even be able to use–your audience will be smaller than it could be and you will be short-changing yourself in the process. Realistically by the end of this year, there are probably only three browsers you will need to watch and engineer for: Netscape Navigator, Microsoft Explorer, and AOL’s flavor of either.
Every page and every element of your site should look good on, at least, Navigator and Explorer–and not just the latest, greatest version. Period. 99% of any sites ending in .edu, .gov, or .com cannot afford to look bad or not serve everyone. Cutting edge is not using whatever latest feature some coder snuck into the latest browser. It is making sure that everyone can see what you have to say (and is much more difficult and “cutting edge” to accomplish this gracefully).
The first step is to determine your audience. With whom are you trying to communicate (and if you say everyone, you still don’t get it)? You need to concentrate on those people who mean the most to your business. Then, figure out what browsers they actually use and what those browsers are capable of doing and build to that. Now, if people who use special browsers aren’t part of your target audience, then don’t worry. But if they are, you better have a graceful (and sophisticated) solution waiting for them when they show up at your door.
Also, just because a new version of a browser is shipping, doesn’t mean your customers are using it yet–or ever will. Most new browsers crash so often that your audience may be using an older version out of self-preservation. If you tell them they are wrong and out-of-date then you misunderstand something very important about customer service and you deserve to fail. Building inclusive, compatible systems isn’t easy. I realize that this medium is anything but easy, but if you can’t stand this kind of heat, then leave the kitchen.
The most savvy of these sites automatically serve up the right version of pages based on the type of browser the request came from. This “smart serving” or “smart swapping” distinguishes a sophisticated website that cares about it’s audience from one that either can’t or won’t care about its customers.
Lastly, your sites need to be compatible with all of the computer platforms that your customers use. This means Windows and Macintosh and UNIX machines if your want their business. You may have to look at your graphics on a Windows computer to compensate for the lack of any gamma control on this hopelessly graphics-wounded machine (everything is much darker on a Windows box). You should definitely post several versions of downloadable files so that Macintosh, Windows, and UNIX users can hear that sound file, see that video clip, and decompress that document.
To summarize:
• The two browsers driving the features of the market are Netscape’s Navigator and Microsoft’s Explorer.
• Audio and Video clips (as well as other documents) need to be available in multiple formats.
• Alternate sites or pages for different browsers are possible but make them automatic and “smart” so that the audience needs not be bothered.
• If you don’t use alternate sites or pages, be sure that your pages work well in all the browsers your audience uses.
Visual Design
While many meals are impressive to look at, once tasted, they can leave a lot to be desired. Meals should always look good, but not at the expense of how they taste and how nutritious they are. It is possible to have your cake look nice and taste good too, but not unless you pay attention on all of these ingredients. While a beautifully decorated website–like wax sashimi–entices people, if your audience bites into it and is not rewarded with something wonderful, you cannot blame them for branding you unappetizing.
While too many sites look marvelous but don’t feel marvelous, often just the opposite is the problem. There are many sites-from respected companies even-who look so amateurish that you wonder if the CEO’s kids did it. These are often unoriginal and always inappropriate and send a message that quality is not very important. Nothing need look trendy, hip, or cutting edge to work, but it shouldn’t look like it was freeze-dried three decades ago and defrosted either. Hire an experienced professional who is capable or helping you communicate visually-something few people are ever taught to do well-and whatever you do don’t try to dictate your favorite color to them!
On the other hand, don’t let them push you around either. If they are taking you out on an uncomfortable limb and you know it just isn’t right for your company, say so. Many visual designers do not know when this or that Kai’s PowerTool Photoshop filter is appropriate and when it isn’t or when what seems like a good idea just doesn’t work. For an example of the former, witness just about any site that uses beveled buttons, blurry text, or uses any KPT filter at all.
At the very least follow your company’s identity standards, use the correct version of the logo, colors, and typefaces, and involve those in charge of the “brand.” If your company has no identity standards and you don’t know what your brand is, then that says it all there, now doesn’t it? You don’t need a binder-thick identity manual, but even the smallest company should have a few rules about what is and isn’t appropriate for your company’s image-if for nothing else, for some consistency. Consistency may be a bit boring at times, but it is the stuff great companies are built on. Imagine McDonald’s without the arches or Kodak without the yellow.
As for a brand, simply put, the brand is the experience people have when they deal with your company. It used to be that brands were mostly described and managed by visuals, in print, on television, on packaging, etc. But brands have always been about the interaction a company has with its customers. Think about Nordstrom’s. What’s that typeface again? What’s their corporate color? When you think of Nordstrom’s, none of that comes to mind. What does is their incredible standard of service, played out in everything from the people who greet you when you walk in the door to the catalogs they send through the mail. Now guess what’s going to communicate and extend their brand more online: faithfully replicating their logotype and colors or finding ways of creating innovative interactions that allow their customers to experience their high levels of service online? Wrong. The correct answer is both, but if you had to pick one, the later is about 1 billion times more important. Perhaps that’s why Nordstrom’s is moving online very slowly. Perhaps they are waiting until the technology makes it possible for them to be the Nordstrom’s they want to be.
To summarize:
• Successful sites have high-quality, professional visual design.
• Therefore, get a good, trustworthy graphic designer and listen to them.
• Don’t do anything unless it feels like the “right” thing to do (gee, not bad advice for life either).
• Be faithful to your corporate identity (if you have one and if it is good to begin with).
• Pay close attention to your brand, or begin to create one around experiences and interaction if you don’t yet have one. Also, look for ways to evolve your brand in this medium.
Interaction Design
I have a friend who chooses restaurants based on their ambiance. In Sterling’s own “If I only wanted good food, I’d stay home and cook it myself.” A restaurant’s appeal is based on more than merely the quality of its food-at least if you go to dine rather than eat. Interaction to a website is what ambiance is to a restaurant. It is probably the most important aspect to websites.
Building interesting, valuable experiences-in other words, interactivity- is what interactive media is all about. Now, this medium is so new, that it’s difficult to find good examples, but trust me, it’s what you need to shoot for. If you care about attracting an audience, keeping them, and having them return, give them something to do that is useful, personal, and fun.
There are six major components of interactivity:
Feedback
Control
Creativity
Productivity
Communications
Adaptivity
There are actually more, but these are the most important and are more than enough to chew on for now. But how do these interactive components translate into activities on the Internet? Here are just a few examples of interactive experiences people have built:
• Commerce Systems
• Communities
• Online Customer Service
• Search functions
• Notification Agents
• Product Delivery over the Net (in the case of software)
• Corporate Information
• Product Information
• Events and promotions
• Personalized and Customized Services and Information
• Online Applications and Online Ventures (such as directories, dating and match-making services, etc.)
• Intranets
• Extranets
(to name just a few)
Build as many of these into your sites as you can, particularly anything that allows communications and adaptive (or custom) experiences, as these make for the most valuable experiences. Unfortunately, there are no off-the-shelf tools for these and no recipes to follow so they require invention (which is more time and money consuming), but they are well worth it.
Feedback & Control
Any experience that allows the audience (your customer) control is a good thing. Sure, if there aren’t interested in taking the initiative, then you need to be ready with an alternative, but if they are antsy about anything, turn over the reins to them. Control will become much more important as the technology of the Net evolves-with Java, Shockwave, etc. Remember, if all your audience can do is sit back and watch, they will probably turn off their computer and go watch television-or at least, go to another site. Give them a chance to control what they see and do and say-and how. Disclose to them what is going on so that they know where they are and what is happening.
Creativity & Productivity
Guess what? Creativity and Productivity are really the same thing. They both have to do with creating experiences that allow the audience to do something or to make something at your site. That’s what humans are good at: creating things, whether for themselves or for others. That’s why hobbies and work abound. If you haven’t had too many people drop by or return, maybe because there isn’t anything to do at your site but read. As Gertrude Stein said about Oakland: “There’s no there there.”
There aren’t a lot of good examples yet, but there are a few. Some are frivolous and fun, others are more “useful” and productive. All point the way to an Internet that prods people to participate. Don’t let anyone tell you that people aren’t ready to participate or that they don’t have the “skills” to cook-up their own content. People do this everyday already. They work, play, talk, share, kvetch, and dream and they are interested in doing all of these things online as well as in there realspace lives.
Communications
What do people love to do the most? OK, maybe second to eating: why talking of course. People love to talk-no matter what they tell you. They may not like to talk in public or to large groups, but everyone basically likes to share their thoughts with someone. Telecommunications companies make so much money because humans love to talk.
Anything you can do to allow your audience to talk to others, listen, identify themselves, share things, and tell their own stories will make your site more successful and may begin to build a community. It may be as simple as creating or linking to discussion groups (like USENET), bulletin boards, IRC chat channels, list serv mechanisms, or merely giving them feedback forms, and email access to you or each other.
This is actually somewhat easy. Instead of developing complex ways for people to talk to a machine, simply provide a conduit for people to talk to each other-the conversation will be richer and the overhead simpler.
If you’re interested in starting a community, this is the way to start. You only need four things to start a community:
• a way for people to talk to each other
• a way for people to consistently identify and describe themselves and each other (whether anonymously or not)
• a topic around which to start a conversation
• audience-generated content
That doesn’t sound like too much, now does it?
Adaptivity
Lastly, the most valuable interactive experiences are those that are adaptive. This means that they change for each member of the audience to meet their specific needs, interests, skills, and behaviors. This is certainly not easy, but any way you can build unique experiences for your audiences will seem more interactive. If your experiences can respond to time and place (theirs and yours) will also be more interactive.
Location, Location, Location
Where are your customers? If they come to you from Hong Kong aren’t there things you would tell them differently than if they came from Albania? Or Paris? Or Columbia? If not, then maybe you should look again at your business. If so, then send them different pages based on their domain extension. Do they seem like they’re having trouble finding something? Then ask them if they need help and offer some. Does it look like they know exactly what they want? Then, by all means, get out of their way and let them speed along.
While some of the first truly adaptive experiences may have been scavenger hunts, there is now a wealth of individualized, personalized content and interactions on the web: everything from banking to NEWS. These companies are finding that serving people as individuals makes for not only a good site, but good business.
What Time is it?
Another way to build interactive experiences are online events. Those, in fact that respond to the time of day, the place, and the people there and out on the Net are the most interesting. Unfortunately, these are temporary, transient experiences and are inactive once they are completed.
Note: for more on interaction design, see Unified Field Theory of Design
For these last issues, you are on your own. This is where you need to be the creative, ingenious, forward-thinking people you were brought-up to be. What the Net and Web are to be is little like it is now and the only way from here to there is to dare to create interesting experiences and innovative ideas. If you’re not up to that task, than you’re working the wrong medium. You should get out now and look for a more stable, well-understood one, like television or magazines. However, if you’re not adverse to a little challenge-OK, a big challenge, the kitchen is the place for you. You’ll need a lot of ingredients (like fresh content), some tried-and-true tools (like Photoshop), and a lot of old-fashioned ingenuity. Oh, and a dash of garlic never hurt.
Recent Comments