I’ve always enjoyed the 7 deadly sins as thematic material for art and literature.  So I got a big kick out of the following use of the 7 sins to structure a narrative on bad web design.   Its origin is a webinair by Seth Rosenblatt at the American Marketing Association.  It came to me via a newsletter by Lynn Ericson from Ericson Mitchell.  I hope you enjoy it as much as I did.

1. PRIDE (VANITY) — excessive love of self — is pretty easy to recognize if the site is obviously ALL ABOUT YOU. Your company is wonderful, you are wonderful and your product or service is, of course, wonderful — all of which may be true — but if this is your focus, most likely you’re not as concerned as you should be about gearing your site to your clients’ or customers’ needs.  ”What are the benefits to the customer?” has been the marketers’ mantra for as long as I can remember. Not only do you need to connect with your visitors but you must anticipate how they are going to navigate your site.

At Ericson Mitchell, we stress that creating a personality for your company is the essence of your brand. But the personality is not YOU so lose the CEO or president’s photo on the first page of your site — unless he or she is Oprah, Cesar the Dog Whisperer or someone else well enough known to be an integral part of the company’s brand.

2. GREED — an excessive desire for more than one needs — is all about asking for too much from your visitors. Let’s say the consumer is ready to buy your book, for example, and he is about to hit the red BUY NOW button and he notices a few more options:
CLICK HERE to download our latest white paper,
CLICK HERE to sign up for our newsletter,
CLICK HERE to read our privacy policy.

You have provided enough DISTRACTIONS to get him to another page and he’s off on another tangent. The more alternatives you provide to take action, the less likely you are to get the sale. The same is true for asking for too much information on forms — streamlining them makes it much more likely that visitors will actually finish providing the info you need before they’re interrupted by something — and gone.

3. GLUTTONY – wanting more of everything, over-indulgence — is frequently manifested in so many sites, the ones we all run across and exit as quickly as possible. You only have a few seconds to engage a visitor and if your site has TOO MUCH of everything– too many images, too much content and too many typefaces — the result will feel chaotic to the viewer, who will not know where to start reading and probably move on. In the world of web design, we call these “clown pants” sites. The “white space” that designers love so much is not to make sites look pretty but because it helps guide the viewers through your site the way you want them to experience it. Often, less really is more.

4. ENVY — desire for what another has — can result in sending out a generic message on your website. Don’t copy what your competitors are doing. Be clear how you are differentiated from them and emphasize that. Their websites may not be all that effective and when it comes to usability, visitors are more likely to compare your site with the experience of sites they visit frequently and are comfortable with.

6. SLOTH Ask yourself some questions. When was the last time you updated the content in your site? Does your site look stuck in the 1990′s? Are you taking advantage of Google Analytics or even just the statistics provided by your hosting company? The really great thing about the web is that the metrics are so easy to access and you can find out where your visitors come from, what pages they visit, how long they stay, when they visit, etc. Much of this information is FREE. And Content Management Systems are now so much more sophisticated and easy to use that excuses are harder to find for not staying current.

And finally 7. WRATH.  Probably expressing anger on your site is not an issue, unless you want to attract other angry people. Provoking anger is a different story. Visitors who become frustrated navigating your site or annoyed by not finding what they need will give up and go elsewhere. A recent survey by Hostways came up with seven biggest pet peeves:

• Pop up ads
• Being required to install software to view the site
• Dead links
• Confusing navigation
• Required registration to access content
• Slow loading pages
• Ineffective site search tools

70% of respondents said they would be unlikely to purchase from a site that annoyed them, that they would probably never go back and — that they never want to hear from that company again. An irritated visitor is usually an ex-visitor.

Another argument emerges for simple web design (see my previous post  Creating Your Web-Scape)  in Drake Bennett’s article on cognitive fluency, Easy=True. Cognitive fluency is  the psychological precept that “people prefer things that are easy to think about to those that are hard…In any situation where we weigh information, fluency is implicated in our decisions about everything.”

In a nutshell, when information is easier to mentally process, people feel attraction and belief.  The opposite,  disfluency – making things difficult to grasp,  creates a cognitive roadblock that makes people wary and uncomfortable.

