Unbelievable ecommerce

My presentation at this years SXSW tells the story of how we increased the ecommerce sales on one website by 10,000%.

Another year, another SXSW presentation. This year I decided to do a case study. You rarely hear case studies at conferences. Its a shame because I think there is a lot to be learnt from the real world experiences of others. Theory is good but reality is better.

Anyway, this years presentation tells the story of our work on Wiltshire Farm Foods with the emphasis placed firmly on what can be learnt from our experience.

The description on the sxsw website reads as follows…

Many believe the secret to a successful ecommerce site is to copy Amazon. However, that rarely works. Your website is not Amazon. Instead it has a unique offering that caters to a specific audience. Once you realise that you can achieve unbelievable things. In his talk Paul explains how he took one ecommerce website from relatively successful beginnings to unbelievable heights. In only 5 years he and the team at Headscape increased sales on the site by a staggering 10,000%. What makes the story even more unbelievable is that the average customer is over 80 years old! This single example will act as a case study that guides you towards better understanding your audience and growing your online sales significantly.

Below is my run through of the presentation. It isn’t as good as the live presentation but its better than nothing.

A great user experience extends beyond the website

As web designers we can only do so much for you the client. You can have the best website in the world, but if your customer service stinks users won’t come back.

I went to meet with a new client yesterday and was blown away by their commitment to customer service. Not only had they addressed every one of their customers points of pain, they had gone above and beyond in so many ways.

Update: Are you a web designer? Have you found yourself nodding at this post? Then before you get too smug you better read: “You’re a hypocrite (and so am I)“.

An unbelievable returns policy

The most stunning example of this was their returns policy. If you are lucky a website will offer you a 30 day return policy if the goods are unopened and so can be resold. If you are unlucky they will not accept returns at all or charge a restocking fee. However, with our new client things are radically different. They offer a 365 day return policy! However, they don’t stop there. You can return products that have been used and cannot be resold. Better still they will even pay the postage for you to return the goods.

It is truly staggering. So much so that the problem is convincing the user the offer is genuine!

A culture of service

However, it is more than that. They have the right culture too. I was fortunate enough to chat with their call centre staff. Currently they offer customers three ways to contact them…

  • Phone
  • Email
  • Live chat

I asked which contact method they preferred. I expected them to say email first, followed by live chat and finally phone. After all, when on the phone you can only deal with a single customer at a time. Email and live chat are much more cost effective. However my expectations were entirely wrong. The answer was the phone because “it is the quickest way customers could get their problems resolved”.

Cartoon in which the web designer is asked to remove the phone number from a site

Davi Sales Batista, Shutterstock

A growing trend

What’s interesting is that this client is not alone. More and more companies are realising that to compete on the web they cannot sell on product and price alone. The problem is that competition is fierce and the chances of having a unique product low. With your competition only a click away and savvy customers doing price comparison you are left with two choices – be the cheapest or be the best.

What this new breed of web businesses are realising is that racing to be the cheapest is a losers game. Eventually there is only so much that can reduce your margins. Instead they have discovered that customers (especially online) are willing to pay more for convenience. In today’s society time is as important a currency as money and users will often choose a more expensive option if it saves them time quibbling over returns or being on hold with customer services.

There are many poster children for this movement including the likes of Zappos. What these pioneers are proving is that the increase in revenue outweighs the costs involved.

zappos

On face value limiting customer service may seem like a good idea. However, in doing so you are putting short term objectives over the long term health of your business.

Think long term

Recently I wrote a post in which I said that business objectives are more important than users needs. However, that is not an excuse for neglecting your users. If you care about achieving long term business success, then you have to put great customer service and the user’s needs at the heart of what you do.

As web designers we can help you. We can make intuitive sites that are both painless and pleasurable to use. However, that is only half the battle. We also need you (the website owner) to continue that pleasurable experience in terms of customers service. What happens offline is as important as what happens on.

What about you?

So ask yourself – how could you be helping your customers more? Have you hidden away your phone number because you don’t want users calling you? Have you added in extra fields to your contact form so you can collect demographic data for spamming? Have you limited your returns policy for fear of people abusing it? What about hidden costs? Are there charges for returns or delivery?

Whether you are running an ecommerce site or an informational one the message is the same, provide outstanding user experience both on the site and off.

How to stop choice paralysis damaging your sales

Could you be losing sales because users cannot make a decision? The chances are the answer is yes. Fortunately there is something you can do about it.

Those damned customers, sometimes they are more trouble than they are worth! On one hand they say they like choice, but when you give them too much they stop buying.

Choice paralysis is a well known problem in retail. Numerous tests in supermarkets have shown that if you offer a customer too many varieties they are less likely to buy than if there are only a few.

Woman shopping in a supermarket

Africa Studio, Shutterstock

However, despite choice paralysis being a well known phenomena, most ecommerce websites seem to ignore it. I come across too many ecommerce sites with…

  • Too many products in one category.
  • Complex ways of customising products.
  • An overwhelming selection of special offers.
  • Endless categories and sub categories of products.

It is hardly surprising then that many of these sites suffer from a dismally low conversion rates.

Unfortunately website owners often perceive this low conversion as I sign that they are not giving users what they want. This leads them to add even more choice, which results in still further paralysis.

The answer actually lies in a very different direction and begins by limiting choice.

Limit the users choice

In a now famous supermarket study only 3% of shoppers purchased jam when confronted with 24 varieties, while 30% purchased when given only 6. Although the 10 fold increase is interesting what fascinates me are the people not exposed by the raw data.

A good number of those 27% approached the jam section with a particular jam in mind. They knew what they wanted and went to purchase. However, the range of alternatives actually placed doubt in their mind. Was their normal choice of jam the best option available? Should they try something new? These questions created enough anxiety to actually stop them purchasing.

Selection of Jams

fresher, Shutterstock

The lesson here is that choice paralysis is not just something suffered by those who arrive undecided. It can actually prevent a committed buyer from placing an order.

Although this is a scary thought the answer is obvious, reduce your range of products. On one level this seems counter intuitive, but on another it is an obvious response to the problem of choice paralysis.

However, reducing choice is not the only response. There is also a need to clearly differentiate between the options available.

Clearly differentiate between choices

Choice paralysis is not just to do with the number of choices available. In fact it can be acceptable to offer a large number of choices where the differences between those choices is clearly defined. Unfortunately the choices we offer often have significant overlap.

Computer manufacturers suffer from this problem. When buying a computer, making a decision can be hard when the only difference between models is technical specifications. Most people do not understand the difference between 2GB and 4GB of memory.

Apple does a great job at overcoming this challenging by reducing the choice and differentiating between their products.

For example, if you visit the Apple website you can easily compare different macs and read a clear description about what makes each model unique.

Apple website: Which Mac is right for you?

If you are looking for something light then go for the macbook air. If you want something small go for the mac mini. Although they do mention technical specifications these are secondary to the simple descriptions.

However don’t fall into the trap of thinking this need to differentiate only applies to product lines. It also applies to navigation and product categories. Take for example firebox.com. What is the difference between the top level labels ‘geek’ and ‘technology’?

firebox website navigation

Clearly differentiating choice has to apply to all aspects of your site from product range to site navigation. If you must have overlapping choices then you may wish to consider hiding less popular choices to avoid confusion.

Hide less popular choices

Unfortunately in the real world website owners do not always get to choose what goes on the website. We aren’t in a position to slim down the product range or redesign it entirely so that products are more distinct. In such situations smoke and mirrors can produce the same effect.

Although you may not be able to remove the choices available to users, you can hide less popular ones to give the impression of a clearer choice.

We faced this exact problem when working on the Wiltshire Farm Foods website. They had a huge number of meals organised into an extensive list of categories. What is more there was a real need to ensure consistency between the website and the printed brochure, so we had no choice but to keep the categories they had. This left us with a confusing site structure. For example if somebody wanted to order a ‘beef pie’ did they look under ‘beef’ or ‘pies and pastries’?

Our solution was to hide less popular categories and focus the user on the most used forms of navigation. For example we knew more people navigated by ‘beef’ than ‘pies and pastries’ so we hid the latter. However, it was still available for those who wanted to see all pies.

This approach gave the impression of a clearly defined choice without removing the additional options for those who wanted them.

Of course, so far we have focused on users who have a fairly clear idea of what they want to start with. What about those who are even less sure?

That is where suggestions come in.

Make suggestions

When faced with overwhelming choice often the most effective way of encouraging users to make a decision is to suggest a course of action. This well known technique is used by the vast majority of ecommerce websites in the form of ‘special offers’ or ‘staff favourites’.

However, although these suggestions go some way to alleviating choice paralysis they do not connect with users on an emotional level. Just because something is on special offer or has been suggested by the staff, does not mean it is right for the individual user. After all today’s astute customers know these suggestions are more to benefit the retailer than themselves.

Amazon uses a slightly more convincing approach on its UK homepage with its ‘what other customers are looking at right now’ section. As humans we have a tendency to follow the crowd in new or unfamiliar circumstances and so will look to the choices of others for inspiration.

Amazon homepage

Although this is undoubtably more successful than the ‘special offers’ approach, it still does not fully harness how we overcome choice paralysis in the real world.

When faced with overwhelming choice offline we turn to friends and family for their opinion. In particular we look to those who share similar tastes to our own and whose opinions we trust.

Some ecommerce sites are replicating at least some aspects of this behaviour with sections entitled ‘people like you bought’. This plays off of our inherent group mentality and goes a long way to overcoming choice paralysis.

This thinking ultimately ends in enabling users to see what ‘friends’ are purchasing. Facebook has already done some experimentation in this area. However, I suspect it will not be long before Amazon implement a social network of sorts on its own website.

Although suggestions are a useful way of easing choice paralysis, sometimes it is possible to avoid asking users to make a choice at all. That is where good defaults come in.

Set good defaults

The best way to avoid choice paralysis is to avoid choice entirely. It is surprising how often we ask users to make decisions where we could easily do so.

We tend to pass the responsibility of choice to users for a two reasons.

First, we become obsessed with edge cases. Even though we know the majority of users will make one choice, we worry about the minority who want something different. The problem with this mentality is that the user experience of the majority often suffers in order to cater for the whims of the minority.

Second, we believe that users want choice because that is what they say they want. However, research shows there is a difference between what we say they want and what makes us happiest. Giving the user choice may make them feel temporarily more in control, but ultimately they are more likely to suffer from buyers remorse.

So what is the solution? Am I proposing that we ignore the minority for the sake of the majority? Should clothes come in the single most common size on websites? Should computers not come with the option to preinstall Linux instead of Windows? Not at all.

Instead we must default to the most common choice while allowing the option to customise. Why make people choose between Windows and Linux when the vast majority is going to choose Windows? Set the default to Windows with the option to edit it if required.

This principle applies not just to the selection of products but also to the forms at checkout. I have seen too many websites that require users to select from a number of previous delivery addresses when you could simply default to the last address used.

World Wildlife Fund website

Good defaults have the wonderful ability to reduce cognitive load on users while not taking away the choices available to them.

We are not vulcans

The underlying point that I am making in this post is that we are not hyper-logical vulcans. However much we would like to think otherwise, we do not make rational decisions. We do not carefully weigh the options and make a decision, especially when faced with overwhelming choice. We simply do not have the mental capacity to do that on a conscious level.

Instead we fall back on the subconscious, relying on gut reactions and emotional decision making. This often makes us feel uncertain and out of control. Sometimes this feeling is so powerful we would prefer to make no decision than make the wrong one.

With that in mind we need to make every effort as website owners to avoid overwhelming our users with choice.

But what about you? What have you done to overcome choice paralysis? I would love to hear your advice in the comments below.

Web design news 09/08/10

This week: The magic behind Amazon’s $2.7bn question, kick ass kickoff meetings and can you build an app in 10k?

The magic behind Amazon’s 2.7 billion dollar question.

“Was this review helpful to you”. These six little words earn Amazon more than $2,700,000,0000 of extra revenue per year. This article explains how Amazon’s review system, which shuns chronology in favour of a voting system and highlighting both positive and negative reviews to establish a wisdom of crowds aspect to user purchases. Whether it’s useful to everyone with an e-commerce site is doubtable, when only 1 in 1,3000 purchases of the example in the article write a review, Amazon relies on the sheer volume of sales to build up a comprehensive set of balanced reviews.

Kick ass kickoff meetings

You may already have them, but are you making the most out of your kick off meetings for your projects? In this A List Apart article, Kevin M. Hoffman covers some great tips such as when to include your clients in the process, asking the hard questions first and understanding that everyone is a stakeholder and recommendations for holding virtual kick off meetings if in-person meetings aren’t possible.

Can you build an app in 10k?

Then you have a couple of weeks left to enter the 10k apart competition. With over $10k in prizes up for grabs you can show your development chops by optimising every little byte and entering an app with a total filesize under 10 kilobytes.

Take a look at the apps already entered at http://10k.aneventapart.com/

Happy customers through an improved checkout

You would think that the checkout form would be simple. However often users abandon their purchase, because the checkout form fails to deliver.

How hard can it be? All you need to do is collect their name, address and credit card information. That is all it takes to complete a purchase. Surely that is pretty straightforward.

In fact there are many ways you can make or break a checkout form, which is why I have compiled this list of common issues to consider.

I suggest you look at your own checkout and ask the following questions…

Do we provide positive feedback?

Most ecommerce sites are all too keen to tell you when you have done something wrong. However, users also sometimes need encouragement that they are doing the right thing. A visual indication that a field has been completed correctly goes a long way.

example of positive feedback

Do we provide examples of how a field should be completed?

If there is any doubt about how a field should be formatted (for example date formatting) it is worth providing an example for clarity.

Checkout form that includes an example of how a name should be formatted

Are we validating form fields as users enter information?

Instead of only validating a form when it is submitted to the server, also validate on the client side. This creates a more seamless user experience and avoids data potentially being lost when submission goes wrong.

 

 

Do we place error messages next to the problem that needs correcting?

Too many website only list their error messages above the form leaving the user to identify where the problem lies. Instead place the messages beside the form field that is causing the problem.

Example of error messages placed next to the problem

Have error messages been written with the user in mind?

Often the error messages on checkout forms are written by developers. Sometimes they are written more with debugging in mind than helping users overcome problems. What makes sense to a developer does not necessarily make sense to a user. Always ensure error messages are reviewed by somebody with UX and copywriting skills.

Finally, remember that although it is not bad to add some humour and personality to your error messages, they should also help the user overcome their problem. Examples like that below maybe amusing but are not very helpful!

 

 

Are we saving the user’s progress and handling timeouts gracefully?

There is nothing more annoying than searching for your credit card only to return to checkout and find your session has expired.

Actually I tell a lie, there is something more annoying. That is when you make a mistake checking out and not only does it returns a validation error but also wipes the form you had carefully filled in.

Data can be lost for all kinds of reasons from timeouts to connectivity problem. Save user data often, so they do not need to re-enter it if anything goes wrong.

Have we set good defaults?

Picking good defaults for fields can save users a lot of time when completing forms. For example the vast majority of users want you to remain logged into a site and so have the ‘remember me’ option selected by default.

An example of a login form that has remember me checked by default

