Orange Website Inspiration

Apples to Oranges: Usability and Web Design

Orange has been such a trendy color recently, so it’s no surprise that it has gained popularity in web design. According to color theory, orange is associated with energy and optimism, making it the perfect color to communicate a creative idea or sell a unique product. Despite the color’s warm aesthetic appeal, websites need to be more than just visually enticing in order to clearly communicate their message. Let’s take a look at some orange websites and see how they rate for usability.

World Vision

According to their website, World Vision is a “Christian humanitarian organization dedicated to working with children, families, and their communities worldwide to reach their full potential by tackling the causes of poverty and injustice”. It makes sense that a nonprofit organization like this would use orange, as the color is known for its positive and humble associations.

In this clean white design, orange acts as an accent color, highlighting important links and navigation. This helps to improve the site’s usability by establishing hierarchy. The home page itself is very usable, and does an excellent job of organizing a variety of information. The goal of the site is to get you to sponsor a child, and the home page gives you multiple ways to navigate to this page, all with consistent wording.

Like the home page, the “Sponsor a Child” page features a photograph and biography of a random child. The photograph invokes an emotional reaction from the user, creating a more personal relationship with the site. There is also a beautifully designed and user friendly browse function which allows the user to search among the other potential sponsees.

My only qualm with the site’s usability is that many of the site’s components (such as the browse function) are Flash based. From an accessibility standpoint, the use of Flash is generally frowned upon. However, because these are just certain modules and Flash is not used in the main navigation, it does not greatly affect the overall usability of the site.

www.worldvision.org
USABILITY SCORE: 4/5

Curbside Hospitality

This company offers a variety of valet and transportation services. Their site features a bold orange and gray color scheme that conveys their approachability. At first glance, the site appears to be fairly usable, but after a more thorough investigation I noticed some serious problems.

The home page features a clean design, bold graphics, and limited copy, which are all components of a well usable site. However, it has a Web 1.0 feel, as it does not take advantage of scrolling content. The main navigation provides links to answer three important questions: how we’re different, what we do better, and who makes it work, but ideally these questions should be answered on the home page without making the user click. One major usability flaw of the home page is that all of the secondary navigation (About Us, News, Testimonials, FAQ, Contact, etc…) appears below the content, which means that it is pushed beneath the fold for users with lower resolutions.

Once you visit one of the secondary pages, for instance “How We’re Different”, more usability issues arise. The smaller white text on the orange background proves to be difficult to read. There is also a secondary scroll bar which might confuse some users. Additionally, there is an ambiguous “click me” button that displays a video related to the page. The Internet is not Alice’s wonderland, labels like “eat me”, “drink me”, and “click me” only serve to confuse users!

www.curbside.com
USABILITY SCORE: 3/5

Grip Limited

This is the portfolio site for an innovative Canadian marketing firm, and it features a distinct orange color palette and quirky typography. It makes sense that a creative company would chose to use for their website, as we mentioned in our previous post this hue actually promotes creativity. However, these design sensibilities seem better suited for print, and although visually enticing, this site is a usability nightmare.

Grip’s portfolio implements an clumsily navigated single page layout, which is a huge mistake from an SEO standpoint. It’s no wonder that they don’t make the first page when I search for “Toronto marketing firms”. The user navigates the site by collapsing tabs, scrolling within tabs, and dragging the page from left to right. None of these controls are intuitive, and have to be explained within one of the tabs (which is so helpfully labeled ‘OMG WTF’). Your users should not have to learn a new set of commands in order to navigate your site. Though the gray scale shades compliment the orange accent beautifully, the ornate typefaces that illustrate the navigation system prove to be almost illegible, especially when the text is displayed as light gray on white. Save your display typefaces for headings, clean san serifs work best for body copy and captions.

Sprinkled within the portfolio pieces are tabs containing random statistics about the firm’s employees. Though these infographics are aesthetically pleasing and reflect the company’s brand, this information is irrelevant and only confuses the user more. And these are only some of the many usability flaws that we found in this site, others include no “home” link on the logo, an unnecessary full screen mode, and an almost illegible flash based drop down menu.

www.griplimited.com
USABILITY SCORE: 1/5