Streaming is available in most browsers,
and in the Developer app.
-
Writing for interfaces
The words and phrases you choose for your app matter. Whether you're writing an alert, building an onboarding experience, or describing an image for accessibility, learn how you can design through the lens of language and help people get the most from your app. We'll show you how to create clear, conversational, and helpful writing and provide tips for applying these techniques to your work.
Resources
Related Videos
WWDC22
-
Download
Kaely Coon: Hi, my name is Kaely Coon. Jennifer Bush: And I'm Jennifer Bush. We're writers here at Apple, working as part of Human Interface design teams across Apple products and services. Today, we're going to share some tips and best practices we've learned that we hope will help you, as developers, approach writing for your app or game. Kaely: Sometimes we're called UX Writers or Content Designers, and what we write can be referred to as strings, copy, or text, but essentially, it's our job to design through the lens of language. From the earliest days at Apple, we wanted to design devices for everyone. This meant they needed to be able to communicate with anyone. The first Macs were built on the design principle "what you see is what you get," which includes the language. Mac was built using simple language that was easy to understand. It focused on the person using it, welcoming you in, and now, across our products, as soon as you turn them on, we say "Hello." Since those early days, we've continued to be conversational in our interfaces. When words work seamlessly with design, you may not even notice them, but they're pivotal to every part of a user experience. The words are there to help people do what they want to do, whether it's create a Memoji, watch a movie, or find focus. Let's take a look at an app with the words removed. Feels a bit empty, doesn't it? In the Apple Music app, the visuals give you a hint at what each section is, but would you know the difference between an album and a playlist? How about how to browse or listen to the radio? Even if there aren't a lot of words on a screen, they help you understand what's expected, and what to do next. And if you were to come across an error, they'd help you find your way. Writing is about communicating, which, of course, includes the words, but it also includes the structure of those words, the timing in which they appear, and the feeling people have reading them. I mentioned how UX writers designed through the lens of language. Now, you may hear that and wonder, "What does that even mean?" It means the earlier you make writing a part of the process of designing your app, the better the experience will be for the people who use it. In this session, we'll walk you through the types of things we consider as we develop the words in our products. They're not the only things we think about when we write, as there are often many considerations, but we hope this provides a useful framework to keep in mind when writing for your app. These are: Purpose, Anticipation, Context, and Empathy.
You'll notice we've given you an acronym of "PACE," which is an important thing to consider while writing.
Pace is about creating a natural flow so you keep people engaged and interested in what you're telling them. This means knowing what to say, how to say it, and when. Now, I'll hand it to Jen to talk about Purpose.
Jen: As you develop the screens in your app, think about the most important thing someone needs to know at that moment. That's the purpose of your screen. So how do you convey that? First, consider information hierarchy, or how you order the elements on the screen. Here's an example. This is an intro screen for a Messages flow. You know the purpose because it's right at the top: "Share Your Name and Photo with Friends." You probably noticed that first.
Next, you might have read the button that says "Choose Name and Photo." We know people don't always read the text on screen in order, so make sure your headers and buttons are clear.
The rest of the text on the screen still has an important purpose. It tells you what you can customize, and that you can choose who you want to share this with, but the text is a little smaller. The information hierarchy helps convey this screen's purpose. Know what to leave out. When you know the purpose of a screen, you can make choices about which ideas you want to keep in, which you can take out, or which ones you can move someplace else.
Here's a wireframe of a made-up version of a temperature warning screen for iPhone. The title says "iPhone Needs to Cool Down." That sounds clear. But there's a lot more text, and this screen is trying to do too much.
Think about the purpose of the screen. Is it to tell you why iPhone needs to cool down? If so, it tells you that you might be in the sun or using too many apps. Maybe it's to tell you that you can still make an emergency call. That button is pretty large. It almost looks like the screen is suggesting it's necessary. Let's look at what we went with. This screen is much simpler.
The headline is just "Temperature." Because the thermometer image conveys that the temperature is high, we don't need to say that explicitly. And the single sentence tells you that iPhone needs to cool down before you can use it. The button just says "Emergency," so if you needed to make an emergency call, it would be clear what to do.
Rather than give too many details, aim for simplicity. You can tell people the purpose of a screen; it's not a secret! When introducing a new feature to someone, for example, tell them why it's there, and why it's important. In this intro screen with the header "Wind Down Shortcuts," it tells you, "Reducing screen time is one of the best things you can do before bed." That's the purpose of this feature, and now you know why you might want to set it up. Have a purpose for every screen. When there are multiple steps in a flow, define the purpose of the entire flow, as well as each screen within it. This can help keep screens brief and reduce unnecessary steps. At the start, think about how to welcome people in and teach them what they need to know.
Here are a few of the screens in a flow designed to help you set up Apple Cash for family sharing.
The text tells you who Apple Cash is for, "family members who are under 18," and what they can do with it, "send and receive money and use Apple Pay for purchases." In this next step, the purpose is to let you know what you're going to do next, verify your identity, and give you some important information about data and privacy. This privacy information takes up quite a bit of space on the screen, but it's important. Privacy is one of Apple's core values. Think about your app's values and make sure they're represented throughout.
After you verify your identity, and you're at the end of this flow, you're still not quite ready to start using the feature. This "Almost Ready" screen tells you that the "card activation may take a few minutes," and to expect a notification.
And here it is! Now you can send money with Apple Cash. If you're having a hard time deciding what to write on a screen, go back to its purpose. You can convey purpose by considering information hierarchy, knowing what to leave out, and having a purpose for every screen. Kaely: Next, let's talk about Anticipation.
It helps to think of the words in your app as part of a conversation. A dialogue happens between your app and whoever's using it. In any good conversation, there's a back and forth. Sometimes you're listening, sometimes you're talking, or asking questions. Similarly, in your app, you're anticipating how to best communicate for each moment.
Let's say it's a weekend and you've decided to sleep in, so you go to the Clock app to change your alarm. You want to make sure you're changing the alarm just for tomorrow, not your whole schedule.
The action sheet asks, "Would you like to apply this change to all weekends in this schedule?" The first selection is to "Change Next Alarm Only," anticipating that most of the time, you're likely to just be thinking about tomorrow's wake-up. When you head to bed, the lock screen says "Sleep Well" and tells you that Sleep Focus is on. The small button shows you that your alarm is set for 8:30 AM. "Sleep Well" has a friendly and familiar tone, and acknowledges that you're going to sleep. The next morning, if you get up before the alarm and start using your iPhone, it anticipates that you might not want that alarm to sound. So it asks, "It looks like you're awake. Would you like to turn off your alarm and sleep mode?" The conversation feels intuitive, like your device is speaking to your needs. When it comes to being conversational, writers talk a lot about voice and tone. Develop your app's voice first, and then you can vary its tone. Start by asking yourself: what would it say and not say? Are you developing a game that's exciting and fun? Is it a banking app that needs to be secure and trustworthy? Is it an app that's kid-friendly? Think about who you're talking to to help figure out the type of vocabulary you'll use. Make a list of commonly used terms. This can help shape the voice that you can also use for your website, emails, and other communication. Anticipating what people are going through helps you consider your tone. Here, Apple Watch says, "It looks like you've taken a hard fall" and if you're okay, you can answer, "I'm okay." The tone is calm and clear in what could be a stressful moment. Apple has one consistent voice that you'll recognize no matter which of our devices you're using, but our tone changes depending on the situation. Think of how your tone of voice changes when you pick up the phone and talk to your friend versus, say, your bank.
Here, in the Activity app on Watch, when you've set a Move streak, it says, "You set a personal record for your longest daily Move streak: 35 days!" The tone is quite celebratory, so it has an exclamation point. Be careful how often you use those, though. They can look silly when they're frequent.
When writing for apps, you always have to ask, "What comes next?" Anticipating the next action or question someone's going to have will help you know what to say. In the Breathe app on Apple Watch, the instructions tell you to "Be still, and bring your attention to your breath." You might not be sure how to start doing that, so then it says, "Now inhale…" "And exhale." It answers your question of how to use it, as the visuals reinforce the message, and the watch vibrates to help with timing. And in this example from Maps, when you're likely to be heading home, you see a notification that tells you about your commute: "8 minutes to Home" and to "Take Audubon Ave, traffic is light." It helps you make a decision by anticipating what you'll do next. When design and text work closely together, an app feels seamless as you use it. Anticipation is about thinking of your app as being part of a conversation.
Develop your voice and vary your tone according to the situation.
Then answer the question of what comes next. Speaking directly to people in the right way is one way to take your app experience from functional to magical. Jen: Next, we'll cover context. Start by thinking outside the app. When someone uses your app, are they likely to be at home in a quiet space, or traveling at busy airport? Are they occupied with something else, like driving or cooking, or can they give your app their full attention? This reminder shows up on your Apple Watch if it notices that you're exercising, but haven't started recording the workout. The context is, you're on an outdoor walk, so you don't want to have to stop to read a lot. There's one large button clearly labeled "Record Outdoor Walk." On the other hand, once you stop exercising, your context has changed. You can take in a little bit more information, like your total distance, average pace, and active calories.
Here, when taking a panorama photo, your focus is split between the camera app and whatever you're trying to photograph. An on-screen arrow guides you with instructions, to "Move continuously when taking a Panorama." The words appear right below the arrow because that's where you're looking.
Now let's talk about how to write helpful alerts. Chances are, your app has some alerts, which are best used when you want someone to confirm an action or make a choice. They are, by their context, interruptions, so you want your alerts to be helpful and clear.
In this alert, you've opened the Weather app, and it needs permission to use your location. Because it appears at the time you open the app, it feels contextual. The alert also gives you the context in which the permission will be used: to show local weather and send relevant notifications.
Some alerts might have a destructive action, or something that can't be undone, like removing a device from your account. Let's take a closer look. This alert asks the question "Remove iPhone?" And the buttons answer with Remove or Cancel. The context here is that someone needs to make an important choice, one in which they may lose information. "Remove" is the destructive action, so its button is red and on the left. The "Cancel" button is on the right and dismisses the alert without taking any action.
But be careful how you use Cancel. As you can see in this fake alert for a made-up subscription, the title of "Confirm Cancellation" makes it hard to know which button to choose, the one on the left that says "Cancel" or the one on the right that says "Confirm." The rest of the text reads, "If you confirm and end this plan now, you'll lose access on June 21, 2022." This isn't giving much more help.
It's unclear whether you're ending this plan now or if you can still access it. The phrase "this plan" is also vague, especially if you have more than one subscription.
With a few small changes, we can fix it. This new title of "Cancel Platinum Subscription?" tells you which subscription you're canceling and matches well with the buttons labeled Cancel Subscription or Keep Subscription.
The message body is brief, telling you that "You'll continue to have access until June 21, 2022." You'll notice that the buttons aren't labeled Yes and No. When writing for alerts, it's always best to be specific about the action the buttons are going to take. On this alert, if you only read the button labels, you would still understand what you were choosing.
Another context for seeing an alert is when something goes wrong. Errors will often show up as alerts, as shown in this pretty unhelpful made-up example. The title of "Oops! you can't do that" doesn't say what it is you can't do. You're unlikely to know what the error code 1234567 means, and the rest of the message, "Sorry, bad input. Please try again," doesn't add any information. And it's unclear why there are two buttons, Okay and Cancel. It seems like they'd both do the same thing. As for the tone of the message, interjections like "oops!" or "uh-oh" can sound patronizing, and "please" and "sorry" can sound insincere. Use them sparingly.
Here's an example of a better message. The title clearly tells you there's a billing problem, and the text explains exactly what to do about it.
To continue accessing your subscription, add a new payment method. The top button, Add Payment Method, takes you right to where you can fix the problem, and the second button, Not Now, lets you continue what you were doing so you can come back later. Now let's talk about how to create useful empty states, or places in your app where there isn't any content. Empty states can be times for education or even celebration, like when you complete the last item on your to-do list, but it depends on context. Here's another example. In this made up restaurant app, you haven't saved anything to your favorites. It uses the title "Nothing strike your fancy?" which has a whimsical feeling. That can work if it matches the voice of your app, but the idiom might not be universally understood or translate well, and the text, "Please come back if you do find something you want to eat," doesn't give any useful guidance or indication of how content might show up here.
On the other hand, the Apple Podcasts library clearly tells you that you have "No Saved Episodes." It then explains that you can "Save episodes you want to listen to later, and they'll show up here." Much better. So to recap, when thinking about context, think outside of the app, about what else people might be doing while using it.
Write helpful alerts that are contextual and offer clear choices.
And create useful empty states by using an appropriate tone and giving helpful guidance.
Kealy: Finally, let's talk about empathy.
In user experience writing, having empathy means you should aim to write for everyone. Your app might have a specific audience, like musicians, gamers, or other developers, and you should speak to them, but you don't want leave anyone out. It's best to use simple, plain language, as idioms and humor can be misunderstood or not translate, and some phrases have meanings that exclude people.
A key aspect of empathy is being responsive to localization needs. Your app could be used by people all over the world. That's an exciting opportunity! It also means your app needs to adapt to a lot of languages and cultures.
When you translate from one language to another, words can get longer or shorter. Some languages require more vertical space. Someone could be using your app with a language that reads from left to right, or right to left. Here's an example. This is the confirmation you see when changing languages on iPhone, in this case, from English to Thai.
In English, the notification reads, "Applying this setting will restart your iPhone," with the buttons Change to Thai and Cancel.
In Thai, the text at the top is a little longer, and the space accommodates the taller characters, while in Dutch, the text is much longer. The space at the top grows so the text can continue to a second line. And here's Hebrew, a language that reads right to left.
There are also considerations beyond just word length. In U.S. English, the calendar abbreviations for the days of the week are a single letter, M for Monday, T for Tuesday, and so on.
But in Catalan, the days of the week are abbreviated to two letters-- there isn't a single-letter variation-- while in Arabic, the days of the week are not abbreviated at all.
Your UI needs to be able to adapt to those language changes.
Now let's talk about accessibility.
It's important to welcome everyone into your app. For your app to be used by as many people as possible, it needs to speak to as many people as possible. Someone who is blind or has low vision, for example, may set their device to display bold or larger text, or use VoiceOver to navigate.
Pay attention to the language you use for labeling the elements in your app. Those words will be some people's entire experience using it, and you want that experience to be well designed.
Every element needs to have thoughtful, useful, descriptive text. This includes not just the Voice Over text for navigation items, like links and buttons, but any symbols, graphs, or images as well. Let's look at how Voice Over describes a few Memoji Stickers. This first one is described as "Person tilting head to the side with hand beside mouth as if sharing a secret." Notice that it isn't just the physical details that are described, but the intention, "as if sharing a secret." The second is described as "person meditating with relaxed arms and forefingers touching." Again, both the physical details-- relaxed arms and forefingers touching-- and the context of meditation are described.
And the third example again describes both context and position: nervous person biting fingernails. Notice also that each of these examples is described as a "person," not, say, a "man" or a "woman." You can also help everyone feel welcome in your app by avoiding unnecessary references to specific genders. Be equally thoughtful about any descriptive language you use.
It's critical to use empathy when writing for your app. Write for everyone, using simple language.
Be responsive to localization needs, including text size changes.
And design for accessibility, using thoughtful text for people who use VoiceOver to navigate. Don't be afraid to review your app's language often, and change things. Just as language evolves more broadly, so should the words your app uses. There is so much more to know about these topics. Check out the Human Interface Guidelines to learn more about designing inclusive apps.
Today, we talked about Purpose, Anticipation, Context, and Empathy, four concepts you can use to make sure the text in your app or game is well designed. We hope you saw the value of considering writing early, as part of your design process, not as something you fill in later. Jen: And if you do find yourself struggling to find the right words, we have one last tip for you, and it's the simplest one: read your writing out loud. It can really help make sure your writing sounds conversational, like how you'd talk to a friend. Reading out loud can also help you find unnecessary or repetitive words, grammatical mistakes, or typos. Those details matter. Kaely: Writing for interfaces begins with curiosity for who's on the other side of the screen. Speak to them with respect and understanding, and we know you'll find the right words.
-
-
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.