ellipsis flag icon-blogicon-check icon-comments icon-email icon-error icon-facebook icon-follow-comment icon-googleicon-hamburger icon-imedia-blog icon-imediaicon-instagramicon-left-arrow icon-linked-in icon-linked icon-linkedin icon-multi-page-view icon-person icon-print icon-right-arrow icon-save icon-searchicon-share-arrow icon-single-page-view icon-tag icon-twitter icon-unfollow icon-upload icon-valid icon-video-play icon-views icon-website icon-youtubelogo-imedia-white logo-imedia logo-mediaWhite review-star thumbs_down thumbs_up

Website design: 12 sites dissected

Website design: 12 sites dissected Lisa Wehr
VIEW SINGLE PAGE

There's an old wives' tale in website design. It goes something like this: Customer wants to make a purchase. Customer visits company's website, credit card in hand, ready to buy, buy, buy. But customer gets frustrated -- he can't find what he's looking for and the checkout procedure is long and complicated. Customer gets so frustrated he clicks off of the company's site and on to a competitor's, where he completes the purchase. It's a scary tale -- one we all try to avoid. But are we really doing all we can?


Wives' tale or not, there is one universally recognized truth: In website design, "pretty" simply doesn't cut it.


Let that sink in for a minute. Then, check out the following 12 case studies, based on a recent study by Oneupweb, to find out how your website design could be causing or costing you sales.

Ecommerce sites serve two main purposes. The first is to provide information about the company. The second, and arguably the most important, is to make a sale. And when customers visit an ecommerce site, they want the most direct route to the point of sale. In other words, the fewer required page views, the better. But balancing this with a plethora of inventory, company information, and product information can be tricky. PrintRunner.com, PrintingforLess.com, and PrintingCenterUSA.com provide great examples.


PrintRunner.com


PrintRunner.com handles a large inventory well by showcasing the top-level categories in the body of the page (4) and featuring a more-detailed product menu in the sidebar (2) on the left. The shopping cart is in the main navigation bar (1), the flash area (3) is used to showcase products, and it provides a sitemap in the footer (5). PrintRunner.com generally fits with a users' preconceived notion of what an ecommerce site should look like, and benefits because of that. On average, it took visitors just 2.5 pages to complete a task, with a failure rate of 33 percent. If that percentage seems pretty large, keep reading.




PrintingforLess.com


PrintingforLess.com put a large focus on content. Although all the main items (1-5) appear to be placed in the same order as PrintRunner.com, the density of text and graphics, paired with an unclear navigational scheme, made it difficult for visitors to find what they were looking for. It took visitors three pages to complete a task, with a failure rate of 44 percent.




PrintingCenterUSA.com


PrintingCenterUSA.com had a very different setup from the two previous websites. And while different can be good, in this case, it wasn't. Users found the colors distracting and the layout confusing. It took visitors 3.5 pages to complete a task, with a failure rate of a staggering 56 percent. And nearly two-thirds of users specifically said they would not make a purchase from the site.




The winner of this tale: PrintRunner.com.

In 2007, 40 percent of all leisure travel bookings were done online, and today that number continues to rise. So hotel websites not only have to look good and convey their personality and level of professionalism, but they also need to be easy to navigate and intuitive to use. Let's take a look at how three hotel websites are faring: DunesManor.com, JamesHotels.com, and Winnetu.com.


DunesManor.com


DunesManor.com is plain and simple. While it lacks in ambiance, the navigation is straightforward and easy to use. The header (1) help users find rates within seconds of visiting the site, while the sidebar (2) provides easy access to important links. The flash area (3) provides images of the hotel and surrounding area while the main content area (4) uses a few paragraphs of text to convey basic information about the hotel. A standard footer (5) provides text links and contact information. On average it took visitors just three page views to complete a specific task, with a task failure rate at a low 4 percent.




JamesHotels.com


The first thing that jumps out at you with this website is the large image in the flash area (3). It works well to convey the ambiance of the James Hotels and makes the website appear very professional. At first glance, this website is a clear winner over DunesManor.com. But remember -- pretty doesn't cut it. And it certainly didn't in this case. The main menu does not contain a link to room rates, making the visitor spend extra time figuring out the cost. The description of the hotel is tucked in the right corner, and although it provides no links, the high contrast draws the visitor's eye here rather than to the sidebar navigation (2). The main content area (4) and the footer (5) occupy the same space, causing important hotel information to get lost with text links and contact numbers. On average, it took visitors 8.5 page views to complete a task (more than double that of DunesManor.com!), with a 53 percent task failure rate.




Winnetu.com


Like JamesHotels.com, Winnetu uses pictures to convey the experience visitors should expect when they stay at the hotel. The pictures are warm and inviting, drawing the visitor in. The pictures also serve as the site's navigation. This is not necessarily a bad thing, but in this case, visitors did not initially perceive these pictures as a clickable menu and became very frustrated when trying to complete specific tasks. Information about room rates was included on the homepage, albeit in the bottom left corner. Like JamesHotels.com, the main content area (4) and the footer (5) occupy the same space. On average, it took visitors three page views to complete a task -- the same as DunesManor.com. However, Winnetu.com had a 36 percent task failure rate. And no matter how good your site looks, if visitors fail to complete an online booking, your site fails.




