Tips for effective informational content

What’s the issue?

There are books you can read and sites to explore about good writing for the web. Yet I still see so many of the basic guidelines being broken.

It’s important to note that what counts as good writing will vary according to context. A good marketing blurb that gets you excited about a product or travel destination will usually differ in style from straight factual information, which may again vary from the way that functional error messages are written. On top that those contexts, writers often have to factor in a Brand tone of voice. Is it formal, or playful, or quirky? As you move along the scale from inspirational to factual there is generally less opportunity to bring in a tone of voice – but some brands do. Bringing in tone of voice often means that you need more words and a turn of phrase that can get in the way of clarity, which needs to take precedence.

There are exceptions, but generally when you get to facts, people just want the punchy facts, and then they want to leave. You might get an amusing error message, and it can work. It can also become annoying.

In this post I’m looking at the middle ground where you want to present factual information. You want to make it easy for people to find the information that’s relevant to them, and present it in a way that is unambiguous as far as possible. It’s not a completely comprehensive list of dos and don’ts (that would be a  book).

Use bullets

It shouldn’t come as a surprise to know that people don’t read websites or apps like they read novels. Users have a goal – they’re not there for the pleasure of your prose. They scan, looking for the cues and keywords that relate to their goal. If the information that you want to impart is a series of individual facts, then structure it as bullets, don’t write it into a sentence.

Here’s a small example from the Theatre Royal Windsor.

Paragraph from Theatre Royal

This would be better structured as three bullet points – and it doesn’t then need the ‘please note’. ‘Drink’ doesn’t need to be capitalised, and it can be more friendly. For example –

  • You are welcome to bring in water with you, but otherwise food and other drinks may not be brought in.
  • Safety is a priority, so we reserve the right to search bags and packages.
  • Rucksacks, suitcases and large holdalls are not allowed in the auditorium (it would be useful to add if there is a holding area for bags)

British Airways had a promotion. Here were the rules.

BA promotion terms

It’s quite hard to scan that paragraph, and pick out the rules in a way that you can get your head round. It would be better as follows:-

Improved BA layout

Some of the unnecessary verbosity is tidied up. Now it’s ‘We have great fares in all our cabins’ rather than ‘There’s great fares in both premium and non-premium cabins’. The original makes you stop and think. The new version also makes it a lot easier to pick out the relevant dates.

Reading Arts has a page on venue hire. Here’s a grab of some of it:-

Reading Arts venue hire

It would help the reader if some of that first paragraph was broken into bullet points, and then you could see at a glance that there are three venues available for hire. Other aspects of this page are also worthy of comment.

Why on earth is there a link to download venue logos? I don’t know their business, but as a prospective hirer, it doesn’t seem relevant. And the link just seems to be plonked on the page at random. It doesn’t relate to any of the other content, and immediately follows some text telling me to follow the links to find out more. It takes the user to a page full of logos.

Also, there is no explanation of what the four pictures are of – even if you click on them. And although there are three venues (apparently), there are only links to two of them, under an odd heading of ‘related content’. I don’t think it’s ‘related’ content. It IS the content. This page needs some work.

Make sure it’s understandable English (or whatever the language is)

Maersk, the shipping company, have some ‘important information’ for customers. Here’s an example:-

Maersk important information

This has clearly been written by someone who does not have English as their first language, and it hasn’t been checked. This can matter. Even if someone can get the gist of it, it’s hard work. Many times I’ve agonised over nuances of wording, and sometimes people challenge me as to why I’m worrying so much over some minor point of detail. The reason is that to the customer this might be the most important thing they read, and those nuances can really matter. It’s easy to be lazy and write copy that has unintentional ambiguity, and you might never know it. If I say ‘loyalty scheme members must go to gate A’, does that mean only loyalty scheme members can go to gate A ? It doesn’t say, so it’s ambiguous.

Limit line length

If the user is reading your content on a mobile device, this isn’t an issue. If someone has designed for mobile first, and not thought too much about the presentation on desktop, then it’s easy to let line length run amok, although it also happens on non-responsive sites. This is an example from Manchester Airport.

