Почему важен дизайн кнопок для сайта
Кнопка — один из главных элементов интерфейса. С их помощью происходит взаимодействие с пользователем: можно купить, найти нужную информацию, сохранить настройки. Если кнопка незаметна, плохо читается, то пользователь может «потеряться» и не дойти до целевого действия.
При этом кнопка не существует сама по себе — она часть общей визуальной системы. Дизайн кнопок для сайта: форма, цвет, анимация — всё должно сочетаться с айдентикой бренда.
Например, Apple использует минималистичные плоские кнопки, чтобы передать философию чистого дизайна. А в игровых сервисах кнопки часто яркие и объемные, чтобы поддерживать вовлеченность.
Дизайн кнопок Apple. Источник
Сейчас популярны кнопки в стиле глассморфизм, liquid glass — это „жидкое стекло“, которое пришло с новой презентации Apple. Также в тренде яркие цвета и градиенты, гигантизм кнопок, сложные переходы, эффекты при наведении и клике, как у Okko. Но важнее не дизайн, а функциональность. Если кнопка слишком маленькая, спрятана, не кликабельна, то общее впечатление о сайте вряд ли будет положительным.
Александра Жамсаранова — веб-дизайнер ENDY
Правила дизайна кнопок
Правильная кнопка в интерфейсе:
- Отличается по цвету — цвет кнопки для сайта должен быть контрастным и привлекать внимание, чтобы пользователь легко мог ее найти. Проверить контрастность можно в онлайн-сервисах, например Color Contrast Checker, или с помощью плагина Contrast для Figma.
Акцентная кнопка в карточке товара на сайте «Купер». Источник
Кнопка не обязательно должна быть фирменного цвета, но она должна быть заметна и соответствовать общей визуальной концепции. Цвет кнопки должен контрастировать с фоном и окружающими элементами, то есть на темном фоне — светлая кнопка, на ярком — простая минималистичная, и наоборот.
Еще существует психология цвета. Например, красный часто ассоциируют с ошибкой и опасностью, зеленый — с успехом и подтверждением, синий — с надежностью. Это надо учитывать.
Александра Жамсаранова — веб-дизайнер ENDY
- Имеет оптимальный размер — слишком маленькие кнопки неудобны, особенно на сенсорных экранах. Слишком большие отвлекают внимание и ломают композицию.
Google рекомендует делать изображение кнопки минимум 48 × 48 единиц плотности пикселей (dp) — это абстрактная единица измерения, благодаря которой элементы будут выглядеть одинаково при разном разрешении, тогда как обычные пиксели на экранах отображаются по-разному.
Кнопки на главной «Лемана Про». Источник
Размер текста кнопки должен быть минимум 14 пикселей на мобильных устройствах и 16 пикселей на десктопе. Бывают исключения, но важно, чтобы сохранялась зона клика.
Александра Жамсаранова — веб-дизайнер ENDY
- Расположена логично — пользователи привыкли, что кнопка в приложении находится в нижней трети экрана, куда легко дотянуться большим пальцем. А на компьютере — внизу формы или справа от текста. Если разместить кнопку «Купить» в верхнем углу карточки товара, пользователь может ее не заметить.
Кнопка покупки на Ozon — справа от карточки товара. Источник
В экспериментальных проектах, когда нужен вау-эффект и аудитория лояльна к новому пользовательскому опыту, можно отходить от типичного расположения кнопок. Мне всегда интересно изучать такие интерфейсы, но для большинства проектов это будет скорее преградой, чем новым опытом. Используйте этот прием аккуратно и вдумчиво.
Александра Жамсаранова — веб-дизайнер ENDY
Советы по улучшению дизайна кнопок
Чтобы улучшить дизайн кнопок:
- Пишите ясные формулировки. Текст на кнопке должен четко обозначать действие. Например, надпись «Отправить» лучше, чем «Ок», потому что понятно, что какое действие будет следующим.
Кнопка покупки у «Золотого Яблока». Источник
- Добавляйте иконки. Они делают кнопки интуитивно понятными. При этом желательно не полностью заменять текст рисунком, а использовать его как поддержку.
Иконка на кнопке у «Самоката». Источник
С помощью иконки можно сэкономить место на мобильных экранах. В отдельных случаях она может заменить текст, но при этом должна быть легко узнаваема. Например, иконка корзины для покупки, мусорного бака — для удаления, лупы — для поиска.
Еще с помощью иконки можно привлечь внимание. Такая кнопка всегда будет выделяться. Используйте этот прием для главного call to action, чтобы не перегружать интерфейс.
Александра Жамсаранова — веб-дизайнер ENDY
- Добавляйте состояния. Кнопка может реагировать на наведение курсора мыши, менять форму или цвет при нажатии, тем самым сообщая пользователю, что его запрос принят. Или быть в неактивном состоянии, если страница, на которую ведет кнопка, сейчас недоступна (например, товар раскупили и его больше нет в наличии).
Неактивные кнопки размеров в карточке O’STIN. Источник
- Используйте иерархию. Одни кнопки в интерфейсе важнее, чем другие. Например, кнопка «Положить в корзину» важнее, чем «Вернуться в каталог», потому что первая ведет к целевому действию (продаже), а вторая — нет. Главные кнопки должны быть более яркими и заметными, чем второстепенные.
Контрастная кнопка покупки в онлайн-магазине «Твое». Источник
Есть правило: чтобы кнопка не стала кричащей, нельзя использовать несколько декоративных элементов одновременно. Я всегда выбираю один главный акцент — цвет, форма или анимация. При этом каждый визуальный элемент на кнопке должен иметь конкретную цель — усиливать иерархию, улучшать юзабилити, давать обратную связь. Если элемент не имеет цели — значит, он лишний. Лучше начать с минималистичных кнопок, а потом добавлять акценты там, где это необходимо.
Александра Жамсаранова — веб-дизайнер ENDY
- Делайте разные типы кнопок. Они бывают плоские, объемные, кнопки-переключатели, с выпадающим меню и т. д. Используйте разные виды, чтобы сделать интерфейс удобным.
Даже небольшие изменения в кнопке могут влиять на кликабельность. Чтобы найти лучший вариант, проводите A/B-тесты и замеряйте количество нажатий в каждой версии.
Ошибки при создании кнопок
Чаще всего дизайнеры допускают эти ошибки:
- Очень маленький размер. Кнопка, в которую трудно попасть пальцем или курсором, вызывает раздражение.
- Слишком много кнопок. Клиент может потеряться в интерфейсе и не дойти до целевого действия.
- Кнопки, не похожие на кнопки. У пользователей есть устоявшиеся представления, как выглядит кнопка. Поэтому кнопка непривычной треугольной формы или просто кликабельная надпись без рамки может запутать.
- Перебор с декором. Дополнительные градиенты, тени и анимация могут сделать дизайн чересчур кричащим. Если хочется привлечь внимание к кнопке, не используйте всё и сразу, добавьте что-то одно.
Чтобы облегчить себе выбор кнопки, посмотрите гайдMaterial Design от Google. Там собраны рекомендации по визуальному оформлению разных элементов ПО, в том числе кнопок.
Дизайн кнопок в Material Design. Источник
Самые критичные ошибки — это плохая видимость и маленький размер, потому что когда пользователь не может нажать кнопку, он уходит. Еще одна ошибка — отсутствие иерархии. Есть primary- и secondary-кнопки. Когда они перемешаны, мы получаем ту же плохую видимость и низкую конверсию.
Александра Жамсаранова — веб-дизайнер ENDY
Главное о дизайне кнопок для сайта
Кнопка — не просто декоративный элемент, а проводник между сайтом и пользователем. Она должна быть заметной, понятной, правильно расположенной. Тогда интерфейс становится удобным.
При выборе кнопки важно учитывать айдентику. Делайте кнопки в стилистике бренда и не забывайте про адаптивную верстку — кнопки на десктопе и в мобильном приложении могут быть разными. Следует избегать слишком маленьких или, наоборот, визуально перегруженных кнопок. Если интерфейс работает так, что кнопки не замечаешь, — значит, они спроектированы правильно.
профессия UX/UI-дизайнер с нуля до про
профессия UX/UI-дизайнер с нуля до про
Создавайте продуманные интерфейсы сайтов и приложений без навыков программирования. Погрузим в дизайн-среду с первого модуля и дадим опыт, который реально пригодится в работе
Научиться