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

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

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

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

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

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

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

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

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

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

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

Понятно

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

Просто

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

Кратко

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

Точно

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

Однозначно

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

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

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

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

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

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

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

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

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

Структурно

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

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

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

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

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

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

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

3. Кнопки

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

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

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

5. Ошибки

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

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

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

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

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

8. Формы

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

9. Подсказки

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

10. Валидации

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

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

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

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

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

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

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

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

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

breezzly.ru

--

--

Прокачиваю контент-маркетинг переводами 👸😁 Беру тексты и переводы под заказ, делаю круто 🔥 https://t.me/olgazholudova

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

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
Olga Zholudova

Olga Zholudova

Прокачиваю контент-маркетинг переводами 👸😁 Беру тексты и переводы под заказ, делаю круто 🔥 https://t.me/olgazholudova