Перед началом работы следует изучить примеры
Например, если перед вами стоит задача написать тексты для мобильного приложения сети кофеен, скачайте приложения существующих кофеен. Посмотрите, как они строят взаимодействие с пользователем. Возьмите на вооружение удачные приемы. Если вы пишете, например, тексты для ошибок или состояний формы при ошибочном заполнении полей, ищите примеры для этих элементов.
Если по работе вам часто приходится сталкиваться с написанием текстов для интерфейсов, вы начинающий UX-копирайтер или UX-дизайнер, который помимо проектирования занимается и проработкой текстового контента в интерфейсе, начните собирать подборку различных элементов интерфейса с удачными решениями в плане контента.
Хорошие примеры и разбор ошибочных решений вы можете встретить на каналах практикующих UX-редакторов: «Редач», «Плавучая редакция», «Текст в тесте», «Кнопкопись», в контент-гайдах и редполитиках: страница с подборкой от UX-редактора «Сбера» Александра Лалоша. Также подмечайте хорошие решения из сайтов и приложений, с которыми сталкиваетесь в повседневной жизни.
Текст должен быть кратким и понятным
Не нужно писать толстовские предложения, чтобы, например, сообщить об обычной системной ошибке. Четких ограничений по объему текста на странице нет, нужно исходить из задачи, которую он должен решить. Если это заголовок, желательно уместить его в одну, самый максимум — две строки. Дальше он не будет считываться, и пользователь может пропустить блок или покинуть страницу.
Могут возникать ситуации, когда всего не объяснишь в одном-двух предложениях. В этом случае мы можем разбить текст на абзацы, выделить особо важные моменты.
Здесь в одном коротком предложении указана проблема и обозначен способ ее решения
Текст должен быть «человечным»
В интерфейсе не должно быть сложных терминов, за которыми нужно обращаться к словарю или Google. Исключение составляют сайты на профессиональную тематику, где пользователь уже готов столкнуться с терминами, непонятными обывателю, но известными в кругу профессионалов — и ему в том числе. Если все же без терминов не обойтись, размещаем подсказки при наведении на новое для пользователя слово.
На странице в доступной форме рассказано, о чем курс
Например, в системе Grow Heads есть подсказки, написанные без использования сложных терминов. Они дают дополнительную информацию об инструменте или способах взаимодействия с системой. Это позволяет ускорить процесс адаптации новых пользователей.
Посмотрим на пример ниже. Дочитает первое предложение до конца и не запутается только подготовленный посетитель с юридическим образованием. Это неплохо для правового портала «Гарант», но для других сфер будет критично. Представьте, например, длинное описание в карточке товара. Вряд ли потенциальный покупатель дочитает его до конца, особенно если оно будет написано с использованием сложных терминов.
Любой текст на странице должен вести пользователя к целевому действию
Даже текст кнопки должен нести пользу для посетителя: помогать ориентироваться на сайте, объяснять следующий шаг. Пользователь должен понимать, что, кликнув по определенной кнопке, он перейдет к такому-то действию.
Например, в мобильном приложении «Додо Пиццы» при пустой корзине пользователю предложат перейти в меню. На этом же экране есть информация о минимальной сумме заказа для доставки. Это особенно полезно, когда человек рассчитывает на определенную сумму.
Текст должен появляться своевременно
Например, он может предупреждать о необходимости обновить приложение за несколько дней, а не выдавать уведомление, что текущая версия не поддерживается, по факту. Например, при оформлении подписки платформа Craftsy предупреждает о ее автопродлении и возможности отключения в любой момент с возмещением неиспользованной части подписки.
«Принимая членство, я соглашаюсь с тем, что моя подписка будет автоматически продлеваться ежегодно, пока я не приостановлю ее. В любое время я могу отменить свое членство и получить возмещение за неиспользованные месяцы или отказаться от автоматического продления, связавшись со службой поддержки по телефону 1 (888) 891-7203 или crafty@program-director.net. Нажимая “Завершить заказ”, я соглашаюсь с тем, что с предоставленной мной карты будет ежегодно взиматься плата по текущему тарифу».
Здесь здорово, что предупредили, но не хватает акцента. В спешке пользователь может не заметить и по окончании периода подписки могут возникнуть проблемы. Можно еще добавить информацию, до какой даты включительно действует подписка, чтобы было понятно, когда произойдет следующее списание.
Следует придерживаться единообразия
Старайтесь придерживаться единой системы терминов и не вводить новые для обозначения одних и тех же слов. Например, если в интерфейсе уже встречалось слово «абзац», а далее на другой странице пользователь увидит «параграф» — это может его запутать.
Например, у «Сбера» во всех блоках для получения подробной информации размещена кнопка «Подробнее». Заметьте, ни в одном из них не написано «Узнать больше», «Еще». Хотя эти слова тоже близки по смыслу. Здесь, как и в дизайне, работает применение уже используемых элементов — мы создаем единый стиль с помощью знакомых пользователю.
Наиболее частые ошибки в интерфейсных текстах
Бесполезный и неясный текст
С этой проблемой сталкивается любой пользователь при появлении системных ошибок. В примере справа: «Ошибка входа. Вы не можете войти в приложение. Попробуйте еще раз» — система говорит о том, что вы не можете войти в приложение. Из контекста непонятно, почему отказано во входе.
В левом же примере: «Ошибка входа. Ваши имя и пароль не совпадают. Попробуйте еще раз» — указана сама причина ошибки. Кнопка «Попробуйте еще раз» является логическим продолжением истории — понятно, что в следующий раз нужно будет внимательнее вводить имя и пароль. Этот вариант лучше, ведь мы даем пользователю понимание, что пошло не так, и как исправить ситуацию.
UXworld
Слишком много текста
Частая ошибка в различных текстовых блоках. Это могут быть карточки товаров, тексты ошибок или подсказок, тексты в форме регистрации.
Рассмотрим пример. При регистрации на сайте «Холодильник.ру» пользователю предлагают ознакомиться с длинным юридическим текстом, прежде чем нажать кнопку. Как правило, такой текст не читается, занимает много места (особенно на мобильных устройствах). В данном случае можно сократить текст и оставить ссылку на документ.
Теперь рассмотрим скрин с сайта интернет-магазина «Онлайн Трейд». Здесь дается пояснение буквально в одном предложении. Для получения подробностей пользователь по-прежнему может перейти по ссылке.
Отсутствие альтернативы
Ошибка часто встречается в интернет-магазинах, когда пользователь находит товар, которого в данный момент нет в наличии. В этом случае он часто видит неутешительный статус и единственную кнопку «Сообщить о поступлении».
В этом случае было бы здорово увидеть информацию о том, что у отсутствующего товара есть аналог, который сейчас доступен к заказу в магазине. Конечно, если пользователь ищет конкретную модель, он либо воспользуется этой кнопкой (при условии, что время ожидания его устроит), либо перейдет на сайт другого магазина.
Дополнительный сценарий с возможностью просмотреть аналоги окажется полезным как пользователю, который выбирает товар по характеристикам, а не конкретно модели, так и бизнесу: он не может продать один товар из-за его отсутствия на складе, зато появляется возможность реализовать аналог.
«Техпорт»
И совсем другой пример решения проблемы с отсутствующим товаром — предложение аналогов на странице товара. При клике по кнопке «Посмотреть популярные аналоги» посетитель перейдет к блоку с аналогичными товарами, которые есть в наличии.
«М.Видео»
Похожий текст для разных действий
Эта ошибка часто встречается в окнах подтверждения на десктопных и мобильных приложениях. Яркий пример — знакомое всем окно при закрытии нового документа в Word. Оно содержит сразу три кнопки, из которых понятна только одна — «Сохранить». Чтобы понять разницу между «Не сохранять» и «Отмена», потребуется время.
В Adobe Photoshop похожая ситуация, также три кнопки. Но вопрос сформулирован более конкретно: в нем напоминаем, что произойдет выход из программы. В этом контексте достаточно односложных ответов: «Да» — документ будет сохранен, «Нет» — изменения не сохранятся, «Отмена» — отмена выхода из документа.
И теперь рассмотрим пример хорошего решения (AVG). Здесь кнопки две, но это не критично, важно понять сам подход к оформлению всех элементов окна независимо от их количества. Рассмотрим окно подтверждения удаления программы. Здесь мы видим четкий заголовок, понятный текст (в описании дается пояснение, что произойдет при подтверждении действия) и кнопки, которые содержат в себе информацию о действии.
«Удалить AVG PC TuneUp? Это полностью удалит AVG PC TuneUp с вашего компьютера. Нет, оставить / Да, удалить»
На основе примеров мы теперь можем составить алгоритм действий при написании текста для похожих окон:
-
Обозначить действие в заголовке («Удалить AVG PC TuneUp?»).
-
Объяснить, что произойдет в результате («Это полностью удалит AVG PC TuneUp с вашего компьютера»).
-
Дать однозначные названия кнопкам, чтобы не возникло путаницы («Нет, оставить» / «Да, удалить»).
Как получить максимум
1. Поищите различные примеры текстов в интерфейсах.
2. Начните собирать подборку различных элементов интерфейса с удачными решениями в плане контента.
3. Обращайтесь к общим рекомендациям. Пусть ваш текст будет:
-
кратким — не усложняем, по возможности сокращаем, убираем лишнее;
-
человечным — меньше сложных терминов, если только не пишете текст для специализированного ресурса;
-
полезным — текст должен помогать пользователю решать его задачи и продвигаться по основным сценариям;
-
актуальным и своевременным — пользователь должен получать любую важную информацию заранее. Например, о скорых обновлениях системы, об автоплатежах, которые нужно отключать вручную и т.д.;
-
единообразным — открывая разные страницы одного сайта/приложения, посетитель должен понимать, что он все еще находится в этой же системе. Диалог между пользователем и системой должен строиться в едином ключе. Если вы выбрали официальный и дружественный тон, старайтесь придерживаться его на всех экранах.
