Style Guides

One useful item in any content strategy toolkit is the style guide. Today, I wanted to look at a couple of my favourites.

The thing I like about these is that while they’re for very different organisations – one is a government, and the other is a talking monkey who helps you send email – there are more similarities than differences.

A style guide can cover almost everything, from logo and branding to typography to the HTML and CSS code you use.  But why use a style guide? The UK Government Digital Service’s own research gives four reasons: it makes better use of writers’ and editors’ time; it helps readers by being consistent; it conveys the right ‘look and feel’; and it saves you money.

Today, though, I want to look at tone of voice – how can the many people at your organisation speak to the user as one?

GOV.UK

GOV.UK is the website of the UK Government. Its clean, straightforward design has won it a lot of attention as well as awards. It seems to me that none of this could have happened if those design principles hadn’t been embedded in its style guide. There isn’t space for a lengthy analysis here but suffice to say that it embodies the GOV.UK aesthetic, clearly explaining what a contributor to GOV.UK should do, how they should do it, and why. Two of my favourites are the sections on writing in plain English, and on making content easy to find via search engines. Their most important tip? Stick to the style guide!

MailChimp

As well as its style guide, the email marketing company MailChimp also dedicates a separate site to the company’s tone of voice. The MailChimp takes great pains to explain to its staff that while their voice is always the same, its tone should change according to users needs. This means the company’s humourous branding comes across loud and clear when users are happy, but gets dialled back when they’re having problems. Some of my favourite parts of the style guide are the grammar tips (“Ampersands: Don’t use them.”), and the different approach staff should take when writing for the MailChimp blog (“Be casual, but smart”). I’m also going to go out on a limb and say it’s the only style guide ever which explains when to use the phrase “Eep eep!”

Different but the same

Much as I’d like it to be true, it’s hard to imagine GOV.UK ever needing to define when it’s appropriate to use the phrase “Hi, Neil. Why am I smiling, you ask? Because I’m not wearing any pants!” on its website. But this is the exception that proves the rule. The MailChimp and GOV.UK style guides have a lot in common:

1. Sweat the details
Both style guides detail exactly when to use italics. GOV.UK’s explains when you should use a full stop in ‘eg’ and ‘ie’ (never). MailChimp have strong opinions on semicolons. These aren’t hard and fast grammar rules everywhere, but they are for these two sites. They make them consistent and reassure their users that the organisations are professional, knowledgeable and in control.

2. Define what you are – and what you’re not
Stating both what your organisation is and isn’t is a great way to strike the right balance when defining tone of voice. GOV.UK and MailChimp both know this. GOV.UK is “brisk but not terse” and “serious but not pompous”. MailChimp is “confident but not cocky” and “expert but not bossy”. Two very different organisations, but with very similar ideas of how they should talk to users.

3. Put users first
I’m a user experience designer, so it was probably inevitable this tip would end up in here. Your style guide should put users at the centre. What do they need from your website? GOV.UK’s guide explains that, “Using this style guidance will help us make all GOV.UK information readable and understandable.” And MailChimp makes clear that “our priority is to explain MailChimp and help our users get their work done and get on with their lives”. Both style guides recognise that users should be able to find out what they need as easily and as stress-free as possible.

This post originally appeared on Together We’re Better. See more from there.

How emotional is your site design?

It’s easy to get bogged down in the world of deliverables when talking about User Experience: wireframes, research reports, prototypes, sitemaps and the like. But at the heart of good UX design is the craft of creating experiences that people love.

Psychology plays a big part in designing any sort of digital experience, and regardless of your role you can consider your site’s emotional impact on your audience. In other words: how are you making your users feel?

“We scientists now understand how important emotion is to everyday life, how valuable. Sure, utility and usability are important, but without fun and pleasure, joy and excitement, and yes, anxiety and anger, fear and rage, our lives would be incomplete.”

Don Norman: ‘Emotional Design: Why We Love (Or Hate) Everyday Things’

A strong emotional experience when we’re using something makes us much more likely to remember it– and whether your users’ memories are positive or negative is up to you!

In his book ‘Designing For Emotion’ Aaron Walter argues that when we create things we should go beyond utility and try to delight our users:

“People will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.”

Forming these emotional bonds with your users makes them more likely to remember you, become engaged and share your work – things that most not-for-profit organisations are eager to achieve.

So how can we build positive emotional design into our everyday work? My number one tip would be to put your users first. Your new web page or email newsletter might please the people, but what about the people who matter- your users? Will they be bored and frustrated by what you do? Or will they be surprised and charmed?

How emotional is your design?

Here are three easy things you can start doing today:

