Skvot

Mag

Skvot              Mag Skvot Mag
Курсы по теме:

Как написать хороший UX-текст

Основные правила и рекомендации.
card-photo
card-photo
Настя Прудкая

Автор в 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 ноября. Придется вернуться на главный экран телефона и узнать, какое сегодня число.

Следить за регистром — использовать один стиль для набора заголовков и других предложений.

Есть три варианта:

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


Главное — выбрать один из них и придерживаться на всей веб-странице и на всех окнах приложения.


Примеры использования разного регистра в уведомлениях на iOS и Android. Источник: medium.com

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

Например, G-Bar (слева) использует в приложении тот же тон оф войс и те же названия услуг, что и в главном канале коммуникации — инстаграме. А салон Backstage (справа) в меню услуг и цен выдает полотно информации, которую клиент вряд ли станет читать.

Чек-лист хорошего UX-текста

БЕСШОВНОСТЬ. Текст должен вести пользователя по интерфейсу ненавязчиво и незаметно. Как монтаж в кино дает плавную последовательную картину, так хороший UX-текст не заставляет тратить лишнее время на чтение и понимание.

СТЕРЕОТИПНОСТЬ. Важно интегрировать свой тон оф войс в привычную картину мира пользователя. Для этого пользуйся шаблонами восприятия — тут это полезно.

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

ЗАБОТА. Не давай пользователю расстраиваться из-за неправильно введенного пароля или несуществующей страницы. Вместо этого предложи решение и/или обыграй ситуацию шуткой.

ПРОСТОТА. Красивые слова лучше заменить на базовые и точные. Чтобы проверить себя, подумай, поймет ли текст шестилетний ребенок.

Поделиться материалом
РАССЫЛКА SKVOT

Раз в две недели мы отправляем новые публикации и анонсы курсов на почту