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

Вы читаете конспект выступления Анны Кочетковой, редактора интерфейсов Тинькофф Бизнес, на онлайн-конференции UX Марафон. Запись Марафона можно приобрести здесь.
Полезные статьи и заметки о копирайтинге я собираю в группе VK. Присоединяйтесь!

Интерфейс, понятный без слов

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

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

Продумывайте контент при проектировании

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

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

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

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

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

Хороший текст в интерфейсе:

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

Интерфейс не читают, а сканируют: Эксперимент Нильсена

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

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

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

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

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

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

Как писать в интерфейсе:

Понятно

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

В банке всем известно, что такое счет, счет-фактура и КЭП. Но пользователю постоянно нужно напоминать чем счет отличается от счета-фактуры и что КЭП — это квалифицированная электронная подпись. Поэтому в Тинькофф принято раскрывать все непонятные понятия при первом знакомстве.

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


Просто

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


Кратко

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


Точно

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


Однозначно

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

Не стоит называть одну и ту же сущность разными словами.

От имени продукта и бренда

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

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

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

Хммм, кажется файл не загрузился. Попробовать снова?

Своевременно

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

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


О пользователе

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

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

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

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

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

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


Структурно

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

Несколько советов по текстам в элементах интерфейса:

1. Интерфейс — это диалог

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

2. Страница — это предложение

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

Подлежащее — рублевый платеж; сказуемое — отправить.

3. Кнопки

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

4. Деструктивные действия

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

5. Ошибки

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

6. Подтверждения

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

7. Пустые экраны

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

8. Формы

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

9. Подсказки

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

10. Валидации

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

11. Меню и статусы

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

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

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

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

Как организовать работу дизайнера и редактора:

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

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


Полезные статьи и заметки о копирайтинге я собираю в группе VK: https://vk.com/copywriter.blog. Присоединяйтесь!