Are we allowing people to see their password when entering it?

Another nice feature of HuffDuffer is the ‘show password’ checkbox. This overcomes a common usability problem while maintaining security.

Users often mistype passwords without realising it because the password field is blanked out for security reasons. By allowing users to reveal their passwords when in private, Huffduffer substantially reduces user error.

 

 

Are we pre-populating as many fields as possible?

The only thing users hate more than filling in forms, is doing so twice. Despite this a surprising number of websites ask users to do exactly that.

For example some websites require users to fill in both delivery and billing address even when identical, or enter their name again when the site already knows it.

Even if you cannot be certain what a field should contain, pre-populate it with your best guess. The user can always overtype your guess if required.

 

 

Are we forcing users to register upfront or waiting until the end of process?

As is pointed out in an excellent article on econsultancy.com, most users do not like to register.

When buying, users are focused on purchasing and believe that registering will slow that process down. In fact the only additional piece of information required is a password.

Although registration provides benefits for both parties, users will often abandon the checkout process if forced to register.

A better approach is to offer them the option to register by creating a password at the end of the checkout process rather than the beginning. The sale has been made and the user is now mentally ready to consider the benefits of registering (like order tracking).

The registration form at the end of the checkout process on the Speedo website

Does the checkout work with Javascript disabled?

I am appalled at just how many websites do not work with Javascript disabled. This is not some moral comment about the accessibility issues surrounding Javascript. Instead it is a financial argument.

As many as 1 in 20 users have javascript disabled for numerous reasons and no self respecting retail outlet would turn away 1 in 20 people from its store.

This is an area that causes a lot of confusion so let me be clear: I am not saying ecommerce sites cannot use Javascript. I am just saying that it needs to work when javascript is turned off.

I have already mentioned a number of techniques that require Javascript to work. However, the site should still work if these extras are not available.

I am not talking about building two versions of the site. I am talking about building the site without Javascript and then layering some additional javascript on top to create a better user experience for those that have it.

Is the validation on fields forgiving enough to understand different formats?

One of the most common problems I see on ecommerce sites is the frustration caused by forms not accepting user entry because it is formatted incorrectly. This typically includes:

  • Dates
  • Credit card numbers
  • Passwords

The most frustrating part is that the user has entered the correct information, just not in a format which is accepted by the system.

Take for example credit card numbers. Do you enter them with spaces, without spaces or maybe even with dashes? Why should the user have to worry about this? It is a simple matter for the website to reformat the data later. This should not be the users problem?

A checkout form that requires users to enter a credit card number without spaces or dashes.

Is the user suffering because of technical constraints?

The problem of data entry formatting is part of a wider issue where developers make users responsible for problems that they should not have to deal with.

For example, why should users have to fill in CAPTCHA fields because the website has a problem with SPAM? It’s not the users fault.

Cartoon highlighting how hard CAPTCHA is.

Image source, Geek and Poke

Ask yourself if there are places on your website where the user experience has been compromised for the sake of an easy life for the developer.

Does the browser back button work?

For many users the browser back button is an invaluable tool that they rely on for navigation. However too often in the checkout processes, hitting the back button either entirely loses the users progress or returns strange errors that cause confusion and uncertainty.

Are we being greedy in the personal data we ask for?

It is understandable that those running ecommerce sites want to collect information on users, discover how they found the website and get permission to correspond with them in the future. However, users see these as barriers to making a purchase.

Even when these fields are marked as optional, users have to mentally process them and decide whether they should be completed. At the very least they have to check that they are not being opted-in to junk mail as in the example below.

Example of a checkout form where the user is being asked for unneccessary information and is being opted in to unsolicited email.

Keep these kinds of marketing questions until after the product has been ordered. You are less likely to alienate the user and will gain a better quality of response because the user has not been tricked into completing the fields.

Are we rewarding users who go the extra mile?

When a user does go the extra mile and signup for a newsletter or tell you how they found the website, make sure you reward them for their time. Instead of using their email address to spam them why not email them a gift certificate or some other form of thank you.

During the US election, those who donated to the Obama received a free T-Shirt. This is not only a great gesture, it is also an excellent advertising strategy. Why couldn’t you do the same for your customers who are willing to signup for your newsletter?

Obama fundraising website

Are all of our buttons descriptive?

Users often do not read explanatory text, instead relying on links and buttons to decide what action to take next. However, when those buttons do not make sense out of context they can prove confusing.

Take the two examples below. If you were scanning those pages quickly and didn’t read the copy which is clearer:

Example from ebuyer.com that requires the users to read both text and button

Example of a site where the button describes the next action without the help of explanitory text

Could our instructional text be clearer and more concise?

Many websites suffer from verbal diarrhoea during their checkout process. There is a belief that by using more words the message is clearer. However, in reality they just put people off from reading the text.

Take for example the amount of copy associated with this field in a checkout form:

The copy reads: if you have any additional information or special instructions that you want us to pass over to our courier please enter them in the text box below (maximum 30 characters) and click the Add Instructions button. This must be done before selecting your shipping address. Please be aware that neither Ebuyer nor our delivery partners can accept responsibility for any loss or damage when the special instructions provided have been followed.

In reality all that is required is:

  • A heading entitled ‘Do you have any instructions for the delivery driver?’
  • A field for instructions that has a character limit to prevent a user entering too much.
  • A link to your terms and conditions
  • A submit button.

There is no need for the current amount of text.

Do we require users to remember a username as well as a password?

Why does any site (let alone an ecommerce site) ask a user for a username? Surely you are just giving the user another piece of information to remember in addition to their password. This just doubles the chances of them failing to login.

A better way is to use their email address as their unique identifier. Its easy to remember, is guaranteed to be unique and is already a required piece of information on almost all ecommerce sites.

How do we handle bank card validation?

Sooner or later even the best designed ecommerce site has to hand control to the bank for credit card processing. Unfortunately there is little chance to control the user experience once this happens. From the paypal website to VISA card validation, these sudden changes in user experience can make customers nervous.

Verified by Visa example form

It is important to clearly communicate what is happening and minimise the impact to the user. Too often users are simply dumbed onto these pages with no indication as to whether the order has been completed or why they are there.

Conclusions

The reason I have written this checklist is because in the rush to deploy it is easy to forget these nuances of design. However it is these details that make the checkout process pain free and trustworthy.

We often concentrate too much on functionality and not enough on user experience.

I am not suggesting that failing to implement any one of the points will drive a user away. However, combined they have a significant impact on how somebody perceives the reliability and ease of use of your website.

Sometimes it just needs another set of eyes to look over your checkout and pick up on these problems.

So what did I miss? What things would you add to my checkout checklist? Post your ideas in the comments below.

Are you concerned about your checkout process? I would love the opportunity to review it and help fix any problems found. Email me and I’ll take a look.

Looking for more ecommerce posts? Try my post on Calls to Actions.

Getting started with ecommerce

More from show 200: Drew and Rachel share their experiences of developing ecommerce websites.

Paul: Right, shall we talk about e-commerce, because I thought that might be something interesting to deal with. It follows on from the Perch conversation in a lot of ways. One of the challenges you’ve had to face surrounding commerce and working on e-commerce sites. I guess my first question is – there’s a lot of people who are wanting to sell stuff on their sites, a lot of people kind of go in from huge online retailers right the way down to someone that wants to sell their local band’s album. Where do you start when working on an e-commerce site? What are the initial things that you consider when developing an e-commerce site?

edgeofmyseat.com

Drew: Hmmm…

Rachel: The first thing really that you need to think about is how are you actually going to take payments. Disregarding your actual shopping cart type stuff on your site, right from the outset you need to think about how you’re going to take payments. And there’s a whole bunch of options for that, and a lot of that is going to depend on the type of client and what they already have. If you’ve got someone who’s already got a physical shop, they’ve probably already got a merchant account with the bank.

Paul: Right.

Rachel: So most likely are going to want to take their payments through that merchant account, which basically is the bit that allows you to accept credit cards. If you’ve got a merchant account you’re able to accept credit cards off your own bat, you don’t need to use somebody else. The thing you should never do, and I still encounter people trying to do it, is think "Oh, it’s alright! I’ve got a PDQ machine or got some other way to take transactions, either over the phone or when people are there in the shop. I’ll just store the credit card numbers and then offline I’ll put them through my PDQ machine." And I still encounter people who think that that is OK. That is not OK. That’s not OK from your card agreement point of view because internet transactions are different, they’ve got a different level of liability and if your bank find out you’re taking internet transactions in that way, they will close your account.

So that’s really important, that people understand that dealing with taking payments online, even if they’ve already got that merchant account, that they need to speak to their bank and arrange to have that ability.

Paul: Marcus, have you got some kind of jingle going on? Because everybody in the chat room is screaming and shouting.

(Noise in the background)

Paul: Yeah. So it’s definitely that camera, OK. Right, I’m narrowing it down guys, we are getting there! We’ll start this whole conversation again.

Marcus: Don’t have to, as long as you can remember where you were.

(Audio from a few seconds ago plays in the background.)

Everyone: (Laughs)

Paul: Alright, now turn that down.

Marcus: How’ve you managed that?

Paul: I don’t know, cos I’m clever.

Rachel: I like the fact that I get a moo-ing camera, that’s excellent!

Everyone: (Laughs)

Paul: Is it back now? It is, I can see it going up and down!

Everyone: (Laughs)

Rachel: I really don’t make this noise.

Everyone: (Laughs)

Marcus: It’s gone, it’s gone, it’s gone…

Paul: Oh it’s gone! Right, so we’re now safe. Rachel, you no longer moo!

Rachel: (Laughs) Excellent!

Paul: I have no idea what happened there guys, I’m really sorry. I blame Marcus, because he’s in charge of sound.

Marcus: No, it’s Dave.

Paul: It’s Dave! It’s Dave! Dave heads out of the room and everything broke. Ok, that’s one. Someone should keep a note, that should be a first drink of the day. Every time we make a major screw-up.

Marcus: Ok, but who gets to have the..

Paul: Let’s pick Dave as the person that has to drink every time. What were we talking about?

Everyone: E-commerce!

Paul: That was it, we were talking about e-commerce. Let’s talk some more about e-commerce. Talking about the things you need to consider, and I’ve got no recollection at all to what you were saying (laughs).

Drew: Talking about people not taking…

Rachel: I think I was saying moo. (Laughs)

Drew: …about people not taking the responsibility of dealing with credit cards seriously.

Paul: Right, yes!

Drew: Because that’s something you do see a lot, I mean you see people emailing credit card numbers around.

Rachel: You see people storing them in plain text in text files in a database, it’s not as much as you used to, but it does happen. I think people don’t really understand all of the bits which go into taking payments, particularly if you’re using your own merchant account. Because you’ve got various bits; You’ve got your merchant account, so if you’ve got an account with HSBC or whatever that allows you to accept credit cards. That’s one part of the jigsaw, the other thing you then need is, because you can’t take these credit card payments actually yourself, you shouldn’t be generally storing them anywhere. Very very few circumstances should require you to store credit card numbers.

You need what’s called a payment gateway, which is the thing which allows you to send your credit card details securely. They actually do the processing, check it’s valid and then hand that off to your bank and the money goes into your account. All of the big banks have their own, or you’re hooked up with one. So you have the NatWest Streamline and Barclays ePDQ, things like that. If you’ve got a merchant account, your bank will be able to tell you who they use. You don’t necessarily have to use your bank’s one, there are other ones. We like PayPoint, which used to be called SECPay.

Paul: I’ve never come across PayPoint.

Rachel: PayPoint are great, they’re great for developers, they’re very very good.

Marcus: I remember SECPay.

Rachel: Yes, well PayPoint are SECPay, it’s the same company. They’re great, they offer payment processing facilities and they work with all the major banks. Your bank would be very happy if you said these are who we’re going to use if you’re gonna go the whole hog and have your own merchant account, be able to accept your own credit card transactions. Of course, what a lot of people do these days is use something like PayPal, which means you can have that ability to take payment online without having to have a merchant account.

A lot of people, if you’re a new business, you might find it difficult to sign up for a merchant account anyway. You tend to sort of need to be established and things before the bank will be happy to give you one.

PayPal

Paul: I mean the problem with PayPal obviously is that they seem to take an enormous slice compared to most other companies.

Drew: It depends what volume you’re doing really. For low volumes, PayPal works out cheaper. Because you’re not having to then pay for all the expense of the payment gateway, the traditional payment gateway.

Rachel: Because you have monthly charges and things, as well as your transaction charges, you normally have monthly charges for having the merchant account and a monthly charge for the payment gateway.

Paul: Yeah.

Rachel: So actually if you’re doing low amounts of transactions and not a huge amount of money, you may find actually that PayPal works out cost effectively for you.

Drew: The nice thing about PayPal is you’re paying per transaction, there’s no ongoing fee. So if you don’t make any sales, you’re not paying any fees. You’re only paying a percentage when you’re successful really.

Paul: Yep, that makes a lot of sense.

??: We paid £20 a month…

Drew: Oh yeah, if you upgrade to a bigger PayPal account with more features, then yeah, you do start paying.

Marcus: From the chat room here, "They take a big slice, take forever to process and support is awful".

Rachel: Yeah, I mean I think that’s the thing with PayPal is that people do have issues with them, and also not everyone’s clients are going to be happy to sign up with PayPal, or to even use PayPal. They’ve got a bit of bad press.

For us with Perch, most of our clients are very happy to use PayPal, they’ve already got PayPal accounts and that’s fine, but for a more traditional store that might not be the same. I think you do have to look at your customers a bit, and are they likely to be happy to do that. The nice thing about PayPal is that it gives you an easy "in" to all of this. You know, if you’re starting out, maybe you can’t get a merchant account or you want to test the water before you get a merchant account and go to all that expense, and also the expense of developing for it, PayPal gives you a really easy "in". You’ve not lost anything; If you decide it’s not working out, you haven’t got an ongoing charge, you’re not tied in for any length of time to use it. So it’s a good option, and there’s things like Google Checkout as well.

Paul: Yeah, I’ve never used Google Checkout, what’s that like?

Rachel: I’ve not actually developed for it yet. I hear tell that it’s relatively difficult to develop with, because people seem to be having problems, but I’ve not actually developed something for it.

Paul: Ahhh OK. So what are the things you need to think about from a technical perspective when you’re working on an e-commerce site? You’ve mentioned a few things, but what’s the key considerations from your point of view, as people building it?

Rachel: It depends on what you’re going for, if you’re using your payment gatewaym or with PayPal particularly, what you tend to end up with is what’s sometimes referred to as pay-page, which is where you go out to a third party site, the card details are taken on the pay-page by that third party, and then you’re transferred back to the site to finish the transaction.

Paul: Yeah

Rachel: Typically from a technical point of view, what happens then is a transaction ID is sent back so that you can do any post payment processing; Send out the download software, or passing on ready for shipping, or sending emails, or whatever it is you do after payment. The nice thing about that pay-page integration is that you never touch the credit card details. You don’t have any liability for them and they go out to the payment gateway and it’s all taken there. And of course that means you don’t have to worry about that. This is something that’s becoming a real issue because of something called the PCI DSS compliance which means that you have to comply with all sorts of things if you take credit card details, and that comes into play even if you just pass those details over and never actually write them down or store them. You still have to do all sorts of things with your server; making sure you’ve got the correct firewalls and have security scans and all kinds of hassle. So really we tend to recommend people do the pay-page thing, not do an integration where people take payment on their own site. Just because you then don’t then have that liability.

