Writing for onboarding

Communication in user onboarding scenarios frames learning and doing in an encouraging way, prompting “a-ha” moments when people recognize that a product is right for them and that they’re getting value.

What is onboarding?#

Onboarding is often used interchangeably with “new user experience,” but this term also refers to the process of introducing information for more experienced users about new products, new features, or new elements. Ongoing user education also falls under onboarding, since every time you teach a person something, you’re onboarding them onto that new concept.

A product’s overall onboarding strategy becomes increasingly important over time and is the biggest factor in sustaining its growth and retention. When a product first launches, early adopters are more likely to engage with it and are invested in figuring out how it works. But later in that product’s life when other user groups with different motivations are trying it out, onboarding is a crucial way to maintain interest and ensure continued usage. Ultimately, onboarding is how a promised user experience bridges what is actually delivered.

Creating valuable onboarding experiences within a product connects to even earlier communication moments about that product, such as marketing material. Writing for these experiences involves thinking systematically across messaging channels, writing content that accounts for levels of experience and goals, and ensuring that the information complexity of the message fits an appropriate design component. The result shows consistent value through "a-ha" moments that retain user interest.

Writing for experiences where users learn and do#

Keep these points in mind when planning how to write and design for an onboarding experience:

Reflect what your users already know#

Are your target users beginners? Advanced? What do they want to know? How much information can they handle at once?

Remember why your users are there#

Keep onboarding top-of-mind as part of a user’s broader goals and experience. For example, the journey for someone using Photoshop to design is different than someone using Photoshop for photography.

Sequence topics#

Choose a logical order for the steps that will help a user master the subject. This makes it easier to trim or divide educational content when needed. Also, be sure to mention any prerequisites that people may need to know before they begin.

Focus each tutorial on one tool or technique#

Don’t try to combine too many skills or concepts into a single tutorial. Each tutorial should ideally focus on only one tool or technique. If there are multiple ways to accomplish a task, choose one way to highlight per tutorial.

Don’t overload your users with steps#

The longer a tutorial is, the more likely a user will begin to disengage. Try to keep tutorials and product tours under 10 steps. If more steps are needed, consider splitting the subject matter into separate units.

Set accurate expectations #

Use the first step of a tutorial to clarify what a person will leave knowing how to do, how many steps it will take, how much time it usually takes, the actual output, and so on.

Framing, introducing, and encouraging learning#

Use lightweight language for learning#

People are unlikely to engage with educational topics if they sound stuffy or unappealing. Adobe research has shown that people tend to think of educational content as either only geared toward beginners and/or too “heavy,” requiring a lot of brainpower and investment. Writing in a lightweight way to talk about the activity of learning can help bridge these two and create a more inclusive experience for different levels of expertise with a product.

Words and phrases like the following are too heavy: learning, course, class, training, lesson, teaching, instruction, education, homework, exercise

Words and phrases like these still accurately portray the content and its intent, but are lighter in tone: tutorial, try it out, explore, practice, do {something}, guided, guidance, session, video, developing skills, going deeper, show how, walk through, grow/develop skills

do
Key example of how to use lightweight language for learning. Title, Try editing your clips. Description, This session shows you how to start editing videos. Button with label, Take in-app tutorial.

Frame educational content in a lightweight way using language like “try” and “shows you how.”

dont
Key example showing how heavy or complex language is not helpful for learning. Title, Learn After Effects with our free course. Description, Take After Effects step by step in our series of short videos. Button with label, Open in browser.

Avoid using heavy words such as “course.”

Use jargon with caution#

“Jargon” is words or expressions that specific technical or professional groups use that would be difficult for others to understand. When introducing new words and expressions, it’s important to do so in an inclusive way that makes people feel empowered, not lost. Jargon can be used in a product, but it must be taught judiciously and carefully.

Avoid jargon that doesn’t pertain to a product or its industry
Jargon is acceptable so long as it’s relevant. For example, a brand-new Photoshop user would likely want to learn jargon common in the photography industry in addition to the names of tools and parts of the app. Don't assume that they already know these things. Avoid buzzwords that a common reader wouldn’t understand, and don’t create new jargon.

Use one piece of jargon per sentence
It’s sometimes necessary to use jargon to communicate a technical detail. A good way to use technical terms while avoiding a heavy tone is to only use one of those terms per sentence.

