Andrew’s Review of OutdoorAdvantageOnline.com

The first thing I notice is that the font on the page is the same as the default font for the browser (Times New Roman). Is this site only designed half-way? Looking at the header, I see a ‘new’ badge, but can’t quite make out what it’s applied to. Overall, the site looks like a […]

The first thing I notice is that the font on the page is the same as the default font for the browser (Times New Roman). Is this site only designed half-way? Looking at the header, I see a ‘new’ badge, but can’t quite make out what it’s applied to. Overall, the site looks like a blog, but I get the feeling that there’s something more going on here.

I notice the shopping cart text outright. I wonder if it does anything and I click on the plus. Ooh, a nice effect. Now I’ve surmised that I should be shopping here. I notice that the prices are red and that the color is very bold.

I decide to take a look around the various parts of the site before testing out completing an order.

Key Questions

The special order form for outdooradvantage.comThe special order form for outdooradvantageonline.com

Clicking special order, I’m given a form that is disabled…or at least it appears to be. Unfortunately, the labels and the form fields are very grey on this page. Because they lack contrast with the grey background, I am led to believe that these form elements are disabled. But upon inspection, I find that they aren’t. I realize that this is a problem that doesn’t rear its head until someone unfamiliar with the design of the site comes along, but that doesn’t mean it shouldn’t be fixed. I notice the subtle “(required)” labels after each field: a nice touch the lets me know what I need to fill out to request a special order. I go ahead and click submit, to check the form validation.

A superb formatting of error messages from outdooradvantageonline.comA superb formatting of error messages from outdooradvantageonline.com

Submitting a blank form yields a litany of red on the page (I think I may have killed somebody.) But fortunately, this cascade of messages makes the page very easy to use. I’m excited because at the top of the page is a concise list of everything that is required to get me on my way. This is a great example, Mr. Designer guy: by presenting your form’s errors in an ordered list you’re making it super easy for your users to complete the form and get on with their lives.

I leave the form and click on “Pictures.”

The photo gallery from outdooradvantage.comThe photo gallery from outdooradvantage.com

The photo gallery looks and feels clean. By including UI elements like pagination, clear hover states, and inline-image viewing, the experience is very pleasurable. My only question is why there is an upload form under the album. I would consider moving this to a separate page: a user is generally only doing one thing at a time—either uploading or viewing photos. By providing them with more than one option, each with it’s own goal, you may be detracting more than you’re helping. Maybe on the “Album Index” page, you could provide a link to a page with this option.

I move onwards through the site. Thinking back, it does feel a bit broad-ranged. I get the feeling that this company has a lot of personality that they wish to convey.

Next I click on “Fishing Tips.” Fishing tips is presented as a typical blog. The designer in me feels like this page could use some more CSS love. Otherwise, I can tell what is the post title, what is a link, and how many comments are in each post. I suggest delimiting these posts a bit more so that the visual weight of the title is more distinct. Maybe some horizontal lines, and/or a light-grey for the information that is about the post and not the actual post.

I then peruse the forum, classifieds, faq, and service sections of the site. The forum has a very familiar layout. Classifieds (which may be new), allow me to post items to the site that I’d like to sell.

The classifieds section of outdooradvantage.comThe classifieds section of outdooradvantageonline.com

The process of creating an account isn’t as straightforward as it could be. I think that maybe some introductory text that is short and simple should be available to help orient me to the purpose of this section, and even guide me to create my first listing. Because I’ve used WordPress in the past I more or less understand how I can use an account to submit content to the site, but I don’t think the average user is going to guess that outright.

The rating system in the FAQ section of the site is curious. While I do enjoy a good democratic review system, I think that in this case, ratings may be a bit superfluous.

Submitting a question is straight-forward enough. I like the finishing touches put into the interface: the designer was nice enough to change the submit button from “submit” to “Ask Question,” which really helps my mental model of what this form is enabling me to do. What I don’t like is the “1” after the email input field. This requires me to check the footer for information that I will need to fill out the form. Bummer. I go about submitting a blank form to receive:

