One of the most important aspects of a web site is what people first see on the initial page. In this case, it is primarily advertisement areas with some disturbing balding heads. While the ad areas are better designed than most I have seen, it is important to note that people come to a site for its content. Forcing people to scroll down significantly to view the news is not a good idea.

The navigation on the site is very well done— it is bright and obvious with a large font that contrasts well, and the names of sections are clear.

Important interactive elements, such as the poll, are all shoved down to the very bottom of the page. Most first-time visitors will not bother to scroll that far.

Elements that were well done include the news headlines and excerpts. They are a good readable size, with the authors visible and enough excerpt to entice without cluttering. The headlines were fairly well written— short and effective. There is a decent sense of white space— on content heavy sites it has to be used sparingly, but should not be tossed out altogether. The accent colours were used well— just enough to emphasize important points without becoming overwhelming or vulgar.

Daily Political

This shows how a strong contrasting background helps a heavy content site pop for its readers. When the background is also a light colour, it all blends together confusing the eye. The rich blue helps this site appear as a concise block and draws the eye right to the text.

The same cannot be said of the navigation— it blends right into the background and looks identical to the main font of the web site. Look over the Politico navigation and see how it comes right to the forefront, unlike this site.

Daily Political does have a better use of the initial page— most important information is right there, and the photos aren’t cut off at strange angles. It could learn something from Politico in its use of spot colour for the news headlines.

While thumbnail spot photos are interesting, they are not the most effective means of visual communication. They are too small to make an impact, and a large number of them seems like a patchwork quilt. It is better to use larger and fewer images.

CA Political News

This site has a more interesting visual masthead than most news web sites, which quickly drew my eye. The navigation was obvious and well structured, although a trifle small.

Notice that the text is all jammed up against the side— never do this. It is far better to have a narrow, newspaper style column than text running up against its boundaries. Notice also that the hierarchy is confused— it is not clear where to look first or what is most important. When having to read long articles, it is crucial to have a relaxing environment in which to read them.

The Washington Times

Notice that while many items are “below the fold” on the homepage, the site keeps two columns filled with the most relevant information right up front. “Happening Now” is in the prime location— top left. The list of latest editorials is also in an obvious location.

On this particular site, instead of a slideshow of images, the headline story has its own hero shot and featured homepage slot. This is an interesting idea— although I would recommend less height on the hero so that people do not have to scroll in order to view the headline.

The top navigation, while a readable size, has insufficient contrast. The grey under “News” is too close to the grey of the link colour. Main navigation needs to be of the sort that a quick glance tells the visitor all they need to know.

The Huffington Post

By site stats, this is probably one of the most popular political news sites online. Notice that its navigation is clean and makes quick sense, with the main headline blatantly huge. Its columns are well organized with a variety of image sizes, although the subheads could stand being slightly larger. They repeat the navigation at the bottom of the page, which is helpful after having scrolled past all the news stories. The site has a strong connection with social media and duplicates references to it on each part of the page.

Salon.Com

This is a good example of how a strong masthead can help even a bit of a mess down below appear to hang together. The site is well anchored in the bold red and black of the top navigation area, which is a similar method to having a dark overall background.

I have noticed many news sites attempt to replicate a newspaper look. This makes some logical sense, but there are many better ways to use online features. Imagine this page with coloured headlines— it would be so much easier to do a quick scan of the main news items and choose one to click on.

If you go to the bottom of their homepage, they have a very well designed “Other News” area with tasteful columns and logos. This is an excellent look to use— very elegant and airy.

Talking Points Memo

So far this is one of the best sites available for hierarchy. Your eye goes straight from the logo to the main headline, taking a quick pause on the ad banners. Subtitles are still obvious, but not vying with the headline, and subtle accent colour is used where necessary. Links are obvious and the photos quite attractive.

I particularly liked their “Follow Us” on the subpages:

Large and clear with the main three quick and easy to access. While their homepage could still use some improvement, I believe their individual article pages were the best I’ve seen on a political site, other than their lack of commenting ability.

AlterNet

I liked the idea of a coloured bar breaking into the background to display the navigation— they also have a very large font size for the nav as well, which is admirable.

Their use of a horizontal display of news items with thumbnail images is excellent. It is able to give several news stories prime real estate with no scrolling and without having to go through a slide show. The various columns are different enough that they read as clearly unique areas, rather than a mass of tangled information. It begins to lose that sense the lower down the page it goes.

The bottom area is particularly well put together with the various categories spelled out. It is an intriguing idea to use different colours in areas to obviously show where one is on the site. I’ve used it a few times, and in a news arena it might be quite effective. Used poorly, multiple colours can also entirely sink a web site, particularly if all used on the homepage.

Tech Learned:
- Always have commenting available, this is universal and put to use
- Include Facebook & Twitter repost ability on news posts

Design Learned:
- Be careful what is visible ‘above the fold’ on a web site
- Reduce scrolling to find interactive elements
- Use accent colours carefully
- Always keep some white space, even on text heavy sites
- Newspapers aren’t always right– colours are allowed!

What they did request from a church web site:
- Obvious service times
- What denomination and why
- Directions with clear map & picture of building
- Calendar of events / saint days / etc
- Accessibility for the elderly
- Gallery

First Presbyterian Church of Petaluma

There is no obvious hierarchy on the site– it is not clear where to look first, second, third, etc. This is due to the multiple colours and text being of a similiar size and weight. As a result, the homepage is disorienting to visitors, particularly due to the sheer volume of information presented.

The site does have most important data on the main page, for example, the service times are on the top left. Some serious simplification would do the site a great deal of good and make it look less formidable.

There are many content features on the site that are interesting, such as the podcast, unfortunately they are hidden in the piles of information. This is where a web designer could properly organize the site so information could be quickly found.

The Cathedral of Christ the Light

This site has a slightly better hierarchy, but it does not have the pertinent information up front– rather it concentrates on the history and symbols in the building. The directions are hidden in small type way down at the bottom of the page. Their map gives an error message and there is very little information that is helpful to the visitor.

The design is fairly clean and the text sizes are reasonable, although on the small side, so as church sites go it is above average for its layout. It merely needs to be a trifle more organized and put greater emphasis on crucial information, rather than flooding the visitor with trivia.

Open Door

This site has some very cheerful colours and photos on the main page, including the building. Seeing what a church looks like is helpful when trying to find it. It is not quite clear what sort of doctrinal beliefs they hold. That is important when the name of the church does not obviously include what sort they are.

It is difficult to find their service times and directions. I never cease to be astounded at many location based sites that do not take a few minutes to write directions from various important roads. It is the number one complaint of visitors.

St. Joseph Community

This site design is amateur, which can sometimes give the impression that a church does not respect its visitors enough to bring in a professional web designer for an initial CMS theme setup. That is not the most important thing to notice on the site, however. The text overall is small and difficult to read. The navigation needs to have more space in between links and to drop the extraneous symbols (-). If these quick changes were made, it would significantly increase the readability of the navigation.

The content overall, including the navigation, looks like someone wrote down every conceivable item that could be put on the site, then put it all online without stopping to organize it first. The enthusiasm is to be commended, but the result is that important facts are buried and there is no clear hierarchy.

That being said, they are one of the best sites for giving directions and providing photos of typical parish life. Once found, the information on the site is quite good. It only needs an extra few hours to sort it into a better wireframe.

Calvary Chapel

This is an example of an excellent church web site design. The service times are right up front and obvious, the hierarchy is decent, and the homepage is not clogged with useless information. It has a professional look and gives visitors confidence in the quality of the church.

Unfortunately, they have the exact opposite problem of the previous church site. While having a good design, they do not have well-written content. “Who We Are” does not make it clear what makes them different from other denominations. Their service times do not indicate what the services are, and superfluous content runs throughout the site. Having a lovely design just does not make up for not having helpful content.

New Life Christian Center

This is a good example of a medium site– the design and content are better than average, but need a lot of improvement. The type is small and almost unreadable, but it has a decent organizational structure and a visitor will not get lost or confused. Services & Events are right in the navigation, and the contact us has a fairly clear map, although it could be improved. There are no links and random facts everywhere– it is clean and easy to navigate.

The site does require multiple clicks to find important information– in general it is best to make it quick to access information such as service times. Their “About” pages are very well put together and they have an excellent list of their doctrinal beliefs complete with scriptural references. With some basic improvements, the site could be one of the best church sites online, although it still has a ways to go currently.

What we Learned:
- Hierarchy is crucial
- Keep information streamlined
- Important facts need to be quick and easy to find
- Find a balance between too much information and too little
- Clear navigation is just as important as a good design

Most designers are quite willing to set up a CMS system these days. Some Christian designers might even do the site for free or a discount– for the sake of visitors I hope churches will realize it is worth taking the time to ask for a professional site– even taking the time to fully pay for it. I have talked with many people who move to a new town and bemoan the difficult process of visiting all the churches. All they want to know is what sort it is, when the services are and how to get there. They are the primary target audience. Current members of a church rarely go to the site, and if they do it is only to see special event calendars. There is absolutely no need to clutter the site with anything else.

