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

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

Сравните:

• «ОК», «Готово», «Да» сообщают только, что что-то произойдёт.
• «Применить», «Отправить» называют действие, но не предмет. Что применится и куда уйдёт, человек выясняет, перечитывая экран.
• «Сохранить адрес», «Пропустить доставку», «Сменить карту» — действие и предмет — отвечают сразу.

Окно подтверждения

Сильнее всего это видно в окне, где спрашивают подтверждение.

Покупатель нажал «Отменить подписку», и магазин переспрашивает. Вот три способа подписать кнопки в этом окне.

Так советуют и открытые руководства:

• Apple Human Interface Guidelines — кнопки окна-предупреждения подписывать глаголами, связанными с его текстом, а «OK» ставить, только если сообщение чисто информационное;
• GOV.UK Design System — текст кнопки описывает действие, которое она выполняет;
• Material Design 3 — не писать в диалогах размытых «Готово», «OK» и «Закрыть».

О второй кнопке окна руководства спорят. Apple велит всегда подписывать «Cancel», по-русски «Отмена», кнопку, которая закрывает окно без действия.

Илья Бирман в «Советах» Бюро Горбунова разбирает как раз окно с «Отмена» и «Отменить». Если текст окна можно поменять целиком, он советует назвать действием и её: «Вернуться к настройке» рядом со «Сбросить изменения». Урок держится варианта Бирмана: в окне отмены подписки «Отмена» читается двояко.

Ссылки

То же правило работает для ссылок. «Здесь» и «Подробнее» не говорят, куда ведут.

По WCAG 2.2 назначение ссылки должно быть понятно из её текста или из текста вместе с ближайшим окружением: предложением, пунктом списка, ячейкой таблицы. Это критерий 2.4.4, уровень A.

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

В Nielsen Norman Group советуют обходиться без «нажмите здесь» с 1996 года. А про «подробнее» пишут, что такая ссылка плохо подсказывает, что за ней, и мешает доступности.

Проверьте себя

Восемь подписей кнопок и ссылок. По какой из них понятно, что будет после нажатия?

Какая форма глагола

Глагол на кнопке ставят в начальной форме совершенного вида. Например:

«Сохранить», «Найти» — а не «Сохраните» или «Искать».

Так советуют Илья Бирман и Контур.Гайды. В «Вернитесь к началу регистрации» непонятно, кто кого просит, а «Вернуться» — команда человека продукту.

Без глагола Бирман допускает кнопки, которые меняют статус: «Это спам», «Готово», «Позже». Но «Готово» под полем адреса статус не меняет, а сохраняет адрес — там нужен глагол.

Когда стоит переспрашивать перед отменой, а когда лучше дать вернуть, — в уроке «Паттерны и состояния», Senior.

Интерфейс не читают — в нём ищут нужное. Каждое слово, которое ничего не сообщает, отодвигает то, что человек ищет.

Якоб Нильсен проверял это ещё в 1997 году. 79 % участников исследования всегда просматривали новую страницу по диагонали, слово за словом читали 16 %.

В том же году он и Джон Моркес сравнили версии одного сайта. По их измерениям удобнее оказался:

• текст вдвое короче — на 58 %;
• текст, который легко просмотреть, — на 47 %;
• всё вместе и без рекламных преувеличений — на 124 %.

Пустые слова

Пустые слова в интерфейсе одни и те же, и их легко узнать.

Попробуйте сами

Ниже три фразы с экрана «Моя подписка».

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

Максим Ильяхов и Людмила Сарычева называют такие слова стоп-словами. Подробный разбор — в книге «Пиши, сокращай» («Альпина Паблишер», 2016; в 2025 году вышло переработанное издание).

Заголовок отвечает на вопрос, с которым человек открыл экран. Название раздела системы на этот вопрос не отвечает.

Разработчик назвал экран и блоки так, как они называются в базе: «Информация о подписке», «Параметры», «Данные», «Настройки».

Покупатель открывает экран с другими вопросами: когда привезут кофе, какой сорт, сколько и когда спишут, как перенести доставку.

Главные слова — в начало

Нильсен в 2009 году писал: пробегая список, человек видит примерно по два слова в каждом пункте.