Explain, then name
When you do need to use jargon — for example, “crop tool” (the name of a tool in Photoshop), “aperture” (a photography term), or “Learn” (the name for Adobe’s collection of educational videos and in-app tutorials) — define upon first reference, then give the name.

do
Key example of how to avoid using jargon. Title, Find new ways to hone your skills. Description, Our collection of videos and in-app tutorials, called Learn, is for all experience levels.

Define jargon like “Learn,” then explain what it’s called.

dont
Key example of how speaking abstractly isn't helpful for encouraging people to learn. Title, Let's develop your skills. Start learning today. Description, Find tutorials for all our apps, track your progress, and revisit completed courses.

Don’t speak abstractly about jargon, especially without explaining why it’s important.

Avoid directly referring to the interface#

Unless it’s absolutely necessary for user comprehension, don’t directly refer to interface elements. Directly referencing the UI is not accessible, and doing so also creates issues for scalability and future-proofing in a product. After all, the UI doesn’t look and act the same to all people.

For example, Adobe uses the word “Learn” by itself to refer to a concept, content, and location — not “Learn tab” or “Learn section.” We ensure that our translation team has enough context about what the associated UI element is with the string so that it can be properly translated.

We avoid saying things such as: tab, panel, menu, page, section (e.g., Learn tab, Learn panel, Learn menu, Learn page, Learn section)

Instead, we use “Learn” by itself as a standalone proper noun: Go to Learn, find it in Learn, Learn has more tutorials

do
Key example of how to avoid directly referring to the interface. Title, Want more tutorials? Description, Find our collection of free tutorials in Learn. Button with label, Go to Learn.

Use as a standalone proper noun to refer to a UI element, place, and/or collection of content.

dont
Key example of directly referring to the interface, which is not accessible. Title, Go to more tutorials. Description, Find our collection of free tutorials in the Learn tab. Button with label, Open Learn tab.

Don’t refer to UI elements, such as “tab.”

Frame educational content as personalized and specific#

Even if it may not be possible to personalize onboarding, a user still needs to feel like they're being shown content that matches their interests and skills — not a random assortment of topics. Try to feature specific material that would be directly relevant to someone, rather than describing everything available in a collection of educational content.

Avoid catch-all words and phrases such as: collection, complete set, playlist, all tutorials

Imply personalization with additive language like: this tutorial and others, this and many more videos, this and other subjects, advanced, beginner

do
Key example of how to frame educational content as personalized and specific. Title, Today's practice: titles and graphics. Description, Try this hands-on tutorial and many more in Learn. Button with label, Take in-app tutorial.

Highlight relevant content or a unique angle before mentioning there’s more available.

dont
Key example of how framing educational content as non-personal and broad is not ideal. Title, Go to more tutorials. Description, Find our collection of free tutorials on the web. Button with label, Open in browser.

Don’t speak generically about collections of assorted content.

Set positive expectations#

Using a button label of “Open in browser” sets the expectation that linked content will not be shown in the same view, in-app. But, research has shown that going to a browser window from an app — as well as that button label phrasing — is demotivating and reduces engagement. When it’s necessary to send someone away from an app, tell them as much without explicitly talking about the medium of where the content will appear.

When someone completes a tour or tutorial, prioritize the next actions that will take them back to the home view to try more tutorials on another subject, or to the next one in the series.

Avoid explicit web- or browser-based language such as: open in browser, view on the web, view online

Instead, try subtler approaches: go to, play video, check it out, find out more, back to Learn, back to in-app tutorials, all tutorials on {subject}

do
Key example of how to use language to set positive expectations. Title, Looking for more on color? Description, View all color tutorials to keep developing your skills. Button with label, Go to color tutorials.

Use “go to” to imply that a user will be leaving their current experience.

dont
Key example of language that sets ambiguous or unpredictable expectations. Title, Learn Photoshop with our free course. Description, Take Photoshop step by step in our series of short videos. Button with label, Open in browser.

Don’t use “open in browser” as a call-to-action.

Prioritize in-app learning#

If possible, avoid highlighting any experiences in a “home” screen that would take anyone out of the product. Building in-app experiences increases the likelihood that someone will find value and therefore return again and again.

Use words that call out an in-app experience such as: in-app, inside the app, in-app tutorial, alongside your work in the app, right here, without leaving the app

