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

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

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

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

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

Любите красивые и полезные ресурсы про дизайн? Загляните в UX Journal 😉

Чтобы не пропускать новые конспекты и подборки, вступайте в группу на Facebook

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

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

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

Вот только он не учел, что у пакетов и тарифов достаточно большие описания. Пакеты на этой странице стоят порядка 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 меню в рамках одной страницы:

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

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

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

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

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

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

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

0
11 комментариев
Написать комментарий...
Константин Панфилов

Спасибо, хорошая тема.

Ответить
Развернуть ветку
Флинн Райдер
Ответить
Развернуть ветку
Кинес Кизиитов

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

Ответить
Развернуть ветку
FEARka

Очень крутая статья, редко можно увидеть конкретные советы по интерфейсу. Идея редактор+дизайнер - топ, будем пробовать. Спасибо, пишите еще!

Ответить
Развернуть ветку
Galhina Kalhugaena

Между этими текстами вообще никакой разницы: и там, и там не понятно, какой именно информации не хватает, и что делать.

Если процесс заканчивается тупиком, то не очень важно, каким образом вам об этом сообщили: итог один — вы не можете получить желаемое. Если бы мы реально «говорили» с живым человеком, то текст звучал бы скорее «Здесь ещё нужно код подразделения со второй страницы паспорта указать. Вот тут, видите».

Ответить
Развернуть ветку
Максим Мостовой

Экран с тарифами-пакетами сложный. Подключённый пакет нужно выделить свитчером. Потраченную сумму рядом с оставшейся - сейчас все в разных углах и это сложно.

И так далее. С удивлением в своё время обнаружил такое количество спорных решений в Тинькофф бизнес

Ответить
Развернуть ветку
Alex Ayer

Текст очень годный! В некоторых компаниях есть вообще отдельная когорта UX-писателей, которые как раз следят за выше описанными случаями. В обязанности простого UI-дизайнера включать копирайтинг неправильно: сколько слежу за этим, люди едва ли могут собственные мысли-то донести, не говоря уже о направлении пользователей в правильное русло ...

P.S. Почему мне кажется, что вместо скриншотов здесь фотографии экрана?

Ответить
Развернуть ветку
Ольга Жолудова
Автор

Спасибо за комментарий и извините за качество! Это скрины, но делала их с записи трансляции онлайн-марафона, видимо было не очень хорошее качество передачи. 

Ответить
Развернуть ветку
Arkady Zaytsev

Очень интересно. Как клиент ТБ,  хочу отметить, что было бы здорово,  если бы важные письма появлялись на всех Вкладках. Так,  первое требование из налоговой пришло 18 июля (недоплата налога),  это было на вкладке Бухгалтерия,  но я заглядывал туда редко,  в основном работаю с вкладкой Счета и платежи. Пришло Предупреждение,  его тоже не видел,  в итоге 10 сентября ФНС заблокировал счет. А первое смс пришло только 9 сентября. По мне,  так должно было появиться красное всплывающее окно. Ведь это из ФНС!  но,  в целом,  все хорошо!  Попробую применить некоторые моменты. 

Ответить
Развернуть ветку
Ольга Жолудова
Автор

Была та же ситуация в Тиньков-Бизнесе, согласна

Ответить
Развернуть ветку
Тинькофф

Если отправите нам в личные сообщения ИНН, то проверим ситуацию в целом и донесем до ответственных пожелание) 
Возможно, что уже есть какие-то доработки или альтернативные решения на этот счет. 

Ответить
Развернуть ветку
8 комментариев
Раскрывать всегда