UX writing: a comprehensive guide for designing text in mobile apps



 

Hey guys, I’m totally excited about this one and pretty sure it’s gonna be a handy tool for all of you designers, UX writers, developers and product managers out there, looking for ways to improve your UX writing and overall UI design work. 

 

We all know how hard it is to work with text in mobile apps: it needs to be accurate, sharp, friendly, and yet, minimalistic and perfectly designed due to the limited screen real estate.

Copy and microcopy are key ingredients for mobile apps, so I’ve collected this crazy list of 40 tips for better UX writing, copy writing, microcopy, and general UI tips - all involving texts and strings. 

 

Hope you find it useful! 

 

Let’s start with some high level tips: 

1. Work on the text early because text problems often reveal design problems.
2. Be concise.
 
“Writing is easy. All you have to do is cross out the wrong words.”
 
 
 
 
3. Be short, but more importantly: be meaningful. 
4. Don’t be too serious or too technical.
5. Speak to your users. 
 
 

Consistency: 

6. The strange thing about being consistent is that it’s only noticeable when it’s missing.

UI consistency is only noticed when it’s missing. 

 

7. Stay loyal to your brand.
8. Use consistent terminology; maintain a terminology document to ensure your microcopy is consistent across the different parts of your product. 
9. Write with a consistent voice.
 
10. Don’t refer to the user in both the second person and the first person within the same phrase.
 
11. Define a strategy: title case vs. sentence case and stick with it across the entire product. 
 
 
 
 

General tips:

12. Clarity is key: your text must be clear. 
13. Write short and simple sentences.
14. Whenever numbers are involved - use numerals.
 
 
 
15. Use  today, yesterday or tomorrow instead of dates whenever possible.
 
 
 
16. Buttons text should be clear. Users often don’t read the question so the buttons text should include the action.
 
 
 
 
17. Shorten your CTA button text and combine it with a header to increase clarity (more in here). 
 
 
 
 
 
18. User-friendly error messages need to include the following: 1. What was the problem. 2. Why it happened. 3. How to solve it. 
 
 
 
 

Text design and layout:

19. Think about localization from day one.
For example:German words can get 200% longer than English ones - make sure your design can host significantly longer words by maintaining spare spaces whenever possible.
 
 
 
 
 
20. Avoid long blocks of text: remember that users don’t read, they scan (research: users read 20%-28% of your text).
 
 
21. Keep your distance! Don’t let any of your texts get too close to standard margins (left/right) or top/bottom elements - spacing is your #1 friend if you want your text to be noticeable.  
 
 
 
22. Don’t be afraid to break the boundaries of your page/view.
Mobile scrolling is natural - embrace it and double your whitespaces.
 
 
23. Pay attention to text alignment: center alignment works well for short sections or as a virtual separator. Left alignment is easier to read, therefore better for longer sentences. 
 
 
 

24. Aim to eliminate orphans and widows

 
 
 
25. If your headlines get too long - consider using eyebrow headlines
 
 
 
 
26. Choose your font carefully (size, weight, color contrast)
27. Keep an eye on hierarchy (size, distance between elements, etc.) 
 
 
 
 
28. Don’t be weird. 
 
29. Measure your leading space. A good rule is to set the leading 2-5pt larger than the type size, depending on the typeface (source).
 
 
 
 
30. Long or short lines can be tiring and distracting. Optimize the width of each line (the measure) and aim for 40-80 characters (source).
 
31. Keep equal margins for all text blocks across the entire app design.
 
 
 

Fonts: 

 
32. Refrain from using too many font types at once.
 
 
 
33. Bold is back, but use it wisely (i.e. for headlines). 
34. Black color increases eye strain. Avoid using black and use dark Gray instead.
 

 

 

35. Don’t mix too many colors. Use colourful visuals and keep your text solid and clean. 
36. To make a sentence stand out without using a bold font - enlarge the font and increase padding
 
 

Review: 

37. Designers & mobile developers: Never trust an emulator! (especially when text is involved)
38. I can promise you that 0% of your customers will ever run your mobile app on an emulator.
39. Mobile design must always be reviewed and tested on real mobile devices. As many as possible. 
 
40. Always have a backup plan: load your strings from the server so in the case of a typo or urgent change you will be able to change your copy without having to release a new version of your mobile app (source: 7 best practices for better mobile development).  

 

So, did I miss anything? 

 

BTW, I designed all the mockups in this post using the simplest tool called… PowerPoint. Here’s how

More fun UI stuff in here.

Follow me on twitter @gilbouhnick to get more like this. 

 

 

Comments

One of the greatest article on UX. Loved it
Makes all the sense.
Thanks for this valuable knowledge! Simple but very useful :)
Hi Gil Bouhnick,

This is one of the best article that I ever found on internet about UX Writing. I would love to learn more from you on these specific areas design process, UX, UI, Usability and Entrepreneurship. I'm trying to connect with you in all the possible ways.

You can reach me here is my linkedIn id - https://www.linkedin.com/in/chinnathambis

Thank you for your time.