mouthporn.net
#text – @boomeyer on Tumblr
Avatar

Boo Meyer

@boomeyer / boomeyer.tumblr.com

From the mind of a millennial.
Avatar

John Zeratsky on Writing Great Interface Copy

Found this fantastic article on Fast Co. Design, and thought I’d point out some highlights.

What is design?

Design is not a magical creative thing that designers are blessed to do. It’s rational and objective, and the components are pretty easy to understand.

This is an important point– design is as much about logic as it is about emotion. It is a hybrid between force and flow. It’s calculated and completely intuitive at the same time

What’s interface copy?

It’s the little bits of text– labels, buttons, descriptions, etc.– that you find in the user interfaces of software products.

In a few of my previous hackathon projects, I’ve sat and argued with team members about what word to use to describe a certain thing. For instance, with Amio, how do we go about classifying a task that takes the form of ‘getting the milk when it runs out’? Repeating tasks are easy enough - they repeat every X number of Y time-increments. So we landed on “Alert” tasks, but I’m certainly not satisfied with this.

Personality doesn’t matter as much as you think

When we’re obsessed with personality, we might write headlines like “Okay, let’s get started!” and buttons like “Sounds good!”…Always aim for descriptive and helpful…“Tell us about your business” and “Save and continue”.

This is a concept that can be expanded to include a number of different flaws – Get the big picture down first, and then add flourish with the details. But always be sure that the important stuff comes first.

By the way, people do read

Headlines are often the most prominent, so people are very likely to read them. And interactive elements like buttons, links, and form labels get read, too. These are the most important words on the screen, and they deserve the most attention. Text is not always getting in the way.

As a minimalist designer, I’m always hesitant to include any guiding text – the form should imply its function. But in some cases, text is necessary to get an important point across.

You are using an unsupported browser and things might not work as intended. Please make sure you're using the latest version of Chrome, Firefox, Safari, or Edge.
mouthporn.net