do
Key example of how to use language to prioritize in-app learning. Title, Start with the shape tools. Description, This session gives instructions alongside your work in the app. Button with label, Take in-app tutorial.

Emphasize what someone can do without leaving their current experience.

dont
Key example of language that doesn't talk about learning something in-app. Title, First up: Using the shape tools. Description, This speedy series teaches you how to use Illustrator. Button with label, Make an icon.

Don’t hide the fact that a tutorial is in-app.

Using different onboarding techniques#

There are many ways to match educational messaging to a design that best accounts for information complexity and the experience of learning. Some of these methods are available as Spectrum components.

A banner shows a top or highly-ranked suggestion for someone. It includes bounded, actionable content that can be a hybrid of instructional and marketing language. A banner explains why someone should explore the suggested content and what they should expect from it.

Use banners to drive people to experiences that correlate to either confirmed or hypothesized “a-ha” moments, or to just generally inform or educate about an onboarding experience.

Two examples of banners. Example 1, an illustration of a video player, in editing mode on a video frame of a person on a skateboard, on a purple background with an abstract design. Banner title, Try editing your clips. Description, This session shows you how to start editing videos. Button with label, Take in-app tutorial. Example 2, an illustration of a woman with dark hair wearing a red dress and multicolor flowers on her head, on a yellow background with abstract brushstrokes. Banner title, Introducing Adobe Fresco. Description, The world's largest brush collection that delivers a natural painting and drawing experience. Button with label, Learn more.Two examples of banners. Example 1, an illustration of a video player, in editing mode on a video frame of a person on a skateboard, on a purple background with an abstract design. Banner title, Try editing your clips. Description, This session shows you how to start editing videos. Button with label, Take in-app tutorial. Example 2, an illustration of a woman with dark hair wearing a red dress and multicolor flowers on her head, on a yellow background with abstract brushstrokes. Banner title, Introducing Adobe Fresco. Description, The world's largest brush collection that delivers a natural painting and drawing experience. Button with label, Learn more.

Card#

A card directs people to content experiences which may be related to the current view. It presents onboarding content that is contextual and useful, but may not be as crucial to provoking an “a-ha” moment as what may be shown in a banner.

Use cards to promote other beneficial experiences that are lower in hierarchy than banner destinations, or to just generally inform or educate about an onboarding experience.

Example of a card for Adobe Illustrator. An illustration of an astronaut in bright colors, with the Illustrator logo. Title, Get started with Illustrator. Description, Learn the basic tools and techniques for using Adobe Illustrator. 10 tutorials. 170 minutes.
Example of a card for a tutorial. An illustration of brightly colored plants and grass. Meta text, How to use. Title, Brush tool. Status, tutorial completed.

Coach mark#

Coach marks are temporary messages that engage users to interact with the UI. They can be chained into a sequence to form a tour or tutorial.

Use coach marks to educate about new or unfamiliar experiences that may be unique to the interface, or to guide users to other places in a product.

Example of a coach mark with an indicator. Title, Everything's in one spot. Coach mark 1 of 4. Description, In Files, you can view and organize your cloud documents and synced files. Button with label, Next.
Example of a coach mark with an illustration showing an interaction. Title, Pan camera. Coach mark 4 of 8. Description, Switch to the Hand tool then click and drag in the canvas to move your camera up, down, left, and right. Two buttons, Skip tour and Next.

Empty state#

An empty state describes what people can do to add things to a view. Someone would see an empty state when they’ve either never added anything to this view, or if they’ve deleted all of what used to be there.

Use an empty state to remind users how to add objects or data, and to reinforce or echo one of the more detailed onboarding mechanisms listed here.

Key example of an empty state. An illustration of the Adobe Creative Cloud logo connected to icons of tasks and objects such as editing, writing, photos, shapes, and videos. Title, Work smarter with Creative Cloud Libraries. Description, Share, reuse, and manage everything you need for a project. Group together images, colors, fonts, and more. Link, title Learn more about libraries. Two buttons, labels Create new library and Follow public libraries.
Key example of an empty state. An illustration showing the action of dragging and dropping photos, documents, and files. Title, Drag and drop your file. Description, Select a file from your computer or search Adobe stock. In-line links in the description, Select and file and search Adobe Stock.

