Как писать микротексты для интерфейсов: руководство

Между тем, UX-тексты играют важную роль: они помогают пользователям ориентироваться в интерфейсе, находить нужные функции и эффективно применять их для решения своих задач. В этой статье вы найдете простые практические советы, следуя которым вы сможете создавать лаконичные понятные микротексты, обеспечивающие комфортный опыт взаимодействия.

***

На протяжении своей карьеры я примеряла на себя самые разные роли: UX-копирайтер в команде UX-копирайтеров, первый и единственный UX-копирайтер в компании и даже преподаватель на курсах UX-копирайтинга, где мне удалось проверить более 100 домашек.

Не все умеют писать эффективные микротексты, да это и не всегда обязательно. Тем не менее, если вы UX-дизайнер, продакт-менеджер, аналитик или маркетолог в небольшой компании, вам, возможно, придется обходиться без UX-копирайтера. Вы оказались в такой ситуации и на вас легла дополнительная нагрузка по созданию UX-текстов? Эти советы помогут вам справиться с задачей!

1. Воспринимайте текст в интерфейсе как ролевую игру

Это поможет:

• Сделать коммуникацию максимально дружелюбной;
• Выработать последовательные паттерны взаимодействия.‍

Представьте себе интерфейс как диалог между вашим продуктом и пользователем, в котором:

• Заголовки, основной текст, всплывающие подсказки и т.д. — это ваши «реплики».
• Подписи кнопок, поля ввода, переключатели, пункты меню и другие элементы, которые можно нажимать или выбирать, — это «реплики» пользователя.

В идеале у вас должна быть возможность «разыграть» все взаимодействия в интерфейсе по ролям. Например, продукт просит пользователя выполнить то или иное действие — пользователь выполняет; продукт запрашивает информацию — пользователь вводит ее в поле или выбирает нужную опцию из предложенных; продукт информирует или предупреждает пользователя о чем-то — пользователь предпринимает меры.

Например, если экран посвящен какому-то мероприятию, и вы предлагаете пользователям нажать на CTA-кнопку для регистрации, сформулируйте текст от первого лица — не «Забронировать ваше место», а «Забронировать моё место». Так, когда пользователь нажимает на кнопку, он как будто сам произносит эту фразу, что соответствует его мыслям и намерениям.‍

2. Прозрачность особенно важна, когда дело доходит до деликатных тем

Это поможет укрепить доверие и повысить лояльность к вашему продукту.

Люди бывают крайне чувствительны и осторожны, когда дело касается персональных данных, здоровья, денег и других подобных тем. Если ваш продукт предполагает какие-либо ограничения или вероятные негативные последствия, связанные с ними, вы должны четко и однозначно донести эту информацию до аудитории.

Она должна оставаться видимой без дополнительных действий со стороны пользователя (например, не стоит прятать ее внутри всплывающих подсказок, которые отображаются только по нажатию).

Вот пример из моего опыта. Я уже давно проверяю домашки студентов курса по UX-копирайтингу. В этом курсе все задания построены вокруг вымышленного приложения для владельцев собак. Одно из них заключается в создании пользовательского сценария по бронированию консультации с кинологом. Консультация должна быть оплачена заранее.

Фактически, деньги блокируются на банковской карте пользователя и списываются за три часа до консультации. Пользователь может бесплатно отменить встречу не позднее чем за три часа до ее начала. Большинство студентов добавляют эту информацию на экран оформления заказа в виде всплывающей подсказки: таким образом, если пользователь не нажмет на нее, он не увидит предупреждение о возможной потере средств.

В реальной ситуации компания получила бы множество негативных отзывов и распрощалась со своей репутацией. Даже если вы иногда прибегаете к темным паттернам, убедитесь, что вы можете позволить себе подобные риски.

Поэтому, создавая микротексты, затрагивающие деликатные темы:

• Будьте прозрачны и честны в отношении всех процессов и условий. Например, вы создаете финтех-сервис, который работает с другими поставщиками услуг. Транзакции предполагают уплату комиссий, но вы не знаете их точную сумму. Объясните пользователям, как рассчитываются комиссии, каков их примерный диапазон (если это возможно) и где можно получить более точную информацию.
• Убедите пользователей в том, что вы будете предельно осторожно обращаться с их данными. Объясните, зачем вам нужны эти данные, как вы будете их использовать, хранить, защищать от утечек и т.д.
• Если предполагаются какие-либо ограничения, расскажите, как их можно снять (если это возможно).