Suggested main navigation bar of a church site:

Home | Service Schedule | Beliefs | Location | Events | Podcast / Blog | Contact

Put the rest in a sub navigation area and leave the main links simple and easy to navigate.

Poll Requests

- Search (for title, artist or lyric)
- Short Listening Sample (to make sure it is the right piece of music)
- Quick Purchase (where to download the full song)
- Sheet Music (with quick download, no extra programs needed)
- Free Lyrics/Libretto (in html text on the page and pdf download separate for printing)
- History/Info (date of music, whether it is under copyright and name of composer)

They were particularly emphatic that purchasing processes should be obvious and fast— I received multiple complaints that sheet music was difficult to download. The average musician prefers a pdf they can simply print out and prop up on their music stand to complex sheet music programs that have to be downloaded and used in conjunction with purchases.

As a test, I will be going through to find the music/sheet music to the opera Turandot’s aria “Non Piangere Liu”. It is a good example of something that is not obviously famous, but is not so obscure that music sites would not offer it.

The Piano Spot

Notice that this site does not have clear hierarchy— the eye does not know where to look first. As a result, the design appears to be jumbled and complex. The first thing that people wish to check is a short excerpt from the piece to be sure they have the correct one. In most of the entries, that is not an option. Although the site may not offer an audio version of the piece for sale, it would be worth having the first few bars of a piece recorded by a pianist specifically for the site. It may seem like a bother, but a lot of customers will be lost because there is not that audio confirmation they are on the correct page. Musicians in general tend to be very auditory and need that. It also might be worth displaying a jpg of the first few bars as well, to see if it is a type of sheet music that a musician prefers.

Some of the entries on the site give a sample page of the sheet music with watermark over it, which is quite helpful, although it requires people to click several times. It is much better to simply display a few key bars right on the page without additional scrolling and clicking.

Sites such as this one who expect people to just buy sheet music cold will not generate as many purchases as those offering brief samples. Imagine going out to purchase a new outfit for a gala opening. Instead of going to the shops, looking over what is available and trying them on, you are given a list of descriptions in text of each garment and expected to choose and purchase without seeing them. The very idea is ridiculous! So why is it commonly done with music?

The sheet music in many of the entries on this site is also only offered by being shipped, rather than also in digital format. Often there will be an emergency rehearsal or other need for quick sheet music– it needs to be available in an instant digital download in addition to a printed version.

Sheet Music Plus

Notice that it is instantly clear what the headline is on this page? There is a much better use of white space and also no doubt how and where to purchase the sheet music.

Unfortunately, the two things people need next (sample audio & sample sheet) are hidden. After careful searching, they prove to be two tiny links tucked next to the album art. They should be second in hierarchy to the headline, not hidden. People could arrive at the site, give a quick glance, give up and leave without ever seeing them.

While the lightbox method of displaying a gallery of sample images is valid, for sheet music there are some problems. I’m not sure if the web designer knew much about music, because the sample pages are so small that they are difficult to read and thus decide about the quality. They also offer several full pages with no watermark or any method of stopping duplication other than a little plea at the top not to. It is much safer to offer a full size few bars, rather than small versions of several entire pages. Again, this is a matter of the web designer not thinking of the target audience, but merely what common web fads were going on.

In short– while the overall design quality of the site is much higher than The Piano Spot, they still are not thinking of the consumer’s needs. This is an example of a decent designer who simply did not research the field enough before getting started on the design.

Other Sites

After looking through dozens of other related web sites, I found they all had the same problems as the two above. Either the design was extremely amateur and difficult to use, or it had an elegant design with no content. Unfortunately, it seems that the music world needs to do a bit more market research before selling products. We can take some good lessons from this, and apply it not only to the music industry but to other sites as well.

What we Learned:
- Hierarchy is key or important information will be lost in a jumble
- Always give quick samples of a product without requiring additional clicking
- Give a variety of purchase options for printed products, including instant digital download
- Design fads must give way if they do not match the target audience
- Do not hide crucial information in tiny ‘tasteful’ links when people need to find them fast
- Even the best design needs content

Some general categories of web sites that could benefit from using green include:

Spas
Colours commonly used: Ivory, brown, lavender, gold, light blue

Considering the power of green to relax, it is very curious that spas and resorts are not using it. After going through dozens of web sites, I saw only one that had a tiny hint of green in one of the link areas, and it was more of a teal.

Below is a very classic spa site– various types of ivory and brown with a splash of purple. Nearly all of them use this colour scheme, with the exception of a few that chose blue and gold.

Massage Envy

Nurseries/Landscaping
Colours commonly used: Green, dark blue, yellow

When selling plants, green would be an obvious colour to use in the web site. Unfortunately, it is not often used in a pleasing manner. Take a look at the site below to see green overused:

Garden Valley Ranch

Notice all the different greens haphazardly tossed together create an atmosphere extremely difficult to look at? This is partly due to the layout, but also serves to demonstrate how large areas of bold green can be overwhelming. If any colour were chosen to recreate this design it would be a problem, so the issue does not lie with green itself. This demonstrates that a colour misused can negate its symbolism. Green most definitely does not relax and soothe the eye on the Garden Valley Ranch site.

There are unfortunately hundreds of examples showing how green can be misused in various nursery sites online. It is rare to see a well designed site for a nursery– I went through nearly 200 nursery web sites and found they were all extremely amateur.

Green Building
Colours commonly used: Green, teal, black, dark grey

Oikos

While not visually impressive, it does have many excellent features to the design. The navigation is large enough to easily find and click, there is plenty of white space and it shows an elegant use of green as an accent colour. It could use better organization and presentation of the content of the site, but overall the site is much better than average. It also shows how even a light touch of green can be effective.

Green Building Pages

This shows a medium use of green– it is more than an accent colour, but still not taking over visually. It also maintains a readable font size throughout the web site. There are places the design could be improved, but this is an excellent example of using the colour green without it becoming overwhelming.

Green is not being well used even in sites that are an obvious choice for it– I am not entirely sure why. There are applications for it even in unrelated sites that are more abstract in nature– such as insurance.

To finish off, here are some good examples of green being used online. Interestingly, the primary colour used in web design company web sites is green:

Friend a Gorilla

Creative Slice

Sabot Tech

Project6

Reuse Jeans

A poll revealed:
1 – Voting/Ruling History (Are they all talk? What actions and hard data is there on their past?)
2 – Endorsements/Donors (Who is supporting them?)

What people were not interested in:
Family life (Who their spouse is, where they grew up)
Baseless promises (Talking about what they plan on doing, rather than what they’ve done)

As an example, let me take the candidates for judge in Sonoma County, CA. The residents of the county I talked with said that they found choosing a judge was the most difficult of the categories since there was so little information out there. The internet is what they had to 100% rely on.

John LemMon

Notice the first thing that hits you is a massive block of mostly small text? Most visitors would really have to want to be there to stay. Huge blocks of text that keeps on scrolling and scrolling is a quick way to send people screaming to a different web site. it also has a lot of different colours all vying for attention– particularly in the large rotating photographs. A simple change to have those be in black and white would make a significant positive impact on the design.

In the hierarchy, the rotating photos first grab a visitor’s attention. It was a negative impact in my particular case. I am quite familiar with the differences between Jail and Prison. I know the average person thinks they are the same, but that is not so. Jail is where anyone could end up– innocent or guilty. You could end up there just by accidentally being in the wrong place at the wrong time. It is a sort of holding area. Prison is where the criminals go after sentencing. Building the main message of a web site on sending horrible criminals to Jail, therefore, is fundamentally flawed and confusing. It would have been a simple matter of changing the text that rapists should “Go to Jail!” to rapists should “Go to Prison!” and makes one question the qualification of the candidate for judge if he doesn’t even know something basic like that.

Second on the hierarchy are paragraphs explaining the candidate’s growing up years, and plans for the future. This is exactly what most people don’t want to know. After a quick glance at the navigation, none of them included past history or actions. His endorsement list was tiny and didn’t include much good information. In short, he had no information that was helpful to decide whether or not to vote for him, and huge amounts of useless information that people don’t care about. After carefully reading the entire site, a visitor still wouldn’t know whether or not to vote for him.

Pat Broderick

Although the design is clearly amateur, at least it has a somewhat clear colour scheme and sticks to it for the most part. The navigation is obvious and large enough for the elderly to click on without trouble. The list of his past positions is impressive, but there aren’t any specific case examples. “Presided over thousands of criminal misdemeanor matters” would it hurt to give case studies of a few of them? That is what people want to know, and do not enjoy having to waste hours trying to find out.

The endorsements were very helpful, because they included some key political figures and their positions. The fact he is endorsed by Mayor Pam Torliatt and Supervisor Efren Carrillo show that he is probably a liberal. Of course we’d know for certain if a list of past decisions and rulings were on the web site. So in the end, a tiny bit of information was gathered from the site, but still left a huge number of questions unanswered.

