Grasping the Interface Language with UX Writing

UI syntax

“Any common boundary or area of convergence can be an interface.” This is a definition of the word interface which doesn’t come from the computer realm. Paper forms had been used long before computers came into existence and in a lot of ways, user interfaces inherited that visual language.

The shape of the fields prompts you the way to fill them. The size of the field implies the number of lines, boxes for digits, and checkboxes mean specific input:

Wage and Tax Form W-2

Wage and Tax Form W-2

A poorly-designed form doesn’t read like a sentence and has a cluttered structure. A good form stacks into a text. Before computers, all other kinds of indirect communication mimicked the speech. A form would often work as a template of a spoken message and was designed accordingly:

Conoco Touraide card

Conoco Touraide card

Ilia Birman from Design Bureau suggests that a form, and thus, an interface should be perceived as a sentence. We can adapt to reading a text in a variety of ways – left to right, top to bottom, in any language, all we need is a clear syntactic relationship between the elements.

An intuitive University application form in Hungarian by Dóra Máthé

Like a sentence that has a subject and a verb, a form has a heading and a button. The heading is the subject – a noun. The button is a verb in its root form. Everything between the subject and the verb is a secondary part that helps a user take action.    

* * *

A simple interface of a form is like a short sentence. It’s clear what it’s about and what to do. However, the forms can be complicated just like sentences. So a subject mentioned at the beginning of the sentence could be repeated at the end of it as well. If an interface is too long to see the heading and the action within one screen, the subject has to reoccur.

Yandex AppMetrica

This is a form with a “Settings” word in the heading and in the button because the form is quite long and in some cases might not fit within the screen. In most cases, duplicating the same noun or verb in headings and actions should be avoided. When there’s a repetition, it usually disguises a problem with clarity or a lack of substance:

Sign up
New Account

The syntactic approach to naming elements applies not only to headings and buttons. The idea that the UI can follow the syntax was formulated by Artem Gorbunov in 2007 because of the guidelines from the American tech companies did not comply with the Russian language. For example, the infinitive and the imperative of the same verb have different forms.

If the action button is a verb, which parts of speech can represent the rest of the UI elements? If an action is advanced by options, the action itself should not be repeated, the focus is the options. Radio buttons as adverbial modifiers work best for this. Adverbial modifiers can be expressed by an adverbial phrase, noun, prepositional phrase, gerund, etc.

Send Reports
Send every week
Send every month
Send when I ask
Send Reports
weekly
monthly
on demand

Radio buttons here specify the action by answering the question “how?”. This reduced the cognitive load and requires less screen space.

A perfect interface sentence contains zero words but speaks distinctly.  

UI elements are as articulate as the words themselves. That’s why they were created in the first place – to simplify control. A button that simulates a physical button doesn’t need a behavior explanation. An input field is only designed for one thing. Dubbing the explanation for UI elements is like explaining how doors work.

Create your new account
Select your gender:
Male
Female
I want to register as:
New account
Male
Female

Employer

Embracing the visual element language is a UX writer’s challenge. It makes us give up on what we were hired to do – write. In reality, the less writing we do in an interface, the better.

Controls

A button is how a user commands a computer. This makes it a proactive element, hence, the wording on the button has to be action-specific and suppose immediate action and don’t need modifiers like “now” (Buy Now, Pay Now).

When instead on verbs we use nouns on the buttons, a user may confuse actions with navigation.

Registration

With that said, sometimes nouns are used in buttons and menu items like the File menu on Mac that consistently uses nouns like “New Tab”, “New Window”, and “New Message”. People are used to seeing these on any operating system and any software and look for this specific set of words. Syntax improves the UI is a lot of ways but the copy should never love itself too much.


Button labels can also express the change of the status or an attitude. Using verbs for this unreasonably stretches the labels. In that case, a button can be an adjective answering the “which one?” and “what kind” questions or an adverb.

When the button is expected to perform an immediate action but its main purpose is to report a status change, we can’t use an infinitive.

