Tips for writing on the web

It’s important to use simple and understandable language when writing for the web. Here are some quick tips when writing for websites and apps.

Every site or app has it’s own unique goals and objectives. Whatever these might be, they all have one thing in common. Words.

Language is essential in both your content and your user interface. Someone’s ability to complete a task is totally reliant on them navigating and understanding your words.

Copywriting is a entire discipline, for which I don’t pretend to be an expert. Language is critical to the user experience though, and this is very much our responsibility. Here are some quick wins for writing good web content. 

Use of language

You should always aim to use the simple language that your visitors can understand. Try to write in shorter sentences and fragment your content wherever possible.

These guidelines will help with making your words easier to read.

Use short sentences

Shorter sentences are easier to read. Those with many commas can often be reworked to only include one. Whilst there are exceptions, try and stick to the ‘one comma rule’.

This is a great website for all your UX needs, where you can read helpful tips and anecdotes, or even contact Chris in person!

This is a great website for all your UX needs. It contains helpful tips and anecdotes. You can even contact Chris in person!

Define any acronyms the first time you use them

Don’t use an acronym without providing the full phrase in your content. The first time you use an acronym, you should use it in brackets after the full phrase.

Welcome to jUXd!

Welcome to Just UX Design (jUXd)!

Use active voice

Using an active voice involves putting the subject before the verb in your sentence structure. Doing this means the subject ‘acts upon’ the verb. This reduces the risk of writing confusing, ‘wordy’ sentences.

A new article was posted by Chris.

Chris posted a new article.

Use of presentation

Online audiences process information differently. They are a lot more likely to scan text, especially when it comes to long-form content. Because of this you should think carefully about how to present your copy.

These guidelines will help you present information in a more digestible web-friendly way.

Use headings and sub-headings

Content should be ‘chunked’ into manageable sections, each with a clear heading. Sub-sections of content should use different heading styles moving successively less prominent as points are nested.

For an example of this, see how I’ve formatted this article. The article title uses a ‘Heading 1’ style. I’ve then used a ‘Heading 2’ style to split the information out into several main areas. Within these areas, there are more specific points that I’ve highlighted using a ‘Heading 3’ style.

Use lists whenever possible

When you need to provide multiple points to the user in a single piece of content, formatted lists should always be used. Lists can be unordered (bullet points) or ordered (numbered). Either way, they allow content to be more easily digested.

Use white space effectively

Make content easier to read by providing plenty of line and paragraph breaks. This gives people much needed ‘breathing room’ so they can take in each point, one at a time.

Link & button text

Buttons and links are used to prompt the user to take action. Generally this is to start or finish a process, or to find more information. The text we use on these buttons should be easy to understand, and encourage visitors to interact.

This is one of the most important things to get right as a UX designer, and I’ve seen user testing sessions go awry simply due to poor wording on a button.

These guidelines will help you pick choose better language for your links and buttons.

Provide a clear call to action

A button or link’s purpose should be immediately clear. It shouldn’t need any extra context or assumptions to make sense. This means that users shouldn’t need to read the text surrounding a button to understand it does. This is also an important consideration for visitors using screen readers.

This is a piece of text might describe something that the user can do. For example, contacting Chris. The call to action to contact Chris should therefore be visually linked to this text.

Ready to contact Chris? Get in touch now.

Place calls to action in a distinguished area

Placing the button in a distinguished area means the user won’t be bombarded with content. Allowing a little white space around your call to action makes it easier to read.

It’s also important to visually group related content. Whilst it needs some white space, it should also be close enough to any related information.

Never say ‘click here’

Not all visitors are using a mouse. Many will be visiting on mobile devices, and others may be using trackpads or other accessible devices.

Click here to contact Chris.

Contact Chris

Helpful tools and further reading

Hopefully this gives you a good starting point when it comes to writing for the web. This is a huge topic, and there’s always new research and best practices to keep up with. I’d suggest the following tools and resources :

  • Hemmingway editor - An online text editor that helps with writing better english.
  • Nielsen Norman Group - Articles, research and best practice around writing for the web.
  • Usability.gov - Usability standards from the US department of Health & Services.

Found this useful? Why not share it?

Chris Myhill, an incredibly handsome UX designer with over 7 years of experience

Chris Myhill

Chris is a freelance UX designer with over seven years of experience.

He’s worked on loads of different projects, using UX wizardry to help businesses make better products.

Learn more about Chris

← back