Tip 1: First impressions count

When we visit a webpage we don’t work our way around it in a careful, structured manner, taking everything in before deciding where to click. We scan. We skim. We hurriedly hunt around until we find what we hope is right.

With this in mind, take some time to decide whether you’re giving your visitors a great first impression and triggering the right emotional response to your content. Put yourself in their shoes and ask if they’ll be able to find what they need on your site within five seconds of arriving. How about in two seconds? Or in .2 seconds? Assess what message you want to communicate in the first moments after landing on the page, and remove barriers to this. For instance: does your use of imagery support the emotional response you want?

Tip 2: KISS!

Keep. It. Simple. Stupid. Remove as many words as possible from your copy, especially instructional copy. The less there is, the more chance your users will read it fully and understand. Go through your site to see if you can remove any excess words and make your users’ tasks simpler – frustration is never a welcome emotion.

Tip 3: Check your forms

Forms are often neglected areas on the web, and are often far longer than necessary. Long forms bore and disengage users, so review yours and remove superfluous fields. Another common problem is the way marketing opt-in options are presented – double negatives are definitely a no-no! Keep these simple and understandable at a glance as getting these details wrong can leave your users with a poor impression of your organisation.

This post originally appeared on Together We’re Better. See more from there.

Get an image makeover in 2014

The imagery you use online says more than you might expect. An image may be the first thing someone notices when landing on a page, so they play a key role in making a good (or bad) first impression.

Here are three tips to help you assess the imagery on your site and see if you need to tweak it, update it or create something new.

Tip 1: Avoid obvious stock photos

We’ve all seen them: handsome business people shaking hands in a spotless white room. Women laughing while eating salad. Babies using computers for some reason. Clichéd stock photos are rife on the web, so much so that they have their own meme.

We’ve learnt that these images are fake- not real customers, users or staff. So go through your key pages and check you don’t use any clichéd stock images. If you do, try to replace them. And if you have to use stock photography, Paul Boag has some great tips for doing so effectively. Make this the year you start using images that really mean something.

Tip 2: Make your imagery appropriate

It’s not just stock photography. People are extremely proficient when it comes to a assessing imagery on the web, according to this study by Jakob Nielsen. If it looks like an ad, or like something that’s been dropped in to fill a space, users will ignore it. If it looks useful or interesting (think real people and product photos), they’ll pay attention. Good or bad, the imagery you use will leave an impression on users, so take the time to make sure it’s a good one. You can read more about this at 52 Weeks Of UX.

Tip 3: Get the resolution right

A common problem with using imagery on the web is getting the resolution and size right. The larger the image, the longer it takes to download (a problem for people with slow connections or mobile devices), but the smaller the image the more pixelated it will appear when stretched: fuzzy images look cheap and unprofessional. inSquare Media’s article on why you should resize your images is a useful introduction to getting the balance right.

This post originally appeared on Together We’re Better. See more from there.

 

Put your content on a diet

In light of the fact that an appreciable number of us utilise excessive words in our content, it is incumbent upon us to take action to edit our content as a means of facilitating a better experience for our users.

Or, to put it more simply:

Because many of us use too many words in our copywriting we should edit it to help our users.

Or maybe just:

We use too many words. We should use fewer.

Unless we’re reading for pleasure, we tend to scan web pages. One study found that users read an average of 20% of the words on a page. Put another way that’s roughly one sentence in every five, so it’s vital we make every word count.

Here are my favourite tips for slimming down your content:

Tip 1: Ditch the jargon

Take a leaf out of the GOV.UK book and write in plain English. The only thing that should be ‘delivered’ are pizzas and with a bit of luck we should only be ‘going forward’ if we’re on the train.

Tip 2: Lose the tired language

Find alternatives to the cliched phrases I used at the start of this post. The University of Texas’ collection of pet peeves and this list of plain text substitutions for wordy phrases are both great resources.

Tip 3: Remember the power of words

Trimming your content shouldn’t be a negative experience. Well-written headlines can gain users’ attention more effectively than images (just remember to use this power for good- BBC News does headlines well without resorting to clickbait).

Tip 4: Get inspired

Justin Jackson’s simple page proves you don’t need fancy bells and whistles if you write well. David Ogilvy’s ‘How To Write’ memo is a concise guide to good writing. Roy Peter Clark has written some excellent practical guides to writing well. His latest, ‘How To Write Short’, looks at writing in the internet age. Ginny Redish’s ‘Letting Go Of The Words’ and Strunk and White’s classic ‘The Elements Of Style’ also come highly recommended.

This post originally appeared on Together We’re Better. See more from there.