Detail Matters: Bad First Impressions (Poor English)

It's very easy to identify bad detail, even easier to laugh at it. But every now and again it's good to indulge in order to remind ourselves How Not To Do It.

Because first impressions are important. They say: we're a serious, professional organisation, and we deserve your money.

Or, they say We didn't bother proofing our promotional material. Or - perhaps worse - We have a limited grasp of the English language.

All of that in the first word.

But wait! What's that first FREE item in the Pack? An LED Tourch, you say?

Two spelling mistakes with every flyer. You can imagine that the product will be equally high quality.

Fun Does Not Mean Comic Sans

I was asked to provide some content for a new website, and in the process of looking at it, I couldn't help but notice the presentation.

The layout, for instance, was too large to fit on my 1280x1024 monitor. A collection of photographs and their associated labels were disjoint. There were typos, text was uppercase, apparently randomly. And the predominant font was comic sans.

Now there is much to be said about comic sans, and a great deal more to be said about the role of font in brand, in the look and feel of a website (or application, or book).

But for me it boils down to a question of the appropriateness of comic sans for the subject. For a comic, for instance, it may well be the most appropriate font. For a warning sign, perhaps not.

In this case, I presume that the use of comic sans is to promote a sense of fun; there are humorous (although possibly in breach of various copyright) images, and the tone is light.

All well and good. But does the use of Comic Sans add to this?

I think not.

Email newsletters: detail matters (even in the subject line)

This morning, I received an email newsletter from a company that has re-designed their website. The subject line invites me to "celebrate our new web site".

The email meets many of my criteria for a good email communication strategy - it's quite clear who the sender is, why I'm receiving the email. And the option to unsubscribe is right where I expect it to be, at the end of the message.

So far, so good.

Unfortunately, the email falls down on a small, but significant detail: there's a spelling mistake in the subject line. They've lost me before I've visited the website, before I've even opened the email.

Detail Matters, Even in the Subject Line

User experience starts before the front page. Yes, compelling content will win out, but you've got to get visitors to your website (or to open your newsletter) before they can discover your content. Any barrier must be removed, anything that stops someone from making that first click. Even a typo - something so apparently small, so easily fixed.

Because every detail matters.

What was the error? The subject line offers "20% of everything".

And I'm pretty sure they don't mean that in the same vein as Harry Brignull does.

Related articles:

• User experience and email communication
• User experience is about layers
• User experience starts long before the front page

"Please scroll down to select size & add to your basket"

If every page on your website says this, you probably want to look at re-designing your page layout.

Especially if the item in question comes in only one size. Much like the "Please scroll down" message. Because, in this case, one size does not fit all.

The fact that the website needs to use this message suggests that they've had problems with their users not being able to find their primary action buttons, their calls to action; Add to Basket, Buy Now, whatever they happen to be called. Which means that they're not obvious enough - perhaps because they're not visible on the screen at target resolution.

But writing a message that users need to look harder - work harder, take another step - and putting it on every page, is not the answer.

Users look for something to click; they don't want to be hunting around. Every moment that users spend looking for a link, a button, is a moment closer to them leaving your website in despair. They don't want to resort to having to read the little, unimportant text on the page; they want a great big call to action. Buy Now.

The password reset process, revisited

Another example of not telling the user what you want from them, this time from O2, a mobile phone network in the UK.

This week, I needed to visit the secure area of the O2 website, and - of course - because it had been so long since I had last visited, I had forgotten my password. Time to use their password reset process.

So I went through the motions, and - dutifully reading the "Important" text to the side of the new password fields - I entered my new password.

I've recently started using a random password generator, and I faithfully put in the minimum requirements stated on the O2 website. The instructions on this page are pretty clear: the minimum and maximum length of the password are stated, and the statement about mixing letters and numbers indicated that I could use both. I was a little sure what they meant by "other characters" so I added a basic set of punctuation characters to my generation algorithm.

...and fell at that hurdle - see screenshot below.

Despite all the excellent direction in the blue box, there is still some mystery about what "other characters" are permitted. Only by experimenting was I able to get to a password that was acceptable to O2's secret, inscrutable requirements.

Each time I failed, a slap from the website, an invitation to abandon the process and go elsewhere. It's a good job I really needed to get into the secure website. And collect case studies of interaction design for this blog.

Because this is the problem with keeping your website's password criteria secret: user frustration. What percentage of users try again after the first failure? What percentage leave after the second?

Related articles:

• Tell Users What You Want From Them 

The Importance of Signposting in Long Processes

Signposting is Important

When faced with a long, complex online process such as a detailed application form or data capture, it's tempting to try and remove as many steps as possible in order to make the process shorter and simpler for the users.

In general, making the process as short and simple as possible is a good idea.  But you need to think very carefully which steps to remove.  Those "useless" wordy pages that help to signpost and position the user in the process (after all, no one reads them anyway, right?) - those may be the very pages that you need to keep.

The thing is, the longer the process - and at some point, there really won't be anything else you can take out - the more important those signposting pages become.

The Value of Signposting

Up front, signposting sets expectations about the length and complexity of the process. Signposts allow you to tell the users what you expect of them, what preparation they need to do before they begin At the end, signposts allow you to congratulate your users on getting to the end of the journey.

Throughout a long process, signposts are miniature conversations with the users. It's a chance to give them a pat on the back, a nod that they're doing well.

User testing shows that users need reassurance that they're doing the right thing. There's an innate suspicion of computers, a wariness of online forms that users need reassurance about. Without a human face, users start to get nervous. What if the data gets lost? What if I've done something wrong?

