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: HomepageThe 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|
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 pagesThis 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|
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 detail: an out of stock product can still be added to the basket|
The buying process - basket, registration and checkoutBasket 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|
|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)|
|Payment page (snippet)|
ConclusionsThis 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.