Интерфейсные тексты
Интерфейсный текст — короткое сообщение, которое должно помочь пользователю, объяснить суть, подсказать и направить по нужному пути.
Любой интерфейсный элемент строится по принципу:
Любой интерфейсный элемент строится по принципу:
- главное — вперёд
- с пользой для человека
- лаконично, точно, консистентно
Главное для человека — вперёд
Главное — вперёд
Заголовок, если он есть, должен отражать суть и помогать человеку оказаться в той точке сценария, где ему нужно быть в конкретный момент.
Подзаголовок, если он есть — должен быть самодостаточным, при этом давать дополнительные детали к заголовку, если это нужно.
Заголовок — для человека и про него, а не про компанию или технические особенности.
Подзаголовок, если он есть — должен быть самодостаточным, при этом давать дополнительные детали к заголовку, если это нужно.
Заголовок — для человека и про него, а не про компанию или технические особенности.
Главное — впереди. А главное здесь то, что человек не может отправить фотки, а не что-то про хранилище.
В подзаголовке даём пояснения.
Подзаголовок — самодостаточный, читается сам по себе без привязки к заголовку.
Заголовок+кнопка — читаются связно и логично.
В подзаголовке даём пояснения.
Подзаголовок — самодостаточный, читается сам по себе без привязки к заголовку.
Заголовок+кнопка — читаются связно и логично.
Мне про какое-то хранилище в момент, когда я не могу отправить фотки другу.
Подзаголовок — не про заботу, а про продажу.
Кнопки — путают, потому что они про одно и то же: «увеличить» и «освободить» приведут к одному и тому же
Подзаголовок — не про заботу, а про продажу.
Кнопки — путают, потому что они про одно и то же: «увеличить» и «освободить» приведут к одному и тому же
Человек — в центре
«Мы проверяем», «мы сохранили» — подобные уточнения часто лежат «под капотом», человеку знать о них не нужно. На первом месте всегда человек и задача, которую он хочет решить.
Как себя проверить:
Как себя проверить:
- если заметили фразу в формате «мы, нам, у нас» и т. д. — подумайте, как её увидит человек. Увидит ли в ней себя и заботу о себе? Если да — окей, нет — перефразируйте так, чтобы она была про человека или про предмет действия (интерес, заявка, письмо)
Уже в заголовке интересуемся мнением человека
Говорим о том, что можно, а не о том, что нельзя.
Говорим о том, что можно, а не о том, что нельзя.
В заголовке и подзаголовке два отрицания — интерфейс уже что-то не может.
Здесь нет человека — только интерес компании.
Здесь нет человека — только интерес компании.
Сказали о самом важном для человека в чувствительный момент — с файлами всё окей.
Объяснили, что ждать.
Объяснили, что ждать.
Канцеляризм — «требует исправить»
Здесь нет боли человека — «мы сохранили», но что это для меня.
Избыточность — можно короче без потери смысла.
Здесь нет боли человека — «мы сохранили», но что это для меня.
Избыточность — можно короче без потери смысла.
На языке и в мире человека
Технические особенности, то есть то, что происходит «под капотом», человеку знать не нужно. Это не помогает, но запутывает и фрустрирует.
Говорим на языке человека, о том, что важно для него.
Говорим на языке человека, о том, что важно для него.
Очеловечили — «Придумайте название»
Привели к единообразию пункты — читать легко: вложить, читать, защитить
Подправили кнопки — теперь они звучат логично с заголовком
Привели к единообразию пункты — читать легко: вложить, читать, защитить
Подправили кнопки — теперь они звучат логично с заголовком
POP3 — 99% людей не должны разбираться в таких технических тонкостях
Неконсистентные элементы
Отглагольные
Не хватает простых подсказок
Неконсистентные элементы
Отглагольные
Не хватает простых подсказок
Предмет действия определён и понятен
Человек должен понять, о чём речь здесь и сейчас. Ему не нужно держать в голове названия продуктов, статусов, предыдущих действий.
Как себя проверить:
Как себя проверить:
- абстрагируйтесь от контекста и прочитайте текст на элементе, словно вы видите его впервые. Если понятно, о чём речь — вы на верном пути.
Ничего не мешает указать название сервиса
Не указано название сервиса, человек мог отвлечься и забыть
Польза и помощь
Помогаем здесь и сейчас (если можем)
При возникновении корнер-кейса, ошибки, задержки на стороне сервиса — никогда не бросаем фрустрированного человека. Не пугаем, не погружаем в технические тонкости. Рассказываем, что человек может сделать, чтобы решить проблему, или просим вернуться в сервис чуть позже.
Спокойно объяснили и дали все возможности, чтобы решить задачу
Непоследовательны мы — непоследовательно ведём человека
Звучим угрожающе — что-то запрещено
Звучим угрожающе — что-то запрещено
Оповестили без лишних уточнений и дали возможность узнать подробнее в Справке
Мы здесь буквально говорим — «скачай заражённый файл»
Повторение слов, нет буквы «ё»
Повторение слов, нет буквы «ё»
Интерфейс — не актор
Интерфейсные сообщения — чаще обезличенные. Это не значит, что они не заботливые, но лицо здесь не важно. Важно, чтобы человек быстро считал и понял, что ему нужно сделать.
Исключения: сообщения от поддержки.
Исключения: сообщения от поддержки.
Ушли от одушевления — смысл, при этом, не потерялся
Снизили градус и не кричим
Снизили градус и не кричим
«Мы» одушевляет интерфейс и задаёт излишние ожидания
Неуместный восторг
Неуместный восторг
Снижаем когнитивную нагрузку
Одно слово — одно понятие.
Сохранили принцип: главное для человека — вперёд
Убрали лишнее — теперь речь про одну сущность, Облако
Навели порядок — убрали лишнее, почистили висящие штуки
Убрали лишнее — теперь речь про одну сущность, Облако
Навели порядок — убрали лишнее, почистили висящие штуки
Хранилище и Облако — в нашем мире одно и то же, но в мире человека — разное
Кнопки — по смыслу одинаковые
Шумно — висят частицы
Кнопки — по смыслу одинаковые
Шумно — висят частицы
Наводим визуальный порядок
Визуальная стройность управляет вниманием человека. Переносы, буллиты и подобные элементы станут акцентом и подскажут человеку, куда смотреть в первую очередь.
Заголовок отражает суть
Управляем вниманием с помощью коротких структурированных сообщений
Даём конкретику — название системы
Управляем вниманием с помощью коротких структурированных сообщений
Даём конкретику — название системы
Очень длинный текст
Клише: «всего за три секунды», «просто войдите»
Бездоказательное усиление: «в надёжном месте»
Неуникальный заголовок
Висит предлог
Клише: «всего за три секунды», «просто войдите»
Бездоказательное усиление: «в надёжном месте»
Неуникальный заголовок
Висит предлог
Подсказываем
Подсказываем человеку там, где нам важно снизить его когнитивную нагрузку, и делаем всё, чтобы он преодолел сценарий без ошибок.
Дали подсказку в инпуте
Визуально навели порядок
Кнопки раздельны по смыслу
Визуально навели порядок
Кнопки раздельны по смыслу
Подсказка в инпуте не перегрузит, но подскажет
Похожие кнопки — путают
Визуальный шум — висит предлог
Похожие кнопки — путают
Визуальный шум — висит предлог
Лаконично, точно, консистентно
Убираем лишнее
Укажите только то, что нужно человеку в данный момент. Не перегружайте информацией и несколькими CTА. Одно действие = одно сообщение.
Оставили суть
Навели визуальный порядок
Кнопки однозначны — если сложить с заголовком, получится цельная конструкция.
Понятная, без пояснений
Навели визуальный порядок
Кнопки однозначны — если сложить с заголовком, получится цельная конструкция.
Понятная, без пояснений
Главное — не на первом месте
Шумно — висит предлог
Шумно — висит предлог
Конкретно
Ведём человека по сценарию за руку — не даём повод додумывать и ошибаться.
Даём надежду уже в заголовке, а не начинаем с «не»
Навели визуальный порядок
Кнопка +заголовок = единая конструкция, которая даёт понимание, что происходит
Навели визуальный порядок
Кнопка +заголовок = единая конструкция, которая даёт понимание, что происходит
Нет связи между заголовком и текстом под ним
Правило: заголовок + кнопки = сязный текст — не выполнено
Непонятно, к кому обращается модалка
Правило: заголовок + кнопки = сязный текст — не выполнено
Непонятно, к кому обращается модалка
Однозначно
Интерфейсный элемент должен сообщать пользователю однозначное послание — двусмысленность недопустима.
Всё на своих местах — говорим про корзину, и чистим её же
Непонятно, что в итоге я чищу — папку или корзину
Согласованно
Заголовок + кнопка — должны составлять единое целое. Прочитав заголовок и то, что написано на кнопке, человек должен понять, что его ждёт дальше.
Как себя проверить:
Как себя проверить:
- Прочитайте заголовок и текст на кнопке — если фраза звучит естественно и цельно, скорее всего, вы на верном пути
Главное вынесли вперёд — там, где можно обойтись сутью в заголовке — делаем это
Заголовок + кнопка = понятная и складная фраза
Заголовок + кнопка = понятная и складная фраза
Заголовок + кнопка — не равно цельная и понятная конструкция
«Отменить удаление»: глагол + глагольное — усложнили там, где просто
4 раза «удаление»
«Отменить удаление»: глагол + глагольное — усложнили там, где просто
4 раза «удаление»
Начали сразу с сути и главного для человека
Убрали кнопки, которые дублируют друг друга по смыслу
Убрали кнопки, которые дублируют друг друга по смыслу
Кнопки «Не сохранять» и «Отменить» для человека одно и то же
Консистентно
Элементы в интерфейсе должны быть согласованы между собой — так их легче считывать. Элементами могут быть слова, фразы, предложения, абзацы.
Список консистентный — читать и воспринимать легко
Последовательно
Последовательно
«Настройка вида» — не согласуется со следующими глагольными формами списка
Нет конкретики — настройка чего?
Непоследовательно
Нет конкретики — настройка чего?
Непоследовательно