Что именно делает кнопка «Отмена»?
Он закрывает текущий экран пользователя и возвращает его к предыдущему состоянию. Эта кнопка является защитой от нежелательных изменений в системе. Но когда она похожа на кнопку действия, эту функцию защиты трудно распознать.
Кнопка «Отмена» должна символизировать возвращение к безопасному состоянию, а не призыв к действию. Другими словами, ваша кнопка “Отмена” никогда не должна быть цветной.
Нейтральный цвет для нейтральной кнопки
Цвет кнопки означает призыв к действию. Кнопка «Отмена» не является призывом к действию, поскольку после нажатия пользователем никаких изменений в системе не происходит. Вы не должны подчеркивать это цветом, или вы создадите у пользователей неправильное впечатление. Вместо этого вы должны сообщить им, что кнопка не будет вносить никаких изменений и является отказом от действия.
Кнопка «Отмена» должна иметь нейтральный цвет, чтобы обозначать нейтральную, не совершающую действий кнопку. Когда пользователи видят, что кнопка «Отмена» не имеет цвета, они распознают ее как запасной, безопасный вариант. Это важно, например, для пользователей, которым необходимо выйти из экрана подтверждения.
Когда у каждой кнопки на экране есть цвет, они конкурируют за внимание. Конкуренция заставляет пользователей дольше обдумывать каждое действие. Если кнопка отмены нейтрального цвета, то она позволяет им быстрее принимать решение, не раздумывая долго. Пользователи, готовые предпринять действия, также не будут отвлекаться на нейтральную кнопку.
У «Отмены» много имен
Не все кнопки отмены имеют надпись «Отмена», но все они функционируют одинаково. Например, кнопка «Отмена» может иметь надпись «Не сейчас», «Нет, спасибо», «Может быть позже» или «Пропустить», в зависимости от контекста. Если кнопка отменяет какое-либо действие, рассматривайте ее как кнопку «Отмена», поскольку она выполняет ту же функцию.
Чем больше кнопок на экране, тем более необходима отмена. Когда все кнопки имеют цвет, выход из ситуации непонятен. Но когда кнопка “Отмена” имеет нейтральный цвет, она делает выбор более интуитивным.
Достаточно серый
При использовании серого цвета на кнопке необходимо сделать его достаточно темным. В противном случае кнопка может выглядеть как отключенная.
Чтобы убедиться, что ваша кнопка хорошо читается, проверьте цветовой контраст с помощью инструмента, например, Color Review. Эта утилита сообщит вам, соответствует ли ваш серый стандартам доступности для цвета текста.
Сделать кнопку отмены нейтральной
Когда большинство пользователей активирует экран подтверждения, они готовы действовать. Но для тех, кто активирует его по ошибке или передумает в процессе, кнопка «Отмена» — это залог безопасности.
Цветная кнопка «Отмена» посылает им неправильные сигналы. Она заставляет пользователей воспринимать себя как призыв к действию, а не как возвращение к безопасности. Сделайте кнопку «Отмена» нейтральной, чтобы пользователям было легче выходить из экранов подтверждения.
17 лекций о разработке интерфейсов Школы разработки интерфейсов Яндекса