Users become invested in the time they've spent; they need to know that the information they've provided has been saved, and that they don't have to go through this all over again.

How to Signpost

Signposting needn't be complicated. Sometimes it's as simple as:

You are here. You've just done that. Next, you're going to do this.

Signposts help to reinforce progress indicators, give feedback about the stages of the process that the users have completed, tell them where they are in the process.

And if you're concerned about the number of pages in your process, signposts don't necessarily need to have their own, dedicated pages. You might consider integrating signposts into the process flow; make them more visual, less wordy. But they do need to be there. Without them, your users are going to get mired down in the process.

The Importance of Signposting

Signposting allows users to pause and draw breath. They give pace to your process, a chance to relax from the serious business of providing information.

Make your application process as lightweight as possible, by all means. But don't remove the very things that help users deal with long-winded processes. Don't underestimate the value of signposts to help your users along.

Tell Users What You Want From Them

With any online data capture form, tell the users what you expect them to provide before they provide it. Telling users they've done something wrong after the fact - even through excellent messages and feedback - is just too late.

If there is a field that you require - and I mean, really require, not just something the marketing department want to know - then you need to tell the user to provide it before they click that button.

If there are special restrictions on the data you require, tell the users about it before they provide it. If they're changing their password, tell them what your password policy is before they try. Otherwise, every time they attempt to give you the information you want, they're effectively playing a guessing game with you. Web forms are no place for guessing games. Users have very short patience; they will get frustrated, they will abandon the process.

And please don't be lazy about it, insisting that credit card numbers or telephone numbers must - or must not - have spaces. Why? It's a simple job to write validation routines that will go that extra distance and make it easy for your users?

The Reset Password Process

As with so much else on this blog, sharing this advice is prompted by a website I visited in the last couple of days. I had, I will freely admit, forgotten my password, and with suitable chagrin went through the reset process. It was very quick and straightforward. It didn't make me feel stupid. So far so good.

But then I was promptly directed to the Reset Password page, where I typed in my new password (twice, as usual). I was then presented (after a suitable delay for a round-trip to the server) with the following feedback (image below):

At first glance, the feedback is good: it's next to the field that has failed validation. It's in a distinctive colour (although perhaps the red is a little admonishing schoolteacher). Yes, the message is a little awkward, but the thrust of it is pretty obvious. I'd tried to use a password that I'd used before. We've all done this; for low-value websites, many users recycle a set of easily-remembered passwords. It might not be very secure, but that's what happens.

So I thought for a little while and typed in a new password. And I got this:

Again, the message is pretty clear (if not particularly friendly): the password I'd just made up was too short. Where this message fails is that it gives no information about the acceptable length of the password.

