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

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

Полезные статьи и заметки о копирайтинге я собираю в группе VK. Присоединяйтесь!

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

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

Image for post
Image for post

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

Image for post
Image for post

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Полная коллекция материалов по UX-дизайну в UX Journal. Добавляйте в закладки 😉

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

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

Image for post
Image for post

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

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Понятно

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

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

Image for post
Image for post

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

Просто

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

Image for post
Image for post

Кратко

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

Image for post
Image for post

Точно

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

Image for post
Image for post

Однозначно

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

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

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

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

Image for post
Image for post

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

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

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

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

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

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

Image for post
Image for post

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

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

Структурно

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

Image for post
Image for post
Image for post
Image for post

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

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

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

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

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

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

3. Кнопки

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

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

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

Image for post
Image for post
Image for post
Image for post

5. Ошибки

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

Image for post
Image for post

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

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

Image for post
Image for post

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

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

Image for post
Image for post

8. Формы

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

Image for post
Image for post

9. Подсказки

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

Image for post
Image for post

10. Валидации

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

Image for post
Image for post

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

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

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

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

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

Image for post
Image for post

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

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

Image for post
Image for post

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

Image for post
Image for post

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

Мобильное приложение «Заметки о психике» | Mental Notes

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

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Скачать приложение в Appstore

Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн

Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!

Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!

Посмотреть каталог курсов →

Written by

Ольга Жолудова. Копирайтер и переводчик. Беру переводы на заказ, делаю круто) Обращайтесь в директ >> https://www.facebook.com/nancy.pong4

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store