Кнопка — неотъемлемая часть интерактивного дизайна. Она играет главную роль при разговоре пользователя с системой.

В этой статье вы найдете 7 основных принципов, которые нужно знать при создании кнопок.

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

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

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

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

Среди этих примеров «Кнопка с тенью» — самая понятная для пользователя. Он точно знает, что на нее можно нажать.

Важна не только сама кнопка, но и пространство вокруг нее. Оно также поможет понять пользователю, интерактивен элемент или нет. Иногда кнопку можно спутать с простым текстовым полем. Например, здесь:

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

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

Название кнопки не должно вводить пользователя в заблуждение — должно быть ясно, что эта кнопка делает.

Например, вы случайно нажали на кнопку «Удалить», и появилось следующее сообщение:

Вместо надписи «ОК» лучше всего использовать «Удалить». Также, если эта операция может привести к необратимым последствиям, можно покрасить ее в красный цвет.

Размер должен отражать приоритет этого элемента. Важные кнопки должны выглядеть как ВАЖНЫЕ. Увеличьте размер, выберите контрастный цвет, чтобы привлечь внимание пользователя.

Во многих мобильных приложениях кнопки слишком маленькие. Это часто приводит к «мискликам» (промахам).

При выборе подходящего размера лучше всего опираться на исследование MIT Touch Lab. Выяснилось, что средний размер подушечек пальцев 10−14 мм, а кончиков пальцев — 8−10 мм. Поэтому оптимальный размер кнопки 10×10 мм.

Кнопки должны воспроизводить разговор между пользователем и системой. Задайте себе вопрос: что пользователь ожидает увидеть на экране?

Например, кнопки «Предыдущий/Следующий» в пагинации. Логично, что кнопка, которая переносит пользователя вперед, должна находится справа. А слева — кнопка, которая переносит его назад.

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

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

Пока вы читали эту статью, 8 из 10 пользователей с упитанными пальчиками промахнулись мимо кнопки :)