Guessing what the minimum length might be (meaning adding another character to the end of the password I'd just used), I tried once more. Same message: still too short. And still no clue to what the requried length might be.

At this stage, I was starting to get frustrated.

I needed one more attempt before the password I had chosen matched the undisclosed, secret policy requirements. That's three attempts. Three bites at the cherry. Three tries to guess the requirements of the password field; that and a lingering bad feeling about the website in question.

So how could they do it better?

Tell Users What You Want From Them

It's trivially simple to state your password policy before you ask the user for their password. How many characters you're expecting; whether there needs to be a capital letter, a number, a punctuation mark.

Tell the user that they can't use a password they've used previously. That's not giving any security details away; it's just making life easier for the user.

And don't be surprised if users don't read your wonderfully-crafted informative text. If the user supplies a password that's doesn't meet policy, tell them again what your requirements are. Give them concrete, specific feedback. Be gentle. Remind yourself that if the users struggle with your website, it's not their fault; it's yours.

The harder it is for users to guess an undisclosed password policy, the more likely they are to end up choosing a password they won't remember - meaning they have to got through the reset process the next time they visit your website. And the time after that, assuming they ever come back.

Each stumbling block is a barrier for users to cross before you get the chance to interact with them. And users will only jump through so many hoops before they get frustrated and give up.

How can we expect our users to know what we expect of them if we don't tell them? Playing a guessing game with our users - a game the users cannot win - is only going to lose users.

Related articles:

• A Better Shopping Cart and Checkout Process
• Free website UX design consultancy: Christening-Gowns.com
• O2's Password Reset Process

How to Balance User Experience and Sales Targets

It's an old cliche: designers and UX professionals want to deliver good service, great experiences. Marketers and company owners want to sell products and services, and make a profit. The two parties are always at loggerheads.

Of course, beyond the cliche, is a fact of business life. But the two goals of delivering great user experience and making a profit can be balanced and co-exist happily. It is possible to strike a balance between the needs of the company and the needs of the users (and customers).

How? As with so much else, building trust with the user is vitally important.

Michel Roux's Service (BBC TV)

BBC television is running a series called "Michel Roux's Service" in which Michelin-starred chef Michel Roux Jr introduces seven young people to the restaurant industry with the aim of getting more Brits into the service side of the restaurant industry (for whatever reason, the roles of waiter, sommelier and maitre d' are treated with more disdain in the UK than they are in the rest of Europe, where they are seen as careers rather than something that students do).

Regular readers of ENE will know my fascination with good restaurant service and its relationship to great website user experience; the layers (or facets) of detail; the attention to the smallest concerns (because, after all, detail matters).

A recent program showed an interesting side to restaurant service, highlighting the need to balance the waiters' desires to provide genuinely great service with the restaurant owners' desires to sell food and drink.

In the program, the maitre d' (mentor to the trainees) described the importance of understanding a customer's needs, being attentive, delivering what the customers want, before the customers ask for it. He also talked about being able to use that relationship to upsell whatever special his restaurant or general manager wanted him to sell on a particular occasion.

My first reaction was that this was a cynical manipulation of the customer. After listening to the maitre d' describe it, however; after seeing his obvious enthusiasm and delight in his job, I realised that it was anything but. In fact, the interaction with the customer was genuine, honest, and motivated by providing great service; delivering a great (the word that was repeatedly used was "magical") experience for them.

Indeed, the upsell was enabled by the relationship between the customer and waiter; it was an almost-inevitable consequence of it. The trust made it possible to start a conversation, make a suggestion, to volunteer an opinion.

Building Trust

In interaction design, as in the restaurant industry, customer relationships are built on trust. When trust exists, customers are happy to have a conversation about their options; they become prepared to accept recommendations, to consider opinions.

The same is true of interactions online; the difference is that where there is no human connection, trust and credibility are built on other factors. Interaction design is a key factor in building that trust relationship. When a website asks for more information than is apparently needed for a simple checkout process; when it deliberately or unintentionally obscures the intent of questions and form capture; when navigation or layout just don't make any kind of sense from one page to the next - then trust breaks down. Users get suspicious and - so much more easily than in a restaurant - users leave.

Trust is hard won and easily lost. Getting the interaction right goes a very long way to building and sustaining that trust. User experience is not inimical to sales; it is complementary to it.

Business pressures can be the enemies of usability and UX design; taken too far they certainly can (and do) cross over into bad, manipulative practices (such as anti-patterns and dark patterns). But interaction design can help successfully balance user experience with sales. Of course we want to provide a great experience for our users; and they are our customers, we need them to be buying our products, using our services.

We can achieve that balance by acknowledging the tacit relationship, and being true to it. It's not acceptable (nor, it turns out, necessary) to manipulate users. The good news is that building trust with our customers enables us to sell more without manipulation.

As ever, being genuine cannot be faked.

Related articles:

• Dark Patterns and Customer Awareness
• User Experience is About Layers
• Layers, Compelling Content and Masterchef

A Better Shopping Cart and Checkout Process

Has The Oatmeal used your e-commerce website?

It comes to something when website shopping carts are the topic of an online comic - or perhaps it's an example of how much more demanding users are today. Either way, The Oatmeal cast his amused, wry eye over website checkout processes and shopping carts in his recent comic (How to make your shopping cart suck less), and between the humour and the swearing, there's a few important, relevant points that any website's checkout process should consider.

Tell users what fields are mandatory - and make it really obvious

This maxim isn't just for shopping carts, but for any type of form capture. Users need to know what information you expect them to provide as early as possible; it sets expectations about the process. Telling the user what information you require after they try to continue really isn't very kind at all. Every forward navigation becomes a test for the user: have they delivered everything you want? Every missed field becomes a perceived slap.

It's a simple situation to correct: give the users a symbol to identify mandatory data capture. Put it in the same place relative to every input field or label. Make it really, really clear. Use colour. Use familiar symbols from well-known sites. The alternative is telling the user off when they try to proceed, or bogging them down with an intimidating screen. Telling the users what you wanted once they've clicked to continue is too late.

And if the information is not mandatory, why are you asking the user to provide it?

Don't insist on registration or account creation (state benefits clearly)

Registration is a barrier to progress; users immediately mistrust a mandatory registration if they can't see any benefits, or are only planning in a quick one-off shop. So don't make registering with your site, or creating an account with you a required step in your checkout process.

If there are benefits to the user in creating an account with your site, advertise them!  Clearly state the benefits of registration: if it's the only way to get package tracking, say so. If it's to help your marketing department, you may want to look at adding some other benefits for your users.

But in general, registration is a barrier to interaction. The irony of insisting on account creation is that it's doubtless driven by the desire to harvest user's details and allow marketing to build a relationship with them.  It's the least likely approach to succeed. By forcing your users to register, you're pushing them away.

Well designed, consistent form layout

Many, many things have been written about web forms and label placement. Suffice to say that your website should make every effort to help your users provide the information you need. Make the form easy to scan, make it obvious, make it consistent, predictable. Misaligned fields, unclear labels, labels that may relate to different fields - all these things contribute to make your form difficult to scan, parse, and complete - making your users less inclined to do so. The harder it is for your users to checkout, the less likely they will be to do so.

The greater the number of users you put off with your layout, the fewer will complete the checkout process - the end result of which is to transform users into customers.

Make checkbox labels clickable

Whilst we're talking about forms and data capture, let's get this one out of the way as well.  Checkboxes and radio buttons are pretty small targets for users to click, particularly if they're not that adept with their mouse. Whether you have text labels or images associated with your checkboxes, make them all clickable, not just the checkbox element itself.

As a rule, it's a good idea to make all of your click targets as large as possible; it makes it more likely that the user will be able to click them first time, every time (if you need some science to persuade you, this advice is an implication of Fitts' Law applied to UI design). And - if you haven't got the point yet - making life easy for the user is what it's all about.

Capturing the same information twice

There is no need for a website to require - to force - users to enter the same information more than once. Period.

Indeed, the only reasons I can think of are laziness and incompetence. In the digital world, it's the easiest thing to copy data, to duplicate information - it only takes a button click, a scrap of code. Any number of websites provide buttons to set the billing address same as the delivery address (or vice versa). Or to hide capture of those fields, or any of the numerous other ways of avoiding encumbering the user with physical world metaphors. Websites can be better than their real-world equivalents. They should be.

Summary: Make your shopping cart forgettable

Ultimately, all of this advice is about making your checkout process as simple, brief and forgettable as possible. In some respects, checking out should be to all intents and purposes unobtrusive; it certainly should not be onerous.

Users are busy; they've spent their time on research, they've made their decision to buy from you; and now they want to get through your checkout process as quickly as possible. Make it possible for them to do that, and they may remember your website favourably. Which is one step closer to them buying from you again.

Related articles

• A 9-Step Checkout Process (not a good idea)
• Remove Barriers to Increase Interaction

Websites that disable right-click: BT Digital Vault

Not so long ago, I wrote about the website design anti-pattern of disabling the user's right mouse button.

This odious and unnecessary practice is largely ineffective in preventing users from "stealing" copyrighted content (once the main reason trumpeted). It kills user experience, neatly breaking any trust with users (if the website is prepared to prevent me doing this, what else are they up to?), and also gives the impression of an amateurish, unprofessional company.

So imagine my delight this week when, researching online storage, I came across this wonderful example of what not to do on the BT Digital Vault website.

The message itself is completely useless; it doesn't give any feedback about why the "function" is "disabled", nor what the user can do about it;  it's a door slammed in the user's face without rhyme or reason. In this particular case, it's also inexplicable. The picture above shows the entirety of the page; there's no obvious copyrighted content.  The one positive note is that it doesn't imply that the function has been disabled as the result of a user action.

But I think my (least) favourite thing about the message displayed in the alert box is the exclamation mark. To my ears, the website is shrilly shrieking at me. The silly thing.

For the record, I closed the browser window without registering.

Related articles:

• Websites that disable right-click

User experience and email communications

Get your email communication strategy right

I've recently started getting email from Southern Railway, a train operating company serving the south of England. This is odd not least because I don't live in the area they serve, and I rarely travel to it or through it. In fact, I'm sure the only reason why I'm receiving the email is because I used their service to travel to UX Brighton earlier this year.

And this is one of the problems with Southern Railway's email communication strategy: it's not clear why I'm receiving the email. There's no indication I'm getting these messages because I signed up to some information service.

There are other problems too: when I received the first email, from "Southern", I didn't recognise it.  Indeed, Southern is their trading name, but they also use Southern Railway (three times in the email above) and their website is southernrailway.com.  There's no indication of why I'm getting the email, or how to stop receiving them. In short, it feels like mass-marketing, spam.

Here, then, are some guidelines for improving the user experience of your email communications.

Be clear about who you are

My mail program reports the sender of the email simply as "Southern". Although Southern is the trading name of the company, without context (such as in the From line of the email), it's meaningless. My first guess was Southern Electric, an energy company I used to be a customer of.

Don't assume your users will have a preview pane that might give them a clue about who you are, or that you will get any more screen space than a scan of the From and Subject lines. Users are busy, selective and suspicious. Don't give them a reason to ignore or delete your email, or flag it as spam. You've lost them before they've even opened your email.

Be clear about why your readers are receiving the email

Include a statement about why the users are getting the email. Reassure them that you're not spamming them. Users are busy; they might not remember signing up with you for your service. They might not have noticed the checkbox that your website helpfully defaulted for them. Most of all, users may suspect that you are spamming them, and once lost, trust is mightily difficult to rebuild.

It can be as simple as a statement like "You're receiving this email because you signed up for news updates on our website".

Be personal: use their name

The email above is addressed "Dear Passenger", making me feel like they don't know me, don't care about me. If I signed up for information, I'm pretty sure they've got my name. It's not much of a stretch to include it in the email.

Include the email address (or username) the user signed up with

This is also trivially simple to do. And it adds another layer of trust, another prompt to the user that they really did sign up with you. The worst thing that can happen (as in this case) is that the users do click through to your website, and are prompted for an email address or username that they can't remember.

Make it clear how to unsubscribe from the email

Every email should include a direct link to unsubscribing. It should be trivially easy for users to do so. If users want to unsubscribe but can't, they often end up blocking your emails, which impacts on your bounce rate and ends up costing your business money.

One-click unsubscribe is a big deal. It builds confidence. Remember that when users remove themselves from your contact list, it's still a contact point. Make it work for you. Let your users remember you for the right reasons.

In the Southern Railway email, there's no mention of how to unsubscribe from future emails. When I couldn't see anything in the email about why I was receiving the email, I then looked for some words around "managing my communication preferences" or "unsubscribing from these notifications". Nothing.

In the end, I resorted to clicking through to the website, where I was prompted to sign in. I guessed at a username and password and got lucky. But then couldn't then find any information about communication or contact preferences.

Result: frustration. Annoyance. Lack of trust.

In short: make life easy and obvious for your users

How many problems were there with this email, and the website I arrived at? Bad addressing, unclear authorship, poor messages, no easy way out. I only got as far as I did because I'm interested in the subject and I'm writing an article about user experience and email communications. Would another user get this far?

What do your email newsletters say about you? Are they as polished as your website? What could you do to make your email communications better for your users?

Related articles:

• Say goodbye with a smile, not a sulk: designing your unsubscribe process

User experience and call centres

Although this blog is mostly concerned with the user experience of websites, that is of course only a part of the whole package. Your business will have any number of touchpoints with your customers, and it's important to give them all attention, as great user experience is a sum of the parts.

The user experience of telephone communications

The other day, I rang Laithwaites (a wine company based in the UK) as I'd had a wine from them that was corked. Unsurprisingly, the phone rang a few times and was picked up by their automated system. To my surprise, however, the recorded voice was vaguely familiar.

[Note: I've paraphrased from memory; you'll get the gist if not the exact words]

"Hi there, this is Tony Laithwaite, in France and on this recording. Er, I'm afraid everyone is busy at the moment, but if you hang on, someone will take your call."

Tony Laithwaite? The founder of the company? On the recorded message? Blimey. I was impressed. I hung on.

The phone rang a few more times before the automated system picked up again.

"Hi, it's Tony again. We're still a bit busy, but - er - it's coming up to Christmas, and hopefully you can find something in the new catalogue that - er - you like. We'll get to you soon. Thanks."

Again the phone rang - and this time it was answered by a human that politely and quickly dealt with my issue and exceeded my expectations.

Full marks to Laithwaites.

What Laithwaites got right

The recorded message is very clever, very appealing. Firstly, it's human. Tony Laithwaite gave his name to his company and is part of the brand; he regularly appears on marketing. He's recognisable. Having him answer the phone is a stroke of genius.

Secondly, the words he speaks seem genuine, unaffected.  The delivery is not polished; there are pauses and um and ers in the message, just like he'd recorded himself. It immediately creates the sense of a human connection, of a relationship between two people, rather than the impersonal recordings on phone systems.

This style of contact sets the tone for the conversation that's about to happen; it's relaxing, it engenders trust. Yes, I think there's a danger here of trying too hard, of trying to be too authentic, and somehow overdoing it, but Laithwaites have got the balance just right, and it really works.

What does your telephone system say about your business? Are you missing the chance to impress your customer whilst they wait to talk to your team?

Related articles:

• Say goodbye with a smile, not a sulk: designing your unsubscribe process
• User Experience is About Layers
  
• User Experience Starts Long Before the Front Page

Book review: The Design of Everyday Things by Don Norman

Serendipity is a funny old creature. Every now and again something crops up when it's least expected, and it turns out to be just what's needed.

This week, I was planning to write a review of Don Norman's The Design of Everyday Things, something I've been meaning to do for some time now; the book is, after all, widely (and quite rightly) regarded as a classic.

And then I found a review of the book over at Usability Post. It's a good review, I urge you to go read it. I'll wait.

So what can I add? Only my own perspective: this book - quite honestly - changed my outlook. Since reading it, I've thought about it, related to it, pretty much every day. Seriously, I think about it every time I open a door.

One of the central messages of the book is that when technology (whether it's websites, televisions, doors or whatever) doesn't work - when it breaks down and users can't get to grips with it - these situations are rarely, if ever, the fault of the users - but the users generally think it is.

If your website makes users feel that way, they're less likely to visit your site again. No one wants to keep going back to something or somewhere that makes them feel stupid. Part of the purpose of design - and in our case, UX design - is to ensure that our websites and software don't make users feel stupid.

It's not quite that simple, of course, and the book goes into significant detail about the ways that designers can address these issues: introducing constraints to prevent errors from happening; giving users feedback on the actions they take, supporting their cognitive maps and conceptual models. The book is not directly related to web design, but there are enough overlaps to provide substantial food for thought, and readily-applicable tools.

Although in some respects the book feels a little dated, in other respects is still absolutely fresh, still absolutely relevant, perhaps even more relevant, as Dmitry observes.

There are unintended delights in the book, including the gloriously old school black-and-white photographs. And the satisfaction of noticing that the sub-headings of the book are printed so close to the spine that some of those on the left hand pages are unreadable unless one opens the book back on itself (and breaking its spine). A design issue that Don would surely have something to say about.

But these are joys, not nitpicks. Without wishing to sound cheesy, The Design of Everyday Things really did change my perspective on the physical world around me, as well as the computer applications and software that I'm engaged in designing and building. Already a textbook for designers, it's an essential for anyone in the usability arena (UXers, usability professionals, web designers); it should be a requirement for anyone designing and building computer software.

And it wouldn't be out of place on just about any bookshelf. A fascinating, revealing, relevant read.

Dark patterns 3: exploiting careless users

Harry Brignull describes dark patterns as those website design patterns that use a "solid understanding of human psychology against users".  They're used on websites that are in some way deliberately designed to trick the users. Examples include sneaking products into the online basket, or knowingly obfuscating the intent of dropdowns in order to sell more (more insurance, in one of Harry's examples).

Dark patterns trade on knowledge of user's on-line habits. In an earlier article, I wrote about how dark patterns can be considered acceptable business practice, but that as usability professionals, we must ensure that customers are informed about them. In this article, I'm wondering whether dark patterns successfully exploit users because when online, people are simply more trusting than they ought to be.

Users are not cautious enough when shopping online

People approach shopping on the web quite differently than they do shopping in person; on the web shopping is quick, easy, impersonal.  This remove from the reality of traditional shopping is the great asset of e-commerce, and its great problem too. People turn to the web for convenience, speed, ease of access (and, often, better pricing and choice).  No one should, however, treat buying on the web any more lightly than they do buying person; in both transactions monies are exchanged and contracts are entered into.

Yet we're all guilty of it all; we all use the web for convenience, because we're in a hurry.  That haste inevitably means we're going to be less cautious about the things we do. And we tend to take it less seriously; because the web is a non-physical medium, we tend to think that it has fewer consequences than physically shopping (or signing a contract, or whatever). The fact is that shopping on the web is a non-physical interaction with the same physical consequences (that's the attraction!).  We cannot take e-commerce any more lightly than we would going into a physical store and buying something.

