Manage Subscriptions · Subscribe Now · F.A.Q.'s
HOME · Monday, May 12, 2008
Conversion & Usability
Usability Report Card: Babyplanetboutique.com
Relocate site search, make features of the site look and behave consistently
Canadian-based Babyplanetboutique.com strives to provide parents with unique, useful baby products at affordable prices. The site’s owner Danielle Burgi is a nominee for Savvymom Mompreneur of the Year. An impending upgrade to the site, coupled with a new shopping cart system, which will offer customers new features such as a gift registry, inspired her to put the site forward for this Usability Report Card.
Home Page Clarity
Baby Planet Boutique’s home page suffers from having no products visible “above the fold.” Instead, the top of the body of the page is currently devoted to information about the Mompreneur of the Year Award website (including a link). Below this is a large area devoted to the possibility of the customer winning a $25 gift certificate, as well as the guarantee of receiving a coupon code for five percent off their next order if they sign up for the site’s newsletter. Unfortunately, increasing the chance of winning the award through customer nominations, in addition to signing up customers to the newsletter, comes at the expense of not making it immediately obvious what the website is about and promoting the quality of the products that it sells.
The home page also has a continuously cycling flashing link for the Mompreneur award, which is distracting. If website owners insist on having a spinning or otherwise animated icon or advertisement, they should consider just letting it flash or spin for a few seconds, or one rotation before making it static. Otherwise, at best, customers will be distracted, and at worst may be annoyed enough to leave the site.
The home page also features a “View Cart/Checkout” link in the banner’s top level navigation. Next to this link, instead of a shopping cart, is a drawing of a baby carriage. Due to its positioning on the page, and its proximity to the link, many users will assume the carriage is a cute replacement for a shopping cart. Others may not understand it, thinking it is a link to a product page of carriages, or worse dismiss it as decoration. Do not to get cute and use new terms or icons if users are familiar with established ones. If you insist on using new terms, at least test them first to see just how many customers you will potentially lose (or possibly gain) by doing so. Finally, the shopping carriage is replaced by an icon of the traditional shopping cart everywhere else on the site, which goes against a cardinal rule of usability — keeping elements of the site consistent.
Ease of Browsing
The categories listed down the left hand side of the page are placed beneath an underlined, bold title named “Departments.” Unfortunately, the title is not in fact a hyperlink, and customers may attempt to click on this, which will not result in a new page opening. They may then be wary of what will, or will not, happen if they click other underlined words. A safe general rule of thumb is to reserve underlined words exclusively for hyperlinks.
Another issue is the possibility for confusion among top level and secondary level navigation. For example, “Accessories” is a top level category, as is “Diaper bags & Accessories.” However, “Accessories” is also a secondary level category beneath “Developmental Aids.” If at all possible, unique names should be used for each category level. In addition, the choice of names for all categories should ideally represent mutually exclusive categories, and the name chosen should be the best match for what the customer might be looking for. For example, there is a category called “Fun In The Sun” that only features sunglasses. Shoppers who know what they are after may choose to leave the site if they can’t find sunglasses under a title such as sunglasses or eyewear.
Ease of browsing is assisted by a well-implemented breadcrumb navigation. However, general browsing would be assisted by ensuring that visited links are displayed in a different color than links that have not been clicked. Traditionally, blue links represent unclicked links, and purple represents clicked links. However, a change in color, or at the least shade of color, appears to be sufficient these days. Clicked links should not though, be colored blue.
Searching
Baby Planet Boutique almost didn’t receive a rating for search as the search area wasn’t even noticed until just before this article was completed. Customers may have as much trouble as this author finding the site’s search as it is buried in the bottom left hand corner of each web page under the category listings. Aside from its unhelpful placement, it also has the same appearance as the “Currencies” functionality directly above it, which makes it further blend into the page.
The search appears to give good quality, relevant results, but does not state the search terms used at the top of the page, and it removes the search terms from the search box at the bottom of the page. It is important to leave the search terms in the search box so that users can see whether they spelt their search terms correctly (ideally a spell checking function like Google’s “Did you mean…” would also be featured).
Category Pages
Category listing pages feature good sized images above the name of each product and a brief explanation about the product and its price. The text, however, is center justified, which gives it a less professional ragged look and is harder to read or scan than left aligned text.
The spacing between products could also be improved, as the “…more info” links that end each listing are very close to the listing directly below it. Customers could accidentally click this link and be confused when they are taken to the wrong product page.
Category listings do feature a “Sold Out” button for products that are out of stock, which is good. However, the button is not clickable. Unless “Sold Out” links have additional information beside them, they should at least be hyperlinked so customers can get more information about if and when products will be in stock.
Product Pages
Product pages feature an “add this to my cart button,” which is below the fold. As Greg Laptevsky, a Prime Visibility Senior Pay-Per-Click Strategist, rightly points out in his useful article “Lowering Shopping Cart Abandonment,” if you want customers to use cart buttons as a primary action you have to visually communicate this to your customers.
The product pages also feature a larger graphic of the item being considered than the category pages. There is also a clickable “larger image” link and a plus sign graphic link beneath each image. Clicking either of these links, unsurprisingly, brings up a larger image of the product. What is surprising is the manner in which this is done. First, a dynamically resizing white box appears on the screen, and almost simultaneously, a very dark grey background appears, which all but obscures the web page that it now sits in front of. Then the product image loads, and then additional functions, if any, load. For example, for some products there are additional product images that can be accessed by a “next” link in the top right hand corner of the white box. However, customers may attempt to click the “next” link multiple times to move through the additional images before the “next” link actually reloads. Unfortunately, the whole image, aside from the currently still loading additional functions, treats a click as if the customer wants to close the image, and the image shuts down. If this dynamic displaying of images is retained in the website overhaul, the designers should have the image only close by using the “close” button or clicking on the dark grey background, as users would not expect that just clicking on an image would close it. Additionally, many other images on product pages display enlarged images differently. If the “larger image” link is clicked a new window loads with a very large image. Choosing one method over the other would be useful for consistency and satisfying users’ expectations.
Checkout Process
One nice feature in the checkout process is the “estimate shipping” button. Customers often have to go through a checkout process to find out how much shipping is going to cost, which, incidentally, is one distorting reason behind the reportedly very high rates of shopping cart abandonment. It is not always that the customer is having difficulty completing a transaction due to poor design. Sometimes they are just getting shipping pricing and information so they can comparison shop.
If customers click on “View Cart/Checkout” before they have placed any items in the cart they receive the message “Your Shopping Cart is empty.” This is a wasted opportunity to inform and engage customers. For example, at Amazon.com (which, generally, has nicely implemented features well worth borrowing) the equivalent page has relevant information, such as instructions on how to put items into the shopping cart, how long they will remain in the shopping cart for (90 days), and a link to more information about the shopping cart and how to buy from Amazon.com.
Customer Service
Baby Planet Boutique prides itself on excellent customer service. The site prominently features a “Contact Us” link in the banner at the top of the page. The “Contact Us” page features a physical address, a toll free number, a direct email link and an email form. The toll free customer service and phone orders number is also placed on most other pages at the bottom of the page. Yet, there is potential for the customer service number to be placed higher on the page so that customers can access it more easily. On the other hand, there is always the issue of making it so easy for customers to complete their transaction via the phone that they tend to use that method instead of completing the online checkout, which is a cheaper transaction for the business.
There is also a “Currencies” dropdown menu so customers can choose between seeing prices in Canadian or U.S. dollars, which customers will appreciate.
Error Recognition
If products are ordered from Baby Planet Boutique but there are not enough of the items in stock to fill the order, a message appears explaining that the items are out of stock, likely back in stock within 2-3 weeks and that the items in stock will be shipped now and others will ship later. This is a useful error message explaining the situation and how it will be resolved. However, customers may initially be blind to the error message as it is written in the same blue coloring as the rest of the page, while the three asterisks that are placed beside the product to alert users to the error message are red, but the asterisks in the error message are blue. It is important to make error messages themselves stand out from the page, and equally important to identify the field, or area that the error message relates to in a similar manner.
Conclusion
Baby Planet Boutique gets an overall grade of a B+. Fortunately, they are reworking the site soon. Relocating the site search, making features of the site look and behave consistently, and a general clean up of positioning of text and alignments of other screen elements will go a good way towards improving the site. Best wishes to Danielle in your bid to become the Savvymom Mompreneur of the year.
Want your site graded? Email usability@practicalecommerce.com.
Blinklist | Del.icio.us | Furl | Ma.gnolia | Newsvine | Spurl | Reddit | Technorati
Published on Wednesday, September 26, 2007
Comments:
Ecommerce Articles
- Browse All Articles
- Browse our complete archive of ecommerce articles.
- Accounting, Management & Legal
- Ecommerce articles related to managing a small business including ecommerce accounting, business strategy and legal considerations.
- Conversion & Usability
- Online business articles about converting web site visitors into customers and how to gauge and improve your business website's usability.
- Development & Programming
- Articles to help designers, developers and programmers create successful, search engine friendly ecommerce websites and improve existing ones.
- Hosting, Infrastructure & Software
- Articles for ecommerce businesses about ecommerce web hosting, business infrastructure, business strategy and helpful ecommerce & small business software.
- Interviews & Profiles
- Interviews with prominent ecommerce business personalities and profiles of successful online businesses.
- Inventory & Shipping
- Ecommerce articles about inventory management, ecommerce order fulfillment and product shipping considerations.
- Marketing & Revenue Growth
- Articles relating to online marketing, email marketing and using the Internet to growing your business.
- Search Engine Optimization
- Search engine optimization articles for ecommerce business owners, strategists, marketers and developers.
- Shopping Carts & Online Payments
- Articles covering ecommerce shopping cart platforms and options for choosing an online payment gateway.
- Training & Education
- Tutorials and articles providing training and education for ecommerce business owners and developers of ecommerce websites.
Search Articles
Ecommerce Community
- Ecommerce Blogs
- Read our blogs about ecommerce topics written by industry professionals.
- Community Forum
- Connect with other ecommerce professionals to trade advice and answers in our community forum.
- Podcasts
- Check out our ecommerce podcasts covering topics ranging from interviews to tutorials.
- RSS Content Feeds
- Subscribe to our RSS feeds and have fresh ecommerce content delivered to you.
Ecommerce Resources
- Free Email Newsletter
- Sign up for Ecommerce Notes, our free email newsletter for ecommerce business owners and developers.
- Ecommerce Directory
- Browse our directory of ecommerce products and services, or submit your own listing in our directory.
- Ecommerce Glossary
- Familiarize yourself with terminology or submit terms to help others with our Ecommerce Glossary.
- Events Calendar
- Find out about upcoming ecommerce events or invite other ecommerce professionals by posting your own event.
- Press Releases
- Browse ecommerce related press releases and post your own press release for distribution.
- Ecommerce Store & Back Issues
- Pick up back issues of Practical eCommerce magazine along with other merchandise from Practical Ecommerce
About Practical eCommerce
- Frequently Asked Questions
- Look at frequently asked questions regarded using our website, subscribing to our magazine and more.
- Advertising Information
- Information about advertising in Practical eCommerce magazine, on our website, or in our email newsletters.
- Editorial Sharing
- Learn about options for sharing our content with your visitors, customers or employees.
- About Us
- Learn more about Practical Ecommerce magazine and meet our staff.
- Contact Us
- Contact Practical Ecommerce at any time for more information. We'd love to hear from you.
Copyright 2007 Confluence Distribution, Inc. and Practical eCommerce.
All Rights Reserved.
Thank you so much Richard! All of your suggestions are excellent, and several of them had never even occurred to us. We will definitely be implementing many, if not all, of your strategies into our new site.
Thanks again!
Posted by: Danielle Burgi
Thursday, September 27, 2007