01 Размер #
Минимум 44 на 44 пикселя, а лучше 48 на 48. Это анатомия пальца. Всё, что меньше — заставляет целиться. На мобильном это вообще катастрофа: человек мажет, злится, уходит.
02 Внешний вид #
Кнопка должна выглядеть как кнопка. Прямоугольник со скруглением, заметный цвет, может быть тень. Просто текст без рамки — это ссылка, а не кнопка, не путай роли. Пользователь смотрит на экран и за долю секунды должен понять, куда жать.
03 Иерархия кнопок #
Главная кнопка на экране одна. Она яркая, заполненная, самая заметная. Остальные кнопки — второстепенные: обведённые или серые. Если на экране две одинаково яркие кнопки — человек зависает в выборе.
Главная
Заполненная, яркая, самая заметная. Одна на экране.
Второстепенная
Обведённая или серая. Не конкурирует с главной.
04 Текст на кнопке #
На кнопке всегда глагол: Купить, Отправить, Скачать, Записаться. «Ок» — это мусор, непонятно, что произойдёт. Кнопка должна обещать ровно то, что случится после нажатия.
Плохой текст: «Отправить». Хороший текст: «Оформить заказ». Первый — что-то куда-то. Второй — конкретное действие с понятным результатом.
05 Состояния #
У каждой кнопки их должно быть несколько: обычное, при наведении, при нажатии, неактивное, загрузка. Если нажал — покажи реакцию. Нет реакции — человек думает, что сломалось.
Спроектируй кнопку
Определи, правильное ли решение для кнопки.