Taking the web seriously; treating it with more respect

In fact, we should all take the web more seriously. We all need to be more cautious with online shopping, not laissez-faire about it. Having purchased goods or services online, it's often harder to get out of our sales contract or return faulty goods. Not because the legal structures are particularly different, but because internet shoppers are several steps removed from the stores that supply the items we buy.  If we want to return goods, we have to use a postal or delivery service (once removed) to get them back to the seller and then - if necessary - chase the returns by email or telephone (twice removed).

There are no fewer consequences to buying online than there are to buying offline. So we all need to read before we click; we need to make the effort to check the question we're answering, what's in our basket, exactly what we're paying for. Those times when we don't - which is often - are what dark patterns capitalise upon.

The phrase caveat emptor - let the buyer beware - has never been more relevant.

Help users to recognise and avoid dark patterns

Good user experience goes beyond avoiding anti-patterns and dark patterns; it actively supports users in areas we know them to be susceptible to manipulation. Educating users about the tricks that might be played upon them is a part of the whole. In addition, we need to consider safeguards that our websites do not accidentally manipulate our users. We need to be cognizant of our users' vulnerabilities and design our websites to limit the effect of those vulnerabilities.

Is any of the website's wording less clear than it could be? Does our helpfulness with suggestions of related products (and our natural drive for upsell) ever cross the line? In providing great online experience, are there off-line processes that, while necessary, are more difficult to use than they might be?