3. Подпись на кнопке должна точно отражать, что произойдет дальше

Это поможет:

• Сделать интерфейс предсказуемым и надежным;
• Предотвратить разочарование пользователей.

Подпись должна четко сообщать, что именно произойдет, когда пользователь нажмет на кнопку.

Стоит ли указывать здесь целевое действие, если на самом деле оно будет выполнено немного позже? Например, если продукт позволяет бронировать жилье на время отпуска или деловых поездок, на одном из экранов может появиться кнопка «Забронировать сейчас». Однако, нажав на нее, пользователь попадает на экран заказа, где ему нужно выбрать номер, заполнить личные данные и т.д., то есть жилье не будет забронировано немедленно. В таком случае лучше написать на кнопке «Показать номера», «Выбрать тариф» и т.д., чтобы она более точно отражала, что произойдет дальше.

Более того, такие формулировки, как «Купить сейчас» или «Забронировать сейчас», могут показаться слишком навязчивыми и даже отталкивающими (особенно когда речь идет о дорогостоящих товарах, на приобретение которых решиться сложнее), что иногда даже побуждает пользователей покинуть сайт или приложение. Важно, чтобы подписи создавали впечатление, что люди могут спокойно, не торопясь просматривать страницу, поэтому предпочтительнее дать им возможность сначала «Изучить», «Узнать больше», «Заказать звонок» или «Начать бесплатную пробную версию».

Если у вас есть опыт работы в маркетинге, вам, вероятно, захочется сделать подписи на кнопках максимально броскими и интригующими, чтобы повысить конверсию. Например, написать на кнопке для открытия брокерского счета в инвестиционном приложении «Стать инвестором». Хотя это может потешить эго пользователей, такой прием покажется некоторым из них претенциозным и дешевым. После открытия счета людям необходимо будет выполнить множество действий, чтобы реально стать инвесторами, что вызовет разочарование. Лучший вариант — просто «Открыть счет».

Не обещайте пользователям то, что вы не можете гарантировать или то, что не полностью зависит от вас. Например, если сценарий включает одноразовый пароль, лучше выбрать формулировку «Отправить код», а не «Получить код», поскольку компания не может гарантировать отсутствие перебоев в работе сети или других проблем, мешающих пользователю получить SMS или push-уведомление.

Наконец, не стоит использовать типовые кнопки «Да» или «Нет», поскольку они не дают четкого представления о том, что произойдет дальше. Пользователи могут неправильно понять сопровождающий текст или не заметить отрицание, что приведет к неожиданным последствиям. Например, если вы просите людей подтвердить действие — «Вы уверены, что хотите выйти из игры?», лучше написать на кнопках «Выйти» и «Остаться», а не просто «Да» и «Нет».

Совет: Если вам трудно придумать подпись для кнопки, это может быть признаком того, что экран плохо организован либо конкретному сценарию не хватает логики и последовательности. Например, перед пользователем стоит слишком много задач одновременно, поэтому у вас не получается свести их все к одному глаголу. Или последующий сценарий является слишком вариативным, что также затрудняет описание действия, которое должен предпринять пользователь.

В таких случаях попробуйте внести изменения в дизайн (например, разбить экран на несколько экранов) или в пользовательский сценарий (например, добавить предварительный уточняющий вопрос, чтобы он был менее многовариантным).

4. Объясните пользователю, почему ему необходимо выполнить действие

Это поможет:

• Обеспечить прозрачность и укрепить доверие;
• Повысить конверсию.‍

Идеальный интерфейс понятен сам по себе и не требует дополнительных пояснений. Однако иногда компаниям необходимо убедить пользователей выполнить то или иное действие — зачастую это связано с предоставлением личной информации или взаимодействием со сторонними продуктами.

Вы можете использовать следующую формулу: «Чтобы [получить это], сделайте [это] + UI-элемент». Например, «Чтобы получить результаты, укажите свой email», после чего следует поле ввода.

Сначала предоставьте обоснование («чтобы получить результаты»), а затем инструкции («укажите свой email»): так больше шансов, что этот призыв закрепится в памяти пользователя и плавно подведет его к действию. Если вы измените порядок — сначала дадите инструкции, а потом объясните целесообразность действий, — пользователь может забыть, что ему нужно сделать, и ему придется перечитывать текст с самого начала, что сделает опыт менее логичным и комфортным.

