Кнопка

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

Состав кнопки

Варианты кнопок

В цифровых интерфейсах существует довольно большое количество специализированных кнопок, особенно в аппаратных HMI, поскольку они часто унаследованы от приборных панелей. Плюс они часто удобнее для сенсорных экранов по видимой площади нажатия, в отличие от более специализированных элементов компьютерных UI, типа чекбоксов или радиокнопок (которые на кнопки совсем не похожи, но даже по названию показывают связь с изначальными кнопками).

Кнопка действия Action button

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

Кнопка выпадающей панели Dropdown button

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

Подробнее о выпадающей кнопке

Сегментный набор кнопок Segmented button

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

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

Раздельная кнопка Split button

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

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

Кнопка-селектор Selector button

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

Кнопка-выключатель Toggle button

При нажатии на кнопку запускается какое-то продолжительное действие либо устанавливается состояние/режим системы, кнопка становится активной. При последующем нажатии действие или состояние прекращаются либо отменяются.

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

Кнопка удерживаемого действия Hold button

Действие, указанное на кнопке, происходит непрерывно пока пользователь удерживает её мышью или пальцем — после отпускания действие прекращается (например, увеличение или уменьшение численного значения)

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

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

Кнопка с учётом инерции

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

Если повторное нажатие может отменить действие — промежуточное состояние должно выглядеть активным. В противном случае оно должно быть ближе к недоступному состоянию (disabled).

Кнопка-таймер Timer button

При нажатии на кнопку запускается действие с таймером. Состояние таймера показывается на кнопке после нажатия. По истечении времени кнопка прекращает действие. В некоторых случаях кнопка перестает действовать также при отпускании (то есть это комбинация кнопки-таймера и кнопки временного действия), что позволяет, например, ограничить предельную продолжительность действия — например, облучение пациента рентгеновским излучением.

Навигационная кнопка Nav button

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

Типы кнопок по приоритету

В зависимости от важности действия, кнопки могут делиться на несколько типов по приоритету и, как следствие, визуальному акценту:

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

Особенности реализации и поведения

Момент срабатывания

У цифровых кнопок действие должно срабатывать по отпусканию курсора или пальца внутри габарита кнопки — это позволяет отменить ошибочно выбранное действие, если пользователь уже нажал кнопку, для чего достаточно переместить палец или курсор за пределы габарита и отпустить. Это служит аналогом аппаратных кнопок — мы касаемся кнопки, но не нажимаем её, если поняли что это та, что нужна (представьте «удобство» физических клавиатур, где все клавиши бы действовали немедленно при малейшем прикосновении к ним).

Подсветка области кнопки

В современных масс-маркетных дизайн-системах иногда используются т.н. «ghost buttons», кнопки-призраки, которые представляют собой нечто промежуточное между кнопкой и отдельно стоящей гиперссылкой — такие кнопки представлены только меткой. При этом, чтобы ввести какой-то уникальный признак для кнопок для облегчения их идентификации, эти системы могут использовать текст заглавными буквами (как в Material Design).

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

Заглавные же буквы обладают более низкой скоростью чтения и требуют больше места, а в профсистемах не получается рассчитывать, что метки кнопок всегда будут короткими (например, кнопка может быть и «Add stoppage report»), что дополнительно ухудшает распознавание.

Поэтому альтернативой кнопкам без фона должны быть второстепенные кнопки с обводкой.

Традиционные элементы

В традиционных подходах к интерфейсам принято:

1. Подсвечивать букву клавиатуры, нажатие которой, например, с зажатой клавишей Alt позволит отработать действие кнопки без использования мыши.
2. Добавлять многоточия в конце метки кнопки, если при клике будет показан отдельный диалог или действие приводит к переходу в другой режим. Это поведение встречается редко в новых массовых интерфейсах и многим пользователями такая подсказка уже незнакома.

Традиционные элементы немного повышают визуальный шум.