Manchester airport information

It doesn’t matter particularly if you can’t read the text here. The visual impact is of small text size and long lines, which is immediately daunting. Any research that I’ve found suggests that users read faster with long line lengths, but prefer shorter lengths. That reflects my personal preference. 80 characters is a good rule of thumb for line length.

On a positive note, the main questions are in bold. That’s good. It helps the user to scan and pick out the relevant items, and it shows the structure of the page. The sub-headings though are in italic, and it would be better to have a design style that’s between the main heading and body copy that is clearer and easier to read.

Putting the whole thing on a background image of clouds is just annoying, and makes the text harder to read. It doesn’t add information or usability. This isn’t the place for clouds.

Categorise and structure

The Manchester Airport example above does attempt to give structure to the content. Many sites have a really long list of FAQs. This example is from Camp America.

Camp America FAQs

There are 70 FAQs. Other sites have more. In this case, there is a drop-down at the top where you can filter by category. That’s good, but I predict that most people will miss it, as they will look immediately at the FAQs for the information they want, rather than start by looking around the page just to see what other navigation or content there is. Since the categorisation is there, why not turn it on by default, rather than off? It would help.

Put active information at the start of the line

Some time ago I was working on some copy to help customers who were due to fly, and were in wheelchairs, and wanted some help at the airport.

We had some words along the lines of ‘If you call our contact centre, then when you travel we can arrange for help with your wheelchair’. We changed this to ‘If you are in a wheelchair, and need help when travelling…’ Again, people scan content. With bullets and short sentences, they scan the first words of each item looking for relevance. The change that we made meant that people in wheelchairs didn’t have to read the whole thing to know they had found relevant content, and others could stop reading as it didn’t apply to them.

This example is from Standard Chartered Bank:-

Standard Chartered T&Cs

Most of the links start with ‘Terms & Conditions’ and I have to read further to find the relevant ones. I’m on a T&Cs page, so I know it’s all about terms and conditions. Switch the content to ‘English credit card Terms and Conditions’.

Don’t blather

I often see words on sites that don’t add information, and shouldn’t be there. Sometimes, it seems, site owners feel they need some introductory text. This is from Hitched, a UK site about weddings.

Hitched – bridalwear introductory text

Someone has come to the site, usually excited, looking for advice and information. That introductory paragraph adds nothing (IMHO). It’s just there for the sake of it. I predict that most people won’t read it, and those who do get no value from it, which means it’s clutter.

Also, the text is centred, as other text is on the site. This makes it harder to read. We get used to starting at the same left-hand (in English) position for each line. Centred text forces us to take time and effort – even if it’s not conscious – locating the start of the line. It becomes fatiguing if there’s too much.

Takeout

Users have goals. When it comes to facts, there are some simple guidelines that in most cases will help people to get what they want quickly.

  • Use bullets
  • Write good English (or whatever the language is), and make it unambiguous
  • Limit line length
  • Categorise and structure the content
  • Put active information at the start of the line
  • Don’t blather – make every word justify its existence
  • Don’t centre text
  • Make it physically easy to read – large enough text size, no patterned backgrounds, good contrast

It’s easy to sabotage your own checkout. Here are some tips.

The story

My wife asked me to advise on which desktop computers the small firm she works for should buy. Amongst other sites I looked at was Dell, and I’ve covered some of the problems I had on their site in this post about comparing products. I also experimented with putting items in the cart to see what I could do, but found the process obscure and unhelpful, and gave up.

I did eventually buy a couple of computers from Mesh computers, although I nearly didn’t. Here’s why.

Starting off, I was looking for office machines. Here is the main navigation. Where would you look for office PCs?

Mesh main nav

Yep, that’s right, office PCs are in ‘Gaming PCs’.

Mesh Gaming navigation

Ah well. Maybe some customers think they don’t make business PCs, and go away.

In working through the options, I saved one configuration as a quote. After more work, I wanted to delete the quote. Here’s the error that I got.

