Дизайн кнопок: просто о главном

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

Физическая кнопка — это простое, но мощное изобретение. Одно касание может запустить прибор, автомобиль или целую систему — даже если пользователь не представляет, как всё устроено внутри.

В книге «Кнопка питания: История удовольствия, паники и политики нажатия» Рэйчел Плотник прослеживает истоки современной культуры кнопочных устройств и описывает, как нажатие на кнопку стало средсвом легкого и надежного управление.

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

Кнопки используются для выполнения действий и встречаются в формах, диалогах, на панелях инструментов и т.д. Ссылки ведут на другие страницы или разделы.

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

Давайте подробнее разберемся со всеми представленными состояниями кнопки.

Default — указывает, что компонент интерактивен и доступен.

Focus — подсвечивает элемент при навигации с клавиатуры.

Hover — появляется при наведении курсора.Active (активное/нажатое состояние) — фиксирует момент нажатия.Progress/Loading — показывает выполнение действия.Disabled — сообщает, что кнопка временно недоступна.

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

Стили кнопок помогают визуально разграничивать важность действий:

Иерархия помогает пользователю быстро принять решение.

Иногда действия равнозначны или потенциально рискованные. В этих случаях не стоит выделять одно из них как основное — стилизуйте кнопки одинаково, чтобы пользователь сделал осознанный выбор.

По одноимённой книге Стива Круга: чем понятнее интерфейс, тем лучше. Люди привыкли к определённым шаблонам. Если кнопка не выглядит как кнопка — это замедлит пользователя.

Важно: не используйте одинаковые цвета для активных и неактивных элементов. Это сбивает с толку.

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

Когда всё работает одинаково, пользователям легче ориентироваться. Делайте кнопки предсказуемыми и единообразными:

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

Для большинства платформ рекомендуется использовать область нажатия размером не менее 48х48 пикселей. Физический размер такой области составит около 9х9 мм, независимо от размера экрана. Для устройств с сенсорным экраном рекомендуемый размер области нажатия не менее 7-10 мм.

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

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

Также убедитесь, что кнопки работают с программами чтения экрана. Добавление role=’button’ сделает элемент видимым как кнопка для экранной читалки. Для этого, правд, придется повзаимодействовать с разработчиками.

Жесты — дополнительный способ взаимодействия: свайпы, двойные касания, длительные нажатия. Они используются все чаще, могут ускорить работу, но не всегда очевидны для обычных пользователей. Используйте их как дополнительное взаимодействие для более опытных пользователей.

Что написано на кнопке — не менее важно, чем то, как она выглядит. Хороший текст кнопки подталкивает пользователей к действию. Лучше использовать глаголы и точные действия: «Добавить в корзину», «Подтвердить заказ» вместо «Да», «ОК» или слишком общих надписей.

В такой ситуации нет единственно верного варианта. Лично я предпочитаю размещать кнопку подтверждения последней.

Знакомая ситуация: кнопка неактивна, и непонятно, почему. Это мешает пользователю совершить целевое и вызывает раздражение.

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

Сильный дизайн кнопки — это сочетание узнаваемой формы, понятного текста, грамотных состояний и чёткой иерархии. Хорошие кнопки ускоряют работу, уменьшают количество ошибок и делают интерфейс комфортным для всех.

Источник