Школа
Интерфейс

Расскажите о кнопке

Илья
9 мая 2023
👁 5449   🗩3
Интерфейс

Расскажите о кнопке

Илья
9 мая 2023
👁 5449   🗩3
Илья Бирман
Арт‑директор и соавтор курса «Пользовательский интерфейс и представление информации»
Полезно
 24
24
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать

Кнопка, button, push button. I. Элемент управления, основное взаимодействие с которым — нажатие. Кнопка может выполнять свою функцию в течение всего времени нажатия (звуковой сигнал на автомобиле), с некоторой частотой в течение всего времени нажатости (буква на клавиатуре), однократно в момент нажатия (вызов лифта, остановка будильника) или в момент отпускания (клик мыши). Назначение кнопки объясняют подписью, пиктограммой или кодируют цветом, формой, положением; иногда оно ясно из контекста (звуковой сигнал на автомобиле, квартирный звонок, вызов лифта, съёмка на фотоаппарате).

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

Использование кнопки связано с её поиском, узнаванием, прицеливанием и приложением достаточной силы (затруднение может быть как нежелательным, так и желательным: ребёнку трудно вызвать лифт, но и отстегнуть ремень). Субьективное удовлетворение от нажатия кнопки зависит от её механизма, некоторые кнопки дают более приятную обратную связь, ощутимый щелчок, когда не остаётся сомнений, что кнопка нажалась; другие оставляют сомнения. Результат нажатия кнопки не всегда очевиден мгновенно, в этих случаях, нужна искусственная обратная связь: при вызове лифта внутри кнопки загорается свет, сигнализирующий, что команда принята.

II. Элемент графического интерфейса, обычно в виде прямоугольника с подписью или пиктограммой; метафора физической кнопки.

Функции кнопки: команда (обычно гл. в нач. форме: Сохранить, Отправить, Закрыть); присвоение статуса (грам. формы различны: Одобрено, Это спам, Нравится, Принимаю); навигация (сущ.: Настройка, Личный кабинет). Если функция кнопки выполняется не сразу при нажатии, а после дополнительного ввода, в конце подписи ставят многоточие (Печать...).

Взаимодействие — клик, тап и аналоги. Чтобы кнопку «нажать», её сперва нужно узнать и прицелиться, следовательно кнопка должна быть узнаваемой и достаточно большой (см. позволительность, прицеливание, закон Фиттса).

Кнопки могут быть разных форм и цветов в зависимости от стиля интерфейса. Признаки кнопки: выпуклость, блик, тень, скруглённые края, текст по центру вопреки отсутствию центровки в других элементах. По мере развития экранных интерфейсов, кнопка требует меньше визуального сходства с физич. прообразом (см. скеоморфизм), и в пределе вырождается до простой подписи акцентного цвета (снижается доступность, требуется последовательность в использовании приёма; см. Ай‑ОС 7, флет‑дизайн).

Даже в одном интерфейсе обычно используют несколько видов кнопок: для основных, второстепенных, опасных действий; эти виды различаются графически (см. консистентность). Состояния кнопки: обычное, наведённое, недоступное, сфокусированное, нажатое (могут сочетаться: наведённое сфокусированное). Как и физическая, экранная кнопка может иметь различные нестандартные варианты поведения (западание, переключение).

Уважаемые советчики! Что бы вы исправили или дополнили?

Интерфейс
Полезно
 24
24
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Anton Lehki

Стоит ли вообще волноваться и добавлять многоточия… в интерфейс?
Я часто вижу, что их не делают в местах, где они явно нужны. Хорошая статья по теме: https://www.linkedin.com/…‑fading‑away‑vlad‑derdeicea

К тому же трудно описать правила, в каких случаях надо ставить, а в каких не надо, — будет куча исключений и возможной несогласованности (у тебя про это в книжке есть).

Саша Максимал

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

Ещё такой трюк часто не работает с самодельными кнопками. Разработчики кастомных кнопок часто упускают из виду тот момент, что клик по кнопке должен срабатывать именно при отжатии кнопки и если в этот момент курсор мыши был над кнопкой. Так у пользователя есть возможность передумать, даже если он уже нажал клавишу мыши.

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

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

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

Рекомендуем другие советы