While this might seem intuitively obvious, evidence abounds that plenty of businesses (and web designers) don’t get it.

Bennett’s article is a terrific resource for more information on fluency and disfluency and the supporting research.

For the purpose of this blog let’s take a look at the practical implications of fluency and  disfluency in terms of web design.  Keep in mind this is all based on research, not my own preferences.

Disfluency:the art of making things difficult -

Web Design that Loses Business

Here are some characteristics of a disfluent web site that will leave web site visitors with a negative impression.

Inaccessibility

• Unfamiliar words (for example, technical jargon and acronyms)
• Names and words that are difficult to pronounce
• Complex syntax
• Illegible text (see my previous post The Dog and the Lotus)
• Missing information or convoluted instructions
• Functions that don’t quite work

Sensory Overload

• Overcrowding the page
• Visual distractions
• Multiple columns of disparate text
• Little or no white space
• Flickering animation

Inconsistency

• Confusing navigation
• Poor organization

Fluency:the art of making things easy to understand -
Web Design that Encourages Business

Here are some characteristics of a fluent web site that subliminally suggest to visitors that your business is reputable and trustworthy.

Repetition

• Consistent navigation and page layout across the web site
• Artful repetition of key ideas(note: repetition is good, redundancy is bad – know the difference)

Clarity

• Legible fonts and color coordination
• Plenty of white space
• Language and syntax that everyone can understand

Simplicity

• Message boiled down to its essence
• Graphic design and content that are easy to assimilate (accessible) both visually and conceptually

Web Site Analysis: The Glass House

Let’s take a look at the web site for The Glass House and see how well it does fluency wise.

Repetition: The grey box is repeated throughout as the background to the title (I like the opacity that reminds us of the see through quality of glass), the background in the drop down menus, and the background for other important pieces of information.

Clarity: The site contains a lot of information,  notice how it’s been logically organized and categorized.

Simplicity: One column layout, plenty of white space.

Verdict: Fluency.  I’m convinced this is a reputable organization dedicated to professionalism on all levels.

Analysis by Smart Alice Web Design, smart web design for businesses who want a unique and effective presence on the internet.

One of my favorite photographers Bruce Percy says the following about creating a landscape photograph:

“The strength of an image lies many times in what we exclude from it.  Putting more things into a scene can often dilute the strength of the message. Keeping it simple is key.”

Web designers would do well to follow this advice.  Similar to creating a landscape, creating a web site should isolate and focus on what’s important by carefully selecting and streamlining graphic components.  We create something ugly and unfriendly when we clutter a page with multiple ideas, extraneous information, or unnecessary functionality.  Choose one idea and execute it well.  Don’t add stuff just because you can.

Redundancy

For an example of what I’m talking about, let’s visit the Harvard Parks & Recreation web site.  The left column provides links to the rest of the site.  When I mouse over the Main Page tab, the same content links appear (see screen shot on the left).  Why do I need to see the same links twice?

Ugly Graphics – and lots of them

There are three different graphics on the home page.

Landscape photo – used as background for title. Note the gray, out of focus, pixelated photo.  If you can’t find a great photo locally (hard to believe), why not spend $3 for a decent image from iStockPhoto?  The landscape theme is relevant, though.  The message it conveys is “lake/recreation/swimming/boating/fishing.”

Tree logo in the left corner. Suggests a conservation theme.  Relevant?  Not really.

Lawn – close up photo used as background. The obvious message to me is lawn care. Also worth noting are the unnecessary functions that create more visual clutter.  The text next to the check box is barely legible.  Just because it’s easy to count and display visitor numbers, doesn’t mean it should be included.

Three different graphics with three different meanings create visual and mental confusion.  Extraneous functions and poor design contribute to usability issues.

A Simple But Effective Layout

An example of a simple yet effective web site is that of screenwriter Zen Freese.  The coffee stain graphic, the horizontal lines, and the tape are things that remind us of the writing process. We write at our desk, cup of coffee on top of the last draft, taping the latest revision to a page in progress.  Our tools, represented by the two fonts, are a typewriter and a pen.  The message is clear.  Nothing extraneous distracts us from the message.