Knowing that users are susceptible to these situations, our job as interaction designers and usability professionals is not to exploit. Rather than using these traits of e-commerce against our users we should be helping them to deal with the consequences.

Understanding our users makes us better equipped to serve them. And that doesn't just mean giving them what they want; it's also about saving them from themselves. We have to ensure that our designs help prevent users falling foul of the various pitfalls that dark patterns exploit. Because we don't want our website to appear on the Dark Patterns website, even if it's by accident rather than design.

Say goodbye with a smile, not a sulk: designing your unsubscribe process

When users unsubscribe, it doesn't matter how you treat them, right?  After all, they're leaving you, so you no longer need to worry about giving them great experience.

Well, no.

Unsubscribing is a touchpoint with your users

The last point of contact with your users is still a point of contact, another opportunity to ensure that they think of you fondly. Having them unsubscribe should be as easy as having them subscribe.

Just because a user is leaving your email newsletter, it doesn't signal the end of their contact with you.  It must be easy to unsubscribe, easy to the point of being forgettable, to reduce the negative experience (and, hopefully, to increase the likelihood of repeat custom).

Your job is to make the unsubscribe process as easy as possible. Make it as easy as subscribing, easier even.

Unsubscribing the right way

One click and you're gone

Unsubscribing should happen in one click, if possible - and it is usually possible, dependent on the platform you're using (and if not, perhaps you're using the wrong platform).  There's plenty of examples out there.

