Как написать хороший UX-текст
SKVOT
Приложений и сайтов все больше, а мы взаимодействуем с ними все чаще. И выбираем те, которые легко использовать. На удобство влияет не только дизайн интерфейсов, но и тексты в них. Четкая vs путаная надпись, лаконичный гайд vs вязкие объяснения на три экрана — понятно, кто победит.
В таких условиях UX-райтинг набирает вес и становится важной частью разработки. В конце 2018 разработчики и дизайнеры называли его одним из топовых трендов в UX-дизайне на 2019 год. И все сбылось. UX-райтеры уже входят в основной состав команд разработчиков в Facebook, Google, Microsoft и Amazon.
Разберемся, что такое UX-тексты, какими они должны быть, как их улучшить и когда легко зафейлить.
______________________
Что такое UX-текст
UX-текст — весь текст, с которым пользователь сталкивается при навигации по сайту/приложению/программе. Это небольшие ярлыки, CTA-кнопки и значки, слоганы, сообщения об ошибках, пуши, подсказки и руководства.
Задача UX-текстов — помочь пользователю дойти до цели и направить, предупредить или подбодрить его на этом пути. «Ура! Вы достигли своей цели подвижности» на Apple Watch — это оно. Сообщение о новых фишках при обновлении приложения monobank — тоже.
UX-текст — часть и дизайна, и пользовательского опыта. Поэтому ему важно быть:
ПОНЯТНЫМ — четким и простым для быстрого считывания
КОРОТКИМ — без лишних слов и в пределах границ своей области
ПОЛЕЗНЫМ — информативным и отвечающим на вопрос пользователя
РАВНОМЕРНЫМ — с единой терминологией и стилем во всем интерфейсе
Тексты в UI/UX дизайне часто называют «копи» по аналогии с рекламой, а самих UX-райтеров – копирайтерами. Часто маркетинговый и UX-текст в компании пишет один и тот же человек, поэтому термины используют как синонимы. Но UX-райтинг — не копирайтинг.
Копирайтеру важно придумать идею и обернуть ее в слова, которые зацепят целевую аудиторию. Задача UX-райтера — упростить взаимодействие пользователей с продуктом.
UX-тексты поддерживают продукт и помогают получать максимум от работы с интерфейсом. Копирайтинг — часть рекламы и маркетинга. Его задача — привлекать потенциальных клиентов или удерживать существующих.
У UX-райтинга и копирайтинга разные цели, а значит, авторы должны обладать разным набором навыков. В распоряжении UX-райтера меньше места и букв, но он с самого начала участвует в проектировании.
Авторы UX-текстов работают в связке с UX-дизайнерами для понимания потребностей и болевых точек целевой аудитории. Чтобы написать полезную и связную микрокопи, им нужно думать, как дизайнеры, понимать динамику и структуру пользовательских интерфейсов.
Еще UX-райтеру полезно наблюдать за людьми и прислушиваться к ним — чтобы тонко понимать их поведение. Так получится подталкивать их к нужному действию правильными словами в продукте.
Виды UX-текстов
UX-тексты бывают информационными и интерактивными. Информационные рассказывают пользователю о чем-то, а интерактивные помогают перемещаться по сайту или приложению.
Информационные UX-тексты — это:
ЗАГОЛОВКИ
Доставляют и подчеркивают ключевое сообщение страницы. Заголовки в UX, как и везде, должны быть броскими и внятными, чтобы привлечь внимание и проинформировать.
ПОДЗАГОЛОВКИ
Короткие и емкие фразы или предложения, по которым пользователь может пробежать глазами и понять главное в каждом разделе текста. Чтобы текст был читабельным, заголовки и подзаголовки набирают шрифтом крупнее и жирнее основного.
ТЕЛО ТЕКСТА
Описание продукта или дополнительная информация в компактном блоке под заголовком. Размер основного текста варьируется в зависимости от платформы, цели и аудитории, на которую рассчитан.
Вот как выглядит заголовок, подзаголовок и основной текст на главной странице сайта PR-агентства PublicKitchen:
Текст для веб-страницы может быть объемнее, когда рассказывает о новом продукте или его функциях. А вот интерфейс мобильного приложения лучше не перегружать.
Интерактивные UX-тексты — это:
МЕНЮ
Базовый компонент навигации любого интерфейса. Обычно это кнопки с одним-двумя словами для каждого действия или раздела. Например, как в анимированном меню на сайте диджитал-агентства Clock Creative Lab:
ФОРМА РЕГИСТРАЦИИ
Информация, которая нужна от пользователя. Важно, чтобы было несколько ключевых полей, и они не дублировали друг друга.
Чаще всего для регистрации хватает имени, фамилии и номера телефона. Куча строк для даты рождения, имейла, отчества, пола и прочих необязательных данных только отпугнет.
Вот формы регистрации дизайн-студий. Справа azari-architects.com — много ненужных строк, слева — mahno.com.ua, там три строки для основных данных:
РУКОВОДСТВО ПО ИСПОЛЬЗОВАНИЮ
Кратко и четко описывает преимущества продукта. Состоит только из ключевых или неочевидных, но полезных советов.
СТА-КНОПКИ
Призыв к действию минимальным количеством слов вроде «Добавить в корзину», «Оплатить», «Повторить заказ». Четкие и прямые инструкции дальнейших действий.
СТА должен выделяться, поэтому чаще всего это микрокопи на контрастном фоне. Вот простые и понятные кнопки для заказа воды в интернет-магазине: «В корзину», «Быстрый заказ», «Акции» на mywatershop.ua:
УВЕДОМЛЕНИЯ
Короткие сообщения, которые призывают вернуться в продукт, напоминают об обновлении или сообщают новости.
Уведомления не должны раздражать или выбиваться из tone of voice. И обязательно быть лаконичными. Команда сервиса отложенного постинга Buffer выяснила, что текст на 25 символов и меньше работает лучше, чем длинный.
ОШИБКИ
Короткая текстовая подсказка, что делать, когда что-то идет не так. Сообщение об ошибке должно быть четким и прикладным, а еще дружелюбным и успокаивающим.
Можно попробовать разрядить обстановку шуткой, если нет сомнений, что ее считают. Вот забавная страница ошибки 404 на waaffle.com:
ПОДСКАЗКИ (всплывающие сообщения)
Метки с текстовыми сообщениями, которые появляются при перемещении курсора.
Подсказки должны быть ценными, а не отвлекающими и информационно перегруженными. Если текст объемный и его нельзя сократить, лучше разделить на два сообщения на разных метках.
ПОДПИСИ (титры)
Короткий текст с описанием изображения.
На веб-странице надписи часто набирают мелким шрифтом и выделяют курсивом. В мобильных интерфейсах размер надписи зависит от величины изображения.
Кроме того, важно, чтобы подпись не просто описывала картинку, а несла информационную ценность. Вот так выглядят титры тренировок на сайте спортклуба smartass:
ПРОДУКТОВЫЕ ИМЕЙЛЫ
Напоминают завершить регистрацию на сайте, победить соперника в игре или купить в магазине то, что завалялось в корзине.
Когда фейсбук присылает письмо, что с твоей учетной записи выполнен вход с нового устройства, — это тоже автоматический продуктовый имейл. Он должен быть простым и информативным, чтобы пользователь еще по теме понял, открывать ему письмо или сразу отправить в корзину.
Как готовить UX-текст
UX-текст — часть интерфейса, значит, он должен интегрироваться в него правильно и легко считываться пользователем. Для этого нужно:
Внедрять реальный текст уже на первых этапах разработки.
Дизайнеры часто используют универсальный текст-«рыбу», пока работают над интерфейсом. И обычно у него нет ничего общего с настоящим копи. На выходе реальный текст может не лечь, и дизайн придется переделывать или текст переписывать.
Чтобы избежать двойной работы, райтеру важно участвовать в разработке с самого начала.
Структурировать текст так, чтобы пользователь пробежался по нему глазами и уловил смысл. Это относится к заголовкам, подзаголовкам и основному тексту, которые должны быть разного размера и сочетаться с картинкой на экране, если она есть.
Вот как выглядит информация о продукте в приложении ASOS (слева) и описание товара у Rozetka (справа). Первый пример структурированный и с юмором, второй — неинформативный и сплошным текстом:
Сокращать до скрипа — избегать сложносочиненных конструкций, писать короткими предложениями и уменьшать количество знаков препинания. Небольшой текст пуша или сообщение об ошибке может обойтись без точек, маркированных списков и двоеточий.
Например, описание одной из услуг на сайте luxoptica.ua. Все важное написано короткими простыми фразами и уместилось в двух предложениях:
Цеплять внимание цифрами и метками. Если в тексте есть число, главное — написать его цифрами, а не словами. Это экономит место и привлекает внимание.
В тексте читатель в первую очередь обращает внимание на цифры, потому что мозг воспринимает их как серьезную информацию. Можно их акцентировать и вынести в отдельное поле — но важно не переборщить.
Значимые смысловые точки в тексте можно выделять жирным шрифтом и маркером. Пример правильного акцентирования — у Booking. На странице личного профиля в приложении важные числа написаны цифрами, а важный текст выделен цветом:
Но важно помнить: чем больше такого «важного» будет, тем меньше внимания достанется каждому фрагменту.
Говорить в настоящем времени. В рекламных и информационных текстах копирайтеры используют конкретные даты, чтобы клиент четко воспринимал информацию. В UX-тексте лучше писать сегодня/завтра/вчера, потому что пользователь взаимодействует с продуктом здесь и сейчас, и дата его только запутает.
В приложении онлайн-ритейлер Rozetka (слева) сообщает, сколько осталось до Черной пятницы, а значит, можно набросать товаров в вишлист, вернуться за ними через два дня — и купить по скидке. А приложение заправок WOG (справа) предлагает акционные товары и говорит, что купить их можно до 30 ноября. Придется вернуться на главный экран телефона и узнать, какое сегодня число.
Следить за регистром — использовать один стиль для набора заголовков и других предложений.
Есть три варианта:
— весь текст напечатан капсом
— каждое новое слово с заглавной буквы (актуально для текстов латиницей)
— все буквы строчные, кроме первой буквы в предложении, именах и названиях
Главное — выбрать один из них и придерживаться на всей веб-странице и на всех окнах приложения.
Говорить просто — выбирать базовые и нейтральные фразы, если хочется быть понятным всем, говорить на языке своего бренда. Избегать тяжелых речевых конструкций — для ясности и экономии места.
Например, G-Bar (слева) использует в приложении тот же тон оф войс и те же названия услуг, что и в главном канале коммуникации — инстаграме. А салон Backstage (справа) в меню услуг и цен выдает полотно информации, которую клиент вряд ли станет читать.
Чек-лист хорошего UX-текста
БЕСШОВНОСТЬ. Текст должен вести пользователя по интерфейсу ненавязчиво и незаметно. Как монтаж в кино дает плавную последовательную картину, так хороший UX-текст не заставляет тратить лишнее время на чтение и понимание.
СТЕРЕОТИПНОСТЬ. Важно интегрировать свой тон оф войс в привычную картину мира пользователя. Для этого пользуйся шаблонами восприятия — тут это полезно.
Хорошие интерфейсы построены на стандартных визуальных структурах, чтобы юзеру не приходилось задумываться над действиями. То же относится к UX-текстам. Есть универсальные слова-триггеры, которые люди сразу считывают и чувствуют себя «как дома».
ЗАБОТА. Не давай пользователю расстраиваться из-за неправильно введенного пароля или несуществующей страницы. Вместо этого предложи решение и/или обыграй ситуацию шуткой.
ПРОСТОТА. Красивые слова лучше заменить на базовые и точные. Чтобы проверить себя, подумай, поймет ли текст шестилетний ребенок.
[как создавать достойные продукты с эмпатией к пользователю]