Кнопки – это обычный, “повседневный” элемент дизайна взаимодействия. Именно потому, что кнопки являются жизненно важным элементом обеспечения беспрепятственного взаимодействия в сети и в приложениях, стоит обратить внимание на эти основные рекомендации для кнопок.
Также мы рассмотрим типы и состояния кнопок — это важная информация, которую вам нужно знать для создания эффективных кнопок и совершенствования опыта пользователя.
Рекомендации по созданию кнопок
Делайте кнопки похожими на кнопки
Подумайте, как дизайн передает возможность выбора. Как пользователи понимают, какой элемент является кнопкой? Поработайте над формой и цветом так, чтобы сделать элемент похожим на кнопку.
И при проектировании тщательно продумайте размеры зоны касания и внутреннего поля.
Размер кнопок также играет ключевую роль в помощи пользователям понять, что это за элементы.
Различные платформы предоставляют рекомендации по минимальным размерам зоны касания. Результаты исследования, проведенного MIT Touch Lab показали, что среднее значение для подушечки пальца – 10-14 мм, а для кончика – 8 – 10 мм.
При этом, 10 мм x 10 мм – оптимальный минимальный размер зоны касания.
Расположение и порядок
Расположите кнопки там, где пользователи смогут легко найти их, или там, где они ожидают их увидеть. Например, вот руководство пользовательского интерфейса iOS показывает, где лучше располагать кнопки
Уделяйте внимание порядку размещения и положения кнопок. Порядок, в котором идут кнопки, особенно, если у них есть соответствующие пары (например, «предыдущий» и «следующий»), очень важен. Убедитесь, что дизайн ставит акцент на основное или наиболее важное действие.
В примере ниже мы используем красный цвет для кнопки, которая выполняет потенциально деструктивное действие.
Обратите внимание, что основное действие не только насыщеннее по цвету и контрасту, но и располагается в правой части диалогового окна.
Надписи
Надпись на кнопке означает ее функцию. Добавьте четкое сообщение, о том, что происходит при нажатии на нее.
Вот такие же кнопки, как и выше, но без соответствующих надписей. Чувствуете разницу?
Призыв к действию (CTA)
Сделайте самую важную кнопку (особенно, если вы используете ее для призыва к действию) выглядящей, как самая важная.
Форма кнопки
Скорее всего, вы захотите сделать квадратные кнопки или квадратные с закругленными углами, в зависимости от стиля сайта или приложения. Некоторые исследования показывают, что закругленные углы кнопок усиливают восприятие информации и привлекают взгляд к центру элемента.
Вы можете проявить свою фантазию и использовать другие формы, такие как круги, треугольники или даже какие-либо другие формы, но имейте в виду, что последний вариант может оказаться несколько рискованным.
Соблюдайте постоянство элементов управления своего интерфейса, чтобы пользователь мог определять, какие элементы в вашем приложении являются кнопками.
Типы кнопок и поведение
1. Объемная кнопка
Объемная кнопка обычно прямоугольная, приподнятая кнопка (затенение снизу указывает, что на нее можно нажать). Объемные кнопки добавляют в преимущественно плоские макеты объем. Они делают особый акцент на функциях активных или широких областей.
Применение
Ставьте их в один ряд (чтобы придать больше значимости действиям на сайтах с большим количеством различного контента). Используйте объемные кнопки, чтобы придать больше значимости действиям на сайтах с большим количеством различного контента.
Поведение
Объемные кнопки приподнимаются и заполняются цветом при нажатии.
Пример
Объемные кнопки выделяются сильнее, чем плоские. Пример для приложения Android.
2. Плоская кнопка
Плоские кнопки не приподнимаются, но тоже заполняются цветом при нажатии. Основное преимущество плоских кнопок заключается в том, что они не отвлекают пользователя от контента.
Применение
В диалоговых окнах (для объединения действия кнопки с содержимым диалогового окна)
На панелях инструментов
Расположены внизу так, чтобы пользователь мог легко их найти
Поведение
Пример
Плоская кнопка в диалоговом окне приложения для Android.
3. Кнопка-переключатель
Кнопка-переключатель позволяет пользователю переключаться между двумя (или более) состояниями.
Применение
Кнопки-переключатели преимущественно используется как кнопки Вкл/Выкл.
Также кнопки-переключатели могут использоваться для группы связанных между собой вариантов. Но ваш макет должен быть организован таким образом, чтобы было понятно, что определенные кнопки-переключатели являются частью такой группы. Требования кнопки-переключателя:
- В группе должно быть как минимум три кнопки-переключателя
- На кнопке должен быть текст, иконка или и то, и то
Иконки являются подходящими для кнопок-переключателей, когда возможно что-то выбрать или отменить, например, добавить к элементу звездочку или удалить ее. Лучше всего размещать их в панели приложения, панели инструментов, на кнопках действия или переключателях.
Очень важно выбрать правильную иконку для кнопки. Я уже рассматривал эту тему в статье Иконки как часть отличного пользовательского опыта.
Пример
В Apple iOS кнопки-переключатели используются для раздела “Настройки”.
4. Прозрачная кнопка (“Кнопка-призрак”)
Кнопки-призраки – это прозрачные и пустые кнопки, имеющие простую форму, например, прямоугольник. Обычно они ограничены очень тонкой линией, а во внутренней части находится обычный текст.
Применение
Использование прозрачной кнопки для основного CTA – обычно не самая хорошая идея. Взгляните, например, на Bootstrap и его прозрачную кнопку скачать Bootstrap, которая выглядит так же, как их главный логотип, что может запутать пользователей.
Кнопку-призрак лучше всего использовать для вторичного контента, чтобы она не конкурировала (хотя, по крайней мере, не должна) с вашим основным CTA. В идеале, нужно, чтобы пользователь увидел сперва ваш основной CTA, а затем (если для него это не важно) перешел ко вторичной кнопке.
Кнопка с положительным действием гораздо контрастнее и пользователь видит четкие действия.
Поведение
Пример
На сайте AirBnB есть прозрачные кнопки для действия «Стать хозяином»
5. Плавающая кнопка действия
Плавающая кнопка действия является частью материального дизайна Google. Это круглая материальная кнопка, приподнимающаяся и отображающая эффект чернил при нажатии.
Применение
Плавающие кнопки действий используются для вызова функциональных клавиш.
Поведение
Они представлены в виде круглой иконки, плавающей над UI, и способны на такие функции, как морфинг, запуск и перенос точки привязки.
Выбор типа кнопки
Выбор стиля кнопки зависит от ее важности, количества контейнеров на экране и от разметки экрана.
Функция: Достаточно ли важна кнопка, чтобы быть плавающей кнопкой действия?
Размер: Выберите тип кнопки в зависимости от контейнера, в котором она будет располагаться, и от того, сколько слоев z-пространства у вас на экране.
Разметка: Используйте в основном один тип кнопки на контейнер. Типы кнопок смешивайте только тогда, когда у вас на то есть веские основания, например подчеркнуть важную функцию.
Состояния кнопки
Этот пункт не столько о том, как начальная кнопка выглядит для пользователя, сколько о тех случаях, когда при наведении на нее курсора ничего не меняется. Пользователь может не понять: «Это кнопка или нет? Теперь мне придется нажать на нее, чтобы узнать, на самом ли деле это кнопка или просто что-то на нее похожее. Ну что ж…»
Кнопка не является объектом, имеющим одно состояние. У нее их несколько. Поэтому предоставление визуального отклика, указывающего пользователям на состояние кнопки, должно быть первоочередной задачей.
Нормальное состояние
Главное правило для этого состояния — кнопка должна выглядеть, как кнопка в нормальном состоянии. Windows 8 – это отличный пример такой проблемы — пользователям сложно понять, являются ли объекты в меню настроек кликабельными или нет.
Состояние при фокусе
Лучше всего, если пользователь будет понимать, что он навел курсор именно на кнопку. Пользователь сразу понимает, что его действие было принято, и хочет, чтобы оно визуально подтвердилось.
Нажатое состояние
Анимируя различные элементы своего дизайна, вы можете проявить фантазию и порадовать своих пользователей креативной и полезной анимацией кнопки.
Неактивное состояние
Есть два варианта — либо скрыть кнопку, либо показывать ее в отключенном состоянии.
Аргументы за скрытие кнопки:
- Ясность. Отображается только то, что необходимо для выполнения текущей задачи.
- Сохранение пространства. Это позволяет изменять элементы управления, используя это же пространство для различных целей. Это удобно, когда присутствует очень много всего. Так делает Gmail.
Аргументы за использование кнопки в отключенном состоянии:
- Показывать возможность действия. Даже если кнопка не используется, пользователь знает, что такое действие возможно. Вы можете даже сделать подсказку, объясняющую критерии использования.
- Контроль расположения. Пользователь может узнать, где в интерфейсе находятся элементы управления и кнопки.
Заключение
Кнопка предназначена для того, чтобы подталкивать пользователей к совершению действия, которого вы от них хотите. Плавная передача поддерживает плавное взаимодействие; такие затруднения, как, например, невозможность найти нужную кнопку, в лучшем случае являются помехами, а в худшем – провалом.
UX-дизайн кнопки – это всегда узнаваемость и ясность. Подумайте о сайте или приложении, как о разговоре, начатом занятым пользователем. Кнопка играет решающую роль в этом разговоре.