But don't claim you're something you're not. If you advertise "Click here to unsubscribe", you better mean it, and not "Click here to log in and change your communications preferences".

Don't expect users to log in

Nor remember their username and password.  They'll just get disgruntled and start blocking your emails; which could result in fees for bounces.

Use the right language

Give appropriate feedback, and don't leave the users in doubt about what they've just done.  If they've unsubscribed, tell them so; don't say "You request to unsubscribe has been received" - does that mean it needs to be approved?  Are they going to get another email from you?

I'm confused! Have I unsubscribed, or just requested to be unsubscribed?

When I unsubscribe, I want confirmation that it has happened, not a message telling me that my request has been submitted.  Trust me, when I clicked that link, it was not a request.

Make yours a happy farewell

Trust in your users.  Don't make it hard to unsubscribe.  If they like you, but they're just a bit overloaded with your newsletters, chances are they'll come back.  And if they don't like you, you really don't want to be in the position of sending them messages they don't want every week, month, whenever; that will only breed resentment. And they'll share that resentment with others.

Unsubscribing could be another positive marketing opportunity for your business. Don't miss the chance.

Websites that disable right-click: stupid, ineffective and just plain wrong

I was unpleasantly surprised this week when I discovered  a website that wilfully disables the web browser's right click menu. This practice used to be quite popular some years ago, but I thought it had died out as both websites and web users matured. Certainly, I hadn't thought about it for ages, until just the other day I clicked the right mouse button and bam!

Not the behaviour I was expecting.

In this case, I was not being a power user, was not using a function intended for expert users; I was using something available to all users: the web browser's context menu.

Sometimes I'm too lazy to move the mouse to my web browser's forward/backward navigation buttons, or to move my hands to the access keys. Instead, I'm in the habit of using the browser's context menu; I right click, then follow up with a key press; navigating back to the previous page.

Or not, in this case. Instead of the expected, learned behaviour I got a crappy little pop-up.

Disabling right-click: why do it?

The reasoning goes something like this.

In many web browsers, the context menu typically includes options to print or refresh the current page, and navigating back to the previous page in the browser's history (or forwards to the next). When right-clicking on an image, the context menu includes the option to save a copy of the image to the user's computer. The thinking goes that by disabling the right click - preventing the browser from displaying the context menu - then the users are prevented from copying images from websites.

Disabling right-click: the truth