Chris Mazzia

He has one of the most beautiful clean web sites of all the candidates. It has a light airy feel that encourages closer perusal. The white space use is excellent without being overpowering and the main sidebar navigation is nice and large. Unfortunately, the main navigation is tiny and gets lost– it is a small light grey and doesn’t look much like navigation. The endorsements page is well done, but the rest is still “all talk” as it were. While as a web site (other than the navigation) it is extremely good, it still fails as a voter information site.

Jamie Ellen Thistlethwaite

Her colour scheme is carefully put together to induce an emotional state of calm stability. Someone knew what they were doing when they designed the site– while it isn’t impressive as a layout, the colours are very well chosen and effective. It is also simple and clear with its information, and the obvious social media list shows she is up-to-date with modern society. Her Twitter account is active and used properly. Often candidates don’t have one at all, or the use it incorrectly as just a place to list events. She interacts with those who tweet her and responds to them, showing a candidate who cares about the electorate. She is one of the few candidates who has a lot of endorsement quotes, rather than just names. The endorsement list itself is impressive, and includes photographs to break it up.

Unfortunately, all she lists is her platform, rather than past tactile actions. It is intriguing that pretty much all the voters want to know hard facts, rather than general promises, and yet all the candidate sites ignore that. You can pretty much put up the list of what real people want to know and find it is the opposite of what candidate web sites offer.

Without ending on a negative note, however, the fact they have a web site at all is very helpful in itself. Many candidates had no web site, so they wouldn’t even be considered by the vast number of younger people in the population. If you are going to all the sites to choose which judge to vote for, and discovered several of them had no site, that pretty much instantly eliminates them from the list automatically.

Even a poorly done site, like some of the ones above, gives an edge above candidates who have no web site at all.

Easy Food & Wine

This site is a classic example of recipe sites online. Pleasing overall design, quick simple navigation, but absolutely useless when it comes to using the recipes. Try printing out this page! There are advertisements everywhere, and the recipe is forced into a long narrow column that might take two pages to print out! There was no clear link or button to click for a printer friendly version either. I’m not sure what people are supposed to do with this recipe. You’d be surprised about the number of web users that don’t know how to select, copy text and paste it into a word document. And they shouldn’t need to!

Mirassou

It is always helpful to have pictures of the finished product, and this site does a great job with clearly having photos of the food everywhere. It is much easier to choose a recipe from thumbnails of it, rather than text descriptions trying to explain what it looks like. Unfortunately, it suffers from the same defect– there isn’t any way to just print out the recipe in a simple manner that is useful in the kitchen.

Epicurious.Com

Overall the page is much more printer friendly, although still not ideal. There is a tiny little icon with a print version, but it is difficult to find and even more difficult to click on. People I talked to want recipes fast online– they don’t have time to be searching around trying to find small icons. Why else would someone want to look at a recipe other than to print it out? The only other reason would be to decide whether it was worth printing out or not, and a print button would still be needed. I noticed there was a mobile app for recipes on the site, but an iPhone isn’t any safer in the kitchen than a laptop. I always carefully put my mobile devices on unused counters that I wouldn’t be going near while cooking in case of splashes, not to mention the issues of trying to scroll a web site on it with greasy or flour-coated fingers. Let’s be realistic here!

Gloria Ferrer Winery

At last a clean, uncluttered recipes page. The only problem is that all the recipes are in one long scrolling area with anchored links. That means all the recipes are on one page of the site– what if a visitor only wanted to print out one of them? They’d still have to know how to do the copy paste method. It also did not give enough styling to the subheads like Ingredients or Preparation. When actually creating a recipe, those need to be bold and different from the rest of the text so that it can be deciphered at a glance.

After going through almost fifty Wine & Food pairing web sites, none of them offered printer friendly options. This is an example of how web sites were not thinking ahead to what visitors needed. Sometimes there are items that must be printed out. Often the easiest way of doing that would be to offer a pdf version of the recipe, preferably only printing out on a half page for ease of storing in a recipe book. It is a pity with so many beautiful winery web sites available, that so few are thinking ahead to their visitor’s needs.

This is a lesson that can be applied to any subject on any web site– always consider the point of each section and design accordingly.

After doing a quick count of colours on various sites, I came up with results such as 25, 14, 28 or 19, when it is a good idea never to go beyond 5. This was quite appalling and bodes ill for regular web visitors to figure out how to find their way around web sites. A quick refresher first:

These are all different colours, though they are also monochromatic (all in same family on the colour wheel) so they still are pleasing to the eye. Even too much of a good thing can be confusing on a web site— just because your site is monochromatic doesn’t mean you can throw on 20+ colours. What jolts a viewer in this situation is the fact that there are multiple subtle changes in hue and value (contrast). Avoid using more than 5 total colours. “But it is still a blue” is not a valid excuse for confusing visitors.

This is where I have been particularly scratching my head over newer designs. Not only are web sites transgressing with colour, they are also tossing in 10+ hues. In geek speak, hue is what most people call colour. Red is a hue, not a colour, for example. There shouldn’t be more than 3 hues on a web site, and even that is beginning to push it; 2 hues tends toward a much easier site to use. All the boxes in the above graphic are fighting for prominence. It is very difficult to navigate a web site with this kind of a colour structure. Basically it completely eliminates any sort of hierarchy. Even creating a huge headline will not necessarily offset the chaos of colour.

On corporate sites usually this is solved by quite simply using the hues present in the logo / corporate identity. For the few sites where you do not have a logo to work with, first recommend the client develop a corporate identity. If they refuse, come up with a simple colour scheme for them— don’t toss in the entire wheel!

- Lots of photos of the garden areas throughout the year
- List of unique aspects present in that particular garden
- Nearest cafe/restaurant (especially if there is one in the garden itself)
- Directions and location information
- Special events and photography policies

The Oregon Garden

This is an example of trying to do too much at once. Part of the reason Google is often more popular than Yahoo is that their landing page is very simple and not filled with information and boxes everywhere. On this landing page there are several constant moving images that are not in sync, all sorts of tidbits hither and thither and seemingly no structure. Each individual piece of information is excellent, it is simply how they are presented. For example, the hours of the gardens are right in the landing page– if you can find them.

The navigation list is extremely long and not above the fold. After scrolling and scrolling as the list goes on and on, many web visitors would simply leave rather than sit and read down it trying to find the pertinent information. None of the links are wrong– they each have good information– it is simply a matter of organization and hierarchy.

If someone had plenty of time and was willing to spend much of it reading through web sites, this is an excellent information source. For the majority of the population, however, it is a severe disappointment.

Portland Japanese Garden

While in general it is not a good idea to use so many dark colours on a web site unless it is an art portfolio, the restful greens are not too distracting. The overall layout of the site is much more pleasing and easy to understand, although the main body text is tiny and almost impossible to read.

Notice in the navigation that they broke down the multitude of links into main categories of “Learn More, Visit, Events, Shop”. While the general principle is excellent, they unfortunately still did not choose a helpful hierarchy for a visitor. Remember that most web users are not proficient with their mouse and find multiple dropdown/flyout menus difficult. In order to merely find the garden hours, it goes:

Visit > Plan Your Visit > Hours

Finding that path took a little while, since “Plan Your Visit” is not very descriptive. People want to know the hours and admission prices right up front. A better path might have been a simple:

Visit > Hours & Admission

The same was true about the garden itself. For someone who had not been to the Japanese Tea Gardens before, a big question is ‘what do they look like?’ There are a few lovely spot graphics, but the explanations about the gardens are a bit buried and unclear.

Learn More > The Five Gardens > Individual Garden

Which is buried in a long list of things like “Articles” “Press Room” etc. It would be worth splitting out a new main navigation category of an easy “The Gardens” right along the top of the site. The pages for each garden have plenty of pictures and explanation, it is just a matter of finding them.

The events area is quite well done, other than the multiple menus. It breaks down the categories of events, which is helpful. Each event has plenty of information and accompanying images along with cost and reservations.

In general, the web site is very pleasing and has plenty of beautiful photos creating an excitement about the gardens. With a bit more organization for potential new visitors and some larger text sizes, it would become a fantastic site.

Royal Botanical Gardens, Canada

Though there is a lot of information presented on the main page, it is done using a careful magazine grid structure that people are used to and includes plenty of large open areas and interesting images to avoid all the text being overwhelming.

The hierarchy of the navigation list could definitely be challenged, but there are not that many total link categories so it is possible to skim them quickly.

Like the Tea Gardens, it is difficult to find a simple tour of what the gardens look like (are they worth visiting?). They are buried under the visit and explore section using very small text and way down below the shuttle buses info.

The basic information such as hours and admission prices also require multiple clicks to find. People want that information quickly and in large text.

There are some very interesting aspects to the site, including a gardening magazine, documentation of each plant present and practical gardening information. They also list the restaurants available, although in a somewhat confusing manner.

They have plenty of information that is presented in a decently organized fashion, but lack the visual appeal of the Tea Garden web site.

The Butchart Gardens

