Кнопка Button

Кнопка запускает действие.

Когда использовать

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

Не используйте кнопки для перехода на другую страницу.

Описание работы

Кнопка реагирует на наведение курсора — становится темнее. В момент нажатия на кнопку текст и иконка опускаются на 1 px. Действие должно происходить после того, как кнопка отпущена, и только в том случае, если курсор остался над кнопкой.

Название

Название кнопки пишется с заглавной буквы.

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

Называйте кнопку инфинитивом в совершенной форме — название должно отвечать на вопрос «Что сделать?». Пользователь дает команду компьютеру, ориентированную на результат, а не процесс.

Существуют исключения, когда название кнопки формулируется от первого лица:

Старайтесь не называть кнопку в две строки: делайте кнопку шире или меняйте название.

Многоточие

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

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

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

Или поясните рядом с кнопкой:

Нельзя сокращать название кнопки, если оно не входит:

Иконка

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

Не ставьте иконки в терминальных кнопках окна/лайтбокса «Сохранить», «Отменить» и т.д.

В панели с большим количеством кнопок, иконки будут создавать лишний визуальный шум. В этом случае оставьте иконки только у самых важных действий.

Размер и расположение

Существует 3 стандартных размера кнопки:

Маленькие — используйте рядом с полями ввода, они соответствуют им по высоте.

Средние — используйте в лайтбоксах и крупных блоках, для действий со списками и таблицами на верхней залипающей панели.

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

Ширина кнопки задается размером текста внутри нее и стандартными отступами. Нельзя произвольно уменьшать отступы:

Увеличивать отступы можно:

  • если это делает кнопку более пропорциональной остальным элементам страницы;
  • если текст внутри кнопки короткий и кнопка выглядит маленькой.

Форма

В мастерах используйте кнопки-стрелки. Такие кнопки бывают двух размеров: средние и большие:

Работа с клавиатурой

Фокус на кнопке визуально отображается только при работе с клавиатурой: если перенести на неё фокус табом появляется синяя рамка. Если кнопка в фокусе, то при нажатии клавиши Enter она нажиматься и выполняет указанное действие.

При клике мышью или тапом на тачскрине кнопка получает фокус, но визуально не отображает его.

Валидация

Кнопка не может быть неправильной или обязательной для нажатия, поэтому следующие состояния не предусматриваются:

Анимация

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

Лучше располагать спиннер рядом с кнопкой, если есть место.

Если в кнопке есть иконка — можно подменять иконку.

Когда текст кнопки заменяется на спиннер ширина кнопки не должна меняться.

Дизайн

Светло-серый — основной цвет кнопки в наших интерфейсах:

Синий — главное действие на экране. Например, кнопка «Добавить сотрудника» в лайбоксе добавления сотрудника. Или кнопка «Сохранить» на странице редактирования реквизитов. Главная кнопка на экране может быть только одна.

В проектах, в которых синие кнопки не сочетаются с фирменным цветом и остальными элементами интерфейса, могут использоваться кнопки фирменного цвета:

Красный — необратимое или негативное по смыслу действие. Зеленый — действие с положительной окраской. Зеленую кнопку уместно ставить только если рядом есть красная кнопка с обратным смыслом:

Желтый — действия, связанные с оплатой сервисов: