navigation Home Portfolio Services Rates Contact

Archive for March, 2010

March 29th, 2010

Destination Gardens

This time of year, many people like to go visit destination gardens– whether on a romantic excursion, fun family outing or alone to view the gorgeous flowers at their height. When trying to decide where to go, it is important to see:

- 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

March 20th, 2010

Pub Style Restaurants

Since St. Patrick’s Day was a fairly recent event, this is a look at Pub web sites. I asked around for what typical pubgoers were interested in when the checked a web site for a potential location and this is what they requested:

- 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