Поэтому он советовал ставить вперёд слова о том, что важно человеку и что он может сделать. Сравните:

• «Следующая доставка — 14 октября» отвечает первыми же словами;
• «Информация о дате следующей доставки» — нет.

Окна и всплывающие сообщения

Их заголовки подчиняются тому же правилу. Заголовок называет, что происходит, а не призывает к вниманию.

Сообщение после действия называет результат, а не «Успешно». Подробнее о таких сообщениях — в уроке «Паттерны и состояния», Junior.

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

В руководстве Microsoft по стилю этот совет стоит в первой десятке: пишите так, как говорите, и читайте текст вслух.

В Apple Human Interface Guidelines то же: сомневаетесь — прочтите текст вслух.

Спотыкаются обычно на одном и том же.

У этой болезни есть имя. Корней Чуковский писал: «Имя недуга — канцелярит (по образцу колита, дифтерита, менингита)» — в книге «Живой как жизнь» (1962).

Нора Галь посвятила ему главу «Берегись канцелярита!» в книге «Слово живое и мёртвое» (1972). Обе книги о живой речи, а не об интерфейсах, но болезнь та же.

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

Карта покупателя не прошла, и подписка может прерваться.

Он встревожен и хочет знать две вещи: что случилось и что сделать. Вот три способа ему сказать.

Руководства здесь сходятся:

• Mailchimp: ясность всегда важнее развлечения, а если сомневаетесь — пишите без шуток;
• GOV.UK: никаких шутливых сообщений об ошибках — люди приходят с серьёзными делами и часто в стрессе. «Пожалуйста» обычно не нужно, как и «обратите внимание»;
• Apple Human Interface Guidelines: междометия вроде «упс» в сообщениях об ошибках обычно лишние и звучат неискренне.

Это не запрет на тёплые слова. Им нужна причина.

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

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

Возьмите экран своего продукта, выпишите все подписи и перепишите каждую. Приложите таблицу «было — стало».

Часть 1 · Выписать, 15 минут

1. Выберите экран, где человек что-то меняет: настройки, профиль, корзину, подписку. Если своего продукта нет, возьмите экран «Моя подписка» из поиска ошибок выше.
2. Выпишите всё, что на нём написано: заголовки, кнопки, ссылки, подсказки, сообщения. Ничего не пропускайте, даже «ОК».
3. Рядом с каждой кнопкой запишите, что произойдёт после нажатия. Если ответ не помещается в два-три слова, кнопка спорная.

ЭКРАН: ______________________        Дата: __.__.____
КТО ОТКРЫВАЕТ И ЗАЧЕМ: ______________________

ЗАГОЛОВКИ
было: ____________  стало: ____________  на какой вопрос отвечает: ____________

КНОПКИ И ССЫЛКИ
было: ____________  стало: ____________  что произойдёт: ____________
было: ____________  стало: ____________  что произойдёт: ____________

ПОДСКАЗКИ И СООБЩЕНИЯ
было: ______________________
стало: ______________________
что вычеркнуто: ______________________

ПРОЧИТАНО ВСЛУХ: да / нет    где споткнулись: ____________

Часть 2 · Переписать, 30 минут

1. Кнопки: действие и, если нужно, предмет. «ОК» оставьте только там, где нажатие просто закрывает сообщение.
2. Заголовки: ответ на вопрос, с которым открывают экран. Главные слова — в начале.
3. Подсказки и сообщения: вычеркните пустые слова, пока смысл не меняется.
4. Ссылки: вместо «здесь» и «подробнее» — куда ведёт.

Часть 3 · Проверить, 10 минут

1. Закройте всё, кроме кнопок, и покажите экран человеку, который его не видел. Пусть скажет, что сделает каждая кнопка.
2. Прочтите все тексты вслух. Где споткнулись — перепишите глаголом.

Что должно получиться

• Таблица «было — стало» по всем подписям экрана.
• Экран до и после — два макета рядом.
• Список того, что человек сказал о кнопках, когда видел только их.

План работы: 15 минут выписать, 30 — переписать, 10 — проверить. Меньше часа.

Частые сложности