Having your website prevent users from using their browser's context menu is pointless, crude and ineffective. Kind of like taking away the f, u, c, and k keys off every keyboard in order to prevent people from typing naughty words, it breaks far more than the issue it's trying to prevent.

It's true that preventing the browser from displaying the context menu does indeed prevent the user from saving the image to disk using the context menu. It does not, however, prevent the user from downloading the image.

In the first place, the user has already downloaded the image; which is to say that the web browser has downloaded it to the user's computer on the user's behalf.  In order to show an image on a web page, that image has to be publicly accessible; the web browser has to be able to locate it and download it in order to display it. If you want your users to see your photographs, they need to be able to download them.

Secondly, it's still possible for users to save a copy of the images. They can view the source of the web page (itself often an option on the context menu, but also available from the browser's menu bar) and take the image URL from there. They can, if the developers have been particularly lazy, use keyboard shortcuts to do the same thing.

So instead of being an effective means of preventing all but the most casual of users from making copies of images, we get something that slaps the user in the face.

Disabling right-click kills user experience

This fact should be self-evident. Taking away the context menu takes away more than just the save image functionality. It takes away something that is not the website's to remove; it breaks the user's software. Worse, it breaks their mental model of web usage; it breaks their interaction with websites. It breaks their trust. That's not something you want your website to be responsible for.

When I can't access a bit of functionality I'm accustomed to using on a piece of software I (ostensibly) own, it's a bit jarring. When the website gives me a kick in the process it's infuriating, enraging.

In the case of the website I visited, the popup with the message "Function Disabled!" is clumsiness of the highest order; the minimum amount of work to slam the piano cover down on the pianist's fingers without explanation. There's no explanation to the user of what or why the "function" has been "disabled"; the kind of message that might suggest to some users that their action has resulted in a function being disabled.

Disabling right-click makes your website look amateurish

Disabling right-click strait-jackets the user for little actual benefit. It's crude and clumsy and does not engender trust. Finding this behaviour on websites still feels awkward, amateurish; anyone with a scrap of sense can get the links to the images and download them anyway.

Worse than appearing amateurish, though, is the fact that it handicaps the user's browser. It removes functionality that's not in the site's remit to remove, it breaks the user's learned interaction with the web.

Disabling right-click must stop

And it's only going to get worse. The trend with recent browsers (Chrome, IE9) is to reduce the standard menu elements. Users will quickly tire of hunting for the browser menubar and will increasingly use the context menu to access functionality. Preventing them from doing so is going to inconvenience and irritate an increasing number of users.

There's no good reason to disable right-click. Any justification is just that; an excuse. The wrong decision.

Treat your users like grown ups; they'll respect you more for it.

Related articles:

• Websites that disable right-click: BT Digital Vault

Dark Patterns and Customer Awareness

In website design, the term anti-patterns is used to describe those foot-in-mouth practices that result from laziness, ineptitude or simple mistakes on the part of the designers. They create a bad user experience for no other reason than the designers got it wrong. Anti-patterns serve neither users nor usability practitioners.

By contrast, Harry Brignull describes dark patterns as those website design patterns that use a "solid understanding of human psychology against users".  They're used on websites that are in some way deliberately designed to trick the users. Examples include sneaking products into the online basket, or knowingly obfuscating the intent of dropdowns in order to sell more (more insurance, in Harry's example of Trick Questions).

Dark patterns seem to deliberately mislead, or trade on knowledge of user's on-line habits.

What's so wrong with dark patterns?

From one perspective, nothing.

There's no mystery to the concept of upsell; that companies want to sell more of their products. That's simple business. That's good business.

Over at Usability Post, Dmitry Fadeyev has written two articles on the motives for bad design, citing the example of webpages so cluttered with ads and popups that their usability is reduced.  The point he makes is that those webpages are that way not through ineptitude, but through design; knowing that there is revenue to be made from advertising clicks, the website designers have made conscious decisions to include the elements that increase business at the cost of the user's experience.

Dmitry argues that design principles are often deliberately broken (by including attention-grabbing ads, cluttering up the page, for instance), because there are business reasons or benefits to do so. In the second part of his article, he considers a comment from Don Norman's classic Psychology of Everyday Things, where Don cites the example of chairs in a cafeteria made deliberately uncomfortable in order to discourage people from lingering in the cafeteria. Don considers this successful design, as the design criteria - of throughput, essentially, preventing people from staying over long in a space when they ere - were met.

We're familiar with this practice in our physical world. The chairs in MacDonalds are uncomfortable because the business model relies on high volume, rapid turnaround; they don't want people to stay. We're also familiar with marketing practices of opt-out boxes in the small print of application forms, often following opt-in boxes to confuse scan readers.  And yet these practices are tolerated - are in some way acceptable, in their way - because they're known, familiar.

These and other upsell practices, possibly because they are known, are not mysterious; they're in the public domain. We know about them; we're wise to the practices.  Publicising these tactics; informing and educating users about them has made the tactics less sneaky. Or perhaps no less sneaky, but somehow more palatable because they're known, expected, understandable.

Awareness of dark patterns demystifies them

We can achieve the same results for dark patterns. We can defuse dark patterns by revealing them; demystifying them. Once we know what to look for, we can neutralise their more poisonous effects.

This demystification is one of the things that Harry seeks to achieve through his website; to inform users of the practices out there. Because sneaky tactics need to be revealed.  Perhaps that's the only way to do this; to inform people of the tricks that can be got up to on the web.