Web design is about common sense way before it is about how much functionality or other junk you can stuff onto a page.  Keeping it simple for both impact and usability is key.

Commentary by Smart Alice Web Design, smart web design for businesses who want a unique and effective presence on the internet.

Do you like animation or flashy motion effects on a web site? In general, I don’t, unless they provide added value to me. A scrolling or jumping animation might catch my eye for a second, but it takes less than a second to click to another web site that isn’t so irritating.

I detest advertising. We all do, that’s one reason why TiVO is so popular. Advertising invades our mind space without asking our permission. When a web site is more flash than info, it starts to look like a TV ad. Instead of pressing the Fast Forward button, I’ll just click to another web site.

There are instances when motion graphics are useful. For example: slide shows for art galleries, photographers, etc. Or, high quality embedded videos when they are relevant, make me laugh, or teach me something. One of the keys to success, if you’re going to put something flashy on your site, is to give control to the visitor. I don’t want to passively sit while something runs. That’s why I always click Skip Intro (you know what I’m talking about).

Why Do It?

Why do web developers build junky animation? It seems, because they can. Here’s an example. If you go to the Longy School web site, you’ll see Latest News scrolling vertically on the right. Since it’s moving, I can’t read it. So what’s the point? This site also has a video tour of the building. I care about ambience only when I’m booking a hotel room. Irrelevant information just creates visual clutter.

Award Winners

Beantown Web lists its picks for best web sites in 2008.

There are some cool sites listed here. My favorite is James Zabiela’s site. He’s a high tech DJ so it makes sense that his web site puts on a high tech show. I like this twist: instead of placing motion graphics against a static background, he puts motion graphics in the background and places static text over it. I also like the sleek and elegant music player he provides unobtrusively in the upper right corner.

What’s Appropriate for You?

A super flashy web site is expensive to build. Keep in mind it also screams “high priced” to visitors. It could scare off potential customers who might infer you are too high priced to do business with. What is your message and do motion graphics enhance or undermine it? Know your target customer. Make the site comfortable for them. And, put them in control of the graphics.

Analysis by Smart Alice Web Design, smart web design for businesses who want a unique and effective presence on the internet.

Copyright 2009, Alice Gebura, All Rights Reserved.

Web Designer Wall posts engaging and stimulating information for web designers including several collections of web sites that Nick La finds appealing. I especially like his collection of Large Background Web Sites. Instead of your page floating on a solid color or pattern, the contents is integrated with an oversize photo or illustration. For example:

Very impressive. The image quality is outstanding. However, I would think twice before choosing this design approach and here are my reasons.

Web Site or Billboard
The visual impact of a large background web site is undeniable. But are you reminded of something you’ve seen before? I am. I’m reminded of billboards and magazine spreads: seductive images and catchy tag lines, but not much useful information. In other words, advertising.

Message
The images on a web site should be more than pretty pictures. Images should relate to the purpose of the web site. I chose two non-english web sites with large background design. I really do have to rely on the images to understand what’s going on. Let’s see what happens.

What is it?

Construction company? Aerialists? Gay men’s chorus? Beats me.

What is it?
Witty and unusual. I guess he’s a graphic designer because of the animations. The plant throws me a bit – is he in horticulture?

Web Designer Depot posts some of the challenges of creating a large background web site. If you’re considering this approach, read up so you’ll be knowledgeable about how time + effort = cost.

Analysis by Smart Alice Web Design.

Copyright 2009, Alice Gebura, All Rights Reserved.

The experience of good web site design feels like settling into a comfortable chair. However, when the design is visually exhausting, it repels the user instead of inviting him or her in. Let’s take a look at how two yoga studios present themselves on the web and see how we feel about them.

First, the Dog

When I look at the home page of Laughing Dog Yoga the first things I notice are a) the layout feels awkward and b) there are way too many fonts. The layout is basically an endless list. This creates big blank spaces. It makes my eyes tired to scroll through it. On a more personal level, I find the color scheme unattractive.

Font Crazy

