After chatting for a while, it turns out that the sixth form college curriculum is still teaching web design using tables, something that most of the web design community left back in the late 1990’s with their PS1, baggy jeans, Quantum Leap and love for the Levellers. I thought it would be a good idea to try and give these guys a bit of a push in the right direction…

So, this series is for you Ryan, and any of your student mates who want to get ahead of the game and get yourself in a better position for a job in the web design industry.

Something to get you on your way…

There are thousands of tutorials out there about designing web layouts with Photoshop, GIMP etc, and whether you’re coding in tables or CSS, you’ll probably need to do this to an extent. With the progress made with CSS3, not all design needs to be done in imaging software, and a lot of layout and designing can be done within the browser.

I learnt coding xHTML and CSS by doing, not reading. I would think the majority of people looking to get into web design would also learn this way too. It’s a hardwired thing that most creative people learn this way. What I’ve supplied below are some sample layouts, fully commented, that you can download and play around with. They’re coded using using best practices both in xHTML and CSS, so you can see how to code in a way that both agencies and developers like to see, and are also good for search engine optimisation (a growing concern for businesses everywhere).

Because of a lack of current browser support for HTML5, and the fact that it’s still in development, everything I’m supplying below is in xHTML 1.0 transitional. Most of the CSS you’ll find will be CSS2, but they’ll also be a sprinkling of CSS3 (even though it’s not supported in Internet Explorer 6-8, almost all other browsers have at least 50% support. You can find css3 browser support here).

So what have we got below? What I’ve supplied below is a basic 2 column xhtml layout that you can look at, download and play around with. I’ve commented as much as I can to help you understand whats going on:

Here’s the sample html page and here’s the corresponding CSS

Once on the Maplin site, one of the largest electronics retailers in the UK, the problems began. The search box uses a database query to bring up possible items you could be looking for whilst typing in your search query:

Usability Failing No.1 – The Search Box

Through large sites such as amazon and ebay employing these live ajax search queries, a lot of users will be used to how they work. You start typing, cursor or mouse down to the item you want and press enter or click. Upon selecting the desired product, the site malfunctions and reloads the home page with a few extra parameters to the url (https://www.maplin.co.uk/Home.aspx?sxs=0&sxs=0&sxs=0&sxs=0&sxs=0)

This is a major failing on maplin’s part. I would suggest visitors coming to a site, knowing what they’re wanting to buy, would much rather search, than guess which category the product has been placed in, so getting the search functionality right is paramount to a large sites conversion rates.

I’m quite a stubborn user. If I want to by something from somewhere, I’ll continue to use the site until my patience runs out. Being a web designer/developer, I would say this is longer than a ‘normal’ user. Once I’d managed to find my product and put it in my basket, I went to the checkout…

Usability Failing No.2 – Adding extra items to my basket

This has stopped me buying anything from maplin ever again and made me extremely angry. So I click on checkout only to find that Maplin have added their own 2010 catalogue to my basket at a cost of £3.99! Whoever thought that was a good idea just needs shooting. When was the last time you were out shopping and employees of a store started putting things in your basket for you to find when you got to the till? Do retailers think that just because you’re buying on the web they can do outrageous things like that?

Usability Failing No. 3 – Unexpected Detours

Having got past my anger and removed the catalogue from my basket, I went to pay at the checkout. I prefer using paypal for obvious reasons and was presented with this screen:

Now, having gone to my basket and clicked ‘Check Out with Paypal’ as a regular paypal user, I’d expect to be taken through to the paypal sign in screen.Wrong! I was taken to this sign-up screen:

As you can see, there’s no way of purchasing from Maplin without signing up to their newsletter. If I’m buying from someone using paypal, there is no reason to directly give them any of my details. Everything is contained within paypal. That’s a lot of the pleasure of using paypal.

So now after having to sign up (obviously using a junk email address), I’m put through to paypal, and everything goes smoothly… until…

Usability Failing No. 4 – Shipping

After completing the paypal side of things, I’m returned to the Maplin site to ‘complete’ the order.On returning to the site, having just paid through paypal, I’m presented with this screen.

Firstly, I notice that I’ve now been given a shipping option. Luckily, my order was over £35, and I was ok with Free Standard UK, but if I wanted next day, or the purchase had been under the free shipping threshold, how would I have paid for that? Would I have been taken back to paypal to add the extra in a other transaction? Surely adding in all costs before going to checkout is a normal thing? To me, it’s just another way of getting people to part with more money. The user has gone through this whole process, and now they have to add in shipping, which most of the time the online store is making another 20% on.

Usability Failing No. 5 – Terms & Conditions

Like a lot of sites, you can’t buy from them unless you agree to their t’s & c’s. That’s fair enough, they’re just covering themselves. So after what I’ve just been though, I wanted to have a look at the t&c’s just in case… I click on it and it brings them up… in the same window.

The vast majority of terms & conditions and privacy notices are brought up in pop up windows for good reason. Most of them are on form sensitive pages like a checkout, or email signup etc.

When clicking back to complete my order, I’m now presented with the dreaded ‘Confirm Form Resubmission’ page rather that my order. If I wasn’t so ‘web aware’, I wouldn’t know how to get back to confirm my order.

Conclusion

I buy a lot of things online, but overall I’d have to say that this is one of the most painful online shopping experiences of my life. I honestly wonder what the drop-out rates are through the process and even on that last ‘confirm my order’ page. I’d imagine them to be unusually high. Anyway, that’s just my opinion and I’d love to hear from the Maplin UI team, or anyone else who’s had the same kind of issues.