There are two different kinds of modals. An informational modal is a popover window similar to a dialog that contains brief copy and an optional image or two. A rich modal is a popover window that contains a more in-depth content experience, such as an image carousel, video, or GIF.

Use an informational model to let people know about a positive, minor change, such as a feature redesign. Use a rich modal to consolidate suggested content into one spot, to help people get to know a subject more deeply, or to show someone why they may want to try any minor benefits that may feel optional to the basic experience or workflow.

Example of a modal showing new features in Photoshop CC. Title, What’s new. 6 topics, Overview, Content-aware fill, Symmetry mode, Frame tool, Multiple undo mode, Live blending mode. Call-to-action button, label Next. Selected topic, Content-aware fill. Description, Heal images and adapt content more effectively by changing the source, rotation, scale, and more with the new content-aware fill workspace.

Tooltip#

A tooltip gives contextual help or information about a specific component on hover or focus. These can be text-only or rich content (accompanied by an animated GIF, related information, and/or calls-to-action to learn more).

Use tooltips to encourage discovery and learning through UI interaction. They can also be used as lightweight catch-alls for information when no other onboarding technique may be appropriate for the message.

Example of a tooltip. Four icons, a file folder with a plus sign, a cloud with an arrow pointing to it, a bulleted list, and four squares. Tooltip indicating the file folder with a plus sign icon, label Create new folder.
Example of a tooltip. Four icons, a file folder with a plus sign, a cloud with an arrow pointing to it, a bulleted list, and four squares. Tooltip indicating the bulleted list icon, label List view.

Tour#

A tour is a type of tutorial that introduces the UI. It can take the form of a series of coach marks or a video. Tours differ from other tutorials in that they are specifically used for orienting a user to the interface and helping them understand a basic workflow.

Use a tour to show where things are in an experience. Use another onboarding method to show how to do something.

Example of a tour showing the parts of a menu and how to navigate it in an app. 3 sections, Main section, 2 items, Home, Apps. 2nd section, label Storage, 2 items, Document Cloud,  Creative Cloud. 3rd section, label Shared, 3 items, Send and Track, Reviews, Signatures. Coach mark with indicator showing the Apps menu item. Title, Apps. Step 2 of 6 in tour. Description, Browse the Apps page to download or learn more about the apps in your Creative Cloud plan. Two buttons, labels Skip tour, Next.

Triggered element#

A triggered element is content that surfaces in response to an action. This usually takes the form of a toast or other dismissible pop-up, but it needs to explain where the content can be found again once dismissed.

Use triggered elements to respond to repeated actions or activity such as frequent (or infrequent) usage of a feature.

Example of a neutral toast acting as a triggered element. Text, Saved to Tips Guide. Actions, View, close.
Example of a confirmation toast acting as a triggered element. Text, Copied to clipboard. Action, close.

Tutorial#

A tutorial provides practical information about a specific subject, tool, or technique. It builds on other onboarding experiences through written or video instructions.

Use tutorials to help people reach a specific outcome after they’ve become familiar with where things are in a product.

Example of a tutorial for Adobe Photoshop. Title, Get started with Photoshop. 10 chapters. Get to know Photoshop, 21 minutes. Change the image size, 17 minutes. Work with layers, 20 minutes. Adjust the image quality, 16 minutes. Make selections, 14 minutes. Retouch images, 10 minutes. Use color, 10 minutes. Add text and shapes, 17 minutes. Combine images, 15 minutes. Apply filters, 7 minutes. Selected chapter, Get to know Photoshop. First step, an image of a bright red ladybug sitting on a flower. Title, 1. Open images. Description, Open images and create new images.

Video demo#

A video demo shows a person completing a task.

Use video demos to inspire people by portraying the experience of a workflow or product.

Example of a video demo for Lightroom mobile. Video player with Play button on a frame of a person in a forest touching a plant. Information about the demo, Category, Photography. Other platforms, Lighroom desktop. Information, Languages: Deutsch and 8 more. Title, Overview and key features. Description, Lightroom on mobile lets you craft and share pro-quality images from your smartphone or tablet using simple yet powerful tools built with Adobe Photoshop technology. Perfect your shots in a tap with more than 40 presets. Experiment with color, adjust clarity, and add vignettes. You can even connect to other Adobe apps like Photoshop Fix to retouch and refine your work. Link, Learn more.