This is Shopcada order tracking app. There are two buttons – one with proactive action “Delete package” and another in the past tense “Collected” which means it notifies the system about the status change. The action is performed and the excessive “Mark package as…” is avoided.

A button as part of the navigation can use a noun. There is no action expected apart from the screen change. Again, avoid excessive wording.

Sometimes designers are prone to put “More” or “Next” on buttons. These are undescriptive and syntactically wrong as well. It’s better to use arrows ← → and even better to specify exactly where the button is leading to (“Checkout”) or use pagination for content portions (1 2 3).

A button is how a user commands a computer, not not the other way around.

Responsive design requires changes in structure, button logic, and even copy. For example, when shrinking a button, it’s label should not replace words with an ellipsis. Generally, a button labeled with “…” in the end indicates that there is a user action to follow.

Ellipsis with buttons on the left means there will be no immediate action and further windows will appear. The buttons on the right perform immediate actions, click “Print” and walk to the printer. With that said, a noun followed by the “…” is confusing because it’s not obvious what will follow. Avoid the “suspension dots” effect of the ellipsis.

   Links

Links are for navigation. Navigation uses nouns, so syntactically, links are nouns. It’s a place you will be taken to when you click it. A standalone link simply states the page it leads to.

        Contacts

        Story

        Shop

Link is the first thing a person will see in the text string. The highlighted text should be self-explanatory and indicate where the link leads to.

If you like the podcast, you can find all previous episodes on iTunes.

Any word can be a link in hypertext. Hypertext is contextual and links in it help a reader reach the information they find relevant.

Abiah Folger was born in Nantucket, Massachusetts, on August 15, 1667, to Peter Folger, a miller and schoolteacher, and his wife, Mary Morrell Folger, a former indentured servant.  

Here, we have links to the biography of Abiah Folger, information about the city of Nantucket and the state of Massachusetts, biographies of his parents, and something about the profession of an indentured servant.

Abiah Folger was born in Nantucket, Massachusetts, on August 15, 1667, to Peter Folger, a miller and schoolteacher, and his wife, Mary Morrell Folger, a former indentured servant.

Here, it’s unclear where the link is supposed to lead.

The perfect length for a link in the text is two to four words. However, sometimes the words that would make a perfect link are separated by a bunch of modifiers that make the link too bulky.

That allows Apple more granular control over display features like refresh rate. Interestingly, the Series 4 shipped this type of display last year, but only the Series 5 has a version of that LTPO tech that uses new components, alongside new power management software, not found in the Series 4 to keep the display on at all times while preserving the device’s 18-hour battery life. 

Highlighting just “Series 5” doesn’t do the link justice.

That allows Apple more granular control over display features like refresh rate. Interestingly, the Series 4 shipped this type of display last year, but only the Series 5 has a version of that LTPO tech that uses new components, alongside new power management software, not found in the Series 4 to keep the display on at all times while preserving the device’s 18-hour battery life.

It’s better to include another word or even better – rewrite the part.

That allows Apple more granular control over display features like Series 4’s refresh rate. Series 5 has new components of that LTPO tech alongside new power management software, not found in Series 4 to keep the display on at all times while preserving the device’s 18-hour battery life.

A link that points at itself is as useless as a link that says nothing.

Click here to subscribe to our newsletter and receive exclusive content

The text should not lose its meaning without the link, so don’t use demonstrative pronouns in links.

A link indicates the concrete destination.

A link connects the page with a new page, so we should avoid using labels that look like action buttons.  

“Save” should be a button because it’s an action, not redirection.

This is a clear redirection and technically, it can be a link but it leans more towards a navigation element, thus a button.This is bigger text.

Checkboxes

A lot of designers underestimate checkboxes and see them as just a Boolean variable with two possible values (on/off). Because of that, a checkbox loses its semantic value of which otherwise, it would have plenty.

A checkbox is a functional element that pinpoints the action, selects the object, and just clarifies the interface. A checkbox does not answer “yes” or “no” but rather, open-ended questions like which, what, how, where, and when.