5. Микротексты не должны разъяснять, как взаимодействовать с UI-элементами

• Если вам нужно объяснять, как взаимодействовать с UI-элементами, возможно, ваш интерфейс не является интуитивно понятным;
• Так вы повышаете риск пропустить более важные и полезные детали.‍

Время от времени я натыкаюсь на бессмысленные плейсхолдеры и избыточные микротексты, объясняющие, как взаимодействовать с тем или иным элементом интерфейса. Самый распространенный пример — плейсхолдер «Поиск» в поле поиска. Иногда я вижу надписи на кнопках вроде «Нажмите, чтобы продолжить».

Мобильные и веб-интерфейсы существуют достаточно давно, и пользователи уже понимают, как взаимодействовать с кнопками, полями и другими UI-элементами. Поэтому пояснения типа «нажмите», «введите» и т.д., в большинстве случаев кажутся излишними. Только для группы чекбоксов приемлемо добавить инструкцию вроде «Выберите до 5 пунктов».

Может быть, вы захотите сделать свой микротекст еще более полезным. Например, указать в поле поиска конкретные категории товаров, которые могут заинтересовать пользователя. В интернет-магазине модной одежды это могут быть «худи оверсайз», «женские шорты» и т.д. Убедитесь в том, что подсказка получилась ни слишком расплывчатой, ни слишком специфичной, и она действительно поможет пользователю получить успешный результат.

6. Придерживайтесь правила: «1 микротекст = 1 идея»

Это поможет:

• Не создавать дополнительную когнитивную нагрузку или путаницу;
• Обеспечить плавный простой опыт.‍

Продолжительность концентрации внимания ограничена. Пользователи сканируют текст, не вчитываясь в каждое слово, и не способны обрабатывать несколько идей одновременно. Поэтому важно разбивать информацию на простые для восприятия фрагменты, а не пытаться, например, втиснуть все инструкции в одну всплывающую подсказку.

Золотое правило — предоставлять пользователям только ту информацию, которая необходима им на данном этапе для совершения конкретного действия или принятия решения.

Информация должна равномерно распределяться по экрану, не перегружая отдельные элементы дизайна большим количеством текста.

7. Будьте осторожны с заголовками типа «Готово», «Почти готово», «Внимание» и т. д.

Это поможет:

• Не раздражать пользователей;
• Сэкономить их время;
• Не злоупотреблять их вниманием;
• Не вызывать беспокойство.‍

Заголовки, набранные жирным шрифтом большого размера, мгновенно привлекают внимание. Иногда это вообще единственный текст, который пользователи читают. Заголовки лучше запоминаются, поэтому они должны быть понятными, даже без контекста.

Заголовки вроде «Кое-что еще» или «Почти готово» могут работать хорошо, если они соответствуют тону продукта и появляются в целостных, связных сценариях, которые не будут прерываться. Но не забывайте, что пользователи могут отвлечься.

Проведите быстрый тест: оставьте дизайн примерно на 20 минут, займитесь чем-нибудь другим, а затем откройте только тот экран, для которого вы пишете заголовок. Понятно ли из него, что происходит на этом экране? Легко ли вам вспомнить, что вы делали и что нужно делать дальше?

8. Избегайте абстрактных примеров

Это поможет:

• Сделать микротексты более точными и полезными;
• Упростить навигацию по продукту;
• Снизить когнитивную нагрузку.‍

Некоторые продукты (например, B2B или финансовые) предполагают множество правил и ограничений, которые необходимо разъяснить пользователям. Чтобы сделать их более понятными, выбирайте максимально реалистичные примеры (с конкретными цифрами, датами и т.д.), которые люди смогут соотнести со своими задачами.

Уточните у разработчиков, возможно ли получить конкретные данные по каждому пользователю и добавить переменные и условия, чтобы отображать наиболее релевантные микротексты. Например, вместо: «Вы можете пополнить депозит максимум на 1000$ в течение календарного месяца», вы можете написать: «До 31 января вы можете пополнить счет на 400$». Это сэкономит пользователю время и усилия — ему не придется самостоятельно вычислять дату окончания срока пополнения и оставшуюся сумму.‍

