navigation Home Portfolio Services Rates Contact

Posts tagged ‘Navigation’

June 7th, 2010

Colour in Web Design – Green

While the meaning of colours changes across cultures, green is fairly universal. It usually implies growth, nature and vibrant youth. Studies have shown it has a calming and relaxing effect. In marketing, it has come to represent the “Green” movement of sustainability in products and industry.

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

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