The winner of these chronicles: DunesManor.com

B2B websites are largely used by target prospects for both information gathering and as a way to contact the company. But often, B2B websites are designed more for the company than their website visitors. Often riddled with industry jargon and jammed full with content, B2B websites need to balance simplicity with often highly specialized content. It's a big task. Let's take a look at three websites that are attempting to do it: Packaging.com (Aaron Thomas), SouthPack.com, and VisualPak.com.


Packaging.com (Aaron Thomas)


It's important to remember that unless you are in the industry, you probably don't know all the specifics about it. Packaging.com serves as a great example of this. Most often, people visiting this site are not packaging experts -- they probably don't know what thermoform packaging is. But the Aaron Thomas site presents information in a way that almost requires a user to know industry jargon to use the site. Packaging.com appears weighted with content, and a drop-down menu for the header (1) does nothing to help this. The sidebar (2) is pretty standard, but the flash header is non-existent. The main content area (4) actually appeared as multiple main content areas, which was distracting and resulted in important information being buried. The footer (5), while small, serves its purpose as a basic footer. But all in all, the site did not serve its purpose in bringing in new customers. On average, it took visitors 2.5 page views to complete a specific task, with a 40 percent failure rate.



SouthPack.com


SouthPack.com resembles an ecommerce site in that it provides visitors with easy-to-see links to product information. The logo and tagline are prominently displayed in the header, but the sidebar, which is valuable real estate, is taken up by an "about us" section instead of important navigation. The products are organized by market categories, and while the footer attempts to include social networking links, the placement of the Facebook icon almost makes it look like an afterthought. It took visitors two page views to complete an action and had a task failure rate of 24 percent.



VisualPak.com


VisualPak.com went the simple route, and it paid off. Within a few seconds of glancing at the homepage, the visitor immediately knows and can easily locate the different services the company provides. The header includes a drop-down navigation menu, eliminating the need for a sidebar and providing more room for white space. The large flash area invites users to interact with the page but could hurt search engine optimization (SEO). The footer contains not only text links and contact information, but also links to the company's various social networks in an organized fashion. And here, organization is the key. It only took visitors 1.5 page views to complete a specific task, and the site had a low task failure rate of 5 percent.



The winner of this saga: VisualPak.com

Higher education websites need to serve the needs of current students, potential students, and their parents, alumni, and faculty. It's a tall order -- and makes usability that much more important for this industry. For our analysis, let's focus in on using higher education sites as a marketing tool. We'll look at the Georgetown school of business site (MSB.Georgetown.edu), the University of Denver's school of business site (Daniels.du.edu) and Purdue's school of business site (Krannert.Purdue.edu).


Georgetown's McDonough School of Business


Above the fold, the Georgetown site is simple, elegant, and easy to navigate. The header (1) includes a logo and a link to Georgetown University's main page. The sidebar navigation (2) is clean and intuitive, and the flash area (3) depicts what life is like at Georgetown University with inviting photos. But the main content area (4) is dedicated to current events, which does little to help current or prospective students navigate the site. The footer (5) contains the standard administrative links and contact information. It took visitors to this site 3.5 page views to complete a specific action, with a task failure rate of 37 percent.




University of Denver's Daniels College of Business


The Daniels College of Business website is appears clean and well-organized. It has a good balance of imagery and text, and the navigation is intuitive. It took visitors 4.5 pages to complete a specific action -- longer than Georgetown -- but with a task failure rate of only 32 percent.




Purdue's Krannert School of Management


The Krannert School of Management website packs in so much information, all with links, in the homepage that it appears cluttered and confusing to visitors. The main header includes lengthy drop-down menus, and there is no flash area on this site. It took visitors 4.5 page views to complete a specific action -- the same as The Daniels School of Business -- but with a task failure rate of 15 percent.




The winner of this drama: If we go on task failure rate alone, it's Purdue's Krannert School of Management. However, users noted that they felt the Krannert School of Management site had the unfinished look and feel of a draft. When asked which they would choose as a winner, it was split evenly between the Daniels College of Business and the Georgetown site -- proving that while pretty doesn't cut it when it comes to website design, design and usability need to work together to build a website that gets the job done and keeps customers coming back for more.


Lisa Wehr is CEO and founder of Oneupweb.


On Twitter? Follow Wehr at @LisaWehr. Follow iMedia Connection at @iMediaTweet.

Lisa Wehr, Oneupweb’s founder and CEO, is a true visionary in the world of search engine optimization and marketing. She was designing and optimizing webpages before most people had ever logged onto the internet. Her prophetic vision has made...

View full biography

Comments

to leave comments.

Commenter: Lisa Wehr

2010, July 28

Hi Alberto -
Thanks for your comment. The three examples you refer to were actually pulled from100 sites that were analyzed. Feel free to download the entire report, for free, at http://www.oneupweb.com/landing/10_usability_study/

Commenter: Lisa Wehr

2010, July 28

Hi Luanne -

Thanks for pointing that out!

Commenter: LuAnne Speeter

2010, July 28

Great article, Lisa! However, please note that in a couple of places, VisualPak's URL is incorrect.

Commenter: Alberto Pages

2010, July 28

The first 3 examples you shared in this article are for small businesses. Would like to see input on larger branded sites for consumer brands.