‍9. Старайтесь избегать отрицаний

Это поможет:

• Сократить когнитивную нагрузку;
• Предотвратить заминки и путаницу.‍

Когда мы используем отрицания, людям приходится выполнять дополнительную логическую операцию — сначала мысленно убрать отрицание, а затем попытаться уловить суть.

Например, когда в требованиях к логину указано «Не использовать специальные символы и пробелы», человек начинает гадать («Если это не разрешено, значит, разрешено обратное, а значит, я могу написать так...»). На то, чтобы выяснить, что понимается под «специальными символами», может уйти дополнительное время. Чтобы упростить задачу, лучше напишите «Используйте только цифры и буквы».

Пользователь может просто пропустить частицу «не» и неправильно понять ваше сообщение. Кроме того, отрицание часто выглядит как ограничение или запрет, а их никто не любит. Такие формулировки могут быть восприняты с подозрением.

10. Используйте глаголы вместо существительных

Это поможет:

• Избежать использования лишних слов;
• Сделать текст более простым для восприятия.‍

Выбирайте для описания действий глаголы, а не существительные. Последние затрудняют чтение и кажутся слишком формальными (например, эффективнее будет «Купить», а не «Совершить покупку», «Отменить», а не «Отмена» и т.д.).

11. Убедитесь, что вы используете только одно обозначение для каждой концепции

Это поможет не создавать излишнюю когнитивную нагрузку и путаницу.

Один и тот же объект должен иметь одинаковое обозначение на всех страницах или экранах. Например, вместо взаимозаменяемого использования терминов «аккаунт» и «профиль» выберите один и придерживайтесь его, чтобы не вводить пользователей в заблуждение.

Чем сложнее ваш продукт, тем важнее выбрать точную формулировку и обеспечить ее соответствие юридическим терминам, справочным материалам и ответам службы поддержки.‍

12. Откажитесь от формулировок вроде «Упс!» в сообщениях об ошибках

Это поможет:

• Снизить раздражение пользователей;
• Сэкономить место для более важной информации.

На первый взгляд, формулировки вроде «Упс!» или «Ой!» могут показаться неформальными и довольно милыми (хотя и с оттенком извинения), и, по идее, они должны снизить напряжение. Однако в случае с повторяющимися или серьезными ошибками эффект будет прямо противоположным.

Используйте «Упс» и другие подобные слова только в том случае, если вы уверены, что они соответствуют тону голоса вашего бренда и вы сможете мастерски вписать их в пользовательский сценарий.

Хорошие сообщения об ошибках объясняют, что произошло или происходит, почему (если причина известна) и что должен сделать пользователь. Кроме того, следует указывать в них любую важную информацию, связанную со сценарием, в котором возникла ошибка. Например, если ошибка возникла в процессе оплаты, объясните пользователям, что будет с их деньгами.

13. Откажитесь от чрезмерной вежливости

Это поможет сэкономить драгоценное место для более важной информации.

Я не предлагаю убрать все вежливые слова. Однако, когда мы работаем с интерфейсами, наша главная задача — четко и кратко донести до пользователей свое сообщение и объяснить им, что делать дальше и почему. Часто, если вы захотите начать свой микротекст с «пожалуйста», вам просто не хватит места, чтобы передать суть. Пользователи больше оценят четкие инструкции по выполнению желаемого действия, чем вежливое витиеватое сообщение.

14. Уберите технические термины

Это поможет:

• Сделать интерфейс понятным для широкой аудитории;
• Избежать путаницы и обеспечить беспрепятственный опыт.‍

Как специалисты в области технологий, мы зачастую испытываем «горе от ума» — несмотря на все наши усилия, технические термины время от времени все же прокрадываются в наши тексты. Это особенно опасно, если продукт ориентирован на широкую аудиторию, поскольку пользователи могут быть недостаточно подкованы, чтобы понять, о чем идет речь.

Быстрый и эффективный способ убедиться, что ваш интерфейс не перегружен профессиональным жаргоном, — показать его людям, которые не входят в продуктовую команду. Если это невозможно, попытайтесь сами отыскать в тексте термины, которые вы часто используете на рабочих встречах или в названиях задач в Jira (например, авторизация, аутентификация), а также специальные аббревиатуры (например, OTP, KYC, AML).

‍15. Убедитесь, что пустые состояния не оставляют пользователей в расстроенных чувствах