Drew: For a long time it was considered best practice that you keep the customer on your side the whole time, you manage the entire experience, you take the credit card details and in the background you pass those off for processing. But there’s a couple of things really, this PCI DSS is one big issue these days with the legislation that as soon as those credit cards touch your server at all, then you’re liable for all sorts of extra overheads that you really don’t want to be dealing with.

But the other thing is that there are far fewer payment gateways than there are online shops. People are likely to be more familiar with someone like WorldPay, or PayPal, or Google Checkout than they are with you, as somebody who is selling online. So the customer may well have more trust in who you’re using for processing than they do in you.

I know that from a personal point of view, when I’ve been looking for something online trying to find the cheapest price. You search around and find some odd looking store, and you don’t know anything about it, it’s just turned up in google and they’ve got the thing at a good price. If you see that they’re using a payment provider who you trust, using WorldPay or someone, you know that "Ok, they’re decent enough to get an account with (someone like WorldPay) and I can go back to WorldPay if I have any issues with this transaction". So it gives you a bit more confidence with buying from someone who’s reputation you ‘ll not necessarily be familiar with.

WorldPay

Paul: Absolutely…

Rachel: Clients will tend to say that, "I want control of the basket, and I want the payment to happen on my site". I think often when that’s asked, they haven’t really though through what they’re then going to have to deal with. There’s a huge amount of liability, there’s an awful lot of work that’s going to have to be done. It’s going to mean they’re going to have to have a more expensive hosting account for instance, because you’re not going to pass PCI DSS on a shared server or shared hosting account. So there’s a whole load of stuff that you’re going to have to worry about because you’ve touched those credit card details. Only in a tiny tiny way passing them on to the API.

So I think generally, we tend to try and guide people to using pay-page. Some of the providers, PayPoint, you can brand up the template so that they can look like your site. I don’t think purchasers are particularly upset by going out to a third party, they’re used to it. They’re used to going to a third party to make payment these days. As long as you can capture the output of the payment and deal with things on your side, you don’t have to destroy the experience because of that, you just need to design around it really, and make sure people know what’s going on when they go out to that third party.

Paul: Yeah, what about user considerations since you’re working on an e-commerce website, are there certain things you consider really important to think about when designing and kind of creating the front end part of all this?

Drew: Yeah, I mean for checkout processes it usually pays to be as straight forward as possible, in terms of your development techniques. Really, just in the same way as you do with design, you just strip away the distractions. It can serve you well I think to not try and be too flash. Just the process of taking payment details or whatever it is, just be straightforward, clear and reliable because you don’t want that part of your work to be the bit that’s letting you down. You don’t want people to be encountering weird JavaScript validation issues while they’re trying to sign up for an account because you want to get them through that boring process as quickly as possible. So that’s definitely a consideration, not trying to be too swish.

You need to think about, really from the outset, when you’re dealing with e-commerce stuff, the details like; How are you going to deal with delivery? How is delivery charged? And they’re the sort of thing that you not only need to communicate to the customer quite clearly but also you need to understand before you pick what sort of solution that you’re going to develop. If you’re going to use an off-the-shelf system, if you’re going to have to develop something bespoke, if you’re going to use a service like shopifyor something like that. You need to consider what your scheme is for charging for delivery; Is it that you charge by weight?, or do you charge by number of items? Does it become free after a certain value? There’s all these different ways which seem quite commonplace but you need to make sure that you can deal with them technically.

Paul: It goes back to what we were talking about earlier about thinking about things like VAT, and delivery charges as you say, discounts, refunds…

Rachel: Discounts are always an issue (laughs)

Drew: Discounts are a major major headache. If you think about all the different ways you can express a discount. Just go into a supermarket and look at the different ways they do discounts.

Marcus: Three for two.

Drew: Yeah, three for two, or buy one get one free.

Rachel: Or buy this thing and get this other thing free.

Drew: Yeah, or buy 4 of these and get this thing half price!

Everyone: Yeah.

Rachel: And people don’t think through this, people say "I want a simple e-commerce system for my site"and you start asking the questions, and they’ll say "Oh yes, we want the ability to do special offers", then you say "But what sort of special offers?" and then they come out with "Oh well we could do this, and we could do this or we could do that" and I think particularly if you’re building custom stuff. Obviously if you’re using third party shop or cart or whatever, then your gonna be able to say "Well, you’ve chosen to use this solution and this is what it offers". If you’re developing custom e-commerce and shopping carts there are so many details, and you really do need to tie those down at the beginning because you can really get scope creep. E-commerce sites are the place where we see the most scope creep and the most of where clients come back and say "Oh, you know what would be really handy if we could just do…" y’know? There’s so many different variations in, say, things like shipping, If you’re dealing with some physical products and some electronic downloads, you don’t charge someone shipping for electronic downloads and there’s so many different things that you need to consider. They really do need speccing out very very well from the outset.

??: We had a client once, who wanted us to basically create an area in the back-end of the e-commerce site that we were building for them that would basically allow them to create rules relating to discounts. And you think like "eh uh", it’s not gonna happen.

Drew: It gets mindblowingly complex, we tend to go one of two ways. Deciding on a type of discount they can do quite easily, so they can offer a 10% discount, or a 20% discount or something like that, but not combinations of products equal… this sort of thing. Or we can go down the other route of just putting the system in place and saying "Right, when you need to do a special offer, hire an hour of our time, and we’ll write the code for that special offer and that’s going to work out an awful lot cheaper than trying to build an enormous system that will deal with any sort of discount. Just come back to us, the maths isn’t complex. We’ll just sit and write it and then that’ll be in your store" and do it that way.

You think of the complexity that must be in supermarket till systems, the ways they deal with all those discounts, it must be mindblowingly complex and you really don’t want to be taking on the burden of that level of code inside your application. Because it’s just going to be very expensive and you’re going to have to maintain that code going forward.

Paul: My wife’s just arrived! Hello Cath!

Cath looking silly

Everyone: Hello Cath!

Cath: I come bearing food…and drink.

Everyone: (cheers) Yay!!

Paul: Are you gonna set up in the other room?

Cath: Yes.

Paul: Cool.

Cath: I’ve done it already.

Paul: Oh, you’ve done it already?

Cath: Oh, and by the way the GPS doesn’t work and you don’t … (not close enough to mic to hear)

Paul: Well, you got close enough.

Cath: So I’ve spent about a quarter of an hour driving around the countryside.

Paul: Well that’s ok. I’m getting told off live on a show by my wife!

Everyone: (Laughs)

Marcus: Sorry Cath, can you do it again later? But into a mic?

Everyone: (Laughs)

Paul: We’ll get you in properly in a minute Cath.

Cath: Bye!

Paul: Bye Bye! … Ryan!

Ryan: Yes.

Paul: Sorry, didn’t mean to shout into the mic. We‚Äôve got Elliot coming on soon?

Ryan: Yes we have.

Paul: Which is great

Drew: I should just say, we’ve also been asked… I’m wording this carefully… to "please can you produce magic" by one of our clients. Those were their exact words, "We would like magic".

Paul: How would you respond to that?

Drew: This was in an email, "we would like you to create some magic".

Rachel: We get asked for the "wow factor", I’ve not quite defined what the "wow factor" is and how it relates to me as a web developer but yeah. I like definable things.. I’m a programmer, I like definable…

Drew: I think that’s where I was going, with the discounts, is outline exactly to the point, "We’d like this form of discount, this form of discount" and apply that to a particular process.

Rachel: I think it’s fine saying these things can grow organically and we can decide when we get to whenever, but I think that’s gonna make it more expensive. If you know you want to do things to a tight budget, and get it done on time, you need to have that sort of stuff specced out at the outset because there’s just so many different combinations of things.

Paul: Someone’s put in another good thing which you get sometimes. Is it "zebedee"? says "It doesn’t ‘pop’ enough".

Everyone: (Laughs)

Drew: A design that "pops".

Marcus This is where we need the HTML5 audio tag. (Laughs) just get it to go "pop" "pop".

Everyone: (Laughs)

Paul: That’ll teach ‘em!

Thanks goes to Ruchard Adams for transcribing this interview.

Web Design News 02/03/10

This week: the search for inspiration, using CSS3, ecommerce tips and why the browser landscape in Europe is about to change.

The search for inspiration

I am always encouraging those of you who listen to this show to be more adventurous in your designs. With website owners tending to be conservative and designers jumping on the latest design trend, website quickly all look the same.

Design Instruct has an article this week outlining some ways that you can find inspiration. Other than a recommendation to ‘look to the history of design’ for inspiration, none of the suggestions are that original. Most we have discussed before on the show.

However, there is a second post this week from Smashing Magazine, which is truly inspired. Entitled ‘Find inspiration in uncommon sources‘ it lists some great ideas that you should take a look at. My favourites sources of inspiration were:

  • Board games
  • Food
  • Fashion

These are certainly not areas I have considered looking at before. Infact shortly after reading the Smashing Magazine post I stumbled across this amazing post about food design which I highly recommend. It will certainly inspire.

Art made from Toast

Using CSS 3 right now

We talked a lot about HTML5 and CSS3 on the 200th episode of Boagworld. Hopefully this has left you keen to get stuck in, especially as these technologies can be used now and not at some future date when they are universally supported.

If that is the case then here are two great articles on CSS3 you should check out.

I would recommend starting with ‘You can use CSS right now’ as it focuses on basic stuff like rounded corners, drop shadows and alpha transparency.

Once you have your head around that, turn your attention to the mind blowing possibilities in the second post. Some of the stuff they cover includes:

  • CSS only content sliders
  • CSS only dropdown menus
  • Image free speech bubbles
  • 3D ribbon effects
  • Awesome buttons
  • Letterpress type

Of course these techniques are not universally supported, but as they are enhancements to a site rather than crucial to its operation, that is fine. This is progressive enhancement at its best.

Example of a CSS only menu

Europe set to have a broader range of browsers

We have known it was coming for a while but it looks like the moment is finally here (in Europe at least) – Microsoft now has to offer a range of browsers on its Windows operating system, not just Internet Explorer.

According to Sitepoint this will happen any day now through automatic update and is going to affect every user with IE as their default browser. Sitepoint writes…

The Browser Choice screen will be offered in Windows XP, Vista and 7 to users who have IE set as their default browser. It will be installed through the standard automatic update system.

Following installation, a new “Browser Choice” icon will appear on the desktop and the IE icon will be unpinned from the Windows 7 taskbar. An introduction screen will appear which explains what a browser is.

The user can opt to select later or proceed to the browser choice screen. The five most popular browsers are shown in random order — IE, Firefox, Chrome, Safari and Opera. A further 7 randomly-ordered browsers are available if the user moves the horizontal scroll bar.

The system can download and install any number of browsers.

This will have a massive impact on the European browser landscape. My bet is that the big winner will be Google. Many users will play it safe and stick with the blue E that they know. However, a lot will be tempted by Google because it is a brand they know and use regularly. Expect their market share to jump.

However, I have left the best bit until last – According to Sitepoint:

IE6 and IE7 users will be prompted to upgrade to IE8!

This means whether users upgrade to IE8 or opt for a different browsers we are going to see a dramatic improvement in standards compliance here in Europe.

Oh happy day!

Browser Choice Screen

Ecommerce development tips

I am very conscious that I don’t cover a lot of news for developers on this show. That is mainly because I don’t understand much of what you guys do. However, an article this week caught my eye and I thought I would share it with you.

24 Ecommerce Development Tips appears to be a comprehensive list of technical things to consider when developing an ecommerce site.

The article covers everything from database configuration to handling the complexity of discounts.

24 ecommerce tips

One part that jumped out at me in particular was:

AJAX is fine for checkout, not for product browsing. Don’t load products or product previews in DHTML windows or an AJAX widget. Search engines won’t be able to find them. Which means you won’t sell anything. Which means you’ll go from full time to part time to contract to unemployed.

The reason this grabbed my attention was because it reminded me of my own post on Javascript and ecommerce.

If you happen to be considering building an ecommerce website anytime soon, I highly recommend you read it.

We recently discovered that very few of the big name ecommerce software packages run without the use of Javascript. If that includes your website then you may well be turning away 1 in 20 of your potential customers.

Certainly food for thought.

197. Energise your ecommerce

This week on Boagworld: We examine ways to improve the conversion rate on your ecommerce site, review CSS Mastery 2nd Edition and take a look at Zen Coding.

Play

Download this show.

Launch our podcast player

News

Lessons in simplicity and constraints

I am a great fan of simplicity and constraints. I have written enough about simplicity before so I won’t bore you again. However, unlike most people I enjoy the constraints of a brief and limited timescales.

I was therefore delighted to read a short little post on the 37Signals blog which summed up these two concepts so brilliantly. They wrote:

The easiest way to force the insight of what can be lived without is by playing a game of constraints: You have to ship on Friday, you can’t add more people, you can’t work nights. Fixed resources, fixed time. All that’s left to give is scope. It’s amazing how creative the cuts and sharp the sacrifices become when you’re backed into a corner. It’s when you have to choose that you make the best choices.

In other words constraints force simplicity. This is a mantra I can get behind.

They also end with an important point for website owners:

For every 1 day estimates of a task, there’s a simpler version of that you can do in 3 hours, and an even simpler still you can do in 30 minutes.

So next time you hire a designer and they ask your budget, tell them. This is a key constraint that will influence how the designer builds your site or application.

Making better use of your footer

Fat is fantastic – at least where footers are concerned. For a while now there has been a move towards ‘fat footers’. These contain so much more than the privacy policy and copyright statements of days gone by. Todays footers are full of information. The question is, what exactly should we put into our footers?

Designshack has an excellent post that gives you 10 ways to use your fantastically fat footer.

Some of the ideas are suggestions for content (such as using it for social media links or ‘about me’ content), while others are design ideas (such as using illustration or animation).

Personally I use footers for two purposes:

Secondary Content - Additional information that is not apart of the main content on the site. For example in the case of Boagworld this includes a blogroll, great content on other sites and stuff I am up to. This isn’t really apart of the boagworld blog. Its extra content readers might be interested in.

Calls to Action – I think footers are a great place to put calls to action. For example on the Headscape website, we have the contact form at the bottom of the page. Hopefully once people have read our compelling content they will be inspired to complete the form. 37Signals used to use a similar approach on their own website.

How to guarantee an improvement in your conversion

Later in this show we talked about ideas that might improve the conversion rate on your website. However, if you want a certain why of improving your conversion rate (or your site in general) then read: An Introduction To Website Split Testing.

Split testing (otherwise known as A/B testing) is the process of showing different users different versions of your site. You then monitor how these different versions affect user behaviour in order to find the best solution.

It is a guaranteed way of finding the best solution through a process of trial and error.

However despite its success, few website owners use the technique. I think it is generally perceived as time consuming and expensive.