This is an example of an extremely well designed web site. Notice the large text, extremely organized information sidebar with spot graphics, single photo area and clear navigation? This is what a garden site should look like.

The menus are easy to understand both for first time visitors and fans of the garden who want in depth information. Image galleries and garden information is easy to find, restaurants have their very own navigation link with clear information and the events calendar is right up front as well.

The only issue on this lovely web site is finding Admission and hours. They are grouped together, but are always far down in the link hierarchy. They also include multiple clicks to find them. I’m not sure why everyone seems to think that hiding admission prices and hours is a good thing, considering it is the first item many people will want to look up. Pretty much every visitor will first look at the landing page garden photos and go ‘how beautiful, I’d love to visit’ then want to have a quick glance down to see the price and hours. This answers the ever burning modern question ‘can I afford it?’ if the answer is no, they don’t want to waste time on the site other than for wistful drooling over the photo gallery.

What we learned:
- Keep the landing page simple with only pertinent information
- Put links into categories rather than listing every page on the site in one long list
- Make sure the hierarchy of links is clear
- Always consider first time visitors and make it easy for them to navigate
- Don’t bury important info like hours and admission prices
- Have enough spot photos to keep people interested

- Lots of pictures to see the ambience of the pub
- Calendar of Events / Live Music
- Location (including street photo of pub) with directions
- Menu, prices, what’s on tap

Unlike bars, a lot of pubgoers are very interested in the atmosphere of the place, along with how good the food is. Even most American pubgoers have spent some time in Europe and are familiar with that sort of pub, which is the reason they are seeking one out.

The main reason for a street photo request is that often there are several pubs in a row, and a photograph will help identify which one to go inside. Also, when in a strange town, a quick street reference when driving through trying to find the place is of great assistance. They also requested there be a photo both day and night available since the look of a street can change significantly in various light conditions.

Whereas those going to a restaurant tend to be interested in menu prices, those I interviewed about pubs said that wasn’t a big issue. Usually the prices are fairly reasonable and they are going for the atmosphere primarily, and possibly the live music. Therefore, a detailed menu is not high on their priority list. They’d be happy with a quick pdf reference.

Let us take a look at some pub sites from around the world to see how they are organized and if they match what the target audience is looking for.

White Horse Pub

One of my favourite pubs in Oxford, the actual pub itself is excellent, with a cozy interior and great food. This is not reflected in the web site, which is stark and a bit gloomy as well. You want to have all the important information above the fold, and while the general address is crucial, there needs to be a bit more when you first arrive at a web site. Large blank areas tend to leave the visitor waiting for more to load.

Mystery Meat Navigation
This has inexplicably been a trend online for some time now, and the number one complaint I received when asking “what bothers you the most about web sites” on my twitter account. People jolly well want to know what they are clicking on. They don’t have time to waste playing adventure games trying to figure out what page it is. “But the name of the file appears on the browser” is usually the response. Correction, several modern browsers have slimmed down to actually eliminate that. And who wants to squint at the bottom of a tiny grey bar to read tiny text in order to figure out what page they will land on? Just tell what the link is! It may seem boring, but that’s what people need to know.

There is a photograph of what the White Horse looks like from the street, which is very helpful, although it is not presented in a very appealing manner. It also would be well to include a shot taken from across the street to show more of Broad giving an indication where on the street to look for it.

The pages include a link colour that vibrates with the background colour. This is actually a fascinating effect of colour theory. Certain colours put next to each other literally appear to be moving. While an intriguing scientific phenomena, it is not something you want on a web site where people are trying to read quickly. Best to have a nice contrasting colour to the background that also fits in with the rest of the site scheme.

There is a heavy use of stock photography on the site, which is really too bad considering the White Horse has fantastic natural ambience which could be shown to advantage. It is very small inside, but that isn’t a fact that aught to be hidden. People need to know things like a pub’s size, in case they want to bring a large group.

Example of the chaos:

It is very difficult to navigate the site, and the pages are a bit of a jigsaw puzzle when you try to view them, which is really a shame. There are some great tidbits of content on here, like pictures of Elijah Wood, pub events, etc. If it were reorganized, the site has potential to be quite stunning. Here again is an example of decent content but without using proper design, thus doing the opposite of what the site intended– driving away potential visitors to the pub.

Eagle & Child

Here is a look at the pub I spend the most time in, which is much larger but has a great historic and warm atmosphere. Technically this is on the Classic Pubs web site, but as you can see the design is much more functional. There is a clear list of links right at the top including directions, menus, drinks and news. There are plenty of photos on the homepage arranged quite well showing what the interior resembles. The main page hits all the important bits– famous history of “The Bird & Baby”, hours, and latest news.

There is an interactive map showing where on St. Giles the pub is, but not really any clear pictures of what it looks like along the street. Considering almost every Lord of the Rings and C.S. Lewis fan has had their photo taken outside the Eagle & Child, it should be easy enough for them to walk out their front door and take a picture.

The menus included some excellent food photography of their actual dishes (which are always beautifully arranged) which is a big plus.

In short, it is a very well done site, although it could use some improvement, and a good example of what a pub site should be.

Murphy’s Irish Pub

Moving across the pond to the most popular pub in Sonoma County, CA, this is another example of a poor design concept with decent content. Much of the important information, like the address and phone number, is over an image, which is a bit of an issue. There are so many colours and images and graphic elements that the first impression is overwhelming and many people would simply leave without perusing further.

The menu uses standard stock photos, which is a bit off putting because it is so obvious. Better to get a friend or family member who takes good photographs to set up some still lifes of the actual pub– otherwise people think you are trying to hide something. There is also no particular reason to split up the menus onto several pages, making people click multiple times. The key with web sites is to eliminate as many clicks as possible. There were also several pdf links without warning. It is important to always label pdfs, because often a sudden large document will crash the browser, or at least irritate your visitor. Put up the pdf logo, a text warning, and list out what file size it is (200k, 1.4mb etc)

While the site included pages that were requested by pubgoers, the content didn’t really reflect what they were looking for. There are photos– but not really many showing a typical look at the pub, or how to find it. Murphy’s is down a long alley and it would be helpful to have a sort of photo tour first of the street along the plaza, then down the alley itself to show first time visitors where to go. The events was well presented with plenty of information, and that is where the real life of the pub is.

What we learned:
- Don’t use ‘mystery meat’ navigation– say what the link is
- Make sure you have some content above the fold, not just large blank areas
- Be careful that the text colour doesn’t vibrate or clash with the bg colour
- Use plenty of real photos of inside the location and outside, including food photography
- Don’t put your address/contact info as an image
- Try to eliminate several clicks to find information
- Don’t open pdfs without warning, and post the file size

For Moving:
Cost of Living – Houses, general expenses
Employment – Are there a lot of jobs available? In what fields?
Crime Rate – One of the most important issues when thinking of moving
Other items that were less universal included schools/education, hiking/recreation opportunities, night life, events

For Visiting:
Culture – What museums, theatres, etc are available
Recreation – Parks, rivers, biking, etc
Location – Nearest airport, public transit, maps, directions
Other items less universal were shopping, weather, hotels/prices, events

As you can see, there is a bit of overlap between the two types of people– they both want to know where the recreation areas and locations of cultural interest are. People were equally emphatic that they wanted to find the above items almost instantly and wanted the links large and easy to spot. Let us now take a look at a variety of city web sites to see how they are filling the needs of their visitors.

City of Cotati

This is a small sort of town, so there was no separate web site for the government city vs promotional city. This is a bit of a problem for people that just want to visit or are considering moving there. They are forced to try to sift out the information they need from a barrage of relatively meaningless information put out by the government.

The most logical way to proceed was to click on “About Cotati”. This brought up a waffling by the Mayor, and things like the municipal code, city charter, history of the city and other equally unhelpful links. The only information found was a bit about the schools, which only families moving to Cotati would find interesting.

There are tiny tidbits on events and some recreation opportunities buried under menus, but in general we found out almost nothing about the city. If I were planning on visiting Cotati I’d know no more than when I first clicked on the site, and if I were thinking of moving, I’d be daunted by the huge amount of information available, none of which corresponded with what I was looking for.

Cotati: Great government site, complete failure to promote the city of Cotati (which incidentally is a fantastic city both to visit and move to).

City of Harlech

Let us turn to Wales for another small-medium size city. This is much more of a promotional web site, although it includes some government information as well.

From a design perspective, this site is as amateur as you can get, complete with animated gifs everywhere, poor use of white space and borders, and even neon text as the title. Moving beyond those issues on to the content, it is organized fairly well. It has plenty of photos of the area right on the main page, as well as information on the main location of interest. The navigation is simple with “Where to Visit, Where to Stay, Photos, Golf”. Most people visiting Harlech are there for either the castle or the golf course. All the castle information (hours, prices) is taken care of on the main page, and the golf course page is easy to find and includes all the information you need to know on that.