Mesh error message

I have no idea what this means, other than it’s not letting me delete a quote. Here is the template that I’ve always used for error messages.

  • Tell the user what’s happened
  • Tell the user why it’s happened
  • Tell them what they can do about it

This message gets a fail.

Eventually I figured out the spec I wanted, and added it to the basket. I wanted to buy two of them. Here’s what you get in the basket.

Mesh basket

That ‘2’ in the ‘Quantity’ box was originally ‘1’. When I changed it to 2, nothing happened. When I then pressed ‘enter’, it took me to the next step in the process, but gave no indication as to whether I was buying 1 or 2, or what the total price was. So I stepped back again to this page. I then tried ‘Edit’, which took me back to the start of the purchase process, as if I wanted to edit the spec. I didn’t want that, so clicked the basket link in the main nav, and instead of taking me back to the page shown above, it took me to that next step that didn’t show what I was buying, and expected me to continue! I wasn’t going to do that.

I thought that surely there must be a way of getting an updated price. Eventually, I spotted the ‘update’ button, in the bottom left of the image below.

Mesh checkout

It’s in the wrong place, amidst a sea of identical blue buttons. It wouldn’t be hard to improve the design of this page to be more effective with better use of positioning and colouring. At the least, the main ‘continue this process’ button should be a different and standout colour, and ‘update’ should be next to the things that you can update. Or just make the page update automagically.

When I clicked the ‘edit’ link,  and went though the process, I noticed conflicting information about the configuration.

Mesh configuration

Although I had specified an Intel Core i5 processor, which is shown in the basket on the right, the Core i3 was selected in the configurator. I have no idea what would happen if I didn’t spot this and just continued. The configurator should be sensitive to context. On the first pass it should have the default values. Having returned from the basket, it should show my chosen values.

Having struggled through all this, I paid with Paypal. Here’s the screen asking me to confirm the purchase.

Mesh Paypal checkout

Firstly, who chose the colour scheme? It’s really hard to read, especially if you’re colour blind, like me.

Secondly, there’s no data. Just the price. There are field labels, but no data. The nervous amongst us would abandon at this point. I took it on trust and continued. Someone hasn’t bothered checking whether this part of the process is working properly.

Takeouts

I know from experience that there can be nooks and crannies of a site that the owners and designers rarely visit. This can happen especially for servicing or post-purchase paths, where a specific set of circumstance needs to be set up to trigger a given display. It can also be that the designers just don’t think of certain paths, or don’t think some paths are very important, and if they are not listening to feedback, they aren’t going to find out there’s an issue.

How could these problems have been identified by Mesh?

The only issue I’ve highlighted here that was an error, that would show up in error logs, is the inability to delete a quote, and the designer might well look at it, and think that the system is working as designed. nevertheless, it pays to check error logs, and address those which are happening frequently, or occur at key points.

An analysis of site metrics and paths might lead someone to think there’s an issue, if they see looping, such as when I was trying to update the price for two machines. Visual session replay can also be useful for this. Session replay is offered by a number of companies.

Many of these type of  problems are best found by talking to users, observing their use, and listening to feedback.

In terms of what you pay attention to, it’s not enough to focus on the ‘green’ path, where the customer finds what they want, and goes straight through checkout. You need to ask, at each stage, ‘what might the customer want to know about, or want to do, here’. That doesn’t mean that you have to cater for each circumstance, but it does mean that you have to think about it, and try to get data as to whether it matters or not. You might decide not to cater for an edge case, but if you have a lot of edge cases that you don’t address, then you still have a lot of annoyed customers.

Don’t Start Each Word With A Capital Letter In Headings

It’s something I can’t quite get my head round. Some people have an apparent compulsion to capitalise each word in a heading. For them, it’s automatic, and it’s contagious. It’s also not a good idea. Capitals exist for a reason – they communicate semantic information. A capital letter at the start of a word indicates that it’s the beginning of a sentence, or it’s someone’s name, or a brand name, or a placename etc.