Although it does take time to produce multiple versions of an idea and test it, actually running the test is fairly inexpensive. In fact Google provides a split test tool that is absolutely free. Also, there is no reason not to split testing an approach before you roll it out. After all it has already been built anyway.

To learn more about the benefits of split testing and how to get started, definitely read this post. It will inspire you and set you on the right path.

How to make sure you’re regular… at blogging

When I write about communicating with your audience in the Website Owners Manual I say:

The key is regularity, rather than frequency. Users should come to expect your communications. Communicating on an ad-hoc basis can be damaging, especially with blog posts.

This is a tone echoed in a post on ProBlogger this week. Tips on How to Keep Your Blogging Regular, emphasises the importance of regular posting before giving 5 ways to ensure you keep the habit up.

These include:

  • Don’t bite off more than you can chew
  • Regularity is more important than high frequency
  • Under promise and over deliver
  • Build a schedule
  • Have someone or something manage you

After six years of blogging, I can say I agree with each and every one of these points. This is great advice if you are blogging on a personal site. However, it is crucial if you are running a corporate blog. Read and take note.

Back to top

 

Feature: Increase your ecommerce sales

This week’s feature comes from a blog post I wrote some time before Christmas. It looks at 8 ways you can increase your ecommerce sales using as an example a site we have worked on called Wiltshire Farm Foods.

Read the original post: 8 ways we increased ecommerce sales by 10,000%

Back to top

 

Reviews

CSS Mastery 2nd Edition by Andy Budd

Read the CSS Mastery 2nd Edition review

Zen Coding

Read the Zen Coding review

Back to top

 

8 ways we increased ecommerce sales by 10,000%

Discover how Headscape increased the sales of Wiltshire Farm Foods by 10,000% and how you can do the same for your site.

A 10,000% increase in sales over 5 years. Sounds incredible doesn’t it. Just to make that an even more incredible, their average customer is in their 80s! Who said the elderly don’t use the internet.

When we started working with Wiltshire Farm Foods their monthly revenue was a 100th of what it is today.

Of course in reality that success was not down entirely to us. Matt Curry, our client at Wiltshire Farm Foods has put his heart and soul into that website and as I say in Chapter one of the Website Owners Manual, it is the site champion who makes or breaks a site.

The organisation has recognised the importance and power of the web for their business and continually invested in it both for development and also in site promotion. If they had not had the foresight to do that then the site would have failed.

So what do I put the sites success down to? Well, honestly that is hard to say. There are so many factors. However below are 8 things that have without a doubt made an enormous difference.

1. Remove clutter

WFF Product Menu

Too many ecommerce websites are overwhelming. Everything is screaming for the users attention. There are offers, deals and recommended products wherever the user turns. Amongst all of this confusion it is hard to find what you want.

Amazon is like this and so we all naturally presume it must be right. However, one of the first conclusions we came to when working on Wiltshire Farm Foods is that they are not Amazon. Nobody is. You cannot presume that what works for one will work for all.

The emphasis of the Wiltshire Farm Foods website was on helping users find and buy the products they wanted. It is not in anyone interest to overwhelm them with stuff that only we wanted them to buy. It has to be the customer first.

This meant simplifying the site. With so much content shouting for attention, users could not find anything. We had to remove distraction and focus them on key tasks.

Take for example the site’s navigation. We actually hide away some of the ranges offered by Wiltshire Farm Foods. Insanity you might think. Surely this made it harder for users to find what they want? Admittedly for a small minority it did. However, hiding the less popular ranges (like soup) we could highlight the ranges that accounted for the vast majority of sales.

WFF Product Listing

The same was true for product listings. Some users were interested in a lot of different information from dietary content to customer ratings. However, this additional information made life harder for the mainstream users who were only interested in a photo, description and price.

We therefore decided to move all of this additional information on to the product details page. That way it was accessible for those who wanted it without distracting the majority.

WFF Shopping basket

The final area we significantly simplified was the shopping basket and checkout process. As I explained in my post on ecommerce lies, once the user has made the decision to purchase you need to remove all distractions.

The shopping basket is not the time to up-sell or cross selling. It’s not even the time to provide a navigation bar to other products. At this stage you want the user to do one thing and one thing only, proceed to checkout.

Talking of the shopping cart, we also focused heavily on getting it to stand out on the page.

2. Make sure the shopping cart stands out

Too many websites hide the shopping cart away. However, this is a crucial step in shopping and the first of the checkout process. In affect the shopping cart is an ecommerce websites primary call to action.

With this in mind we wanted to make the cart as prominent as possible. We achieved this in three ways:

  • We made the shopping basket button visually different from the rest of the site using colour
  • When items were added to the basket it was visually updated (see providing visual feedback video)
  • We tethered the basket summary to the top of the screen so that it would always be visible even when the user scrolled (see below)

As you can see from the video below, the tethering proved particularly effective and makes the call to action obvious at all times.

3. Provide visual feedback

One of the primary questions in the mind of users when interacting with a system like an ecommerce website is “did I do that right?”

Whether it is adding an item to the basket or filling in a login and password, users are concerned that they are doing things wrong. This is particularly true with a more elderly audience who have not grown up using computers.

It is therefore important to reassure users as they progress through the site. This can be achieved by providing visual feedback when the user takes an action.

For example on the Wiltshire Farm Foods website when an item is added to the basket the user gets multiple types of feedback to reassure them the item has been added:

  • The photo of the item is highlighted
  • The ‘add to basket’ button updates
  • The image of the item visually moves towards the basket
  • The basket itself updates

As you can see from the video below, the user is in no doubt that the item has been added.

However, the visual feedback does not stop at the basket. When the user is confronted with a form they are clearly shown what fields are required, and which have been completed correctly or incorrectly. This information is updated without the need for page refresh.

Form field feedback

4. The bigger the better

An image can say a thousand words. It is therefore unsurprisingly that the product shots on an ecommerce site are massively important. Even if your audience are not the elderly with failing vision, it is still important to have nice, big, clear shots of your products.

In the case of Wiltshire Farm Foods we have taken this principle to the extreme.

As we saw earlier the product list is essentially a grid of images with the addition of some basic product information. The image sells the meal in a way words never could, and the grid allows us to have large images. However, we did not stop there.

As you can see in the video below, clicking on a product listing displays an even bigger image in the product details. We also allow users to click on this larger photo and display an even bigger version that expands to fill the width of the page. This leaves the user in no doubt about what they are getting.

Of course this is dependant on having decent shots of the product. If you can only invest in a single thing for your ecommerce site this would be it. Spend money on getting the best photography you can. Its worth every penny.

5. Make buttons and links obvious

A continuation of the ‘bigger is better’ thinking can also be applied to buttons and links. Admittedly this might be exaggerated by the Wiltshire Farm Foods audience, but in my years of user testing I am constantly amazed how often users fail to spot important links and buttons.

You will therefore notice how ridiculously big some of the links and buttons on WFF are. However, size isn’t everything (no innuendo intended).

We also gave a lot of attention to appearance and wording too. For example, notice in the image below how the link looks like a link. Also we did not rely on the link alone because the wording of the link doesn’t communicate the action. We therefore added a button that communicates how clicking it will allow the user to ‘view all of our beef meals’.

Link to Meal catagory

The descriptive nature of buttons can also be seen elsewhere on the site. We are very conscious that users do not always read copy explaining buttons and so the button itself needs to communicate all the information required.

Take for example the image below. If all you read was the two buttons you would know exactly what choice was available. The surrounding text is entirely optional.

Example buttons

6. Always be there to help

An ecommerce transaction raises a lot of questions in the minds of users:

  • Is delivery free?
  • What if I don’t like the product?
  • Is my credit card information secure?

In addition there are questions about the site itself and how to use it.

Surprisingly many ecommerce websites seem reluctant to help their customers. Delivery and return policies are buried. Reassurance about security is limited to a tiny badge or padlock. And most importantly you have to search high and low for a phone number.

We were determined to address these problems on the WFF website. In the end we settled on three approaches:

1. The one stop solution

Our first move was to bring together all help into a single section of the site that was prominently displayed in the navigation bar. This avoided the user having to hunt around for different pieces of information.

We then looked at the enquiries received by WFF customer support and used these to identify the top issues. These where then prioritised and presented on the help homepage.

As you can see the top question was “how do I contact you” so we prominently featured the telephone number. This was then followed by questions about ordering and the website.

Help Section

2. The getting started guide

We also took an idea from the video games industry and provided users with a tutorial. However, the idea of the tutorial (which we called a getting started guide) was to guide users through their first transaction.

This is displayed prominently on the homepage and gives users who are overwhelmed by the site a starting point.

Get Started Content Area

3. Context sensitive help

Finally, we also wanted to provide context sensitive help throughout the purchase process. These are small pieces of microcopy found throughout the site nudging users in the right direction.

Example of context sensitive help

7. Handle errors gracefully

No matter how well designed your site or how much help you provide, things will inevitably go wrong.

If you do not want to lose the sale, you must handle the error gracefully and reassure the user they can still continue.

This is particularly important when working with the elderly audience found on Wiltshire Farm Foods. However, it is always wise to give users as much help as possible and not make assumptions about their abilities.

Below are a couple of examples of how we handle problems on the site.

Error message

The first example is an error message that appears when the user fails to login. There are several such messages across the website. However, they all have two characteristics in common:

  • The message is highly visible – This is achieved either by strong visual branding (as above) or by positioning the message next to field being edited (as in context sensitive help) .

  • The message tells the user what to do
    – It is important that messages clearly communicate how the user can overcome the problem.

The example above is probably a little wordy for most websites. Fortunately, our user testing has shown that a more elderly demographic actually reads instructional text! We can therefore take some liberties.

Example of empty search results

The second example of an error message appears when the user has entered a search term that returns no results. The danger in this situation is that users will conclude the site does not have whatever it was they searched for and so leave.

In reality there are number of reasons why no results might be returned. In such situations provide some guidance on searching. We also went one step further by including a phone number in case all else fails.

8. Communicate your value add

The final lesson we have learnt from working on WFF is the importance of communicating what extra you offer customers.

The problem is that there are so much choice for consumer. How for example could an organisation like Wiltshire Farm Foods compete with such a well known brand as Tescos?

Tescos sell frozen meals and a lot more besides. They deliver to your door and have a much broader range of products (although admittedly not frozen meals).

What enables Wiltshire Farm Foods to compete is their value added service. These include:

  • Police checked delivery staff
  • The option to pay cash on delivery
  • The ability to place your next order with the driver
  • Delivery staff will even unpack meals and place them in your freezer

When you are trying to each an elderly audience, these kinds of extra services are a real selling point.

Of course, these USPs are no good if users are unaware of them so considerable effort has been put into clearly communicating these on the site. In fact we are in the process of doing even more work in this area.

What are your USPs and are you clearly communicating them on your site?

Image showing WFFs complete service

Is that all?

So if you follow these 8 guidelines will you increase your sales by 10,000%? The answer is probably not.

In reality there is a lot more that affects the success of an ecommerce business than its website. There is the ongoing communications, customer service, fulfilment, and marketing to name but four.

The 10,000% increase makes a good title for a blog post! However, the percentage growth is not really the point. What matters is that by following the advice here you will be guaranteed to see growth and that is what matters.

However, if I could leave you just a single thought it would be this. Wiltshire Farm Foods looks a million miles away from the busyness of Amazon and indeed many other ecommerce websites. Do not just blindly follow the crowd (or even the advice in this post). Instead learn what your users need and give it to them. It really is that simple.

Of course, you might need some help doing that, but even the answer to that is simple. Give Headscape a call ;-)

191. Ecommerce Lies

On this week’s show: Marcus explains how podcasting and blogging can support your business and Paul exposes the top ecommerce lies.

Play

Download this show.

Launch our podcast player

Housekeeping

If you are considering going to Future of Web Design New York on the 17th November then you will be pleased to hear that we have managed to get you a 15% discount.

I went last year and can honestly say it was the best conference I have ever intended (although the hype around the election might have helped!).

To claim your discount just enter the code ‘boag15′ at checkout.

Back to top

News

Does aesthetics need to be compromised for the sake of usability?

As you will know if you have followed me for any length of time, I have great respect for usability expert Gerry McGovern. We work on similar projects and share a similar view of the web.

However, this week I parted company with Mr McGovern over his most recent post “Why web links are calls to action.”

In it he wrote:

It’s hard to read what Dustin writes on this black background; gave me a bit of a headache actually. But that’s okay. I had a great overall experience of the page because its black background communicated an important emotional, aesthetic thing to me.

Seriously, it’s a bit of a pity Dustin makes it so hard to read his stuff because what he has to say is quite interesting.

Later he went on to attack designers for their dislike of underlines.

Isn’t it amazing how many designers hate underline? They think it’s ugly, that it takes away from the look of the page.

Finally he reached the crux of his argument:

Have you read any grey books recently? I mean, have you read any books that use grey text or that have black backgrounds? Or, for that matter, have you read any print newspapers or magazines that use grey text? It’s well documented that it’s harder to read on a screen than in print. So why do designers deliberately create webpages that make reading even harder? Simple, really. Many web designers are more concerned with how the page looks than how it reads and functions.

In essence Gerry seems to be arguing that aesthetics should always take second place to usability. I disagree with this. It depends on the type of site. On some sites it is important to communicate more than information. Some websites are about conveying emotion and feeling too.

As for particularly targeting black backgrounds and underlined links, this is entirely unjustified.

Black backgrounds can (if done right) actually aid usability. Contrast is the issue here, not the colour of the background. As long as there is sufficient contrast a black background can actually reduce eye strain caused by white light, aiding on screen reading.

An example of a black background website with high contrast text

As for underlined links, I again disagree. Although I think it is important to underline links I tend to use border-bottom rather than text-decoration:underline. The problem with the latter is that the line intersects descenders making words hard to read, especially for those with cognitive disabilities. Not using underlines in their traditional sense actually aids readability.

An example of descenders intersecting underlines

The idea that most designers do not care about usability is incorrect. We care passionately. However, we do not always solve these problems in the way that usability consultants would prefer. Instead we try to balance aesthetic considerations with usability. We care both for how the page looks and how it functions.

So what do you think? Do you believe that designers care more about aesthetics than usability? Post your thoughts in the comments.

Explaining user experience design

Let’s face it, we all dress our jobs up in fancy terminology to justify our existence. That is fine until those paying us no longer understand what we are talking about.

Okay, so I am exaggerating to make a point. Sometimes we use our own terminology because we need short hand to explain complex ideas. However whatever the reason, it can get in the way when communicating with clients.

That is where the latest A List Apart post comes in. Entitled ‘Can you say that in english: Explaining UX research to clients‘ it does exactly what it says on the tin.

I want to recommend you read this article for three reasons:

  • If you are a somebody who needs to deal with UX people, this post proves an excellent introduction into what services they provide and the terminology they use.
  • If you are a UX person the post provides valuable advice on how to better communicate with clients.
  • If you have just started doing UX work this article may introduce you to more techniques. For example: have you previously heard of Contextual Inquires or Diary studies?

If you are looking for a great introduction to user experience design written in plain english, this is not a bad place to start.

The importance of typography