I'm not advocating these practices. I'm not saying that usability professionals should embrace these principles; in another article, I'll have some things to say about professional ethics. And I'm not saying that we should expect little from our users; but it is, I think, our responsibility as ethical professionals to educate our users to some level.

Because awareness is a good thing. When a user's experience jars because of these bad practices, we should expect them to realise it, and to acknowledge it for what it is: simple business. And it becomes the user's choice to do business with the companies that use these practices.

But let's do our part as usability professionals to ensure that it is an informed decision.

User Experience and the Hair in the Bathroom

Websites are like bathrooms. Seriously, stick with me on this one.

Edit: By happy coincidence, Bathroom Blogfest 2010 coincides with this article.

Design for your users

A friend was having some building work done in his house and was describing how the builders had planned the bathroom just so; they'd laid it out quite cleverly. In particular, the basin was tucked away neatly just behind the door.  But although the design made good use of the space in the room, if the door was opened particularly hard or carelessly, then it would bang into the sink.  My friend wasn't happy with this, as the bathroom was intended for use by his young sons, who would doubtless charge exuberantly into the room, continually slamming the door into the basin.

Although the designers had produced a good solution, it didn't suit the user group it was intended for.

Don't let clutter hide great design

Let's say you want to wash your hands before dinner, but the bathroom you've just walked into is filthy. So much so that the only thing you can see is the dirt: the fingerprints on the mirror, the mess on the countertops, the ring in the bathtub. It's distracting enough that you leave the bathroom without washing your hands, without noticing anything else about the room.  It doesn't matter how elegant the basin or the taps, how well laid out the room (nor how poorly designed); the clutter stops you doing what you went there to do.

It's possible to address all of these things, of course; they're obvious and they're simple, trivial to fix. And once they're done, it's possible to see the things beyond the filth, the good and the bad: the shape of the shower, or the handle on the bathroom that knocks against the cupboard.  The fact that the basin is so close to the bath that you knock your elbows and knees on it when you turn 'round. The taps that aren't clearly labelled so you're not sure which is hot and which is cold.

And those can be fixed too, and the design made slick and clever and appropriate. But even after all the time and effort, there will still be times when people walk into the bathroom and the first - the only - thing they see is the hair on the soap.

There's a hair on the soap

On the one hand, the hair on the soap is the sign of a great job; all other problems addressed, all the other issues resolved. Until the mirror is clean, few people are going to notice the hair on the soap.

But when everything else is just right, the hair on the soap - that trivial, obvious, tiny thing - is going to stand out, jump out, get noticed.  It's the smallest thing and it's going to be talked about. A lot.

As simple and small are seemingly trivial as it appears, the hair on the soap is also important. The hair is not the most important part of the experience, unless everything else is right. But it's part of the many layers that contribute to the great user experience.  No matter how fabulous the bathroom, the hair on the soap needs fixing.

How's your bathroom?

What are the design elements of your website that, although clever, just don't work for your user community? What's the clutter that's preventing your users from doing what they came to your site to do? What are the hairs in the bathroom of your website?

Free website UX design consultancy: Christening-Gowns.com

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

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

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

Look and feel: Homepage

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

Homepage at 1024x768

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

Homepage at 1280x1024

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

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

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

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

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

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

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

Product pages

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

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

Product category page (188 products) at 1024x768

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

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

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

Product details

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

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

The buying process - basket, registration and checkout

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

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

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

Your Current Basket at 1024x768

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

The registration acknowledgement page returns the user to the basket

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

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

Delivery Information (snippet, expanded)

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

Payment page (snippet)

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

Conclusions

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

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

Layers, Compelling Content and Masterchef

The other week, I wrote about the layers of user experience, and how each layer, however seemingly small, contributed towards a truly great overall user experience.

I've been watching the current series of BBC 2's "Masterchef: The Professionals" in which chefs are invited to compete for the largely-honorific title of Masterchef.  In this particular variant, contestants - all professional chefs - are taken through a series of rounds where they are required to demonstrate their skills to the highest level.

Their judges include restaurant critics from some of Britain's best known newspapers, as well as Michel Roux Jr, of Le Gavroche  in London. With 2 Michelin stars, Michel Jr clearly knows great food, as well as the importance of of the attention to details beyond the taste of the food itself.

On a number of occasions, Michel Jr has commented on the appearance of the contestants' food before he  tasted it, saying that it was poorly prepared, or not well presented ("elegant" seems to be a word that comes up quite frequently). But when the food has delivered on taste, has been deep and full of flavour, he has responded positively. The taste has, in effect, compensated for the initial reaction generated by the appearance of the food on the plate.

The same is true of websites. Yes, first impressions are important.  But sufficiently compelling content can win through, can override those first impressions. Users will look beyond your presentation if your content - or product or service - is compelling enough. But users have got to stick around long enough to realise how great your website is; they must stay beyond the first contact.

Masterchef's judges are committed to the programme; they will taste the food whatever their initial impressions of it. The users of your websites are not so committed; they are likely to be fleeting visitors.  In order to ensure those visits convert to sales, to repeat customers, or whatever your website's strategy is, you need to ensure that their user experience is maximised on as many fronts as possible; give your users as smooth an experience as possible, little to complain about, few barriers to interacting with you through your website.

As the BBC's own style guide notes, there are many people that will be offended by poor presentation; there is no one that will be offended by good, correct presentation.

What is it about your content that is compelling enough that your users will forget their negative first impressions? How could you make your presentation better, more likely that users will stay beyond first contact to discover how great the content is? Share your thoughts in the comments.