Кнопка Button

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

Где использовать

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

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

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

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

Название

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

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

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

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

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

Многоточие

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

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

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

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

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

Иконка

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

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

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

Размер и форма

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

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

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

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

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

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

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

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

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

Кнопка получает фокус только при переходе табом: появляется синяя рамка. Если кнопка в фокусе, то при нажатии клавиши Enter она должна нажиматься.

Кнопка не получает фокус по клику.

Валидация

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

Дизайн

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

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

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

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

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

Состояния