Where to stay lists everything from car camping to exclusive hotels in the area. The site unfortunately buried their link to an interactive map of the area (it is in small type at the bottom of the services page). Other items that would be helpful to a visitor would be maps to the extensive footpaths, trails and parks in the area, as well as more information on public transit options (the train, buses, etc).

For those thinking of moving to Harlech, it could use stats on jobs, crime and housing costs. There was information of that sort posted in the actual town itself, but it would be handy to have on the web site as well.

City of Bath

This is an example of the web design being so shocking that one can’t bear to spend more than about two minutes on the site. There are items everywhere in clashing colours. Scrollbars abound, blinking text and advertisements saturate the site. In general an informational site should never have a dark background, much less an odd blue of that sort. What is one of the most beautiful cities in the world has possibly the least visually pleasing site. Sometimes you can have fantastic content, but if the web design is not there to support it, you might as well take the site down. In the case of the Bath site, it would be better to have only a minimum number of pages that better reflect the city, than a large database that is painful to look at.

City of Corvallis

This is an example of a very restful, easy to use web site. They still have a lot of information on their landing page, but it is better organized and in a pleasing colour scheme. There is a list of events straight off, and obvious references to the fact it is primarily a university town.

Their lodging link covers everything from staying on a farm to fine hotels, the recreation/shopping/culture each have a clear page under “Things to Do”. The site is catering to visitors, rather than people thinking of moving there, but I think it is a helpful set of links even for potential residents.

Another great feature is the search function and sitemap, in case a visitor is looking for something specific. The main thing that is lacking on the web site is a clear location indication. Why don’t these city sites have things like the nearest airport, maps, bus and driving directions? Almost all the visitors I polled said that is one of the main things they look for.

City of Petaluma

While not as serious as the Bath design issues, this site desperately needs a redesign. The scrolling images on the right are not a feature that works, the colours are all over the map and extremely dark, rendering the type difficult to read as well. Modern social media like twitter and facebook have been slapped on without any thought to their design– it looks like some old houses I’ve seen where they started building in one time period, then each period added something to the house until it is a mish-mash of styles and no longer works as a whole.

Maddeningly, the biggest text on the landing page is “Get Here”, then it doesn’t tell how to get there! Imagine that! Like the other city sites, they seem to assume you know exactly where it is. On the contrary, people want to know how to get to the city.

Another irritating feature of the site is the fact you have to sit and wait for the dropdown menus to go through a series of fancy effects. They are like those animated dvd menus that you have to sit and wait for because the functions are blocked when all you want to do is play the film.

The actual information on the site is not very helpful and contains a minimum of description and almost no images. For example, ARTtrails, one of the best cultural events available all year has about one line of boring type and a phone number. There isn’t even a link to the web site! The copywriting in general seems designed to be dull and uninteresting– probably the result of a committee. In general, the Petaluma site is difficult to read, not very exciting and does not show the city at its best.

What we learned:
- Do not use dark backgrounds on text heavy sites
- Include detailed location / directions / maps
- Keep the information relevant, exciting and with photography
- Make sure the design is sleek, restful and not overcrowded
- Split out promotional sites from government sites
- Don’t sacrifice good design for large amount of content

First we will examine a series of museum web sites. In general I found they tended to use a variation of “Visit” or “Visiting”. For example, this is part of the navigation for the Philadelphia Museum of Art.

It looks, from the navigation, like a promising beginning. Unfortunately, once on the page we see several paragraphs of dithering, then some tiny almost unclickable links to the actual needed info like Hours, Directions, etc. What people want is to click “Visiting” and have the address & hours right there easy to find. Not this:

The New York City MoMA web site had the same problem, if not worse. It was clear how to get to the “Visit” page, but once there it wasn’t very helpful. It had a series of beautiful photography that rotated through showing the inside of the museum, but guess what, no actual info on how to get there! You had to play hide and seek with the address and hours, then finally when you found that there were several more clicks before you could get the information! Talk about frustrating to your average web user.

One excellent feature of the New York MoMA web site, was that they had instructions for public transit as well as by car. Not all locations bother to do that.

Where New York failed, San Francisco triumphed. Notice on the SF MoMA web site, their “Visit” page has an obvious address right up front, along with hours and ticket info all easily seen above the fold right up front. This is the first thing you see:

All on the same page are the Museum Store hours, Café hours, maps, directions, public transit info and parking info. In short, they did a fantastic job on their visit page.

They did not quite get the “Visit” navigation clear. In the other museums so far, it is fairly simple to find “Visit” from the web site landing page. At the SF MoMA, it is a fairly tiny little strip along the top, dwarfed by other large boxes such as “Singles Night” and “Family Studio”. Can you quickly find it in the screenshot below?

Moving away from museums, let us examine some physical storefronts. I have visited Virginia City, Nevada, quite often and there is a quaint little candy/sweet shop there. A quick google brought up their web site. Let’s play find the location.

At a quick glance, would you even know what state this was in? I don’t see any link to location or visit or find us. There is a listing for Virginia City, but how is that obviously the location? If you stumbled across this site while searching for candy shops, and wanted to visit, how would you know where to go? After looking about haplessly for a while, the average web user would just leave.

Here is a shop in Petaluma for quilting supplies, its navigation consists of “Home, About, Classes, Gallery, Contact, Links” I don’t see location or visit there. After sitting and thinking for a bit (and wasting time clicking all the other links) you eventually will end up on the contact page. Still nothing– it has the address but that’s all.

After clicking “About” there is some basic info like hours and a few general directions instruction. Whenever a store is near “Downtown” anything, parking is inherently an issue, yet that is not even addressed. There is also no info on possible public transit options (of which there are several).

Most people never click on “About” when it comes to stores, because usually that page just has cute little bios and meaningless “mission statements” that nobody reads. They could go to the site and literally never find out where the store was.

This is a mac shop in Marin, and while they have an image across the top with their address and basic hours, that isn’t very helpful save as a quick reference. Their navigation was “Store, Service, Promotions, Products, Trade-ins, About”. Where is location? It might be under store, maybe under about. Upon trying “About”, since the last site had the directions there, that is incorrect! All the page had were a few paragraphs of waffling. On to trying “Store”. More long paragraphs, but scrolling down to the bottom of the page revealed a repeat of the basic hours and address, still only as images. Where is a copy/pastable address that can be put into google? Or where is a proper map? Directions? Parking? It is as though the site were deliberately trying to stop people from finding the store.

These are just a few examples of what has become a major issue on the internet with physical location shops/museums/theatres. They have forgotten the whole point of an online presence– to bring in visitors! Many of the sites didn’t even have an online shop, so it is extremely important to have the location obvious and easy to find. People are busy, they don’t have time to sit about trying to figure out how to visit a shop. If the information isn’t right there, they’ll find somewhere else to go.

What we learned:
- Have an obvious link in the main navigation (named Location or Visit)
- Don’t have meaningless information on the location page, make it easy and obvious, people don’t care if a location is ‘culturally vibrant’ they want to know where it is!
- Keep the location text large enough to read quickly, especially the city it is in
- Include a map to location, map with parking options, public transit and directions
- Put store location and hours together, people want to know both at the same time

The men agreed that they looked for:
- Pictures (to see if it really was a beautiful bouquet)
- Price (was it affordable for them)
- Quick Purchase (once the above two were established how fast could it be ordered)

The women agreed they looked for:
- Type of flowers (specifics like orchids or lilies)
- Colour and detailed information about what flowers were in the bouquets
- Price (was it affordable)

I visited some of the top florist sites online to see how well they addressed those two different approaches.

Pro Flowers
http://www.proflowers.com

This site had the best structure for purchasing flowers. Right on the main page there were lists of bouquets, with a large easy to read price and equally prominent “Buy Now” button. The same was true once on category pages– excellent photography showing the bouquet, large price and quick “Buy Now” option. They also included an obvious “Details” button which included full flower information, height and vase selection. As for ease of ordering, you could be in and out of the site in a matter of minutes.

The navigation could be a bit larger, but at least it was simple and easy to understand. It included an option to pick a specific flower, or go straight to the special deals.

FTD
http://www.ftd.com

While the main site itself is not much to look at, and definitely does not encourage an excitement of purchasing, it did have large navigation and was fairly well organized.

There was a clear option for both type of flower and price range, and had a significant number of bouquets available on the main page, although they were below the fold and require scrolling for a while to access.

Unfortunately, although their flower photography is excellent with a minimum amount of distracting background, the prices are difficult to find. Throughout the site, the bouquet prices are tiny and in odd places– the title of the bouquet is much more prominent. People don’t care what a bouquet is titled, they want to see it, then see the price as fast as possible. There was no clear “buy now”. The individual detail pages had almost no information about the type of flowers, and were more interested in flowery language than language about the flowers.

From You Flowers
http://www.fromyouflowers.com

While a much more pleasing site design to the eye, and including many bouquets easily accessible on the homepage, From you Flowers also covers up the prices. You have to squint very carefully to view most of the prices– there is no need to hide them. The faster people see the price, the faster they will buy a bouquet and not leave in frustration.