New ride
For 4 passengers
Not older than 10 years
Has 4 doors
Black interiors and exteriors
2013 or newer
Airport permit
For 6 passengers
Not older than 2012
Commercial insurance

A checkbox is a part of a sentence that can be removed.

We’re requesting a four-passenger and four-door UberPOOL ride.

Syntactically, we can use a direct object (what? whom?), a modifier (which? whose?), or an apposition (who or what exactly?) as a checkbox entry. That allows us to use nouns, pronouns, participles, verbs,  adverbs, adjectives, and numerals. This saves a ton of space and helps simplify a form that would otherwise use a bunch of filters.

Backpack Selection
Day-pack
< 2500 in3
With internal frame
Customizable
For school, work, and hiking

As a rule, use checkbox labels as parts of the sentence relating to the action button; let the verb govern the checkboxes. To tune the user up for an action, use headings revealing the essence of the list.

Settings
Play videos
Show progress
Allow notifications
Show
Videos
Progress
Notifications
Videos
Progress
Notifications

In the left-hand example, the essential nouns are diluted by the verbs. If we unify these verbs and put them in the heading, the entire group becomes an apposition. Eventually, we want to get rid of the apposition and have the checkbox as a direct object to the predicate on the button.

Negatives

This is William Strunk, Jr’s rule #15 (11) from Elements of Style where he urges writers to make definitive assertions. What can be more definitive than an interface? Yet, it’s very common that we see negatives in UIs.

Don’t ask again
Remember my choice

 Negatives are bad for UI because they make users solve logical tasks. This checkbox enables the disabling of automatic login.  

Checking something you don’t want to be done is confusing because we are wired to receive a result from an action, not the other way.

Negatives do a massive disservice to the opt-out forms and qualify as dark patterns.

Is a canceled cancellation technically, a yes?

Radio buttons

Radio buttons are interface elements that help users make a single choice. Usually, radio buttons are unified in groups and represent homogeneous parts of the sentence. We only see the selected radio button and ignore the rest of the group.

Radio buttons don’t exist singularly but always in a group. If the group specifies options of action, it should not contain similar words. In case it’s a prepositional phrase, the preposition can’t be detached from the noun. A good option is to only use it for the first action.

Send reports
Send reports on cyclical events
Send reports on descrete events
Send reports on periodic events
Send reports
on cyclical events
on descrete events
on periodic events
Reports on
cyclical events
descrete events
periodic events
Reports
on cyclical events
descrete events
periodic events

Because radio buttons imply multiple selections, they can’t be expressed by imperative verbs and “Yes/No”.  

Yes
No
Enable cookies
Disable cookies
Enable cookies

In cases when a radio button is a part of adverbial, it can be expressed by a verb.

Settings by Saadia Minhas

Input boxes

User input has to be clear and definitive. Syntactically, it can be anything but the predicate. A common practice is to duplicate the action button label in the title of an input box. It’s best to avoid imperatives in titles and only use them when the action is too specific. In other cases, it’s better to use nouns in titles.

+ Add your goal
Create goal
New goal

 

Sometimes to help specify the input, we can formulate the title as a question. It’s not common in forms but as the chatbot logic becomes more familiar, we can mimic that. However, that requires a back-end functionality able to understand the input.

Predictive input by Martin Bonov ✈


UI language

A picture is worth a thousand words. Only when it comes to the emotive response. If we are dealing with a technical task, pictures can turn those tasks into conundrums. Modern design is icon-based. Mobile devices left designers no choice but to encipher a lot of words into pictograms and the rest of the industry gladly followed.

There is an art component in icon design which beats practicality. This is restroom signage by the way. Sometimes the visual does not fully accomplish what it’s supposed to and that’s where words come into play only to create a masterpiece of public signage.

No! Tatoo sign in Japan

No! Tatoo sign in Japan

