Here you’ll find a quick checklist of some types of screens and different typography you’ll need when working on a digital product like an app.
It’ll help you collaborate with human-centred creative folk like designers and writers, as well as expediting the process with developers – especially if you can all agree to use the same terminology 😉
Let me set the scene
Ha! It’s totally not that exciting. I was just looking everywhere for a checklist of all the different types of user interface (UI) copy I could use for an app project to save myself some time and to make sure nothing got missed.
(You know – the kind of document that would be a great one to bookmark and tick off all the things every time I worked on an app product launch or when I was explaining where in the funnel I was up to, to a designer.)
But the thing was, I couldn’t find such a document or a blog post. So I started putting this one together for my own reference… and soon realised this might be helpful for creators, founders, product designers and other writers, too.
After talking with a few other people in the Microcopy and UX Writing Facebook Group, I also realised that we have different names for the different types of UI copy depending on where we had worked in the past, or what country we lived in. One of those funny localisation things, I guess. (And if you haven’t guessed yet, I am from Australia – so you’ll probably see some weird colloquialisms (‘Straya) in here. Don’t do that in your UX writing.)
I have used my own experience as a UX writer as well as the most excellent book, Microcopy: The Complete Guide by Kinneret Yifrah (you need this book!), her article for the InVision blog and the Apple iOS Human Interface Guidelines as a reference point for this post.
Every UX writing project I’ve worked on has had very different user flows, so not all of the types of screens will be relevant to every project – I tailor the deliverables to suit each case.
But please – if you have more to add to the below, I’d love to hear from you!
Alright. Here we go:
Types of typography
Yeah yeah, I know this is pretty obvious. It’s the largest piece of typography on your site or app. Keep it short, active and so your user can easily identify what they’re doing and where they’re up to.
This part provides more context to the page or screen we’re on. Perhaps it sets the scene or gives an indication about what we want the person to achieve on this particular screen. Because you can use a few more words with this section, you can sprinkle in some brand personality like 100s and 1000s on fairy bread. You’re welcome.
This is usually saved for screens with more text space (for example, intro / welcome screens where we can explain how to use the digital product). As with all UX writing, keep it as short as possible – without losing context or helpfulness.
Under images or blank forms, captions should help provide understanding, accessibility and usability for anyone who comes to the site or app. In particular, captions can help those with seeing difficulties as they use an audio overlay to access your content. Again, it’s about providing hints, tips and guidance to move a human through your product.
Button / CTA
This is the money-maker (so to speak). They should be action-packed, and show the value of what clicking on it will bring. Buttons should also be written in first person for best results. Really basic example: ‘Get my free trial’. Amazon have coined the ‘Buy now with 1-Click’ button that’s become quite famous (and trademarked)!
These are pop-up / pop-down messages that need to grab your attention fast. And depending on your phone settings, they could be showing up on your locked screen. They interrupt the usual flow, so you need to make sure what you write is reeeeally accurate. Apple’s iOS design and development guidelines suggest that notifications must only have important info and should be less than 25 characters in length.
This is just for basic navigation around your site or app – clear over clever, every time.
Ah, the unsung hero of UX writing! These are the little (i) symbols that provide a pop-up when you hover over it. Tooltips provide another layer of help and explanation for the person using your product, or to define the word or phrase it’s placed next to.
For example, when I was working on a tertiary education curriculum builder desktop app, we had to cater to a whole range of different awareness levels. Some users were really used to using online applications and were really familiar with the content – so we didn’t want to be patronising. However, some were brand new to both and needed a little extra guidance. The key was using Tooltips to provide that extra guidance, but the ones who didn’t need more context could continue using the app without accessing it.
Field name / label
It’s the title above a text field / box that indicates to the user what type of information should go in there. For example, First name or Password.
When you ask users to fill in their details in a text box / text field (jury is still out on the official name of this one too!), it can be handy to pop in ‘greyed-out’ text to show them an example and foster engagement. A great version of this is Facebook’s ‘what’s on your mind, Laura?’. (Although – recent developments in Zuckerberg-land might mean that the NewsFeed is a thing of the past…)
Ahhh, error messages. This old chestnut. Nothing grinds my gears more than when I get shitty error messages or when I see flashy red writing even before I’ve finished typing in my password (see below – you know the kind).
The key is to not be patronising – show a little empathy for the user (and a little brand voice doesn’t go astray, either!). And above all else – PLEASE don’t use developer speak and don’t include error codes. These mean nothing to the human trying to use your product! Just briefly let the user know what’s happened, and what to do next.
Now we know the basic terms for each part of a screen in an app, let’s get to the logistical use of the different types of screens in the flow.
Sign up screen
Your user isn’t a ‘user’ just yet. This is where you want to make them feel welcome, and grab the least amount of info to begin. (The point is to move them to the next screen as fluidly as possible, with minimum effort.)
Invalid login screen
This is where an error message shines. Ask how you can help them reset their password or change username.
Payment / sensitive info screen
You need to be super mindful about how your user (remember, it’s a human you’re writing to) feels in this moment. Doing a little ‘stages of awareness’ research here wouldn’t go astray, either. Think about using reassuring language, show your competence and use imagery to let them know that entering their (credit card, financial, personal) details is safe. Something like: ‘Your information is secure because we use bank-level security encryption’ (a standard lock image might help too).
Blank / empty state screen
This is the point where the user hasn’t actually begun to use the app yet. The purpose is to encourage, engage and delight the human at the other end. Be mindful not to point out the shortcomings of your new user: if you’re creating a social networking app, avoid saying things like ‘you don’t have any friends yet’ and instead have ‘invite friends to join the party!’
A confirmation is the pop-up message you get after taking an action. Think about when you try to delete something, and you get something like, ‘Are you sure you want to delete?’
It seems crazy, but this is something that can go wrong and be confusing so easily! You want the buttons to confirm your action, by saying something like this: ‘Delete’ and ‘Cancel’. (Not ‘No’ and ‘Yes’.)
Seriously underrated way to build in some brand personality. Keep users entertained while they wait for the next step in their action.
And don’t forget these…
User onboarding tutorials / welcome screens
These are some of my favourite bits to write. This is the part of the user / business relationship where we get to build likeability and trust through being genuinely helpful. The key is to keep it to three-to-five screens and not give too much away. We don’t want to burden the user with too much cognitive load (read: overwhelming), but just enough info for them to start using the app effectively. Another way I’ve seen these done effectively is through explainer videos.
Product-generated emails / autoresponders
OK these are sometimes not counted as UX writing, but I tend to disagree. They 100% shape the way a human interacts with the product. From encouraging them to finish a step or progress further in an app, they’re often the make or break parts of the funnel. In fact, studies show that if a person downloads an app – we have just 3-7 days to win them over before they delete it altogether.
Here’s a few different types of product-generated emails:
- Account set up emails (to verify email addresses)
- Welcome message
- Security and account change emails
- Finish a step email
- Share with a friend (the more people in a user’s network uses the app, the more likely the user will keep using it)
More than microcopy
There’s a common misconception that UX writing is the same as microcopy (or in-app microcopy to be precise). But as you can see from the above, that’s just not the case!
The whole user experience is made up of every touch point and every chance we have to make it as easy (and delightful) as possible for people.
Everything I mentioned above forms part of that. And when I work with clients on UX writing projects, I take all of this into account.
I collect helpful voice of customer data through surveys and interviews with your prospective, current and former customers – using a mix of my background in journalism and therapist-based techniques to pull out the words they use to build trust and foster a relationship with your digital product.
We take a deep dive into your users’ stages of awareness, language and experiences and develop a super comprehensive tone of voice guide and brand messaging strategy to connect your digital product with the humans who use it (and keep them around for longer).
Whether it’s apps or websites, I use my framework and process to help you build a product your users will fall in love with.
Want my help to create a more human-centred website or app?