Привет, Хабр! На связи UX-редакция ecom.tech. Наша команда занимается созданием текстов для интерфейса Самоката. Мы помогаем поддерживать голос бренда, делаем приложение и сайт удобным для пользователя. В этой статье расскажем, как сделать сайт понятным, писать просто о сложном и не раздражать пользователей текстами. Рассказываем всё на примере сайта Самоката.
Текст как голос продукта
Текст — важный элемент интерфейса. Без хорошего текста сложно понять, куда ведёт кнопка или что происходит на экране. А плохой текст может создать ложные ожидания. Вот классические примеры, когда текст не проработан и интерфейс вводит пользователя в ступор:
Текст — не только функция, но и ̶в̶а̶й̶б̶ голос продукта. То, как сервис говорит с пользователем, влияет на восприятие и узнаваемость наравне с визуалом.
У текстов в интерфейсах есть лучший друг — UX-редактор (или продуктовый редактор). Это человек в команде, который пишет и редактирует текст для сайтов и мобильных приложений. Это довольно новая профессия. Раньше тексты могли писать дизайнеры, менеджеры и разработчики. Это популярная схема, и некоторые компании до сих пор живут в такой парадигме: зачем что-то менять и вводить дополнительную роль в команде, если всё неплохо работает? Но постепенно ситуация меняется.
В этой статье расскажем о принципах хорошего текста в интерфейсах — так, как это видится глазами UX-редактора.
Что делает UX-редактор в ecom.tech
Следит за текстами и пользовательским опытом
Редактор, дизайнер и исследователь у нас работают сообща. Продуктовый редактор с помощью текста проводит пользователя за руку — от выбора товаров до оплаты заказа, предвосхищая и нивелируя все сложности. А если они всё же случились (увы, и такое бывает), текст понятно объясняет, что случилось и что с этим можно сделать.
Подключается в начале работы над дизайном
Участвовать, начиная с этапа обсуждения будущего интерфейса и формирования гипотез — идеально. Тогда редакторы могут подсвечивать нюансы до того, как дизайн уже будет готов.
Помогает пользователю быстрее решить задачу
Внимание пользователей бывает сложно удержать. Поэтому пишем прозрачно — так, чтобы сразу было понятно, что мы имели в виду или что произойдёт при клике на кнопку.
Поддерживает голос продукта
Стараемся делать так, чтобы tone of voice был узнаваем в разных уголках интерфейса.
Когда корзина ещё не собрана:
На экранах прогресса или ожидания:
Референсы: UX Самоката
Посмотрите несколько примеров — они иллюстрируют, как наши правила для хорошего текста работают на практике.
Пример №1. Отписаться от рассылки
Бизнесу важно сохранять базу имейлов, чтобы отправлять разные полезные письма (об акциях, розыгрышах и другие). При этом мы понимаем, что пользователи могут сами решать, какая информация им нужна. Мы не хотим быть сервисом, который давит на жалость или манипулирует. Поэтому у нас всего один экран с коротким текстом о пользе рассылки. На экране успеха напоминаем, что всегда можно подписаться обратно.
Как мы делаем:
Так мы не делаем:
Пример №2. Просьба пройти опрос
Нам важно проводить опросы и исследования, чтобы делать фичи удобнее. При этом уважаем время пользователя. На этом экране сразу сообщаем, что опрос займёт несколько минут. Так пользователи смогут решить, готовы ли они потратить своё время. И, конечно, даём возможность отказаться от участия.
Как мы делаем:
Так мы не делаем:
Пример №3. Акции больше нет
Ошибка — это неприятно. В такой ситуации у UX-редактора есть два пути. Можно сказать расплывчатое «Ой, что-то случилось» и оставить пользователя наедине с проблемой. А можно прозрачно написать, что произошло и что пользователь может сделать: повторить попытку, зайти позже или обновить приложение. Мы выбираем второе. Объясняем, что случилось с акцией, и предлагаем альтернативное действие — перейти на главную.
Как мы делаем:
Так мы не делаем:
Пример №4. Авторизация
Кнопки должны быть понятными, чтобы пользователь не размышлял, куда он по ним попадёт. Иногда пишем и что-то разговорное, если уверены, что это никого не запутает.
Как мы делаем:
Так мы не делаем:
Пример №5. Даркстор не работает
Зайти в Самокат и узнать, что сейчас нерабочие часы даркстора и товары не доставляют, может быть грустно и неприятно. Чтобы не оставлять пользователя ни с чем, предлагаем ему сделать хотя бы половину дела — собрать корзину.
Как мы делаем:
Так мы не делаем:
Пример №6. Пустое состояние
В корзине у нас есть раздел Промокод или скидка. Там пользователь может просматривать скидки и применять одну из них к заказу. Но бывает, что акций нет. В таком сценарии не хотим создавать впечатление, что раздел сломался, поэтому сообщаем, что пока скидок нет.
Как мы делаем:
Так мы не делаем:
Пример №7. Выбрать адрес
Важно не только навигировать пользователя, но и объяснять, зачем ему нужно совершить тот или иной шаг. Например, мы просим указать адрес, потому что только так сможем показать доступные к заказу товары. Возможно, это очевидно, но подсветить не будет лишним.
Как мы делаем:
Так мы не делаем:
За одним заказом стоит целая команда
Текст — такой же элемент интерфейса. UX-редакторы не только складывают буквы в слова, но и помогают пользователям быстро решить задачу, например — заказать обед, настроить адрес или оставить чаевые. Наши принципы помогают создавать логичные, выверенные и понятные формулировки, избегать двусмысленности и неуместности. А ещё — делать так, чтобы пользователям захотелось к нам вернуться.