They desperately need larger and bolder prices, and the orange “Order Now” button is blinding and difficult to click on. It is admirable that they have two obvious buttons for “Order Now” and “More Info” but their colour choice is poor and could drive away business. Their bouquet details are quite informative, however, including the meaning of the flowers, different names for them and exact colours available in the bouquet. It also had a facebook and email option for each bouquet. Their checkout process was obvious and easy to use.

From You Flowers is also the first to offer a “By Colour” option, which many people I talked with said they preferred to “By Occasion”. Often you will know a friend has a favourite colour and want to go straight to that, rather than navigate occasions by guesswork until finding a bouquet with the right colour. That alone puts this flower site on a cut above the rest for user friendly options.

1800 Flowers
http://1800flowers.com

This site is one of the most visually pleasing, with large easy to use links and headlines. Unfortunately, it drops the ball when it comes to prices. I have no idea why flower sites think that by hiding the price, people will be more inclined to purchase a bouquet. It is the exact opposite. Go ahead and be obvious!

The details page is extremely confusing, with suggested other bouquets, links everywhere, and the description difficult to find. Once discovered in the mess of info, banners and links, there is usually quite a lot of information about a bouquet. The ordering process is confusing, busy and difficult to use. Once you find a product that is interesting, it takes a while to figure out how to purchase it, and not a very good experience, compared with the sleek clarity of the From You Flowers checkout.

The navigation dropdowns have pleasantly surprising large readable links, which is admirable. It includes categories for flowers and on sale products, but colour is difficult to find. It also has a cleaner look without the triangles and small fonts that were on the other flower sites navigation bars. It has a side navigation column which lists all the main categories with full lists, including “Narrow by Colour”. Unfortunately, this is the last of the sets on the sidebar, and would never be seen unless knowing exactly where to look and scrolling quite a way.

What we learned:
- Make a quick purchase easy with obvious buttons
- Include full details about a product on the detail page
- Provide search parameters people want (like colour)
- Keep the prices large and easy to read
- Make checkout process fast and simple
- Use readable font sizes
- Don’t hide important link categories

EverBank

This was mentioned by a middle aged web user who found the sign in box somewhat difficult to locate. The main problem was that the text was too small– there was no large bold header about signing in– they have a tiny “Manage Your Account” link in a monochromatic colour with the rest of the box that is difficult to see on first glance.

As you can see, this isn’t exactly an eye catching way to display the sign in area. There is no need to be subtle– returning visitors want to land on the Homepage and go straight to their account. Make it large, bright and easy for them!

Bank of Marin

In this bank site, the login area is in the same general location — top left, but notice that it is much more obvious. There is a bold contrasting colour with the rest of the top navigation, and a delineating bright colour under the actual login area itself.

This is a much better way to display a login area, though it could use a larger header. Despite the colour field behind “Secure Login”, the font size is still small enough that older visitors to the site would have trouble spotting it right away.

CHASE

This has a very streamlined homepage, so that the only main area is the login, and relative to other elements on the page the text “Log On” is fairly large. The reason the login area is bold and easy to spot, however, is that everything else on the site is so small that you can’t read it at all. This is not the way to emphasize a login box.

Take a look at the rest of their navigation as well. How is anyone supposed to read this?

International Assets Advisory

This site was one I received several complaints from users regarding. They said it was almost impossible to locate the Client Login. As web designers, we often know to check for a tiny bit of text at the top right– trouble is that users don’t know that. Worse still, a lot of the people using the IAA site are elderly and have difficulty reading or seeing miniscule text. Take a look at their client login size:

Even after finding the link, it is so small and difficult to click on for older users, that it is just as frustrating once discovered. People who did not grow up with computers have more trouble with their mouse control than the tech-generations. Be merciful to them and give plenty of area to click on!

Exchange Bank

At last a banking homepage where the login is bold and easy to spot! The site uses a bright blue colour field larger than anything else on the homepage to bring out the white login form fields. Even though their “Online Banking Login” is too small, due to the very nature of the box its meaning becomes clear. Excellent example of using colour to shift a visitor’s attention to important items.

What we learned:
- Don’t sacrifice the needs of return visitors to entice new ones
- Bold use of bright contrasting colour boxes is effective
- With something as important as the login title, use an over-the-top large font size! Make it easy!

See’s Candies

See’s Candies has had a specific branding look for a very long time, which works well because it is easy to recognize– they have black checkerboard stripes and a strong black logo. The way it was translated in their web site could use a bit of improvement. Each different box has been given its own black background, leaving the viewer overwhelmed by little pieces everywhere. A strong larger top black navigation bar that is solid would do a great deal to give a more streamlined look. Notice that their navigation is very small and difficult to read:

It also has a down arrow indicating more links, but in some browsers the dropdown does not work. Their left navigation is fortunately of a slightly larger size, but the links are too close to the left edge, making it difficult to quickly scan through:

The main advantage of the stark look of the site is to bring out the bright red and pink featured Valentine packages quite effectively. Even though the navigation of the overall site is difficult, within a few seconds of the site loading a visitor can find the Valentine section. Once in the area, a very simple and clear page has a thumbnail of each gift package with price clearly stated. The checkout is equally simple– it keeps a clean look without clutter and high quality photographs of the product so you know what is in the gift box.

Advantages: Quick checkout for Valentine Gifts, Lack of visual clutter
Disadvantages: Small type, Scattered Homepage, Difficult navigation, Not exciting

Ghirardelli Chocolate

This web site has a rich sumptuous quality to it that almost makes a visitor’s mouth water. It has strong contrasts and subtle browns giving the site an appearance of almost being a chocolate bar itself. There are clearly denoted sections set off with excellent food photography. The navigation bar links are a bit small, but still readable:

The dropdowns from them, however, are tiny, mashed together and almost impossible to navigate:

While the site is beautiful, it was difficult to find specific products or navigate about. Once on subpages, the visuals continued to be fantastic, but the text got smaller and smaller.

Advantages: Exciting design, Makes visitor want to purchase the product
Disadvantages: Can’t find anything, Very difficult to navigate, Tiny type

Mrs. Fields Cookies

The first impression is bright and cheery, although the photographs are a bit fussy looking, fuzzy and busy. If they either had fewer photos or better food photography it would definitely be a huge improvement. Like See’s, their top navigation is broken up into separate sections which tends to exaggerate the already scattered nature of the homepage design. There is also a red field around the top which is cut off as though it were a mistake. The colour field either needs to end along a horizontal plane (such as the top or bottom of the navigation bar) or continue down the sides. They also broke the main content area into three boxes with very thick red borders, which is hard to look at visually without being overwhelmed. The navigation is well organized, but the dropdown text is way too small.

As you can see, once on the main Valentine’s page, most of the space is wasted with a meaningless block of text that no-one will read. Gift baskets/boxes are all about visual appeal. The page gives the very opposite impression. A lot of the products have > in front of them which just makes the name difficult to read and looks like a mistake. Once on an actual product page there is a vast improvement. The Shopping cart section is easy to use with lots of great options, including what type of tin lid to have. They should really be promoting that on the rest of the site.

Another problem with the site is its use of colour– besides the odd top red field, there is also a strange yellowy green that is in large areas here and there on the site. You don’t want to put a somewhat sickly looking colour next to a food product.

After looking through a lot of the Mrs. Fields Photography, I have to come to the conclusion that a darker background would be advisable. Normally you never want to use black or dark brown as the basis of a web site since it is so gloomy, but there are a couple of exceptions. Fine art and photography is best served with a dark background, and the type of food products on this site would also benefit from being in a less harshly white environment. The colour fields behind text could still be white, but I think the site would benefit by having more rich dark browns as the main colour rather than fighting huge white areas.

Advantages: Well done shopping cart options
Disadvantages: Navigation broken up and dropdown text too small, site is difficult to look at with its poor use of colour and photography, too much text and not enough quick access to products, hard to find products

Hershey’s Chocolate

Here is an example of a site that uses rich browns as the base colour quite effectively. Even the navigation bar looks like a series of chocolate bars that gets a visitor excited about the product:

The moving images on the homepage get a bit old after a while because they are on a loop. It is usually best to have a rotation like that end at some point so people can safely look around at the navigation options without a distracting blur in half the page. Upon clicking on the various sections, the site begins to break down. It continues to have a fresh, inviting visual look of chocolate and interesting background patterns, but the text gets too small.

The side navigation is still a decent size, but there start to be too many little design elements here there and everywhere. The left has little dots by each link, the right has constant hr dotted lines of a different size, the top navigation keeps changing its look and they all start adding up to a very complex site that is no longer easy to maneuver through. The text size gets smaller and smaller, the pages more and more difficult to use and the main content area is divided into columns that are so narrow I’m surprised they fit anything at all. See the below three column format:

Advantages: Lovely sumptuous visual look of the product, clean interesting top navigation bar
Disadvantages: Miniscule text, almost impossible navigation, too many site elements vying with each other, main content area too narrow

Fortnum & Mason