Это поможет:

• Улучшить онбординг и навигацию;
• Повысить доступность определенных функций;
• Стимулировать использование продукта;
• Снизить когнитивную нагрузку и беспокойство по поводу следующих шагов.

Текст на экране пустого состояния не должен просто констатировать «здесь ничего нет» — это и так очевидно. Мы должны предложить людям выход из ситуации, деликатно подтолкнув их к использованию продукта или конкретной функции. Продуманное пустое состояние может даже повысить конверсию.

Конечно, бывают исключения, например, в реактивных интерфейсах, таких как CRM-система для ресторана, отображающая статус заказов для работников. Если заказов в обработке нет, нет смысла мотивировать сотрудников к созданию новых заказов, потому что это зависит не от них.

16. Размещайте всю важную информацию в начале

Это поможет:

• Удержать внимание пользователей;
• Не перегружать их информацией;
• Избежать потери данных.‍

Как уже говорилось ранее, продолжительность концентрации внимания ограничена, поэтому пользователи зачастую не фокусируются на том, что они читают. Старайтесь размещать всю необходимую информацию в начале текста. Опустите вводные слова и оставьте менее важные детали на потом.

17. Заголовок и кнопки должны быть понятны без основного текста

Это поможет:

• Сделать интерфейс более простым для восприятия;
• Преодолеть эффект последовательного позиционирования;
• Убедиться, что интерфейс, сценарий и следующие шаги понятны пользователю,; даже если он сканирует, а не читает текст.

‍Эффект последовательного позиционирования заключается в том, что люди склонны запоминать информацию лучше, если она располагается в начале или в конце, и зачастую упускают из виду то, что находится посередине. В UX/UI-дизайне этот эффект усиливается визуальной иерархией (размер шрифта, главные и второстепенные кнопки и т.д.).

Более того, чем длиннее основной текст, тем выше риск того, что пользователи оставят его без внимания. Поскольку они, как правило, сканируют, а не читают, убедитесь, что ваш заголовок и кнопки остаются понятными даже без основного текста.

Заключение

Найти баланс между предоставлением пользователям всей необходимой информации, с одной стороны, и сохранением интуитивно понятного, комфортного UI, с другой стороны, — непростая задача.

Чтобы облегчить себе жизнь, вы можете прибегнуть к помощи ChatGPT и плагинов Figma на основе AI, таких как Writer или Grammarly. Но помните о том, что их возможности не безграничны! Иногда создание текстового запроса, включающего все необходимые детали и контекст, может занять больше времени, чем самостоятельное написание заголовка или подписи для кнопки.‍

Итоговый чеклист

Общее правило

✅ Воспринимайте текст в интерфейсе как ролевую игру (заголовки, основной текст, всплывающие подсказки и т.д. — это ваши «реплики»; подписи кнопок, поля ввода, переключатели, пункты меню и т.д. — это «реплики» пользователя).

Представление информации

✅ Пользователь получает именно тот объем информации, который ему необходим для выполнения действия в конкретный момент времени — ни больше ни меньше.
✅ Важная информация размещается в начале текста.
✅ Пользователю ясно, почему ему нужно выполнить действие.
✅ Вся информация, которая касается деликатных тем, всегда остается видимой, статичной и не требует от пользователя дополнительных манипуляций (например, не скрывается во всплывающих подсказках).
✅ Вы предоставляете пользователю конкретную информацию, а не общие примеры.
✅ 1 микротекст = 1 идея.
✅ 1 объект/концепция = 1 обозначение.
✅ Пустые состояния предоставляют пользователям рекомендации о том, что делать дальше (когда это возможно и уместно).

Стиль

✅ Никаких технических терминов.
✅ Никакой чрезмерной вежливости, особенно в ущерб смыслу.
✅ Сведите к минимуму использование отрицаний.
✅ Описывайте действия глаголами, а не существительными.

Синтаксис

✅ Микротексты не должны разъяснять, как взаимодействовать с UI-элементами.
✅ Подпись на кнопке точно отражает, что произойдет дальше.
✅ Меньше заголовков типа «Готово», «Почти готово» и «Внимание».
✅ Используйте «Упс!» в сообщениях об ошибках только в тех случаях, когда это согласуется с тоном голоса бренда.
✅ Заголовки и кнопки понятны без основного текста.