Free website UX design consultancy: Christening-Gowns.com

There is a trend amongst some UX practitioners to highlight certain websites for their bad practices or poor user experiences. There’s often a certain amount of amusement derived from the website under examination. This is particularly prevalent at conferences and in presentations.

Not here. Every so often, I'll be critically reviewing websites and provide feedback on their user experience. There’s no user testing data here, just analytical observations and some generalised best practice. You could even call it free website UX design consultancy.

Today we're looking at Christening-Gowns.com.

Look and feel: Homepage

The picture below shows the home page of the website at 1024x768 resolution with standard, fairly minimal browser chrome (IE8, full screen).

Homepage at 1024x768

Homepage screen space is always at a premium, and it needs to be made to work. At this resolution the ratio of navigation elements to content is too far in favour of anything but content. The page is cluttered, with more space given over to navigation and instructions than to content. Even at 1280x1024 (below), the content ratio is too small.

Homepage at 1280x1024

In addition, the homepage disregards at least seven of the Nielsen-Norman Group's Design Guidelines for Homepage Usability - seven relevant ones, I might add.

The information text at the top of the screen is too busy and will probably not be read. This text - including the address of the company, something of little use to a website user - would be better in a footer or in an information or About page; on the homepage they're just so much clutter.

The two images in either top corner look like adverts and likely will be assumed to be such; research has shown that users tend to associate images in these areas with adverts and ignore them.

Then there are three navigation bars; those below the information text, the unmissable purple stripe below those, and the vertical sidebar on the left of the screen. They each display links in different ways; some with visual cues (colour, underlined text, on-hover highlighting) and some without. The left-hand navigation uses none of these cues. It's arguable that the left hand vertical menu is obviously so, but on the other side of the page the View basket links are not underlined, where others are. Consistency is required to reassure users.

The left-hand navigation menu continues for two pages and is then repeated, duplicated. I'm not sure if it's an error or a deliberate attempt to provide navigation farther down the page. Because there's another issue. See that scrollbar, notice how tiny it is? Towards the end of this page - in fact, on every page - there is a 100-row table of text links that gives alternate names for products. On the homepage it's 8 screens deep and adds an overhead of 137 kilobytes to the page. These links account for 71% of the homepage's payload; a huge amount of noise, and a massive amount of content to navigate. Or, more likely, ignore.

On top of these fundamental considerations, there are more minor issues: the use of colour is eye-catching to the point of being garish. The search box is poorly placed, close to the fold.

And then there's that font. Comic Sans is not a popular font amongst a certain population of the internet. It was designed for children's comics, and that's the context it conveys. It is not a font that speaks of professional service.

Product pages

This is an e-commerce website, so users will not spend much time on the homepage beyond the first impression. Therefore the product pages and checkout process are vitally important.

On this site, all of the navigation links take the user to a list of all the products in that category, with images of various sizes in varying positions. Bold text, capitalisation, and the colour red are used in product descriptions.

Product category page (188 products) at 1024x768

There is no paging of the products; the link I chose lead to 188 results, all of which were displayed. With the addition of that 100 row table, the page is over a hundred screens deep; over 100 clicks to get the bottom.  It's just too big.

These pages would benefit from some sort of paging control, or some better display of products – a scannable table of regularly-sized images, perhaps, with some better arrangement of thumbnails.

Selecting a product opens a page dedicated to that item, with yet more font sizes, styles, colours and decorations making for a cluttered and visually overwhelming page. Images are displayed first, scattered around the screen at too large a size; smaller thumbnails would be of benefit. Adding a product to the basket - the primary purpose of this page - requires scrolling past all the images to find the details. Actually adding it to the basket is not intuitive; each size is listed as a separate product, and requires careful reading to check that the correct size is chosen. Other sites successfully use a single drop-down control to choose size of product; that would be appropriate here.

Product details

Yet another factor in basket abandonment, between a sixth and almost a quarter of abandoned baskets are due to out of stock products. It shouldn't be possible to add out of stock products to the basket. But, as the image below shows, out of stock products can still be added. This is confusing and unnecessary; the Add button could be disabled or removed in this circumstance.

Product detail: an out of stock product can still be added to the basket

The buying process - basket, registration and checkout

Basket abandonment rates are generally taken to be around 60%, although the actual figure can vary between 15% and 90%. The aim of any e-commerce site should be to make the process as short and simple as possible in order to minimise the number of users that abandon their shopping.

On this site, it's a nine-step process if the user isn't already registered in, seven-steps if they are. This is too long; something closer to two to four steps would be much better. Worse, there's no progress bar on the checkout process, helpful to reassure users that they are progressing through the process and there is a defined end in sight.

Step 1: Clicking the "View and checkout" link displays the Your Current Basket page. There are yet more mixed font sizes, weights and colours. The actual basket content is very nearly below the fold at this resolution. Oddly, the basket summary is again displayed on the right. This seems like an unnecessary duplication of information, adding to the clutter.

Your Current Basket at 1024x768

Step 2: Clicking "Checkout" on this page displays the login/registration page. Unregistered users are taken through new user registration (step 3), an acknowledgement page (step 4), and then - unaccountably - back to the Current Basket page (step 5), from where they have to click Checkout again.  This is a serious issue, adding to the length of the process; five clicks to advance one stage in the process.

The registration acknowledgement page returns the user to the basket

User registration is a classic break in the checkout process, and a major cause of basket abandonment; having to register before checking out puts off around a third of customers. Unless there is a real reason to require registration, or the benefits it offers, then it should be avoided. In this case, there's no statement about the benefits of registration, adding to user frustration at providing the information. True, the information is fairly light, but users are sensitive about giving their information.

Step 6 is to pick a delivery address. This page is full of instructive text, which - once again - will probably be ignored, even if it is red or green, italic or bold.  Users don't read text; they look for something to click. On this page, the text distracts from what the user needs to do - namely, choose an delivery address. If the process needs that much text to explain it, there's something wrong. If it doesn't need that much text, it shouldn't be there. On this page, the actual input field is well below the fold, two clicks away.

Delivery Information (snippet, expanded)

Step 7: the user then picks a courier/delivery service before being presented with a basket summary (step 8) before the Secure Payment Details page - snippet below.

Payment page (snippet)

The text on this page is surely meant to be helpful, but if the users do read it, they will discover that the easiest way to avoid caching problems is to reboot their computer.  I seriously doubt any but the most committed and desperate users will return to a website that has required them to reboot their computer once it's started again.

Conclusions

This is a very short review of the website; there are a lot more issues, large and small (using tables for layout, poor alt tags for images, links to websites that can't be clicked, inconsistent vocabulary, spelling errors), but the topics above are the headline issues that should be addressed first.  Without analytics and user testing it's hard to target specific areas, but it seems reasonable that correcting some or all of these issues should see a significant reduction in the number of abandoned baskets, meaning an increase in the number of orders.

Do you agree with my assessment of this website? I'm fascinated to read your comments. If you'd like me to provide this service for your website, contact me.