Typography is playing an increasingly important role on the web. Browser manufacturers now almost universally support font-face and there are a number of organisations such as Typekit and Fontdeck who have overcome the legal challenges surrounding the use of type online.

Unfortunately few fully understand the power of typography. Even web designers have become so used to working with a limited number of fonts that they have forgotten how evocative a great font can be.

There are loads of great resources about type on the web. Howeve, if you are looking for a post to get you started and demonstrate the power of type, I would recommend Jennifer Farley’s post on Sitepoint.

This isn’t a post that teaches you how font-face works. It isn’t even a post that explains how to create great typography. Instead it aims to excite you about the potential and power of great typography.

If you are a designer who rarely considers typography in any depth, then I highly recommend this post. If you are a website owner or developer who doesn’t ‘get’ all the fuss surrounding web typography, then I would also recommend you check this post out.

Website maintenance tips

Our final news story for today is an eclectic post from Smashing Magazine looking at website maintenance tips and tools.

It is a useful post because most of us are better at building websites than we are at maintaining them. After all, it is much more exciting to build a new feature than it is to carry out maintenance.

The article includes:

  • Advice on keeping content clean
  • Tools and advice on repairing your site
  • Information on browser compatibility testing
  • Help creating clean HTML, CSS, and Javascript
  • Guidance on ensuring accessibility
  • A look at HTML5 and CSS3
  • How to optimise your site for speed
  • Advice on commenting code
  • An introduction to SEO enhancements
  • Information on stats and analytics
  • How to incorporate user feedback

As I said – a somewhat eclectic mix. However, it is certainly worth a read if you are responsible for maintaining a large website over time.

Back to top

Feature: The Biggest Ecommerce Lies and How to Avoid Theme

I am amazed at some of the advice I read about building successful ecommerce sites. I seriously wonder who writes this stuff! In this week’s feature I debunk 5 common myths.

Read the biggest ecommerce lies and how to avoid them

Back to top

Listeners feedback: Does blogging/podcasting win you any work?

Got the following question from Dave Smith:

Basically I’m interested in whether your Podcast and Blog generate any enquiries that result in paid work/projects for Headscape?

Recently we created FindMeByIP.com and it generated what is – for us anyway – a considerable amount of traffic for the Blog on our website. However, despite the tens-of-thousands of hits generated, we’ve only received 1 enquiry regarding new work. ONE!

What I want to know is whether you’ve devised any strategies for converting Blog/Podcast traffic into paid work projects for Headscape.

If not then how can you justify the obviously considerable amount of time and effort you put into your Podcast and Blog? What provides return on investment?

I’d look forward to any ideas/thoughts/suggestions that you might have.

The simple answer as to whether the podcast and blog generate any enquiries that result in paid work is yes. Blogging and podcasting have become the principle method that we use to market Headscape. We wouldn’t do it to the level that we do if it wasn’t a successful method of winning work.

Patience

I happened to notice recently that the first ever podcast went out in 2005 with Paul creating written articles prior to that. It took at least a couple of years before we started to notice that the majority of new prospects were discovering us through the blog and podcast.

There’s a couple of important points to note here:

  • The majority of Headscape’s work comes from existing clients and referrals. It did then and still does now. I don’t think the blogging/podcast model alone would have been able to support us in the early days when our client list was a lot shorter.
  • We’re not ‘scientific’ about ROI. In other words, we don’t get hung up about effort spent on marketing versus the amount of revenue coming in from it. It’s either working (or improving) or it’s not. If it’s not then we’ll try something else. Personally, I don’t think it’s a numbers game. For example, what if that one enquiry that Dave mentioned was from a huge client?

Perception

Even though we have always been completely ‘up front’ about the benefits that the podcast brings to Headscape, Paul didn’t start it with commerciality in mind.
Paul is a born blogger. He is a person that needs no encouragement to experiment with stuff and then share his thoughts with all and sundry. The fact that it has benefited our business is great and led the rest of us to encourage him to do more and more.

I’m not suggesting for a minute that Dave (and his colleagues’) blog is in any way forced but, and here’s the clincher, it sits on the company website. There is an instant connection between the blog and the company that may – probably sub-consciously – deter readers because they feel they are being sold at.

We used to write articles for the Headscape site and we’d send out regular email newsletters alerting subscribers to new articles. This was not successful, I believe, for the reasons highlighted above.
Boagworld started as Paul’s personal blog. And, I’m guessing, for the vast majority of readers and listeners it still is very much Paul’s site. They put up with the odd reference to Headscape but basically they’re not interested and never will be.

Influence

Though we have had a few website owners follow the show and hire us directly, the majority of the work that we win via the podcast is through listeners influencing their bosses. It took us a while to realise this.

When Boagworld started we felt it was important to focus the show (and blog) on website owners and not designers and developers. And though this focus remains important and provides a differentiator to other ‘tech’ blogs and podcasts, we now understand that both audiences are important to us.

Entertainment?

Mentioning differentiators, I think the fact that we do a podcast (not just a blog) is significant as well. It gives our audience a chance to get to know us far more than through articles alone. I have mentioned before that I think one of the biggest questions a potential client has before hiring an agency is ‘can I work with these people?’ I think the same applies for an in-house designer or developer who wants to make a recommendation to a boss. They need to feel that they can completely trust the team they are recommending and I think that’s more likely if their connection with you is via a (long running) podcast.

Our ‘style’, though it has its detractors (!), has kept people listening for nearly 200 shows. I guess what I am saying is that though of course high quality, relevant and up to date content is paramount to a successful podcast or blog, making it entertaining is also imperative. There are those that would completely disagree with my previous sentence – they don’t listen to Boagworld…

Conclusion

In conclusion, I think that the most important element to a successful blog or podcast is that it’s not being done simply as a vehicle to try and win work (or sell products etc). It has to be something you would do anyway. Of course, seeing positive results from a blog (as we have) will encourage more time being dedicated to it, but it shouldn’t be the reason to start in the first place.

Paul has talked in the past about one of the keys to blogging being consistency and regular posting. If you see blogging as a chore then chances are you won’t produce consistent or regular work.
In Dave’s case, along with considering moving the blog away from the company site, I think patience is the key as it appears they haven’t been doing it long.

Back to top

Image Credit: MarS

The biggest ecommerce lies and how to avoid them

I am amazed at some of the advice I read about building successful ecommerce sites. I seriously wonder who writes this stuff! In this post I debunk 5 common myths.

Of all the sites I am involved in at Headscape it is the ecommerce sites that excite me the most.

How can you not get excited about working on a website where the fruits of your labour are so visible and direct? Do a good job and the website makes more money, screw up and profits decline. There is something wonderfully black and white about it.

With such a measurable and obvious success criteria, you would have thought best practice would be well established and generally accepted. Bad advice would be quickly exposed for what it is and successful techniques would rise to the top.

However, it would appear that is not the case. I am amazed at how bad some of the advice is and how much bad practice exists.

In this post I want to focus on five of the worst offenders, beginning with the belief that you can never give users too much information.

1. You can never give the user too much [Wrong!]

Only recently I was reading an article about ecommerce that actively argued for providing users with as much information as possible.

On the face of it, this sounds like a good idea. The more information you provide, the better informed their decision becomes. However, in reality too much information can be overwhelming and lead to choice paralysis.

Compare for example the experience of buying a computer. For you and me this is a purchasing decision we are very comfortable with. However, for the majority of consumers it can be an intimidating experience. It is a minefield because there are too many choices and options.

Recently I bought a Dell netbook. Even as an experienced computer users this was a harrowing decision. I knew I wanted a low end, cheap netbook, so immediately ignored the plethora of laptops and desktops that could have confused my purchasing decision. However, that didn’t make the purchasing process easier. I still had to choice between the Dell Mini 9, 10 and 10v. I had to wade through technical specs outlining the differences, most of which I found unintelligible.

Screen capture from Dell Website

Once I had made my choice, I was presented with even more details and options. I had to select colour, type of hard drive, size of hard drive, operating system and on and on and on. In fact it even made me approve options where I had no alternative choice!

When compared to the limited and clearly defined line up of Apple computers, the contrast could not be more apparent.

Screen capture from the Apple website

More is not always better. If you want to encourage users to buy, then you need to make their choice a simple one. Remove everything but the most important information and minimise the number of choices available. This is something that has been understood for some time in traditional retailing, but has not filtered through to the web.

One retail technique that has transferred to the web is up-selling. However, you should thing twice about how to implement this technique.

2. Never miss an opportunity to cross-sell [Wrong!]

We all know supermarkets do it. You are queuing at the checkout surrounded by chocolate, magazines and other extras. They hope we will be tempted to pick up something on the way out. You go in for a loaf of bread and come out with a basket full of chocolates and a magazine on interior design. Any marketeer will tell you how effective this technique is.

Photograph of a supermarket checkout

Many successful websites also use this approach very effectively. Amazon is always looking for opportunities to cross-sell, based on its extensive knowledge of your buying habits and those of other users. However, even though it is obvious we will buy items on the spur of the moment, Amazon does not always up-sell.

Amazon recognises that the web is not the same as the real world. Unlike supermarkets, Amazon will not up-sell once users reach the checkout. In fact they are careful to avoid any distractions.

Screen capture of Amazon checkout

When the competition is only a click away you do not have the luxury of asking users to stand in line at the checkout, while you present them with additional products. Unlike the supermarket checkout there is no person to guide you through the process. It is user driven and so has to be as easy, focused and fast as possible.

Yes, it is important to up-sell. However, do it before the checkout process begins. Once the user makes a decision to buy, you need to ensure nothing gets in the way of that transaction. Some opportunities to cross-sell are worth missing.

Of course, there is no reason you cannot encourage users to buy again after the transaction is complete. That is where we need to look beyond the website.

3. Its all about your site [Wrong!]

Web designers want to sell you web site design services. It is therefore unsurprising that they concentrate their attention and advice on the website. However, the website is only one small part of a successful ecommerce business. The heart of successful ecommerce lies in service, not the website.

Don’t become so fixated on tweaking and improving your website that you neglect other areas of the user experience. Good customer service extends well beyond the users interactions with the website. It also includes vital components such as:

  • Email notifications - Do you keep the customer informed about the progress of their order?
  • Telephone support – Do you allow customers to speak to you directly?
  • Returns policy – How easy is it for customers to return an item if they do not like it?
  • Fulfilment – Are you in a position where you can fulfil orders quickly and dispatch them immediately?
  • Complaints handling – How well do you handle customer complaints? Do you go the extra mile?
  • Ongoing communication – Do you regularly keep in touch with customers? Do you offer them special deals and discounts? Is it easy for customers to opt out of these communications?

Customers who receive superb service are considerably more likely to make a second purchase and even more likely to recommend you to friends and family.

Screenshot from Customer Service Matters

Visit Bruce’s blog Now

It is even possible to substantially reduce your marketing spend if you make customer service a priority. Instead your reputation will spread through word of mouth.

Do not misunderstand, I still believe that getting your website right is extremely important. Small things can make a big difference in the eyes of your users. Take for example security.

4. Users care about security… badges [Wrong!]

There is no doubt that users care about online security. In fact there is still a large proportion of people who are unwilling to buy online for fear of credit card fraud. The media has done an excellent job at ensuring the public are suspicious of online transactions, even though they are willing to hand over their credit card in a restaurant.

Whether the users concerns are justified or not, we need to take them seriously if we want people to buy.

Many ecommerce businesses spend a lot of money ensuring their sites are secure. How then do they choose to communicate this massive investment to their users in order to reassure them? – They slap a badge on their website!

Adding a small Verisign or Mcafee badge to your checkout page is not enough to alleviate users fears. At best they are free advertising for the companies involved. At worst they are entirely ignored because they look like banners.

A screen capture of a website with no security information except a Verisign logo

A better approach is to tackle the problem head on. Add copy to your website addressing this issue and the steps you have taken to ensure the customers security. Do not rely on a single graphic to say all that needs to be said.

5. Amazon is the template we should all follow [Wrong!]

This final lie is probably the most widely held of all. There is a belief that because Amazon is so successful, all ecommerce websites should follow their example.

There is however a number of flaws in this argument:

  • They don’t get everything right (nobody can).
  • They are partially successful because they were one of the first ecommerce websites to market.
  • Their reputation and brand recognition allows them to get away with a lot.
  • Users are familiar with their site and its eccentricities.

In short, what works for them will not necessarily work for you. Too many website owners blindly copy Amazon because they are seen as the leader in ecommerce. Not only is that flawed for the reasons I gave above, it also removes the possibility of you ever being better than Amazon or innovating in anyway.

Amazon Homepage

Don’t get me wrong – I believe there is a lot that can be learnt from Amazon. However, I do not believe it is in anybodies interest to blindly follow their lead.

Bonus lie: Ecommerce is easy

Probably the biggest lie of all is that ecommerce is easy. Admittedly off the shelf solutions such as Shopify make it extremely easy to build ecommerce websites. However, building the site is only the beginning. The real challenge comes in:

  • focusing your site,
  • deciding on when to up-sell,
  • providing great customer service,
  • communicating clearly
  • and learning from others.

Creating a successful ecommerce business is a long term commitment and you will need to continually evolve both your website and strategy.

So, what about you? What ecommerce lies have you heard? What great advice would you like to pass on? Post in the comments below.

187. Jedi Mind Tricks

On this week’s show: Paul looks at how to better communicate and we ask whether you should mask your email address to avoid spam.

Play

Download this show.

Launch our podcast player

Housekeeping

Although we promised you ClearLeft on this week’s show we have had to postpone it until next week. However, that gives you a whole extra week to submit questions via the comments on our blog.

Back to top

News

A web designers time is precious

We are all too busy, period. However, life can be particularly intense if you work as a web designer or developer. The pace of change is so fast it can be hard to find the time to keep up.

Fortunately there are some great articles around that provide time savings tips. Take for example Sitepont’s post this week “How to take control of your time.” It provides some excellent advice including the importance of prioritising, the need to leave adequate time and learning to say no.

Smashing Magazine has a post of their own entitled “20 time saving tips to improve designers workflow.” This includes ways to customise your work environment and better work with tools like Photoshop.

Speaking of Photoshop there is a great cheatsheet that contains all of the keyboard shortcuts you need to speed up your workflow in Photoshop. When combined with the IE6 cheatsheet for solving common IE6 bugs you will find yourself saving considerable time.

The answer to overload is not to work longer hours. It is to work smarter and that is what these posts enable you to do.

15 common ecommerce mistakes

I love working on ecommerce sites. They are by far my favourite. The reason – you get to see an obvious return on your work, because they have an obvious call to action. Conversion either increases or decreases. Profits either rise or fall. You are in no doubt as to whether you have made a difference or not.

However, the other reason I love working on ecommerce sites is because so many of them are terrible. Often when you start working on an ecommerce site there are loads of quick wins that make an instant difference to revenue.

People make the same mistakes again and again. In fact these mistakes are often so predictable that you could write a top 10 list of them… and guess what… that is exactly what Smashing Magazine has done: “15 common mistakes in ecommerce design and how to avoid them“.