It is interesting to see what other countries are doing with their site design in the same product genre. This is one of the finest British gift basket lines. They have a very clean, yet elegant look using interesting sorts of lines to indicate various areas of the site. They keep their main boxes together more in a tab structure, rather than having bits and pieces all over the homepage. Their bottom navigation bar is large and easy to read:

Whereas their top navigation could definitely go up a few point sizes.

The navigation is very organized, however, and if it were only larger the site would become very easy to navigate through. Like Mrs. Fields, they also have a text area in their valentine section, but take a look at how different it appears. They used some fantastic photography to highlight their product line, and while the text itself is way too small, the overall effect is excellent.

They have their Valentine products all carefully arranged similar to See’s with thumbnail and large price which is great when trying to scan through the products quickly. Individual pages have excellent photography like the rest of the site, but like the Americans, the text is unreadable.

I’m not sure why any site trying to sell a product thinks people like type sizes that only a 20/20 vision visitor with lots of time on their hands to squint through reading can navigate.

Advantages: Elegant visually pleasing design, clear navigation, excellent photography and organization
Disadvantages: Text is too small to read, particularly the navigation and main product pages

Here is a cross section of all sorts of information related web sites whose text is the most important part of their mission.

Historical Maritime Society

This is a fairly standard web font size online, and as you can see it is very difficult to read. Trying to make out even this short paragraph requires some squinting and careful observation, and there are entire long articles on web sites that visitors are expected to read at that size. The web designer probably assumed the audience knew all about the Command/Control + shortcut, or had set their browser preferences to display huge type, but the only people that know about that are either tech savvy users or fellow designers. The average visitor will have no idea how to “fix” their browser. It is much better for a designer to “fix” their web site font size.

National Cancer Institute

As you can see, the size a medium small look. It could be a bit bigger but isn’t too drastically tiny. The main problem here is the leading (spacing between lines). See how they are jammed right on top of each other? You can barely see a gap between the two lines making it tricky to read. Sometimes web sites get the right size, but not the right spacing.

Star Wars

This shows how the font colour can affect how you read web text. The cancer site had a medium grey, but the Star Wars site chose black. Even though they both have very tight spacing between the lines, it is easier to read the Star Wars text. Too much black writing for page after page can be overwhelming, however, so a nice compromise between black and light grey can usually be found around #333333 which is a slightly muted black / very dark grey.

Butterfly Garden

Here is another site similar to the Star Wars example– as you can see the text is a good reading size. With long articles, if the font is too large it can cause issues with too much scrolling. Yet this is also a size that can be easily skimmed through or read. It is set at 12px which is about the minimum when it comes to readable font sizes.

Oregon Historical Society

Another question is the serif vs sans-serif font debate. Here we have a 12px, dark grey font, but it is serif. For some reason, in tactile printed pieces a serif is easier to read but on a screen sans-serif fonts are easier to read. This is not a hard and fast rule, however, and there are proponents of using serif fonts online. In this case I believe it is fairly obvious that the font is too small to be read easily. The text should be bumped up at least a few points to perhaps a 14px font.

Into the Wardrobe

Here we see a fairly typical web font size and the reason for all the complaints. Can you honestly read that? I think I’d need to get a magnifying glass out myself. It should be almost triple that size to be legible.

Irish Tourism

Remember what I said earlier about having plenty of space between lines? Here is an example of taking that to the extreme and running into trouble. There is too much leading in this paragraph– the text no longer has the feel of a cohesive block. It is also way too small.

