Logo
  • Бренд
  • Визуальный язык
    • Основы визуального языка
    • Палитра
    • Типографика
    • Иконографика
    • Структура и сетка
    • Эффекты
    • Анимации
  • Компоненты
    • Токены
    • Компоненты
  • Редполитика
    • О редполитике
    • Пишем чисто
    • Пишем просто
    • Пишем компетентно
    • Пишем для человека
    • Интерфейсные тексты
    • Глоссарий
  • Документация
    • Доступность
  • Figma
    • Принципы
    • Начало работы
    • Команды и проекты
    • Инструменты
    • Процесс
    • Дизайн-ревью
  • Благодарности
Интерфейсные тексты
Интерфейсный текст — короткое сообщение, которое должно помочь пользователю, объяснить суть, подсказать и направить по нужному пути.

Любой интерфейсный элемент строится по принципу:
  • главное — вперёд
  • с пользой для человека
  • лаконично, точно, консистентно
Главное для человека — вперёд
Главное — вперёд 
Заголовок, если он есть, должен отражать суть и помогать человеку оказаться в той точке сценария, где ему нужно быть в конкретный момент. 
Подзаголовок, если он есть — должен быть самодостаточным, при этом давать дополнительные детали к заголовку, если это нужно. 
Заголовок — для человека и про него, а не про компанию или технические особенности.
Главное — впереди. А главное здесь то, что человек не может отправить фотки, а не что-то про хранилище. 

В подзаголовке даём пояснения. 

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

Заголовок+кнопка — читаются связно и логично. 
Мне про какое-то хранилище в момент, когда я не могу отправить фотки другу. 

Подзаголовок — не про заботу, а про продажу. 

Кнопки — путают, потому что они про одно и то же: «увеличить» и «освободить» приведут к одному и тому же 
Человек — в центре
«Мы проверяем», «мы сохранили» — подобные уточнения часто лежат «под капотом», человеку знать о них не нужно. На первом месте всегда человек и задача, которую он хочет решить.  

Как себя проверить:
  • если заметили фразу в формате «мы, нам, у нас» и т. д. — подумайте, как её увидит человек. Увидит ли в ней себя и заботу о себе? Если да — окей, нет — перефразируйте так, чтобы она была про человека или про предмет действия (интерес, заявка, письмо)

Уже в заголовке интересуемся мнением человека 

Говорим о том, что можно, а не о том, что нельзя. 
В заголовке и подзаголовке два отрицания — интерфейс уже что-то не может.   

Здесь нет человека — только интерес компании. 
Сказали о самом важном для человека в чувствительный момент — с файлами всё окей. 

Объяснили, что ждать. 
Канцеляризм — «требует исправить» 

Здесь нет боли человека — «мы сохранили», но что это для меня. 

Избыточность — можно короче без потери смысла. 
На языке и в мире человека
Технические особенности, то есть то, что происходит «под капотом», человеку знать не нужно. Это не помогает, но запутывает и фрустрирует. 
Говорим на языке человека, о том, что важно для него. 
Очеловечили — «Придумайте название» 

Привели к единообразию пункты — читать легко: вложить, читать, защитить 

Подправили кнопки — теперь они звучат логично с заголовком 
POP3 — 99% людей не должны разбираться в таких технических тонкостях 

Неконсистентные элементы 

Отглагольные 

Не хватает простых подсказок 
Предмет действия определён и понятен 
Человек должен понять, о чём речь здесь и сейчас. Ему не нужно держать в голове названия продуктов, статусов, предыдущих действий. 

Как себя проверить:
  • абстрагируйтесь от контекста и прочитайте текст на элементе, словно вы видите его впервые. Если понятно, о чём речь — вы на верном пути.
Ничего не мешает указать название сервиса
Не указано название сервиса, человек мог отвлечься и забыть
Польза и помощь
Помогаем здесь и сейчас (если можем)
При возникновении корнер-кейса, ошибки, задержки на стороне сервиса — никогда не бросаем фрустрированного человека. Не пугаем, не погружаем в технические тонкости. Рассказываем, что человек может сделать, чтобы решить проблему, или просим вернуться в сервис чуть позже.
Спокойно объяснили и дали все возможности, чтобы решить задачу
Непоследовательны мы — непоследовательно ведём человека 

Звучим угрожающе — что-то запрещено
Оповестили без лишних уточнений и дали возможность узнать подробнее в Справке
Мы здесь буквально говорим — «скачай заражённый файл» 

Повторение слов, нет буквы «ё»
Интерфейс — не актор
Интерфейсные сообщения — чаще обезличенные. Это не значит, что они не заботливые, но лицо здесь не важно. Важно, чтобы человек быстро считал и понял, что ему нужно сделать. 

Исключения: сообщения от поддержки. 
Ушли от одушевления — смысл, при этом, не потерялся 

Снизили градус и не кричим 
«Мы» одушевляет интерфейс и задаёт излишние ожидания 

Неуместный восторг
Снижаем когнитивную нагрузку
Одно слово — одно понятие. 
Сохранили принцип: главное для человека — вперёд 

Убрали лишнее — теперь речь про одну сущность, Облако 

Навели порядок — убрали лишнее, почистили висящие штуки 
Хранилище и Облако — в нашем мире одно и то же, но в мире человека — разное 

Кнопки — по смыслу одинаковые 

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

Управляем вниманием с помощью коротких структурированных сообщений 

Даём конкретику — название системы
Очень длинный текст 

Клише: «всего за три секунды», «просто войдите» 

Бездоказательное усиление: «в надёжном месте» 

Неуникальный заголовок 

Висит предлог 
Подсказываем
Подсказываем человеку там, где нам важно снизить его когнитивную нагрузку, и делаем всё, чтобы он преодолел сценарий без ошибок. 
Дали подсказку в инпуте 

Визуально навели порядок 

Кнопки раздельны по смыслу 
Подсказка в инпуте не перегрузит, но подскажет 

Похожие кнопки — путают 

Визуальный шум — висит предлог
Лаконично, точно, консистентно 
Убираем лишнее
Укажите только то, что нужно человеку в данный момент. Не перегружайте информацией и несколькими CTА. Одно действие = одно сообщение. 
Оставили суть 

Навели визуальный порядок 

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

Шумно — висит предлог 
Конкретно
Ведём человека по сценарию за руку — не даём повод додумывать и ошибаться.  
Даём надежду уже в заголовке, а не начинаем с «не» 

Навели визуальный порядок 

Кнопка +заголовок = единая конструкция, которая даёт понимание, что происходит 
Нет связи между заголовком и текстом под ним 

Правило: заголовок + кнопки = сязный текст — не выполнено 

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

Как себя проверить:
  • Прочитайте заголовок и текст на кнопке — если фраза звучит естественно и цельно, скорее всего, вы на верном пути

Главное вынесли вперёд — там, где можно обойтись сутью в заголовке — делаем это 

Заголовок + кнопка = понятная и складная фраза 
Заголовок + кнопка — не равно цельная и понятная конструкция 

«Отменить удаление»: глагол + глагольное — усложнили там, где просто 

4 раза «удаление»
Начали сразу с сути и главного для человека 

Убрали кнопки, которые дублируют друг друга по смыслу 
Кнопки «Не сохранять» и «Отменить» для человека одно и то же
Консистентно
Элементы в интерфейсе должны быть согласованы между собой — так их легче считывать. Элементами могут быть слова, фразы, предложения, абзацы.  
Список консистентный — читать и воспринимать легко 

Последовательно
«Настройка вида» — не согласуется со следующими глагольными формами списка 

Нет конкретики — настройка чего? 

Непоследовательно