Тексты для интерфейса: как пишут контент в «Тинькофф Бизнес»

Вы читаете конспект выступления Анны Кочетковой, редактора интерфейсов «Тинькофф Бизнес», на онлайн-конференции UX Марафон.

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

Пока интерфейс предельно простой, пользователь интуитивно понимает, что делать: нажать на яркую желтую кнопку. Но как только интерфейс становится сложнее, сразу возникают вопросы:

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

Например, вот дизайнер в Тинькофф Бизнес создал красивый, легкий интерфейс с тарифами:

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

Чтобы этого избежать продумывайте контент сразу при проектировании.Можно сразу подключать копирайтера к процессу работы (кстати, подробнее про это в конспекте доклада Алексея Бородкина с того же UX Марафона).

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

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

В 1997 году Якоб Нильсен тестировал читаемость текста на экране.

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

В первой версии эксперимента текст сократили без потери смысла: убрали лишние подробности и цифры. Читаемость выросла на 58%

В новой версии, текст остался без изменений, но список достопримечательности оформили в столбик. Читаемость выросла на 47%

Еще одна версия — сложные слова заменили на более простые. Читаемость повысилась она 27%

А в комбинации все эти техники подняли читаемость в 2,2 раза:

Использовать язык, знакомый аудитории. Например, есть такое когнитивное искажение — проклятие знания: мы думаем, что люди знают все, что знаем мы.

Чтобы, проверить, какие формулировки «заходят» непрофессионалам, можно поисследовать запросы в Wordstat на вашу тему.

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

Если что-то можно сократить без потери смысла, сокращаем.

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

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

При составлении текстов важно учитывать как особенности аудитории, так и образ вашего бренда:

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

А вот Slack, например, используют более неформальный тон. Да, Slack тоже для бизнеса, но в Slack общаются молодые команды айтишников, а они довольно неформально общаются внутри коллектива:

Бывают такие формы, в которых правила заполнения перечислены в начале, а далее идет сама форма без пояснений.

В Тинькофф Бизнес ребята стараются давать пояснения по мере необходимости:

Важно учитывать контекст пользователя и писать тексты для его мира.

Например, на скриншоте есть вкладка «в обработке», которую ребята сейчас переименовали на «в обработке банком»: очевидно, клиенты не понимали просто фразу «в обработке» — нужно ли мне самому тут все обработать, или это задача банка?

Еще пример: раньше, отправив платеж, пользователь видел такое сообщение:

Здесь мы видим лишние (для пользователя) детали о номере платежа и минимум актуальной информации — кажется, что платеж совершен, но он лишь отправлен на заявку.

Сейчас в окне появилось пояснение — платежи лишь только добавлены в очередь, но скоро исполнятся (точное время исполнения платежей указать, к сожалению, невозможно).

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

Если больших инструкций не избежать, важно структурировать информацию

Тексты в интерфейсе — это реплики банка, а кнопки, компоненты выбора и чекбоксы — реплики клиента.

Заголовок страницы — это подлежащее, главное действующее лицо. Кнопка, CTA в конце страницы — это сказуемое, то что нужно сделать с подлежащим. Все, что между этими элементами — это другие члены предложения, которые также описывают подлежащее.

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

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

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

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

Не нужно говорить «здесь пока ничего нет». Пустой экран — отличный способ погрузить пользователя в использование приложения. Можно предложить пользователю сделать первые шаги и дать инструкции.

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

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

Не просто проговаривать правила заполнения полей, но давать ценные советы.

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

— зарплатный проект и его составляющие (в верхней строке)

— физические лица и данные по ним.

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

Когда редактор подключается к работе, когда дизайн уже готов, это сильно усложняет и удлиняет работу.

Поэтому правильный подход — иметь редактора в проектной команде, чтобы он работал над интерфейсом совместно с дизайнером.

Если вам понравился конспект, нажмите стрелочку вверх) Оригинал конспекта вышел в моем блоге на Medium. А еще мне можно заказать конспект, перевод или статью.