Here’s a link to a BBC news story.

BBC headline

It’s easy to spot that ‘Toby Young’ is a person. If it were capitalised to ‘Row Over Toby Young Education Role’, then you wouldn’t know if it meant ‘Row over Toby young education role’. In other words, it could be talking about ‘young education’, or education for the young. Many times I’ve been confused by headings on websites that fall into this trap.

You’d expect that whether or not to capitalise would be set in standards, but Ryanair doesn’t seem to be sure what to do.

Ryanair headings 1

Ryanair headings 2’Ryanair’ of course, would always be capitalised, but are ‘Gift Vouchers’ a proper noun? Or ‘Help Centre’? Why isn’t it ‘Where We Fly’? At least those sites that do consistently capitalise don’t compromise their brand by looking sloppy. Although, I have to admit that sometimes, even if you have standards in place, you can’t police everyone who puts content on a site.

It’s not just headings that get assaulted by a glut of capitalisation. Product names, and lists of items aren’t safe either. Here’s an example from Boohoo. If they wanted to put in a brand name you wouldn’t easily pick it out.

Boohoo products

I have no idea why Apple would capitalise the options in iOS.

iOS options

Apple don’t capitalise everything on their website, although they do have a strange way of putting a full stop at the end of headings.

Some designs go the whole hog, and capitalise everything. This from Uber, a digital agency.

Uber headings

There can be times when all caps works ok. Here’s a post about it from Saadia M. on Medium.

Finally, here’s an example from British Airways.

British Airways headings

This could seem inconsistent, but we had decided that we would ‘brand’ Manage My Booking. It was a judgement call. We thought that by doing so, and making it a ‘thing’, it would make it a little clearer that it was a destination where you could do stuff, rather than just going straight into a process. You may agree or disagree, but I use it more as an illustration of the thinking. If every heading had been capitalised, it wouldn’t even have been an option.

Digital and physical design for disabilities and the elderly is lacking

Some years ago when my mum was in the early stages of dementia, we bought her a wired house phone that was simple to use. It had big buttons that you could program, and you’d write the name of the person on a label next to the button. Easy! However, she was having trouble using it. So I went to see what was happening. I asked her to press the button to call me. She picked the phone up, and pressed my name, rather than the button next to it. It was a key insight – an insight that seems to be lacking from the design of any phone for the elderly that I’ve seen. Put the name on the button, not next to it.

The best desk phone I’ve ever used was in Australia. It was about 30 years ago. It had an LED display, with physical buttons above and below. When you picked the phone up, the bottom left button could be e.g. ‘redial’. Once you were on a call, the function could change to ‘hold’. The point is as much a general usability one as for old people – you didn’t have to memorise functions, or arcane sequences of button presses in different circumstances. All of the office and home phones I’ve used since then have been harder to use.

It got to the point where mum couldn’t use a manual can opener, so I bought her an electric one. She couldn’t use that either, as it was too fiddly to get the can in the contraption at the correct angle.

Can opener

My dad is in a care home (he’s 90). He’s had a few digital radios, but he can’t figure out how to store stations, or which station he has allocated to which button. Now he has an Amazon Echo, so all he has to do is say ‘Alexa, play BBC Radio Five Live’, and it plays. All he has to do is remember the names of the stations he likes, which he can do.

Digital radio

My dad has an Android phone. I regularly download and set up apps that he wants to use. I was finding that the app icons would regularly get shuffled around the screen, or disappear entirely. He disclaims all knowledge as to how these mysterious events occur, but no-one else is coming along and sabotaging his screens. I’ve now installed a replacement desktop that locks the positioning and installation of apps, and the problem is solved. The default desktop doesn’t allow for that.

Sometimes, I’d phone dad, and I could hear him, but he couldn’t hear me. I figured out that he’d pressed the physical volume control all the way down, but of course, I couldn’t tell him that. I then installed an app that locks the volume control to only change media volume, not calls. Problem solved, but the OS didn’t natively allow for that. The Amazon Echo also provides a solution in that I can ‘drop in’ from my phone wherever I have a data connection. I can just talk to him, and he can talk back, without him having to tap, slide, press, rotate, or otherwise contort a button, or even having to understand what the ringing sound is about.