• «На кнопке длинно, не влезает». Уберите предмет, если он виден рядом: в блоке «Адрес доставки» хватит «Сохранить». Действие убирать нельзя.
• «Так принято, у всех „ОК“». Покажите кнопки без экрана двум коллегам и спросите, что они сделают. Разные ответы — аргумент сильнее привычки.
• «Без „пожалуйста“ грубо». Прочтите обе версии вслух. Грубость — это тон и упрёк, а не отсутствие слова «пожалуйста».
• «Тексты пишет разработчик или менеджер». Принесите таблицу «было — стало» с причиной у каждой строки. Причину принять легче, чем вкус.

Подписи готовы, если

• На каждой кнопке — что произойдёт: действие и, если нужно, предмет
• «ОК» осталось только там, где нажатие просто закрывает сообщение
• Ссылки говорят, куда ведут, без «здесь» и «подробнее»
• В подписях нет «пожалуйста», «ваш», «данный», «успешно»
• Заголовок экрана — о том, что человек здесь найдёт, а не название раздела
• Главные слова заголовка стоят в начале
• Каждый текст прочитан вслух, и в нём не спотыкаешься
• В сообщении о проблеме — ответ по делу, без шуток

Что мешает

• «ОК» и «Да» на кнопке. Человек перечитывает экран, чтобы понять, на что соглашается.
• «Отмена» в окне отмены. Непонятно, отменить или отказаться от отмены.
• «Информация» в заголовке. Подходит к любому экрану, значит, ничего не сообщает.
• «Пожалуйста, обратите внимание». Четыре слова до сути.
• «Упс!» в проблеме. Шутка над бедой человека.

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

• Как, с точки зрения синтаксиса элементов интерфейса, подписывать кнопки?Советы Бюро Горбунова, Илья Бирман, 2017 · на русском · бесплатноПервая часть цикла «Синтаксис элементов интерфейса»: почему кнопку-команду подписывают глаголом совершенного вида в начальной форме, а не «Вернитесь…» или «Новый документ». Автор допускает существительное и наречие на кнопках, которые меняют статус: «Это спам», «Готово», «Позже». Совет 2017 года.
• Как лучше исправлять классические диалоги с кнопками «Отмена» и «Отменить»?Советы Бюро Горбунова, Илья Бирман, 2024 · на русском · бесплатноКак исправить окно с кнопками «Отмена» и «Отменить» на трёх уровнях: когда меняется только перевод, только вторая кнопка или весь текст окна. Суть выбора переносится из заголовка на кнопки: «Вернуться к настройке» и «Сбросить изменения». Совет 2024 года, пример — английское окно приложения.
• Что нужно знать о стоп-словах в интерфейсе?Советы Бюро Горбунова, Илья Бирман, 2016 · на русском · бесплатноТаблица стоп-слов интерфейса: «основной», «дополнительно», «информация», «успешно», «операция», «авторизация» — для каждого пример и замена («Операция успешно завершена» → «Деньги отправлены»). Автор относит к стоп-словам и «перейти», которое урок оставляет на кнопке «Перейти к оплате». Совет 2016 года.
• Как правильно писать заглавия текущего процесса?Советы Бюро Горбунова, Максим Ильяхов, 2011 · на русском · бесплатноКороткий ответ на вопрос, как назвать экран процесса и кнопку, которая его завершает: «Добавление товара» или «Новый товар», «Регистрация» или «Зарегистрироваться». Таблица заголовков и завершающих действий из кабинета трейдера. Совет 2011 года, примеры старые.
• Простые словаРедполитика Контура, 2023 · на русском · бесплатноРаздел «Простые слова» из редполитики Контура: глагол вместо отглагольного существительного и составного сказуемого, канцеляризмы с заменами, штампы, цепочки существительных, у каждого приёма пара «было — стало». Написан для статей и писем. Авторы избегают и страдательного залога, который урок оставляет в «Адрес сохранён».
• WritingApple Human Interface Guidelines · на английском · бесплатноРаздел руководства Apple о текстах интерфейса: голос и тон, глагол на кнопках и ссылках, местоимения «my» и «your», ошибки без «oops!», пустые экраны, подписи настроек. Руководство допускает «Done» на кнопке, которая завершает многошаговый процесс.