What we learned about font sizes:
- Start with at least 12px (1.2em) and possibly go up from there
- Comfortable spacing between lines (not too much not too little)
- Stay with dark greys or black (#33, #00)

The response of most web designers is a mixed reaction of how large type showed poor design skills and that if someone can’t read it they can “Just use Command/Control +”. While a lot of web designers are well aware of the keyboard shortcut that causes a browser’s text to become larger, I asked around with regular web users and they had never heard of it. In short, the web site should have text that is large enough to be readable without mystery keyboard shortcuts.

Navigation was the first complaint of web users, so here are some screenshots from a variety of different sites to illustrate the problem and solution.

Tiffany&Co

This is a section of the navigation bar at Tiffany&Co. The web designer is no doubt trying to look elegant and tasteful by making the font as small as possible. The brand name alone brings web traffic, but it can put people off from a return visit. If the memory of the web site was that of frustration whilst purchasing an Engagement ring, would they be likely to return and relive the difficulty when next they need to purchase a diamond? Possibly not.

REI

The above is from the REI outdoors web site. At first glance this navigation looks nice and large, but unfortunately that is only one part of the web site. The actual nitty gritty navigation that people really need to know about reverts to the Tiffany look.

This is the set of navigation that people will be actually using, and as you can see it is extremely difficult to read. Here is an example of needing to Command/Control + about seven times before it is a proper size. So make sure all the navigation is nice and large, not just certain sections.

Bowhunter Superstore

This is an example of not only tiny navigation, but extra elements crowding in causing an extremely busy look which is even more difficult to read. Tiffany and even REI understood that with tiny navigation you need plenty of white space and no distracting shapes around the navigation. If Bowhunters tried, I doubt they could come up with a navigation that is more difficult to use than this. Keep the main links clean and clutter free, particularly when they are small.

Apple

The leader in web design for some time, Apple has a medium to small size font with its most popular links extra large. Notice the “Shop iPhone” is a size that is extremely easy to read, whereas “Mac Software” is much smaller, though not as tiny as Tiffany’s links. This shows how the size of the link is crucial to the hierarchy. Apple understands what size is quick to find and click on.

The Small Boat Shop

This web site overall may not be impressive, but they have a decent size navigation which most people can read fairly easily. It is a bit spaced apart for the eye to jump quickly from one to the other, but in general it is a good nav bar for the average user.

San Francisco Ballet

Here is a medium sized navigation example at SFB. They have better spacing than the Small Boat Ship site– you can scan through the links much faster and it is a large enough size to be readable. Links in the navigation should never be smaller than this– only larger.

What we learned about font size in navigation:
- If you must use small text, be sure to leave plenty of white space
- Consistently use a readable size– not large in one area and tiny in another
- You can use size to emphasize certain links as long as they are all a readable size
- Do not space the links too far apart
- Make sure the link size is large enough to be read at quick glance by someone with poor eyesight

1. What’s playing? Dates / Times
2. Ticket prices
3. Map of theatre interior seating chart
4. Location – Transit Access / Parking

Let us see how well theatre web sites reflect their audiences’ preference of hierarchy.

San Francisco Opera

The main rotating images show exactly what’s playing, and has a clear list for their 2010-2011 season, without too much clutter.

Their main navigation bar has been carefully streamlined to show only five main link areas, so it is easy to quickly spot the “Purchase” section. Unfortunately there is no page listing all the ticket prices readily available. There are a multiple number of pages to be gone through and fiddled about with before finding where to uncover that information. This is quite frustrating.

The seating chart is also difficult to find– you have to go through multiple dropdown hierarchies and it is not in a very intuitive location. It is buried deep inside the Purchase section underneath other unrelated items. Once on the page, however, the seating chart is easy to use with obvious coloured sections explaining where each ticket would appear in the theatre.

Location information is somewhat easy to find– under Purchase > Plan Your Visit, but still difficult to quickly uncover and has a multi-level dropdown which causes problems for the elderly and middle aged. They have an excellent public transit “Trip Planner” showing exactly what to use and how much it would probably cost, as well as how much walking is involved. They have a long list of possible parking garages, but there are no maps to them. Just giving a street address is not very helpful for out of town visitors.

New York City Ballet

They have a very clean looking web site with plenty of white space, and an elegant rotating image sequence of their 2010 season with obvious places to click and find out more about particular shows. The dates and times are not as obvious, since they buried them at the very bottom of the post about each particular event in a small font.

Their ticket prices, like SFO, are a bit buried. You have to click four times before viewing: 2010 Season > Buy Ticket > Click on a date before finally seeing a list. Once on the page, it is very obvious which prices go with which seats.

The seating chart is fortunately extremely obvious– it has a large button on the right column of the web site on almost every page. It opens in an unexpected popup, though, which could be a bit irritating. It also is not as obvious a seating chart as SFO– you have to hover over various areas to view info instead of having a quick clear list to glance at and compare with ticket prices.

The Location is a bit buried under “Visitors”. It has some excellent parking information, including garage prices and detailed directions to each of them. I went through several sections without finding any public transit information, until eventually finally finding the directions (also buried). The Public Transit information was brief, small and dumped a the bottom of a very long page that didn’t seem an obvious location for it.

Berkeley Repertory Theatre

Like most theatre sites, they have a rotating area of their season, but there was not also a clear area to click to view the entire list like NYCB had on their homepage. After only a few seconds of glancing at their main navigation, I spotted the link to shows, which had a full dropdown list. The dates were not very obvious, though, since they were simply in the middle of a long list of pertinent information about the play, such as the writer, director, world premiere, etc. The dates really need to be higher up in the hierarchy– a lot of people I spoke with said they had to chose what play to see very much based on when it was rather than what it was.

Although there were still several clicks to find ticket prices, it was easy to navigate through. Tickets > General Information > Performance Times & Prices. They had a very obvious chart of types of shows and seats with price ranges that was quite helpful. On the same page they had a seating chart. Instead of colours to denote seating areas, Berkeley Rep used shades and tints of grey. While from a design perspective that is much more pleasing, it is not very easy to use quickly. For once, gaudy colours have their use. The eye can glance between a red dot and red area vs a blue dot and blue area much faster than subtle different types of grey.

The location took a little while to find– it was not obvious in their main navigation and it took a bit of playing around in menus to discover the page. They did have an excellent list right at the top of Directions, Parking and Transit Access. Their explanations about the parking garages was detailed– including what garage was recommended for different times and what traffic was apt to be like. Their “Green” public transit descriptions were also more detailed than other theatre sites which is helpful.

Oregon Symphony

They have various sorts of lists of upcoming concerts, but they are a bit scattered here there and everywhere, so it is difficult to figure out where to look. Once having clicked on “Concerts” there is an easy to use list, and the site has very clear dates and times with each event.

The ticket prices are difficult to find without going through the entire process of getting ready to purchase a specific performance time and using several forms. They don’t even list the prices of their types of subscriptions on the main subscriptions page. A seating map was nowhere to be seen. It might be on the site, but it would take a while to find.

Location, directions, parking and transit access were not available. There wasn’t even a clear address for the theatre that a particular concert was in.

Pacific Northwest Ballet

Their main page is primarily showcasing the various dates and times, making it extremely easy to find out what’s playing.

The ticket purchase process literally includes the seating chart– rather like buying airline tickets. First there is a price range selector– how much are you willing to pay? It then shows you what seats are available zooming in so you can literally select a particular chair in a particular section. Fantastic and fun way to buy a ticket! They also have a more traditional seating chart section as well.

It only takes a couple of clicks to find all the location information that is needed. Unfortunately, the actual information given is not very helpful. They basically have a link to the main public transit web sites, rather than specific guidelines about what stop to use, etc. Their parking garage information is similarly sparse.

What we learned:

- Market research about what visitors want is important
- Write easy to understand navigation link names
- Avoid multiple level link hierarchies
- Make the primary purpose of the web site obvious
- Include detailed instructions and maps to location
- Don’t be afraid to use colours for important charts
- Make price lists easily accessible

The Weather Channel

Clearly the web site is more about selling advertisements than actually finding the weather. There was so much information all on the main page without a clear hierarchy (most of the text is the exact same size) that it took several minutes to locate the search box to input a zip code.

Once on the page for 94901, there was information and text all over the place, making it extremely difficult to locate the needed information. The main emphasis was on the current temperature, and while that is interesting when planning a trip to the location, it is not very helpful when planning the rest of the day. It took a lot of scrolling to find the weather report for the rest of the day, and it was still very chaotic. The main problem with the site was too much white space– I never thought I would say that phrase, but in this case it is true. There are large areas of completely wasted space in the wrong areas– information that should be in the same area (such as rain/wind and precipitation) are spaced out as if they are not related.

Overall, it took almost five minutes of looking about to find the information, rather than presenting it in a simple compact manner.

Weather Reports

This site claimed to be clutter-free, but while it was a bit cleaner than other weather sites, it still was not without difficulty in navigation. There is a large white area at the top homepage that seems out of place– as though there were something that was supposed to load there. The search box was so long, that it blended in as a sort of rule or part of the design, rather than being obviously a box to search in. It took almost a minute to register that the long thin line was a place to type into, and the “Go” after search was small and would be difficult for elderly web users to click on.

Once on the 94901 page, the header was nice and large so it was clear what location was being displayed, and despite the irritating advertisements, it was fairly easy to scroll down and see the rest of the week. While this site is much cleaner, its advertisements mimic the overall page design so well that it takes a while to sort out what is a weather forecast and what is an ad banner which is very frustrating. While this is a known modern technique for encouraging people to look at web banners, it can have the opposite effect to that which was intended.

Accu Weather

This was incredibly overwhelming with all sorts of items all over the place. I think the most distracting part was the huge array of colours presented. Often when there is going to be a lot of information, it is best to change to a monochromatic theme– if there is going to be an information overload, no sense adding in a colour overload as well. They helped offset the problem by offering a zip code search in several places, and did use some large colour fields to help accent them enough to be visible. A bit more padding around each search box would help even more, and obviously organizing the web site in general.

Once on the subpage, they have a very helpful setup for their weather display. While the overall busy look continues in the left and right column, the center content area is a very compact area with exactly what a visitor would want to know. There is minimal scrolling and the info is all right there and easy to read. It is difficult to get past the over-designed nature of the web site overall, but they have one of the best individual weather displays online. Unfortunately, many visitors would be so put off by their homepage that they would never search and discover the weather forecast.

Weather Underground

The site is aptly named, because they also hid their weather city search so well that it takes a few minutes to locate. On this site, white space would be very helpful– items are jammed up next to each other and the colours are again a bit random. There is no sense of structure or continuity to the site, and many of the most important aspects are crammed into a tiny left navigation bar. They also mixed together a very modern web design look in their top navigation area with a very old style of web design and the result is that the site almost vies with itself, rather like an art gallery putting a Rembrant next to a Jackson Pollock. Scattered is actually a good word for describing the web site.

The specific forecast page has a lot of information in a small space, although that makes reading the crucial elements difficult. They do manage to fit everything so that there is very little scrolling involved, but the text style and variety of colours render it almost impossible to read. The ad banners are also situated so that they add to the chaotic look of the site.

What we have learned in putting together an information driven web site:

- Maintain Clear Hierarchy of elements
- 3 Bears of White Space (not too little, not too much)
- Make sure content vs ad banners are clear
- Keep to a specific limited colour scheme
- Minimize scrolling
- Make sure your important items are easy to find

Heavenly: Lake Tahoe

There are some exciting background action images of fun skiing adventures, and their navigation bar is set lightly on top. Some of the images work well with the system, but a few of the times I refreshed the navigation was rather difficult to read. As you can see above, the link colour chosen was white– the problem is that snow is also often white. They needed to be a bit more careful in making sure the navigation bar always fell across a darker colour so there would be plenty of contrast.

Several of the link names were on two lines, and other were on one line. This breaks up the line of sight for visitors who want to quickly glance across a navigation bar and take in what is there. It is better to shorten the navigation names and alter the structure of the web site so that all links are on one plane, rather than some stacking and others not.

The hierarchy on the web site makes it somewhat difficult to tell where to look first and which is the main web site navigation– almost everything has a very soft look to it, leaving a visitor at a loss where to go first.

Breckenridge: Colorado

The general feel of the web site is somewhat gloomy and foreboding, including the navigation bar. It is easy to read and all on one plane, unlike the Heavenly navigation, but it looks like a site Darth Vader would enjoy. Looking at that navigation doesn’t say “fun exciting vacation”. Yes there are some bright photographs in the center area of the web site, but what people will look intensely at is the nav bar. If that isn’t also appealing, they may simply leave the site, or at the very least have a lower opinion of the vacation potential.

Bear Valley: Sierra Nevada

This navigation is a bit more cheery looking, although the european arrows add to the overall busy feel of the web site. Unfortunately, dropdown menus often cause problems when overlaying dynamic changing image areas. This site is no exception, a few of the browsers I tried had quite some difficulty properly displaying even the first dropdown level, much less the second. Another problem with that style of navigation is that elderly and even middle aged users have difficulties manipulating the mouse for difficult feats such as getting through several menus as the image above shows. The biggest complain I have heard from 40+ web users who are not in a technical field is how difficult any sort of dropdown menu is– even in computer programs like Photoshop. The target audience of a ski resort is not just young people, which is something which should be kept in mind when creating tricky navigation like Bear Valley uses.

Big Sky: Montana

The navigation is extremely easy to read, and uses quickly identified short words which is fantastic for a visitor scanning the navigation bar for what they need. The navigation bar was obvious and not difficult to find. While it does use dropdown menus, it is only one level and fairly stable even over their homepage image rotation area. There still might be some problems with it, but they found a decent compromise between complex dropdowns and having to click multiple times to find a page due to lack of dropdowns. The site overall is not very interesting to look at and has its issues, but the navigation bar is excellent.

Diamond Peak: Lake Tahoe

This uses the usual what has come to be known as web 2.0 graphic design look. (Technically it is an incorrect term, but since it has become standard now there is no sense denying it any longer). Normally this is not a bad way to go– the deep yet rich gradient background with clear contrasting text is excellent for displaying a navigation bar. In this particular case, however, the links are too far apart. White space is important on a web site, but a huge gap between links strains the eyes when trying to jump quickly from one to the other. They are also not evenly spaced– toward the right end of the bar a few links are jammed next to each other, and in other places they are extremely far apart. Links need to have an equal distance of space between each, and preferably not too much as in the spacing above.