Some of my personal favourite mistakes include:

  • Hiding contact information
  • Long winded checkout
  • Poor customer service
  • Not highlighting related products or otherwise upselling
  • Hiding the cost of delivery

If you are designing or running an ecommerce site then you really should check this post out. You will be surprised just how many of these mistakes you make.

The benefits of inline form validation

I have said it before and I will say it again: “forms are the most important feature on most websites.” Most often a sites call to action requires the completion of a form. Get the form wrong and you frustrate users potentially driving them away.

Nobody likes filling in forms. Whether it is a contact form, site registration or just a simple login form. It is therefore vital that we make the process as painless as possible.

There is a post on a List Apart which I have only just gotten around to reading. “Inline Validation in Web Forms” does not sound like the most exciting read but it does provide some invaluable best practice for dealing with forms. However, it doesn’t just provide somebodies opinion on best practice, instead it backs those views up with valuable testing.

The post takes a typical signup form and trials different forms of inline validation with real users. They didn’t just monitor success/failure rates. They also looked at errors made, satisfaction rates and completion time. They even did some eye tracking.

Although the results are not surprising, it is nice to have some numbers to put against what we have known to be true. For example, it was obvious that inline validation makes an enormous difference to both actual success and perceived success. Just validating a form on the client side increased success rates by 22% and satisfaction by 31%. Those numbers went even higher when the user is given feedback as they completed each field.

A valuable post, worth reading.

Innocent smoothies: A case study into corporate communication

When you speak at as many conferences as I do, you often find yourself referring to the same examples of good or bad practice. Whether it is comparing Google and Yahoo or fawning over Apple’s great UX design, the same names keep coming up.

One of the names I often reference is Innocent Smoothies. I love them. They just ‘get the web’. Actually, that is a lie. They get people. They know how to communicate and they know themselves. They have a distinctive voice that makes people warm to them and that is carried through to their website.

This week Anna Debenham has written an excellent case study on Innocent Smoothies looking in detail at what makes them successful online. In particular she looks at their blog and mailing list.

As Anna says at the start of her post:

A lot of the clients I work with who have just set up a web presence for their company think it’s a good idea to start a mailing list and a blog. Everyone else is doing it, so why shouldn’t they? The problem is, so few companies get it right and very few people will bother to read them.

So what makes Innocent different? Anna gives 6 reasons:

  • They show you the real people behind the business
  • They make their copy fun
  • They don’t just talk about their products
  • They are generous
  • They provide useful information
  • They make good use of imagery

Anna’s post is packed full of examples, so be sure to check it out. There is a lot most corporate bloggers could learn from Innocent.

Back to top

Feature: How to persuade your users, boss or client

Whether you are trying to get signoff for a site’s design or persuade a user to complete a call to action. We all need to know how to be convincing. This week, we look at how to present our message

Read Jedi Mind Tricks: How To Persuade Your Users, Boss, Or Clients

Back to top

Listeners feedback:

Email masking

One of the more popular suggestions for topics was how to mask your email address so it doesn’t get harvested by spammers.

This is something that everybody worries about from designers to website owners. However, unfortunately there is no good solution. In my opinion you need to just put your email out there and deal with the spam.

Sure there are a number of possible solutions but none of them are acceptable. They either require the user to be running Javascript (which creates accessibility problems) or they place extra burden on the user. Giving users the ability to contact you is a fundamental part of almost all websites and, so you do not want to make it hard.

There are however two ways of minimising the impact.

First, you could choose not to publish your email address, but instead offer a contact form. Although spammers can spam these too, it is harder and there are ways of minimising spam without putting an added burden on users. However if you do use a contact form, send a copy to the user so they have a record.

Second, you can fall back on good spam filters. Use a site specific email address and make sure it is guarded by a good quality filter. I personally find Google Mails spam filter particularly good, so you might want to consider routing enquiries via that.

However, at the end of the day if a spammer is determined to spam you there is very little you can do to stop them. Unfortunately, this the price of being online.

Back to top

178. Bad Blogging

On this week’s show: We look at the harsh truths of corporate blogging, ask how luxury products can be sold online and discuss whether it is the role of a web designer to challenge a client’s business model.

Play

Download this show.

Launch our podcast player

News

The Do’s and Don’ts of Dark Design

“Users will spend considerably less time viewing a website with a dark background than one with a light background” – When you hear statements like that you may dismiss the idea of using a dark design. However in reality, I believe there are a place for dark designs. Dark designs can look elegant and extremely striking. And although not always appropriate, there are times when they are the right solution for a site.

Screen shot from Trozo Gallery

The question therefore arises – how do you get a dark design right? How do you avoid dwell time plummeting? The answer lies in a post from Web Designer Depot entitled “The Do’s and Don’ts of Dark Design.”

The post identifies several techniques for ensuring that a dark site is both readable and appealing. These include:

  • Including more white space (or should I say dark space)
  • Ensuring text has ample kerning and leading
  • Getting the text contrast right
  • Choosing the right fonts
  • Using minimal colour schemes

The post also asks when a dark design is appropriate. The conclusion – if you require your site to appear elegant or creative. The author then goes on to show some stunning examples of both.

If you are considering using a dark design or do so already, this article is definitely worth a read.

The Content Conundrum

Sometimes I feel like a stuck record. On last week’s show I talked about Art Direction (again!) and I have also written about the importance of copy-writing many times before. This week I want to highlight a post from Boxes and Arrows entitled “The Content Conundrum.”

In some ways this article feels like a rehash of many previous posts and repeats the same old mantra:

  • Include copy editors from the beginning of a projects life cycle.
  • Do not use dummy Latin text.
  • Work closely with content providers.
  • Start treating content as important.
However, there are a couple of ways this post really stands out from the crowd.
The first is that it shows a brilliant example of where things can go wrong. It compares a signed off design comp with what was actually built. The difference is striking and one that will resonate with any designer. The amount of copy has doubled and the usability breaks down as a result.
A comparison between an approved page design and the final page live on the website
However, the most striking thing about this post is that instead of simply moaning about the state of art direction, it actually proposes some solutions that can be practically implimented by any designer. These include:
  • Look for ways to remove unnecessary content.
  • Endeavour to use information graphics and visualisations instead of copy.
  • Write some content yourself even if it isn’t perfect.
  • Seek ways to collaborate with content providers.
  • Use real content (even if it is not the final content) in visual mock-ups.

This article recognises that we are facing big challenges but instead of offering big solutions that cannot be practically implemented it suggests little changes that all designers can make to improve things.

So You’re Thinking About Becoming a Designer

I know a lot of those listening to this show aspire to be designers. If that is you check out “So you’re thinking about becoming a designer” that catalogues the responses of a number of designers, when asked to complete the following statement:

So you’re thinking about becoming a designer? If I could tell you only one thing about going into the field, my advice would be…

The answers really resonated with me and I would wholeheartedly agree with everything said in this post. They basically fall into three categories…

  • Focus on empathy and understanding problems
  • Embrace the unfamiliar to innovate
  • Be passionate

Each category is accompanied by some choice quotes and a short video from the person being quoted. My favourite quote is by Jennifer Bove who says:

Being empathetic helps designers create things that move people.

I think empathising with users is by far the most important skill any designer should have. Without it they may create something very pretty but it will serve no meaningful purpose.

Adobe AIR Apps for Designers

Our final news item in this very designer centric section is “18 Adobe AIR Apps for Designers.” As the name suggests this Sitepoint post lists 18 AIR applications that maybe useful when designing a site.

Unsurprisingly the list is dominated by tools to help with colour selection. From Kuler to ColourLovers it would appear every colour site has to have an AIR app.

Screen capture of Adobe Kuler

However, that is not the end of the list. There are also lots of other tools including:

  • Measuring tools that allow you to measure on screen elements
  • Flex tools
  • Vector editing programs
  • Image resizers
  • Image editors
  • Font tools
  • Icon generators
  • Screen capture tools

Its a great list and it is amazing to see what can be done with Adobe AIR.

Back to top

Feature: 10 Harsh Truths of Corporate Blogging

Every company in western civilization seems to have a blog these days. But are they worth it, and why are so many terrible?

Read the 10 Harsh Truths of Corporate Blogging

Back to top

Listeners feedback:

Business model advice

Ashley Hart writes:

As a web designer you come across a lot of start up companies, sometimes you can see that by altering their concept slightly they might be more successful. Is it your place to do so? would it help? or just annoy them?

Yes! Absolutely! We should be offering advice about business strategy. Clients are paying us for our knowledge of the web, not just our skills in Photoshop. That means we need to tell them if we think their business plan needs tweaking to work online.

It is also a great way of differentiating yourself during the pitch process. Clients tend to warm towards suppliers who are full of ideas and willing to work with them rather than just providing exactly what they ask for. In fact at Headscape we like to refer to ourselves as partners rather than suppliers. This gives extra value to our clients.

However, it is important to draw a line. Definitely offer advice, but ultimately it is down to the client to decide whether to accept that advice or not. Always remember that as the web designer you might not know all the fact. There can often be good reasons why a client chooses to ignore your advice and do things differently. And even if there isn’t its their business at the end of the day.

Does ecommerce work for luxury goods

Bruno writes:

Luxury brands reluctantly build online shops and are quite shy about investing in eCommerce since there don’t see any ROI. What more should they do to make real income from the internet?

The answer to this question very much depends on the product. For example, I maybe reluctant to buy a new bed online because I wouldn’t have been able to try it. However, I would happily buy a new macbook.

But it isn’t just about the product. Its also about the purchaser. Although I would happily buy a macbook online I know that my dad (who is about to buy his first) would not.

I think ultimately it is about risk. There is a higher risk buying a luxury product online because it comes with a higher price tag. There is more to lose if things go wrong. Equally, if you are missing key information about the product (like the comfort of a bed or the differences between a mac and a PC) then the risk is also higher.

Therefore selling luxury goods online is about two things – removing real risk and reassuring users who perceive false risk.

Removing real risk is relatively easy. Money back guarentees and detailed information will often do the trick. Making returns easy also makes a huge difference.

Reassuring users who perceive a false risk is trickier. Ultimately that is where the human touch comes in. Often with luxury goods it is neccessary to backup the online transaction process with human customer service. A 24 hour telephone help line is important as is email support and even live chat. Basically people need to be able to speak to a real human being to reassure themselves and get answers to their questions.

So, selling luxury goods online is not impossible. You just need to work that little bit harder.

Back to top

161. In or Out

On this week’s show: Paul announces Micro-Boagworld, we discuss the pros and cons of outsourcing web work and see what recommendation the Boagworld forum has to offer.

Play

Download this show.

Launch our podcast player

Housekeeping

For a while I have been toying with the idea of doing a Micro-podcast that works in a similar way to Twitter but with audio. It would provide the opportunity to share hits, tricks and reviews too short for the main show. My problem was that I needed an application which made this as easy as posting a tweet. Anything more and it would prove too demanding.

Fortunately a new iPhone application has launched that does exactly that. Called AudioBoo it allows you to record 3 minute audio snippets that then get posted to a website, twitter, facebook and a podcast feed.

I am therefore pleased to announce Micro-Boagworld…

View Micro-Boagworld posts here

Subscribe to the RSS feed here

Boagworld AudioBoo Homepage

Back to top

News

Pricing and projects

Alyssa Gregory has written two good posts this week both relating to the pricing of web projects.

The first post tackles the notoriously difficult subject of How To Estimate Time For A Project. After all, time is money.

Estimating how long a project will take is tricky and although this post doesn’t provide any magic formulas it does provide good solid advice.

As well as considering the obvious deliverables Alyssa also recommends time for project management, reviewing work, debugging and client turn around. Finally, she recommends adding a buffer for the unexpected.

Of course, she doesn’t discuss how all of this time translates into your final price. How much you charge is a matter of conjecture. However, in a second post she does explore a related subject – How To Raise Your Rates.

In this post, she handles the sensitive subject of how to tell a client that you will be raising your rates for future projects. She suggests five techniques you should employ…

  • Give Notice
  • Set a schedule (make increases annual for example)
  • Make it fair (keep the increments small and manageable by the client)
  • Send it in writing
  • Balance it out (Balance your increase with an incentive – e.g. a special, a one-time discount)

Its all good advice and important too. As your skills and experience increase, you will need to ensure your rates reflect that. Knowing how to hand those rate increases is vital if you want to keep your clients happy.

IE8 and IE6

Microsoft have announced that IE8 will be released via the Windows Automatic Update starting on the third week of April.

The final version of the browser has been available since March and yet adoption has been sluggish. Hopefully Automatic update will change this trend significantly. However, it does not guarantee universal adoption. Although the update will be marked as important users will not be forced to upgrade. In fact Microsoft has released a blocker toolkit so corporate users can avoid the update entirely.

Worst of all, it is likely that the update will impact the numbers using IE7 more than IE6. IE6 users tend to be hold outs and are unlikely to upgrade now when they did not upgrade to IE7.

The only hope is that many IT departments have a policy of running a version behind the current release. If that is the case, the arrival of IE8 may encourage some of them to adopt IE7.

The entire web design community is keen to reduce its level of support for IE6 and hopefully this update will allow that. In fact, another post this week entitled – 10 Cool Things We’ll Be Able To Do Once IE6 Is Dead – points out just what a wonderful world it would be.

Once IE6 is gone we will be able to…

  • Use child selectors
  • Make full use of 24-bit PNGs
  • Use attribute selectors
  • Use a wider range of display properties
  • Use min-width and max-width
  • Throw away 90% of CSS hacks (and 90% of the reasons for needing them!)
  • Add abbreviations that everyone can see
  • Trust z-index again
  • Save time and money
  • Enjoy ourselves again!

Simple and impressive design techniques

Last week I was doing a consultancy clinic with a developer who wanted advice on designing his website. He was a great coder but did not have much experience designing.

Although I recommended The Principles of Beautiful Web Design by Jason Beaird it would have been great to point him at the latest Smashing Magazine post – 10 Simple and Impressive Design Techniques.

This post has some easy to implement techniques that are ideal for developers trying to improve their design skills. Techniques include…

  • Adding Contrast
  • Using Gradients
  • A Better Use of Colour
  • Improved Letter Spacing
  • Changing Case
  • Use of Anti-Aliasing
  • Adding Imperfections
  • Implementing blurring
  • Careful Alignment
  • Trimming the Fat

Read the whole articles for more details and great examples of these techniques in action.

Influencing user behaviour

A big part of good design is guiding the user to complete the actions you want. Influencing user behaviour can be achieved through a variety of techniques. However, it can often be hard to know where to begin.

One resource that might help you influence user behaviour is The Design with Intent Toolkit. This is essentially a printable ‘cheat sheet’ that suggests a variety of techniques you can apply to your projects.

The techniques do not just apply to web design but all aspects of design. Consequently not all of the techniques will apply. However a lot do, ranging from the use of metaphors to setting up good default options.

Some of the techniques contained in this cheat sheet are also beautifully demonstrated in another post I wanted to mention. Entitled 12 Excellent Examples of "Lazy Registration" it addresses the problem of user signup.

Essentially it is a post that showcases methods for getting around the problem of user registration. As the post itself says…

Signup forms have long irked the casual visitor. During the process of discovery, nobody wants to stop and fill out details before they can "unlock" the rest of the site’s potential.

