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, copywriting, 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.”
  
UX 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.

UX Writing - be consistent with your titles

General tips:

12. Clarity is key: your text must be clear. 
13. Write short and simple sentences.
14. Whenever numbers are involved - use numerals.

UX Writing - whenever numbers are involved - use numerals

15. Use today, yesterday or tomorrow instead of dates whenever possible.

UX Writing - 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 text of the button should include the action.
UX Writing - buttons text should include the action

17. Shorten your CTA button text and combine it with a header to increase clarity (more in here). 
Mobile UI Design - Shorten your CTA button text and combine it with a header to increase clarity

18. User-friendly error messages need to include the following: 1. What was the problem. 2. Why it happened. 3. How to solve it. 
UX Writing - writing clear errors

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.

Mobile UI Design - think about localization in every label

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.

Mobile UI Design - alignment is key

22. Don’t be afraid to break the boundaries of your page/view.
Mobile scrolling is natural - embrace it and double your whitespaces.

Mobile UI Design - 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.

Mobile UI Design - center text alignment works well for short sections but it's harder to read

24. Aim to eliminate orphans and widows

Mobile UX Writing - aim to eliminate orphans and widows

25. If your headlines get too long - consider using eyebrow headlines

 Mobile UI Design - 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.)

Keep an eye on hierarchy - mobile UI design

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).

Mobile UI design - leading space should be 2-5pt larger than the type size

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.

Mobile UI Design - limit your font types to 2-3 max

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.

Bold is back, but don't exaggerate, and do not use pure black


35. Don’t mix too many colors. Use colorful 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.

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?


Liked this guide? 


Follow me on twitter @gilbouhnick - or - subscribe to the Mobile Spoon newsletter to get my occasional blogs directly to your inbox.


Comments

Gil Bouhnick The Mobile Spoon
One of the greatest article on UX. Loved it
Makes all the sense.
Gil Bouhnick The Mobile Spoon
Thanks for this valuable knowledge! Simple but very useful :)
Gil Bouhnick The Mobile Spoon
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.
Gil Bouhnick The Mobile Spoon
Elad Posner said…
Thanks Gil!
Very useful and valuable
Gil Bouhnick The Mobile Spoon
Eran said…
This is one of the best UI guides. Thanks Gil!
Gil Bouhnick The Mobile Spoon
Unknown said…
Hola ersemifan quiero aprender más de ti
Gil Bouhnick The Mobile Spoon
Anonymous said…
Estaba buscando esa informacion hace edad, te lo agradezco, estoy de acuerdo con tu
punto de vista y forraje igual. Despues de buscar mucho por Internet encontre lo que buscaba.

Genial!!! muchas gracias
Gil Bouhnick The Mobile Spoon
Anonymous said…
I absolutely love your blog and find almost all of your post's to be just what I'm looking for.
Do you offer guest writers to write content for yourself?
I wouldn't mind publishing a post or elaborating on many of the subjects you write
concerning here. Again, awesome site!