Sometimes it does take a few goes before he correctly answers his phone. Is it tap or slide? Slide in which direction? He’ll use his fingernail, which doesn’t work, so he’ll press harder, or slide onto the ‘reject call’ button.

The Web Content Accessibility Guidelines document explicit best practice to optimise the usability of web sites for people with a range of disabilities. Compliance in some jurisdictions is a legal requirement. A lot of effort has been put into understanding the needs of people with disabilities, and how to address them. There must be people doing something similar for other digital and physical products, but they aren’t easy to find.

It goes without saying (although I’m saying it) that there are a lot of old people, and a lot of younger people who have cognitive and physical disabilities, who would benefit from products designed to meet their needs. I’m sure there’s a huge market opportunity for a specialist designer/manufacturer to own a large share of the market. It would take a lot of money and effort, but the rewards are there to be had. A brand name known for effective design in this area would surely be big.

Any takers? Don’t forget my 10%.

Hamburger humbug. Expose key navigation links.

It shouldn’t cause anyone too much of a headache to realise that making an interface easy to use will help the business and the user. It’s not a great leap from that to think that identifying what it is that most users want to do, and then providing obvious links, is a good idea. However, these principles are not followed through surprisingly often.

There are two patterns I’m looking at here. The bad pattern is using a hamburger menu on the desktop. The good pattern is exposing key links on mobile.

On a phone screen, of course, you’re constrained for space. You want to expose some content, but you also want to make the navigation easy. The hamburger menu (which pre-dates the widespread web) was adopted as a menu indicator, and in a responsive world, some designers get lazy, or intentionally, carry over the hamburger to the desktop.

Here’s BAs mobile web interface.

British Airways mobile interface

You can see the hamburger at the top right.

As the viewport expands, as soon as there’s room, the full desktop menu is exposed, immediately making it easier for customers to find what they want.

British Airways tablet interface

By way of contrast, here’s Fitch’s desktop.

Fitch interface

If you click the hamburger, you get this.

Fitch open hamburger

Fitch describe themselves as ‘the world’s leading retail and brand consultancy.’ My view is that many design/retail consultancies focus more on visual impact on their sites than they do on informing and helping the customer. If I visit the Fitch site because I want to get their number quickly to give them some work, I’ve got to do some work first. I would expect them to know their target market, and what works for them, given that they are the world’s leading retail and brand consultancy, so it’s quite possible they know better in this case.

I would also note in passing, that I’m not sure at all what ‘Think’ would lead me to, or how it’s different from ‘Work’ and ‘Studios’.

Whilst a hamburger may be a necessary evil on mobile, any research that I’ve read says that in general using an icon and text is more effective than either on its own, and that applies to the hamburger as well. If anyone is shouting at me ‘but everyone knows what the hamburger menu is’, then sorry, it’s not so. Maybe your target audience does, but if you’re going for a general audience that’s not just comprised of interface designers, then no, not everyone does. It’s too easy to fall into the trap of ‘I know, all my mates know, so everyone does’.

A better compromise is to expose the key actions, and then the hamburger contains the rest of the menu items.

Facebook does this in their app.

Facebook app navigation

The obvious drawback here is that not everyone will know what the icons mean – even after repeated use!

An improvement is the Mapway tube map app.

Mapway tube map app navigation

Here the key toggles are exposed, and there are more choices in the hamburger top left, and other settings, top right.

Just to underline the principle, I’ll go back to the BA homepage for a moment.

British Airways homepage

The content starts with the global navigation, which is consistent across pages. Then there’s what most people are here for – the ability to book travel. There’s the latest offer, and then there’s a brief navigation section exposing three of other main things that people visit for, even though those links are in the main nav.

Bottom line, make sure you know what the top tasks are for your users, and expose as many as possible within constraints of space, and not overwhelming people.