This is great on so many levels: the two genders, the tiny rose tattoo, the fat red prohibition sign, the “NO!” thing and the entire Tobu Super Pool statement below. This is clearly the result of a struggle after a simple sign failed to work.

Words matter because they are evident.

Interface also solves a problem and while doing that, should not create more problems. A pictogram is a piece of information encoded in visuals. It’s a shortcut to meaning and if it fails to convey it at first glance, a user will have to guess.

Iconography is a separate design discipline that is way more complicated than words. If a pictogram doesn’t work without a subscript, there’s no need for it. Words are safer and more informative.

Icon evolution by Yury Wang

Icon evolution by Yury Wang


Omittable words

Like pictogram delivers a message with just core elements, a sentence can deliver a message with just core words. And it will look beautiful. The question is which exact words can be removed without damage to the meaning? Going back to William Strunk, Jr., we can omit anything but verbs and nouns:

“In general . . . it is nouns and verbs, not their assistants, that give to good writing its toughness and color.” – William Strunk, Jr

EVALUATIVE ADJECTIVES

These adjectives modify nouns based on someone’s judgment. The criteria of that judgment are not obvious.

Main Menu
Basic Info
General Settings
Special Cases
Extra Features
Other
Dashboard
Name & Contacts
Software & Storage
Underscribed Cases
Autofill & Cookies

These evaluations are unnecessary because they say nothing about the reasons we consider something to be primary or additional. If a hierarchy of some sort is inevitable, explain the logic behind it.


SELF-EXPLANATORY NOUNS

A user does not care what type of interface element is in front of them. Words specifying the UI are for designers and developers. Design has to be relevant for the people and speak with the notions they care about.

Registration Form
Order Details Page
Required Field
Item Description
Catalog
Registration
Payment & Shipment
We need this for…
About the product
“Clothes”


ADVERBS OF PLACE, COMMANDS

Such words point out control elements which are already designed as control elements. A button should not say it’s a button but the action that it produces. The interface can’t command a user. It has to present its control organs for a user to choose from.  

Click here to download .pdf
Enter shipping address
Type password
Select a plan
Ship order to
Password
Plan

TECHNICAL TERMS, ROBOT LANGUAGE

We’ve become immune to some of the weird language use cases that came from the tech industry. We are constantly @ing each other and know how to construct hashtags to find content independently from search engines. Overall, we have a high tolerance for robot language in 2019, but the contrast is striking when you compare it with human language.

Process does not respond.
Try again? 60… 59…
Session expired.
Re-log in.
Incorrect request. Purchase full version
Step 4 of 7
Error: Unexpected exception
Authorize to view content
We`re overheating. Come back in 5 minutes
We`ve logged you out to protect your account
We can`t do that in a demo.
Get full version
Packaging
Website crashed. Looking into it
This is the member area. Log in


SUCCESS

“Success” is the only possible outcome of any operation initiated by a user. If the operation is not successful, it is not finished and there should be no message stating that. More so, if the operation is successful, its success has to be tangible.

Payment transaction successful!
Money sent.


PLEASE

In the spoken language, “please” is a part of the verbal etiquette. In the interface, we can only use it when asking a user to do something inconvenient or it’s an application’s fault that caused the inconvenience. Never use “please” to pressure a user. Instead, explain why it matters.

Please, enter your location
We will warn you about the nearest gigs.

Even though I’ve listed some, there are no specific groups of words that can’t be used in the interface. If it’s a wrong word but it fits the context better, leave it be. A good UX writer tweaks the UI copy based on multiple factors.

* * *

Every interface is the intersection of different objectives. Business objectives of the application should not dominate the purpose of a product – to serve the people. Sometimes proper wording is all you need to take a product from a client’s realm into the user’s realm. UX writing is based on care and respect but it relies on specifics like the syntactical structure of the interface elements.

Mobile app development
Making apps stay on peoples' phones.
Written by Moses Kim
February 02, 2020

YOU MAY ALSO LIKE

This is the old design of Shakuro.com

We're currently working on rebranding our company and redesigning the website