It has certainly been my experience that signup forms are a barrier and so it is interesting to see how different web applications have overcome the problem.

Back to top

Feature: When to outsource web work

Your in charge of your organisations website. It has become moderately successful and now you have a decision. Do you hire a full time web designer or outsource to a web design agency?

Read the full article

Back to top

Listeners feedback:

In this week’s listener feedback section we look at a series of recommendations from the Boagworld forum…

A good introduction to Javascript

Jake writes: I’m curious as to whether or not anyone on the forum has strong opinions on a good introductory javascript book? And by introductory I mean something that’s more about initial learning steps such as syntax, etc. and then talks about best practices.

Doug answers: You might want to look at one of the books out for coding in jQuery, if you’re planning on going in that direction anyway. As for how to learn javascript I usually push people towards Lynda.com.

Matt also replies: Awesome book – DOM Scripting – I’d start with this before jQuery as I think you need some javascript knowledge to use jQuery to its fullest.

A good but free survey tool

Simon asks: I want to create some simple(ish) survey’s to get clients to fill out after a training session. I know of some paid for solutions, but does anyone have any suggestions for any free tools?

Laura replies: For something short, I’d use the survey function on PollDaddy. You can get up to 100 responses, and I think ten questions. Ten isn’t many, but you can do conditional branching for free, which is rare, and good.

I’ve also used SurveyMonkey before, it’s clean and simple.

A review of Clicktales

Peter shares his experiences of Clicktales…

On the recommendation of Paul, I tired out ClickTales.com; and I have to say the results have been interesting (sad, in my personal case) to say the least.

For those of you not in "the know", or missed episode 141, ClickTales is an app that lets you record and review the actions of your website’s visitors. And I’d agree with Paul: inexpensive, revealing, but limited in essence because you can witness what a user goes through.

In my case it was most effective because my results have been telling me that I should redesign my website’s structure completely… so I decided I should start from scratch all together and redesign. :)

Web Design for ROI

Bill reviews Web Design for ROI by Lance Loveday & Sandra Niehaus…

Each year I find one or two books that really stand out. This book, Web Design for ROI, changed the way I look at current eCommerce projects and helped me identify better strategies for building web sites.

Rich adds: I agree this is an excellent book.

Not too much new for a seasoned pro like myself, but I did still learn a fair bit and I’d recommend it to anyone with an interest in websites that make money.

Pro Paypal e-commerce

Finally, Ian shares an extensive review of the book ‘Pro Paypal e-commerce‘. Ian writes a very thorough review but here are a couple of highlights.

I thought this was a great read. It’s not often you finish a book and feel confident you have all the information you’re going to need to complete your project. The book isn’t just technical but also has lots of useful nuggets on business practices and background on payment systems in general for those that are unfamiliar with them at this level.

I feel confident in recommending this book to anyone who is involved with developing E-commerce systems or is going to be in the future. The author Damon Williams has a very readable style that is mercifully faux-humour free but never dull and explains everything clearly and concisely and despite its relatively low page count at 260 pages or so, still manages to cover a lot of ground without ever feeling as if it’s being too terse.

For more reviews about everything from web design books to software visit the Boagworld forum. We are also going to do some cool new stuff on the forum over the coming weeks. Keep an eye on it. We have already added a Jobs category for those of you who are looking to hire a web designer, so be sure to check that out.

Back to top

 

150. User Manipulation

On this week’s show: Liz Danzico talks about user research. Paul explains how to create an effective call to action and we discover how one button cost $300 million in sales

Download this show.

Launch our podcast player

News and events

The $300 Million Button

Our first news story is an incredibly tale from usability expert Jared Spool, which really shows the power of usability testing.

In the post he writes about a client who had a fairly standard checkout process on his website. The process began with a login form:

The form was simple. The fields were Email Address and Password. The buttons were Login and Register. The link was Forgot Password.

It is the kind of form I have seen on many ecommerce websites. This feature, which had been designed to help repeat customers, created two distinct problems:

  • New users resented the idea of having to register. One user said: "I’m not here to enter into a relationship. I just want to buy something."
  • Repeat users rarely remembered their username or password. They wasted substantial time guessing, before eventually resorted to creating a new account. In fact after examining the database Jared discovered that 45% of all customers had multiple registrations. Some did go as far as clicking on the forgotten password link but of those only 25% went on to place an order.

In the end the site was redesigned, allowing the user to continue without registering. Within a year this created a $300 million increase in sales.

Of course $300 million is a meaningless figure in itself. It is the percentage increase that matters. In this case is was a 45% increase. That is a staggering number and one that really drives home the importance of testing with real users.

Read the ‘$300 million button’

The UK government and graded browser support

A couple of weeks ago I wrote about the importance of graded browser support. In my post I explained how we should not limit our support to the browsers we test and how it is unrealistic to push for identical support across all browsers.

This is an approach which has been adopted by the likes of Yahoo! and the BBC for some time, but which now also extends to public sector website in the UK.

According to The Web Standards Project the rules surrounding browser testing on public sector websites have been changed to better reflect best practice in graded browser support.

Changes include an emphasise on functionality over identical layout across browsers (paragraph 39):

You should check that the content, functionality and display all work as intended. There may be minor differences in the way that the website is displayed. The intent is not that it should be pixel perfect across browsers, but that a user of a particular browser does not notice anything appears wrong.

As well as support for progressive enhancement (paragraphs 17-18):

You should follow a progressive enhancement approach to developing websites to ensure that content is accessible to the widest possible number of browsers.

This is excellent news and certainly provides a great reference for UK designers and website owners looking to convince others of the importance of graded browser support.

BBC Graded Browser Support Table

Read the UK government guidance on browser testing

50 Illustrator tutorials

List of Illustrator tutorials

From development to design now, and a list of 50 tutorials that help you get your head around Adobe Illustrator.

The list is compiled by UK web designer Chris Spooner. He echoes my own experiences when he writes:

Adobe Illustrator can be a little tricky to get your head around, particularly after getting used to the workflow as applications such as Photoshop. The difference between layer use and creating and editing shapes can be especially strange at first hand.

I am a Photoshop man and I have found it very difficult to make the transition to a vector based world, so this list was particularly appealing to me.

Its a great list that you will definitely want to check out, if like me you have never got to grips with Illustrator before.

Read 50 illustrator tutorials every designer should see

A new approach to PNG Support

Finally today I would like to draw your attention to a new technique that has been developed by Drew Diller for using PNG transparency in IE6.

Unlike previous techniques this one allows you to use PNGs as background images instead of just as IMG tags. This opens up a world of possibilities and overcomes one of the most annoying limitations of IE6.

This minor miracle is achieved not by using AlphaImageLoader as has been done in the past, but with VML.

Implementation seems fairly straightforward and involves adding a Javascript library to your page. Because this is for IE6 only you can embed the code within a conditional comment. This means other browsers will not even download it.

Although I have yet to use this approach myself, I have high hopes that this will finally solve the IE6/PNG barrier.

Download DD_belatedPNG now.

Back to top

Interview: Liz Danzico on User Research

Paul: So joining me today for our little interview is Liz Danzico. Liz, why don’t you start off by introducing yourself a little bit. Telling us a bit about yourself and your background.

Liz: Sure. Um, I am a user experience consultant, I am here in New York City, I have been developing web sites and user experiences online for about 12 years now. Um, I do a lot of work with Happy Cog Studios here in New York, with Jeffrey Zeldman and Jason Santa Maria. Um, I’m also chair of the new MFA interactions design program.

Paul: Okay.

Liz: At the School of Visual Arts in New York.

Paul: Excellent. I mean, so, to say that you’re an expert in user experience would be a slight understatement then, Liz.

Liz: Well I wouldn’t go that far.

Paul: You’d be too modest, obviously, to say that. Okay, so we got Liz on the show, I met Liz when I went to Future of Web Design and we got talking. Um, she’s got some fascinating insights into the whole area of user research, and usability generally, so I thought let’s get her on the show and let’s maybe, you know, try and cover things from, from the very basic level, a kind of introduction to this concept of user research. Um, so, perhaps a good place to start, if you’re okay Liz, um, would be, how would you go about defining the area of user research? What would you include, what would you exclude from that?

Liz: Right. So … user research, even today, we’ve been doing user research on the web since, uh, the very beginning, so it’s a very old concept but it’s still fairly controversial. So the basic concept is it tells you what really happens when real people interact with your product or service. So, there are no real rules about what it includes and what it doesn’t [inaudible]. You can basically speculate about what your users want, or you can find that out, um, you know? And uh, and the, uh, the latter is probably a more useful approach for you to take than speculation. But with either one, thinking about your audience is useful no matter what. And so, so there are no real rules, now um, when you disconnect thinking about your audience from your business objectives, and you start getting, you know, very excited about behaviors that they’re doing that are sort of disconnected from the real mission that you’re trying to sort of accomplish, then it becomes, um, a bit murky, and confusing. But thinking about your audience is, just in general, is an extremely useful approach.

Paul: Okay. I mean one of the things that, that, um, I’ve heard said before by, particularly cynical clients I have to say, but I’ve heard it said before, you know, ultimately user research, and all of this kind of stuff feels in some ways like, um, just another way for web designers to suck a bit of extra money out of us, you know that fundamentally how, I know my audience already, is the kind of attitude that many web site owners have, so why do you see it as an important part of the process?

Liz: Well uh, you know, as we’ve been seeing design flaws often translate to lost business opportunities, you know, usability is becoming more important than ever as the number of web sites and products is, you know, increasing more and more every day. So, we design these products and services, and we are at the same time users of them, but there’s no way that we can really tell what are users, um, might want. And the best way to, you know, usability research doesn’t cost a lot of money, so, the best way that you can help your clients kind of understand that you need to do usability research in some way is to let them know that usability research is important and it doesn’t need to, um, suck up a lot of time or money in the, in the process. So there’s a great fantastic book by Steve Krug, called Don’t Make Me Think, which I’m sure you’re probably well aware of.

Paul: Uh huh.

Liz: And in one of the chapters towards the end, he has a chapter called "Usability Research on a Shoestring", or it’s probably better titled, which talks of this approach of going out into the hallway and kind of grabbing people, and just sitting them down, and putting them in front of your product or service, and getting some feedback. So getting some feedback from people, no matter who they are, is better than getting none at all. And so, I think starting there with clients, instead of the, you know, $100,000 user research project that’s going to take you across 8 markets, you know, in the United States, the UK, and Asia, then, is going to be a much better approach than kind of intimidating them with the very extensive projects.

Paul: Mmm, I mean, when it, the kind of one scenario that I’ve come across before, um, is where we’ve come across with clients that say "Well we’ve already done user research, we already know our audience ’cause we’ve got somebody in to do this or that." Is there a difference between user research that’s been done primarily with an offline audience, and those with, you know, when you’re interacting with people online? Is there a difference in the kind of results and information that you’re after, and even the techniques, maybe, that you use?

Liz: So, they are probably, when they say that they’ve done user research, they’re probably talking about focus groups. I would venture to guess that when they talk about that they’re probably talking about either focus groups or surveys of some kind and those are not, well, I wouldn’t say that they are, those are bad things to do, but those are not the kinds of user research techniques that are going to give them feedback about their product’s usability. Those kinds of techniques are going to give them good information about, um, certain kinds of things but they are not going to give them information about whether or not people can use the product or service that they’re looking at. So, you want to find out exactly what kinds of user research they’ve conducted. If they say the words "focus group" then you know you want to move them towards something that is a one on one kind of interview. Focus groups tend to be conducted with groups of people, as the name might suggest, um, and when groups of people get together to talk about, you know, they put forth a question for these people, and when they, you know, groups of people get together to talk about the question they might influence one another in their answers, they’re typically aren’t talking about an interface, they’re typically talking about ideas, so you’re not getting good feedback, like in a one on one kind of scenario. So you want to sort of guide them to a more individual, one on one kind of experience. Surveys, on the other hand, are good, but they don’t get that kind of personal experience with a moderator, sitting with an individual, kind of looking at an interface in a kind of task-based scenario.

Paul: Okay, yeah that makes a lot of sense. I mean, let’s then talk about some of the techniques that can be used to better understand individuals, or how those individuals will interact with your product. What different kind of techniques do you use? I mean, there’s the kind of very basic usability session, but do you do, or are there other things above and beyond that, that you do?

Liz: Right. Well, the sort of big secret is that, there are names and there are certainly techniques, but the big secret is there are really no sort of techniques beyond knowing who your users are, kind of documenting what you’re seeing, and then kind of analyzing/prioritizing the results of what you see. So, you can, I’m gonna tell you a number of techniques that we can go through, but if those basic sort of constructs are there, then you’ve done sort of good user research. Now, that being said, the techniques that you can do are usability testing, usability testing traditionally has taken place in a user lab where a moderator is sitting with an individual looking at a screen, or a product, or a sketch of an interface and going through questions in sort of a task-based way, asking people "Show me how you would search for x" or "Show me how you would check out," or, you know, and seeing, measuring the success or failure of that kind of task. The clients are typically sitting behind a one-way, a one-way glass, or mirror, and observing these kinds of things. People have been not so thrilled about this technique recently, saying that it kind of, um, is not, it doesn’t produce natural reactions from users, but that is one kind of technique. There is, uh, kind of creating personas, and using personas, user personas which are an archetype of your site or product’s users, and getting everyone involved in activities around those personas, whether that be using those personas as your talking through features around, you know, a brainstorming session, and getting people to sort of role-play those personas. That’s another user research method. There are, there’s sort of the ethnography kind of take, where a lot of people have been doing kind of in-home interviews and observations recently. Ethnography, cultural anthropologists and people who have been doing traditional ethnography have been watching closely the design research that we’ve been doing recently, and wondering if we’ve been doing it right and so on, but ethnography, in that sort of observing users in their "natural environment", has been I would say a more successful way recently of watching people use products and services, um, so I would say that those three things, usability testing in a lab, sort of using personas and scenarios, and ethnography or kind of going out into the field and watching users, whether they’re in their homes or their offices, are the three kind of key ways to gather user research with users. The fourth way that I’ll mention, and we can talk about this in a little bit, is not with users directly, but it is certainly user research that’s available more and more now, and that is data on sort of analytics, which you can gather from Google Analytics, Shaun Inman’s Mint, these kinds of things. Watching site data and user behavior through site analytics is another form of user research that gives you, you know, some information, and you can watch these traffic patterns on your site. It doesn’t answer the question "Why?" but it does show you some evidence as to how users are behaving on your site.

Paul: It’s quite interesting that you bring up eth, ethnography, whoa I can’t even speak today, because, that’s of interest to me, because that’s an area that we’re beginning to explore a little bit more, and have kind of discovered the same thing, that there’s a real value of going into you know, somebody’s home, seeing the environment that they access the internet on, you know, do they have kids under their feet? You know, where they access their PC, can they sit comfortably at it? All those kinds of things. Um, I guess it’s also an advantage you don’t have to hire an expensive usability lab and all of the rest of it. But I have to confess, I’m a little bit new at it, so talk me through maybe some of the things, you know, how does it differ from a usability test that you would do in a usability lab, other than that you’re in a different environment?