A less-than-ideal error message from outdooradvantage.comA less-than-ideal error message from outdooradvantageonline.com

This is a very vague error message. Comparing this one with the error message I received from the special order page is like night and day. Also, the contrast on this message leaves something to be desired. I don’t have poor eyesight and I consider it a bit of a chore to read.

Lastly, I visit the shop: the coup de gras (I’m led to believe) of this site.

In an age where websites are more dynamic than ever, I am disappointed. Amazon.com and bananarepublic.com have trained me, as a user, to expect to see dynamic pictures of items I am interested in.

The shop is extremely straightforward. I think that all of the interaction points, at first glance, are obvious. I go about finding a product of interest. I then try to change the color of the product. Nothing happens. In an age where websites are more dynamic than ever, I am disappointed. Amazon.com and bananarepublic.com have trained me, as a user, to expect to see dynamic pictures of items I am interested in. After changing the color a couple of times I get frustrated that the item doesn’t update to my preference. By the way: how am I supposed to know what color “Spicy Shad” is, anyway?

The only shopping cart on outdooradvantageonline.comThe only shopping cart on outdooradvantageonline. Incidentally, this shopping cart my be minimized, even when it’s full.

I then click “add to cart.” Nothing happens. I click again. No luck. I look up to the shopping cart area I noticed earlier. Bingo. Now I have 2 copies of 5” Lizard bate in my cart. Not exactly the interaction I had hoped for. I would navigate the user to the top of the page and use a javascript library like Scriptaculous to highlight the shopping cart. That way users are given a clear indication of what happened to their request to add an item to their cart (this by the way, is an example of the gulf of evaluation).

I’d like to change the quantity of lizard bate I am ordering via my cart, but alas, I cannot. The functionality of a full-fledged shopping cart has been squandered in an effort to juxtapose it alongside the product list. I would say this is a losing proposition. Consider either scrapping the side-bar shipping cart altogether or providing a shopping cart page that gives me all of the tools a user expects when dealing with e-commerce.

Conclusions/Suggestions

Overall the site is definitely a very good initial pass at an eCommerce-focused site. I believe the best part is the degree of usability the site maintained while still being as multi-faceted as it turned out to be. I think the design and clarity of the site were top notch in most regards. I had very little trouble finding the navigation, scanning pages of the site, and generally orienting myself as a user. The hardest part of the site, by far, was the shopping experience. I would consider refining the elements of the shopping cart. Otherwise, this site gives me a very good impression of Outdoor Advantage, and I wouldn’t hesitate to trust them with my business.

Based on my review I would suggest:

  • Clicking on “get the advantage” yields a new page, but it looks identical to the old one. Either scrap the link or detail a difference.
  • Add a javascript highlight effect if you are going to use the sidebar-shopping-cart only. Move the page top to the top and make the shopping cart flash yellow.
  • Allow users to change the quantity of items they are ordering on the fly.
  • Provide a dictionary of color names to actual colors. 
  • Consider providing inline-error checking on your forms, so that users don’t have to “get to submit” before they are presented with what they did incorrectly. Catching errors before a user hits submit keeps his momentum through the site at a high level.
  • Red text is generally associated with errors, bad margins (in business), and warnings. I would consider changing the price text to something that has a subtle, albeit subconscious, positive effect, like green (or orange if you want to stay upbeat).
  • The website is a bit narrow. I would do some web-analytics and check to see if you can raise the width of the site to something more conducive for online-shopping, to the tune of 950px.
  • Move the “New” badge to whatever is new on the site. Right now it’s a bit ambiguous.

About the Author

Andrew Maier

Andrew is a lifelong student of the design community, who co-founded the design publication UX Booth in 2008 to share his journey. He currently serves as its Editor-in-Chief. When he's not heading user-centered design initiatives for clients, Andrew dabbles in civic design. He lives in Seattle's Capitol Hill neighborhood.

Related Articles

Leave a Comment on This Article