There are six different fonts in the left navigation pane and five different fonts in the content area, for a total of 11 different font variations. Fonts vary by color, size, style (bold, italic, etc.) and typeface.

Note the links in the navigation pane are all caps and in white with a drop shadow for an overall blurry (that means hard to read) effect.

The design principles of repetition and clarity should govern your font selection. Too much variety prevents the user from finding and focusing on information.

My overall experience: Uncomfortable

The Lotus – Love Those Colors

By contrast, Mudita Yoga Studio features a beautifully composed photo on the home page.

Look closely at the colors in the lotus blossom. You’ll see these same colors used throughout the site for backgrounds and borders. A collection of related colors form a color palette and this is one characteristic of good design.

I see only three fonts used on the home page. Each one is distinct and each one has a function. There is a font for the name of the business, a font for the navigation buttons, and a font for the main content. Immediately my eye understands and I feel comfortable reading and investigating the site further. I might revisit the sight later just to enjoy the photos. If some of the photos change, that’s even better.

My overall experience: Enchanted

What do you think? Which site do you prefer? Send me a link to another yoga site and tell me how the design affects you.

Analysis by Smart Alice Web Design.

One of my all time favorite web sites is David Lebovitz, Living the Sweet Life in Paris. Lebovitz is an all star pastry chef. His web site/blog has fabulous food photos (I’ve included an example here). The images are superb – beautiful, professional photographs that instantly tell you this guy is serious about food and food quality. He uses those gorgeous photos to illustrate his various culinary adventures with ingredients and funky kitchen gadgets.

Why Should You Care About the Quality of Photos and Images on Your Web Site?

If you are a film buff like I am, you know that a movie typically relies on visuals to relate 60% of the story. For example, let’s say a character is a devout Catholic. It would be heavy handed for the character to announce “I’m a devout Catholic.” Instead the director might, for example, zoom the camera in on a rosary placed on a table.

Much like a movie, a successful web site uses a combination of images and text to convey who you are and what you do. The art is in creating images that are meaningful, relevant, and tell the right story.

Analysis by Smart Alice Web Design

Let’s test the idea that the more you duplicate links, the easier it is for users
to find stuff on your site. We’ll use the Biowisdom web site as a test case. Each page provides five ways to navigate, as indicated above.

1. At the top right you see a horizontal navigation bar with links to Company, News, etc.



2. At the top left you see a horizontal navigation bar with links to products and services.



3. The left column, called Quick Links, lists their products. These are links to product-specific pages.



4. The middle column of the page has short product descriptions. Each product logo is, again, a hyperlink to a product-specific page. I can also click Read More to go to a product page. At this point I have four different ways to link to a particular product page.



5. But wait, there’s more! The column to the right also displays logos for these products and these are also hyperlinks.

Notice that the products are not listed in the same order in all three columns. Are you getting as confused as I am?

My head is starting to spin.

Let’s take a look at the Products page. Here, inexplicably, the links in the left column are duplicated. Am I seeing double?

Is all this duplication of links on every page helpful? No way. The site looks like a mess, and keeping track of where I am is horribly confusing.

My initial admiration for the fabulous Flash animation on the home page disappeared as soon as I began to feel like a rat in a maze.

There should be one consistent navigation system that looks the same on every page. Duplication is not a cure for bad design.

Analysis by Smart Alice Web Design.

The North End Yoga web site has great images, good use of color, and a layout that’s organized and easy to navigate. There are problems, however, in the left navigation panel.

Notice how the link text runs over the boundary into the main content area. And, it’s hard to read all caps and right aligned text. The navigation panel itself isn’t sized properly to fit the text. This leads to little or no margins, another factor contributing to poor readability. The blue color for mouseover and visited links is easy to see. The grey color, however, is not.

On the right is the navigation panel I designed for my client Contemporary Fusion. I used small caps instead of all caps for the link text. Small caps are easier to read than all caps. Why not use regular text here? Because I want to visually differentiate the navigation text from content text. On mouseover a link turns purple to match the overall color scheme used in the web site.

Small details can make the difference between a polished, professional web site and a sloppy, amateurish one.

Analysis by Smart Alice Web Design.