Liz: Well, uh, it depends. It doesn’t have to differ at all — it depends on the goals of the test. I would say that you could construct a test that’s exactly like one that you’d conduct in a lab, it just happens in someone’s home or office, or in a different environment. But as you said, you get the more realistic interruptions, and that kind of thing, and are they going to be able to complete this task given the natural kind of occurrences of their day. And that, depending on what kind of test you are constructing, that’s either going to inform your results or not. If you are doing task-based testing, so I could maybe talk about the different kind of usability testing that you could do.

Paul: Yeah, that’s good.

Liz: Yeah so there are different ways that you could conduct a usability test. Um, traditionally there is task-based testing, where you set up pre-written questions, before you get to the test, that are based on the goals of the testing. So, if we were testing a photo site, we would test whether or not users could upload photos, could they task photos, you know, those kinds of things. So we would write those kinds of questions up beforehand, and then ask those questions during the test. Um, that’s one kind of test. You could do that in a lab, and you can do that same test in someone’s home. In a lab there would not be the children screaming, and the phone ringing, and that kind of thing, or, if someone say were uploading a photo, you would never be able to tell if sort of, timing out, would be an issue, or if anything with time or space or motion would be an issue. If those kinds of things are a goal of your test, then you might want to think about doing it in real time, in someone’s home environment. Another type of testing is something that, I’ll say it was first coined by Mark Hurst, who is a user experience consultant at Good Experience, I think he coined it, it’s called "Listening Labs". Listening labs are, I’ll call them experimental, but they’ve probably been going on long before I was aware of them, where people are designing usability tests in real time. So in other words, you go into the test with absolutely nothing written down, and you sit down with users, and based on your initial interview with them, you hear who they are, and after understanding a little bit about how they use photos in general, say, then you kind of write the questions on the fly, and then sort of develop a test around who that person is and their behavior, with your product, or product type.

Paul: Which I guess, makes people more engaged with the test, because it’s about what they specifically interested in. Is that the idea?

Liz: Exactly. So it’s a more natural way of doing the test. That’s the idea. That kind of thing you could do either way, and probably is even more rewarding if you’re doing it in someone’s natural environment. And then the third type of test is sort of a web, a web wide kind of test, where you have people just surf the internet, as it were, and uh, and just have them think out loud, and that kind of thing is also, I’ve found, more rewarding and fruitful in someone’s home environment, because they have their bookmarks there, and they have their post-it notes. Whereas you put them in a sort of artificial setting and they don’t have those things around them. So, if you, it kind of just depends on the type of testing that you’re doing. If you’re doing just the first kind I talked about, just task analysis and having people go through that kind of task-based testing, doing it in a traditional usability lab is great, you know, I mean you really do get the answers that you’re looking for, and it just depends on your goals.

Paul: I mean, it’s interesting, going back to Steve Krug’s book that you mentioned, I mean he talks about, I guess his agenda in that book is to get people to do testing who perhaps aren’t previously, and so, you know, he really downplays the demographic of who it is that you test, and that it’s more important that you test than that you get the right people, you know and all of that kind of thing. Um, but when you’re going into somebody’s home, and interacting with them, I’m guessing it’s more important to get the right demographic? Is that right?

Liz: Yeah, I mean one of the, um, I think it’s always important to, it’s always important to get the right demographic. Um, but, well I would say that there is a hierarchy of common mistakes around usability testing that kind of has a trickle down effect. You know, the number one mistake is not conducting any research at all, um, and conducting research on the wrong audience is kind of further down the list. So, you know, yeah if you’re doing research on the wrong audience, it’s not going to affect, whether you do it in a lab or you’re doing it at your desk, or at the water cooler, or at home, it’s going to affect your results and your analysis, you know, no matter where it takes place. So, you know, I think that the drawback is you are going to waste more time going out to that person’s time going out to that person’s time, so it’s going to be a drawback for you, but I don’t think that, it doesn’t matter really where it happens, because if you’re testing on the wrong audience, you’re testing on the wrong audience. Um, you’re probably going to get more information out of that experience if you’re in someone’s home, than if you’re not, so if you’re going to test on the wrong audience, do it in someone’s home, because you’re going to, it’s a richer experience, you’re going to get more information out of it than if you’re just testing in a lab.

Paul: No that makes perfect sense, I kind of see that. No, it’s difficult, isn’t it? Because, uh, obviously finding the right demographic of people, and picking the right people to test on is tricky, you know, it’s a more difficult thing and it can be time consuming. So have you got any advice about that? What really matters here? You know, for example, if you’re designing a web site for an over-60s audience, you know, are you, do you want to concentrate on the age aspect of that? Or the technical literacy aspect of that? You know, is it okay to have somebody younger if they’re not as good with the internet, if your audience is, do you, I’m kind of not wording this very well, but you get the idea — what’s important when you’re trying to match demographics?

Liz: Um, well, it’s very specific to your clients. Developing a, so, whenever you are trying to match demographics, you want to work with your clients to develop what’s called a screener, and a screener is a, I would say, whether you’re trying to develop a pretty rigorous recruiting demographic with a professional recruiter, to say, recruit 300 people for an extensive study, or whether you’re going to go out into the hallway and grab some people, or whether you’re going to recruit from something called Craigslist, which a lot of people are familiar with, um, which a lot of people do, I would say developing a screener which kind of outlines your demographic is a really good idea.

Paul: And what kind of things would that include? Sorry I interrupted you.

Liz: Yeah, what a screener is, it kind of goes through, it’s a questionnaire that outlines a number of questions that you would ask a potential recruit, that says, if this person can answer a particular question we should keep them in or out, so it’s actually a really good exercise to go through that allows you to kind of think through the type of demographic that you would have. So that doesn’t answer your question in any way.

Paul: It’s very interesting, though. Can you give me an example? Sorry, I’m interested in this screener thing, cause I haven’t come across it before. Can you give me an example of the type of questions? I mean obviously they’re going to be specific to the individual client, all the rest of it, but what kind of questions?

Liz: Um, what kind of questions? So, let’s see, would this person, so, let’s see, has this person, I mean typical questions could be around financial demographics, age demographics, you know the sort of typical things. But let me think of some more interesting things. So, is this person a full-time student? Has this person been fired from a job in the last 6 months? Has this person participated in usability research in the last 6 months? Those types of things, so if the person answers yes or no, then they’re not a good candidate. But there are other kinds of things you could put into that screener that would be more specific to the project.

Paul: So could it include something like is this person aware of a certain brand, because you want to associate with that brand?

Liz: Absolutely, so does this person drink Coca-Cola on a regular basis, yes or no? That kind of thing. But I’ve found that the screener, because the clients that you work with are often kind of speaking in those terms about their audience, the screener is a really good way to kind of help them understand how you’re recruiting audiences, and a good tool to kind of work together with them to narrow down who you want to be in the target audience for your testing, or your research in general. So, that said, how do you develop a good kind of set of participants for a research study for, say, a product for people over 60? Um, what’s most important, you know it depends on, and I know I hate to say that it depends, but you’re going to develop a goal for the testing, right? And the goal might be about usability, the goal might be about navigation, it might be about design, it might be about, it’s going to have, you have to first identify the goal, and depending on what that goal is, then you can identify the audience. So, the audience, you know the goal might have nothing to do with age, although the product has to do with age. So you can kind of strip away, you can pull apart the product from the goal of the testing a bit, and sort of just focus on the goal of the test. That’s why developing goals for user research is so critical, um, because often times you can separate those and therefore develop a better set of participants for that user research.

Paul: Mmm, that’s really good. I think what we’ve done here, is, a lot of people that listen to this show probably have a basic understanding of user testing. Maybe they’ve done some basic user testing before, or maybe they’ve even written a persona before, but I think what we’ve done, or what you’ve done, is push people a little bit further to kind of consider it in a little bit more detail what they’re doing in order to kind of refine the results that they’re getting back, and that’s really, really great. I mean, if somebody has just kind of done the very basics, you know, they’ve grabbed some people, they’ve done some user testing, maybe in their own office in front of their own PC, and they’ve got a few people in, um maybe they’ve created a couple of personas, what’s the next step for them? What should they be pushing? Is it through this screener? Is that the number one thing they should be doing? Is the goals more important? Is getting a better demographic more important? What’s the kind of next step for them?

Liz: Mmm, that’s a good question. I think that one of the most, well, doing the research is really key. Analyzing the research and connecting the research to the next iteration of a design is also key. We haven’t talked about that at all.

Paul: No, we haven’t, we ought to.

Liz: It’s often a grey area, um, you know there are lots of reports that are produced, you know, diagrams and things, but there’s a lot of kind of intuition that happens between sort of translating the research and putting that research, feeding that research back into the design. There are hunches, leaps of faith, um, you know kind of between that analysis and design. I mean there are clear cut recommendations that one can make, but then there are a lot of more grey areas. So I would say that, I still think, even though I mentioned we’ve been doing this kind of research for at least, you know, more than a decade online, and you know quite a long time offline, I think we still need to get better at the rigor at which we translate those recommendations and findings. So that’s one place I think we need to focus. Um, in terms of the actual research itself, uh, you know, there’s something, I think there are other sorts of techniques. I’m interested in these kinds of emergent, I would say emergent techniques like the listening labs, um, you know where the kinds of things that we’re looking at today with kind of mobile research, where people are, we need to be looking at how people are using our sites not just in the browser on their desktop but, you know, in the browser on their phone, and how their context is changing constantly and how we need to sort of look at that adaptation. So how do we develop tests that are more emergent and can be a bit more flexible, rIght? So I think there’s something interesting about that listening lab, where we kind of understand the person, and then develop the questions around a person and how they use a product, rather than having a pre-written set of questions. So, something that’s more emergent, I think that’s an area that’s interesting to kind of look at. Then, uh, ethnography, really understanding, goes right along with this sort of, emergent, as you said you’ve been getting more excited about ethnography as well, so, thinking more about kind of fine-tuning our approach to people’s own context, whether that be ethnography, going into their homes, their offices, you know, where people are using our products, whether that be on the street, in the hallway, wherever it is, but really understanding how to find people where they’re using our products and test them or do some research around that, I think that’s really exciting and a really interesting opportunity. Um so that, that’s the next step for us, uh, and I think that the way that people are designing tests and doing some usability testing now, is, you know, is good, I don’t think that there’s a big next step that we can all take together, but I think these are three areas that I think as a discipline that we’re going to see people moving forward together in.

Paul: Excellent. Let’s finish off, then, with a kind of where people should go if, you know, they’ve been excited by this interview, they want to learn a little bit more, um, about user research and user testing. You’ve mentioned Steve Krug’s book. What other resources are out there that people should be looking towards?

Liz: Well, let’s see. You know, I was thinking about, I was thinking about that and there are physical places that people can go, but they’re all in San Francisco in the United States, so that’s not going to help anyone. There is, you know, A List Apart has a User Science topic that often publishes user research related methods-like articles, there’s always BoxesandArrows.com which publishes user research related topics, um, Adaptive Path, which is a user research consultancy, or at least one aspect of what they do, they have published a number of articles but they also do events. A lot of events are in the United States right now, but they may have international events as well. But they do kind of give away a lot of their content. Um, and then last but not least, there’s a new-ish publisher called Rosenfeld Media, and the books that Rosenfeld Media publishes are about methods in user experience and, one recently in web form design, was about the usability of web form design by Luke Wroblewski (called Web Form Design: Filling in the Blanks).

Paul: Yeah, I saw that. That looked very good, I have to say.

Liz: Yeah, so that’s something to keep an eye on as well.

Paul: Excellent. Thank you so much, Liz, that was absolutely superb. And I will be fascinated to get you back on the show in the future to talk more depth about some of these issues. Thank you very much for your time, Liz.

Liz: My pleasure.

Thanks goes to Jason Rhodes for transcribing this interview.

Back to top

Listeners feedback:

Every website should have a call to action, a response you want users to complete. But how do you encourage users to act? How do you create an effective call to action. Read More

Back to top

Snape and Keith, separated at birth?

The stickiness of community

For many, the Holy Grail of a successful website is ‘stickiness’. How do I keep users coming back for more?

Dave from somerset wrote: I am having real problem maintaining users. They visit the site once and then I never seen them again. I have good content, the site is usable and so I am at a loss as to what I should do.

Should I be worried? Are repeat users really important? What can I do to keep them coming back which doesn’t cost a fortunate?

I have written about the importance of repeat users before. These are the people who develop brand loyalty, complete calls to action and regularly purchase. For example, according to data from WebSideStory Inc. repeat users are eight times more likely to make a purchase on an ecommerce site. Repeat users are the lifeblood of most website.

One of the best ways to keep users coming back is to foster a community. However, a thriving community provides a lot more benefits than repeat traffic. An online community can also:

  • Improve your offering
  • Change brand perception
  • Promotes your site
  • Reduce your costs

We have covered the benefits of community on the podcast before. However, that was back in 2006 so my thinking has moved on since then. I therefore hope you will forgive me if I clarify what I mean when I say ‘community can help your business’.

Improving your offering

A good community is not just about users speaking to one another through a forum or chat room. It is also a two way dialogue between you and your users. It is an opportunity for you to hear from your users and discover what they want from your website.

In an attempt refine their products or hone their marketing message, many organisations spend substantial figures on focus groups and customer survey. However a healthy community is constantly providing feedback on your offering. This gives a superior insight into how your product or service should develop at little or no cost.

However, listening to your users does not just improve your offering. It also improves their perception of you.

Changing brand perception

People like to be heard. They like to feel their opinion matters. Engaging with your users and really listening to what they have to say about your products and services is incredibly powerful. It is even more powerful when they see their suggestions acted upon.

Both Dell and Microsoft have significantly improved the way their brands are perceived by talking to customers and engaging the community around their products.

Often this involves nothing more than a speedy response and apologetic tone. However, openness and transparency with a community can also go a long way.

It is possible not only to undo a negative brand perception but also nurture a positive one. And once users feel positive about your brand they start to recommend it to others.

Promoting your site

An community that is enthusiastic about your site or products can be one of the most powerful promotion tools available. Sites like Digg.com have become popular largely because of their passionate community. Equally, Apple’s success is at least partly reliant on their obsessional ‘fans’ who constantly push and promote their products. Nothing is as valuable as personal recommendation.

If you include your users in the process of developing your site they feel invested in it. They feel the site is as much theirs as yours and so will promote it as their own.

A successful community will always be seeking to draw others in, so growing and promoting your site. This ‘evangelistic’ tendency in a community can also lead to substantial cost savings.

Reducing your costs

As I have already said, a passionate community can provide free advertising and save money in focus groups and product development.

However they can also save money in customer support. This is particularly true if your site provides customer support. Rather than users sending queries directly to you, they can post them in support forums and allow others in the community to answer their questions. These forums also become a repository of knowledge others can draw upon. This reduces the support burden (and therefore cost) on your organisation.

Finally, communities have a lower cost of sale. Because they are already enthusiastic contributors to your community, they are easier to reach. This is especially true for repeat ordering.

Hopefully that has convinced you of the benefits found in community and given you some ideas of how to keep users coming back for more.