UX Writing Essentials: Layout

Key points – Improve your copy without changing a single word. Use headings, subheadings, line breaks, bullet points, colours, and other stylistic elements to make your copy easier to read.

A simple layout wireframe

In this article, I'm using a recipe to show how some simple layout tweaks can literally make people's lives easier (seriously, though – all too often, crucial information that hides in a block of text suddenly becomes important later on). Obviously, the recipe is just an example, and you can apply these princinples to pretty much any writing project. So, without further ado, let's get into it. Here's the recipe:

Heat a frying pan on high heat (no oil). When hot, add the lamb mince and cook until browned, 4-5 mins. Use a wooden spoon to break it up as it cooks. Season with salt and pepper. IMPORTANT: The mince is cooked when browned all over. Reduce to medium heat and add the shawarma seasoning mix, garlic and tomato puree. Stir and cook for 1-2 mins. Add the water (see ingredients for amount), whole and mashed chickpeas and beef stock powder. Mix to combine and allow to simmer for 4-5 mins until thick and saucy.

Define the problem

The excerpt above describes a bunch of steps, ingredients and some “important" information in a single, unstructured block of text. Why is that a problem? Well, let’s imagine our “users" and their circumstances for a second. By the way, this is a great exercise before tackling any writing challenge.

Most likely, they're busy home cooks; chopping, frying, cleaning and organising, trying to put dinner on the table. They’re probably listening to their favourite podcast while they’re cooking. The point is: they’re under a certain level of pressure, they're juggling several things at once, and they’re probably not entirely focused on the recipe.

So when writing this kind of copy, we should assume that our users don't read every single word. Maybe they didn’t even read the recipe before they started. In the end, they might miss a crucial step or ingredient hidden somewhere in this block of text.

Oh no. Dinner is in jeopardy. How do we prevent this tragedy?

Set a goal

Now that we’ve identified the problem, let’s find a solution. To do that, we’ll set a goal. In this case, our goal is to help cooks be more successful when attempting a dish. And in order to reach this goal, a good layout can be really beneficial. So let’s make the recipe excerpt above easier to read and easier to understand – without changing a single word.

Overall structure: headings

First, let’s see if we can find some sort of structure. Ah yes, this part of the recipe consists of two sections:

  1. Cooking the meat
  2. Making the sauce

Let’s separate these sections and add subheadings. Aside from dividing the content into more digestible chunks, this will help make the complete recipe "scannable" and give users a rough idea of all necessary steps.

Cook the meat

Heat a frying pan on high heat (no oil). When hot, add the lamb mince and cook until browned, 4-5 mins. Use a wooden spoon to break it up as it cooks. Season with salt and pepper. IMPORTANT: The mince is cooked when browned all over.


Make the sauce

Reduce to medium heat and add the shawarma seasoning mix, garlic and tomato puree. Stir and cook for 1-2 mins. Add the water (see ingredients for amount), whole and mashed chickpeas and beef stock powder. Mix to combine and allow to simmer for 4-5 mins until thick and saucy.

Content order: lists and bullet points

Cool. That’s already quite an improvement. Next step: recipes are basically just a set of instructions. These instructions are distinct steps, and all of them are important. So let’s give each of them their own line.

Cook the meat

  • Heat a frying pan on high heat (no oil).
  • When hot, add the lamb mince and cook until browned, 4-5 mins.
  • Use a wooden spoon to break it up as it cooks.
  • Season with salt and pepper.
  • IMPORTANT: The mince is cooked when browned all over.

Make the sauce

  • Reduce to medium heat and add the shawarma seasoning mix, garlic and tomato puree.
  • Stir and cook for 1-2 mins.
  • Add the water (see ingredients for amount), whole and mashed chickpeas and beef stock powder.
  • Mix to combine and allow to simmer for 4-5 mins until thick and saucy.

OK. Now, let’s have a look at the flow. Recipes are a sequence of instructions. You heat the pan, then you add the meat, then you salt and pepper it. Each step builds on the one before. So let’s turn our bullet points into numbers.

Cook the meat

  1. Heat a frying pan on high heat (no oil).
  2. When hot, add the lamb mince and cook until browned, 4-5 mins.
  3. Use a wooden spoon to break it up as it cooks.
  4. Season with salt and pepper.
  5. IMPORTANT: The mince is cooked when browned all over.

Make the sauce

  1. Reduce to medium heat and add the shawarma seasoning mix, garlic and tomato puree.
  2. Stir and cook for 1-2 mins.
  3. Add the water (see ingredients for amount), whole and mashed chickpeas and beef stock powder.
  4. Mix to combine and allow to simmer for 4-5 mins until thick and saucy.

That works nicely, but see bullet points 3 and 4 under “Cook the meat"? They’re not really independent instructions. In fact, bullet point 3 and 4 reference bullet point 2, so they're kind of a subsection. Let’s remove the bullet points here.

Bullet point 5 isn’t really part of the flow either. It’s more of an additional piece of information. Let’s also remove it from the flow.

Cook the meat

  1. Heat a frying pan on high heat (no oil).
  2. When hot, add the lamb mince and cook until browned, 4-5 mins.
    - Use a wooden spoon to break it up as it cooks.
    - Season with salt and pepper.


IMPORTANT: The mince is cooked when browned all over.

Make the sauce

  1. Reduce to medium heat and add the shawarma seasoning mix, garlic and tomato puree.
  2. Stir and cook for 1-2 mins.
  3. Add the water (see ingredients for amount), whole and mashed chickpeas and beef stock powder.
  4. Mix to combine and allow to simmer for 4-5 mins until thick and saucy.

Highlighting details: font styles

Let’s highlight two kinds of information that you don’t want to miss: cooking time and ingredients. To do that, we can use font styles or colours, whatever works best. Let's use green for the cooking time, red for important information and bold for the ingredients. And let's also remove the full stops, which makes it a bit easier to scan through the list.

So here we go – our "final" recipe layout:

Cook the meat

  1. Heat a frying pan on high heat (no oil)
  2. When hot, add the lamb mince and cook until browned, 4-5 mins
    - Use a wooden spoon to break it up as it cooks
    - Season with salt and pepper


IMPORTANT: The mince is cooked when browned all over

Make the sauce

  1. Reduce to medium heat and add the shawarma seasoning mix, garlic and tomato puree
  2. Stir and cook for 1-2 mins
  3. Add the water (see ingredients for amount), whole and mashed chickpeas and beef stock powder
  4. Mix to combine and allow to simmer for 4-5 mins until thick and saucy

Obviously, this is just an example to show some layout tools you can use. But whenever you’re presented with a wall of text, even if it’s a small one, think about how you can make it easier to read. Layout tweaks can be impactful, and they’re usually easy to implement for both designers and developers.

However, there’s also a downside, which can put you at odds with some designers: our revised version takes up more space. But if the information you're trying to convey is important, you should give it the space it needs.