Punctuation? Grammar? UX design? What?
Yes, you heard me! Punctuation and grammar is vital for an optimal reading experience, and in turn, an optimal user experience. A simple comma can be the difference between a text making complete sense, or not making sense at all.
Web design is approximately 95% typography. This was true 11 years ago and it’s still true today. When copywriters think about their words from a user experience perspective, or when designers invest more of their time improving as a writer, the readability and engagement of the content can be exponentially improved. Like the saying goes, “Content is king”.
Let’s take a look at some ultra-important punctuation marks that can drastically improve the readability and understanding of the written words (beyond the basics — colons, commas and full stops). We'll discuss ampersands, capitalisation and the dashes.
Ampersand
An ampersand is a logogram meaning “and”, originating from the ligatures “et”, which is Latin for “and”. Most of us know the meaning of an ampersand already, but aren’t exactly sure of when it's acceptable to use it.
I must admit, I used it incorrectly for a number of years!
When you shouldn’t use an ampersand:
Don’t use ampersands in sentences. Sentences should be composed of natural language, they’re designed to “speak” to the user in a conversational, humanlike way. People resonate (and are more likely to convert to/engage with) content and user interfaces when the language feels friendly and conversational.
When you should use an ampersand:
Let’s say that you have a blog category about design and UX. In this case, the user isn’t looking to be swayed, engaged, enticed or informed — the user is looking for indication. The user wants to locate and click on that link to the category, so this is where a conversational tone of voice becomes less useful.
“Design and UX” is fine, but “Design & UX” is shorter and thus clearer and more direct. It’s quite likely that this blog also has many other categories of interest, so an ampersand takes up less space and allows more menu items in the navigation.
So, use “and” in sentences and texts that require natural language, and use an ampersand for anchor text and short headings.
Lowercase, Uppercase…Titlecase?
Why do we use titlecase in headings?
Interesting question. It’s actually much more than a formality, there’s a solid UX-related reason for using titlecase in titles, headings and headlines.
Readers use headings to summarise content before they dive into the sentences, and they also focus more on the keywords in those headings. In a world where online content is so accessible, readers are being picky with what they read.
When choosing a title, the lowercase words are the words that could be removed. In the title of this very article, “Bridging the Gap Between UX and Copywriting”, the words “the” and “and” could be removed and the title will still make sense. We still need to include them in the title for readability reasons (remember what I said about natural language), but we can make them less visible by forcing lowercase.
Capitalisation and Uppercase Letters
Pretty much all texts start with a capital letter, but what about uppercase? Uppercase letters are harder to read because of the lack of legibility (the ability to distinguish between individual letters) — when a statement appears in uppercase, each letter is the same height, so it’s harder to tell one letter from the other.
Not impossible, but harder.
Headings and titles in uppercase can certainly make a bolder impact, but it should be noted that uppercase works best with shorter texts. For longer texts, you should steer clear of uppercase so that you don’t impact legibility and readability.
Hyphens
If you thought a dash was a hyphen, you’d be wrong. There are actually many different types of dashes — em dashes, en dashes, quotation dashes (to name only a few), and then yes, there is the hyphen (of which there are about ten different variations!). They have different uses, and they look slightly different too.
Here are the three main ones:
- Em dash: — (the longest dash)
- En dash: – (shorter than em dash)
- Hyphen: - (shorter than all dashes)
So what's the difference between an em dash, en dash and a hyphen?
Continue reading %Punctuation & Grammar: Bridging the Gap Between UX and Copywriting%
by Daniel Schwarz via SitePoint
