Кнопка решает всё: правила и примеры хорошего дизайна

Почему важен дизайн кнопок для сайта

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

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

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

Правила дизайна кнопок

Правильная кнопка в интерфейсе: 

Отличается по цвету. Цвет кнопки для сайта должен быть контрастным и привлекать внимание, чтобы пользователь легко мог ее найти. Проверить контрастность можно в онлайн-сервисах, например Color Contrast Checker, или с помощью плагина Contrast для Figma. 

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

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

Расположена логично. Пользователи привыкли, что кнопка в приложении находится в нижней трети экрана, куда легко дотянуться большим пальцем. А на компьютере — внизу формы или справа от текста. Если разместить кнопку «Купить» в верхнем углу карточки товара, пользователь может ее не заметить.

Советы по улучшению дизайна кнопок

Чтобы улучшить дизайн кнопок:

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

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

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

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

Делайте разные типы кнопок. Они бывают плоские, объемные, кнопки-переключатели, с выпадающим меню и т. д. Используйте разные виды, чтобы сделать интерфейс удобным.

Даже небольшие изменения в кнопке могут влиять на кликабельность. Чтобы найти лучший вариант, проводите A/B-тесты и замеряйте количество нажатий в каждой версии.

Ошибки при создании кнопок

Чаще всего дизайнеры допускают эти ошибки:

• Очень маленький размер. Кнопка, в которую трудно попасть пальцем или курсором, вызывает раздражение.
• Слишком много кнопок. Клиент может потеряться в интерфейсе и не дойти до целевого действия.
• Кнопки, не похожие на кнопки. У пользователей есть устоявшиеся представления, как выглядит кнопка. Поэтому кнопка непривычной треугольной формы или просто кликабельная надпись без рамки может запутать. 
• Перебор с декором. Дополнительные градиенты, тени и анимация могут сделать дизайн чересчур кричащим. Если хочется привлечь внимание к кнопке, не используйте всё и сразу, добавьте что-то одно. 

Чтобы облегчить себе выбор кнопки, посмотрите гайдMaterial Design от Google. Там собраны рекомендации по визуальному оформлению разных элементов ПО, в том числе кнопок. 

Главное о дизайне кнопок для сайта

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

При выборе кнопки важно учитывать айдентику. Делайте кнопки в стилистике бренда и не забывайте про адаптивную верстку — кнопки на десктопе и в мобильном приложении могут быть разными. Следует избегать слишком маленьких или, наоборот, визуально перегруженных кнопок. Если интерфейс работает так, что кнопки не замечаешь, — значит, они спроектированы правильно.