Common Complaints

• Flashy animation is annoying because it wastes time downloading and can freeze a computer with low memory
• Out of date information earns scorn and derision
• Background music, especially droning techno
• Difficult to find information, such as location and phone number
• Stock photography, people recognize and don’t respect it.
• Amateur photos, amateur photos are characterized by one or more of the following:
  • pixilation – caused by not knowing how to size a photo for the web
  • blurry image – caused by a shaking camera or using a low resolution photo from a cell phone
  • bleached out or murky images – caused by not knowing how to properly light a photograph
  • poor composition (distracting backgrounds, for example)

An Annoying Restaurant Web Site

I’m sure the food at Firefly’s Bar-B-Q is great, but their web site is annoying.

• The splash screen makes for an extra click to get to the information. And the flying insect animation seems juvenile.
• Even though the looping music on the home page has a good beat, I can’t stand listening to it over and over and it’s driving me crazy when I click between this page and other pages, or leave the home page open in the browser.
• Confusing navigation. One menu with drop down sub menus would be easier to follow.

I’m Looking for a Good Restaurant Web Site

I wanted to post an example of a good restaurant web site. After looking for over an hour, I’m going to give up for now. I’ll keep looking and when I find one I’ll post it. In the meantime it’s curious why all the restaurant web sites I looked at are so bad. I believe the core reason is the restaurant business is a tough one. An independent restaurant doesn’t make a huge profit so they might skimp on spending a lot on a web site.

A Better Web Site for a Small Business is Possible

The challenges for any small business that wants a web site are the cost, keeping up with changing trends, and updating information quickly. A good web designer can help you by building your site in affordable stages and guiding you towards results that are professional and usable.

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

Copyright 2011, Alice Gebura, All Rights Reserved.

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.

Blue Box Layout

The Guthrie Theater web site has a great layout. Blue boxes in all different sizes contain information, photos, slides – I really like the blue and gray stripes behind the horizontal navigation links (someone tell the webmaster to fix the padding on the second line of links so they’re centered) and the way they change colors as they stretch beyond the content area.

Innovative Navigation

The web site for artists Louviere + Vanessa: New Orleans is definitely outside the box. I love their images. To navigate the site you use your mouse to draw an arrow in the direction you want to go. You’ve got to try it and see what you think of it. It’s really strange, but I love the user interaction. If I were truly trying to find information, this would be a disastrous experience. But the site is an art gallery and it’s so much fun to wander through the gallery with this unusual navigation gizmo. Gotta find out how they do it!!

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

“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.

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.