Тендеры и лиды
Информация
Кнопка — это важная точка принятия решения, завершающий шаг для конверсионного действия: от подписки до оформления заказа. Мы в Uplab проектируем интерфейсы для крупных e-commerce-проектов и корпоративных сайтов, и по опыту знаем: продуманные кнопки способны поднять конверсию формы на 10–15% без каких-либо других изменений. В этой статье разберём, из чего складывается «правильная» кнопка — от формы и цвета до текста и расположения.
Продуманный дизайн кнопок — не только вопрос эстетики. Форма, размер и цвет — три параметра, которые определяют, заметит ли пользователь кнопку и поймёт ли, что она важна.
Самый распространённый вариант — прямоугольник с закруглёнными углами. Такие кнопки легко выделить взглядом, они органично сочетаются с полями ввода и не конфликтуют с другими элементами страницы.
Но есть и другие варианты. Так, мы в Uplab добавили большую круглую кнопку для важных действий на нашем корпоративном и карьерном сайтах — нестандартная форма в сочетании с контрастным цветом привлекает внимание пользователя.
Здесь работает простой принцип: чем важнее действие, тем заметнее кнопка. Кнопка «Оформить заказ» должна быть крупнее и ярче, чем «Продолжить покупки». Маленькие кнопки используются для второстепенных действий — это снижает информационный шум и помогает пользователю сразу найти главное.
Цвет несёт смысловую нагрузку. Зелёный подсознательно ассоциируется с успехом и подтверждением — поэтому его часто используют для кнопок «Сохранить» и «Оформить». Красный сигнализирует об ошибке или предупреждает: например, кнопка «Удалить» красного цвета заставляет пользователя притормозить и подумать.
Важно выдерживать единую палитру по всему сайту, иначе интерфейс будет выглядеть несобранным. На сайтах, принадлежащих бренду или компании, выбор цвета обычно привязан к брендбуку. Например, на сайте-конфигураторе «Северсталь Стальные Решения», разработанном Uplab, вся палитра кнопок и фонов взята из гайда по фирменному стилю.
На любом экране сайта или приложения важна иерархия: одна главная кнопка (основное действие), одна-две второстепенных и, если нужно, третьестепенные. Например, в почтовом клиенте: «Отправить» — основной стиль, «Сохранить черновик» — вторичный, а «Удалить» — третичный. Так дизайн направляет взгляд пользователя к нужному действию и не даёт растеряться.
Когда все кнопки на странице одинаково яркие и броские, ни одна из них не выделяется. Пользователь теряется в интерфейсе: множество акцентов одновременно — это отсутствие акцента. Если действие у кнопки не приоритетное, лучше использовать нейтральные цвета или меньший размер.
Лучшая практика — сделать «правильное» действием по умолчанию: выделить его визуально, чтобы пользователь интуитивно двигался в нужном направлении.
Но есть и исключения. Если варианты выбора равноценны или действие несёт потенциальный риск — например, согласие на передачу чувствительных данных — лучше не навязывать один вариант, а дать пользователю возможность осознанно выбрать самому.
При проектировании интерфейса важно учитывать доступность сайта. Эти требования (кстати, прописанные в стандарте ГОСТ Р 52872-2019) важны не только для людей с ограниченными возможностями здоровья, но и для тех, кто пользуется веб-ресурсом в неидеальных условиях: на ярком солнце, с маленького экрана, в спешке.
На что обратить внимание:
Контрастность. Текст на кнопке должен хорошо читаться, а для этого важно внимательно подбирать цвета. Белый текст на светло-мятном фоне — классический пример того, как делать не надо.
Размер кликабельной области. Интерактивная зона кнопки должна быть не менее 44×44 пикселей — это рекомендация Apple и Google. Даже если визуально кнопка выглядит компактно, её область нажатия должна быть достаточной для удобного клика.
Шрифт. Слишком мелкий текст на кнопке — прямой путь к потере конверсии. Оптимальный размер шрифта для кнопок — 14–16 px на десктопе и не меньше 16 px на мобильных устройствах.
Дизайнерам важно работать в связке с разработчиками: в HTML все интерактивные элементы должны иметь семантическую роль button, а не быть стилизованными div-элементами. Это критично для скринридеров и клавиатурной навигации.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13836 тендеров
проведено за восемь лет работы нашего сайта.
Доля мобильного трафика в мире достигает примерно 67% (по данным Similarweb за второе полугодие 2026 года), при этом на настольные компьютеры приходится около 32%, на планшеты — меньше 1,5%. Наличие мобильной версии — уже давно «база», а не преимущество.
Главное правило для мобильных кнопок: они должны быть достаточно большими и расположенными так, чтобы их можно было нажать пальцем одной руки. Пользователь смартфона часто держит устройство одной рукой, и его большой палец покрывает область примерно 10×10 мм. Если кнопка меньше этого пятна, пользователь будет промахиваться или просто закроет страницу.
На практике важно учитывать так называемую «зону большого пальца»: кнопки действий лучше располагать ниже середины экрана, куда дотягивается палец при одноручном использовании. Это особенно критично для CTA-кнопок, или «кнопок призыва к действию», в мобильных версиях интернет-магазинов.
Дизайн привлекает внимание, но решение нажать пользователь принимает на основе текста. Человек должен сразу понимать, что произойдёт после клика.
Простое правило: используйте глаголы. Представьте, что кнопка спрашивает пользователя: «Хотите (Добавить в корзину)?» или «Хотите (Подтвердить заказ)?». Если фраза звучит естественно, текст подобран верно.
Общих слов стоит избегать. «Отправить» или «Подтвердить» без контекста ничего не говорят. «Да» и «Нет» в диалоговых окнах заставляют пользователя перечитывать вопрос, чтобы понять, к чему относится «Да». Сравните: «Да / Нет» и «Удалить заказ / Оставить» — второй вариант не требует дополнительных усилий.
Ещё один нюанс: длина текста. Оптимально — 1–4 слова. «Оформить заказ» лучше, чем «Нажмите сюда, чтобы оформить ваш заказ». Короткий текст быстрее считывается и не ломает композицию кнопки на мобильных устройствах.
В западных интерфейсах основное действие ставят справа, отмену — слева. В macOS диалоговых окнах — наоборот. Android следует Material Design и тоже размещает подтверждение справа. Единого стандарта нет, но есть принцип: пользователь не должен гадать, куда нажать.
Мы придерживаемся правила: главная кнопка стоит справа, потому что взгляд при чтении движется слева направо и останавливается на последнем элементе. Это работает для форм, модальных окон и любых диалогов. Вторичное действие — «Отменить», «Назад», «Пропустить» — остаётся слева и оформляется менее заметно: текстовой ссылкой или outlined-кнопкой.
Есть исключение — мастера (wizards) с пошаговой навигацией. Там кнопка «Назад» стоит слева, а «Далее» — справа, и это логично: расположение отражает направление движения по шагам. В таких сценариях порядок подчиняется не иерархии действий, а пространственной метафоре.
Ещё одна деталь, которую часто упускают: расстояние между кнопками. Если «Удалить» и «Сохранить» стоят вплотную, пользователь на мобильном устройстве рискует промахнуться. Мы закладываем минимум 8–12 px между кнопками деструктивного и конструктивного действия — этого достаточно, чтобы палец не соскользнул на соседний элемент.
Состояние кнопки, в котором ее видно, но невозможно нажать, означает «этот элемент не активен, но скоро заработает». Обычно визуально кнопка выглядит более светлой и не меняется при наведении курсора. Мы не советуем совсем убирать с экрана кнопку, если действие с ней в данный момент невозможно: это приводит пользователя в замешательство.
Но и кнопки с неактивным действием могут запутать. Если действие недоступно, нужно обязательно объяснить, почему. Мы видим два рабочих подхода.
Показывать подсказку при наведении или тапе на неактивную кнопку: «Заполните обязательные поля» или «Добавьте хотя бы один товар».
Оставлять кнопку активной, но при клике подсвечивать, что именно нужно исправить. Этот вариант лучше работает при заполнении форм.
Важно помнить об доступности сайта для слепых и слабовидящих и программировать неактивные кнопки как aria-disabled="true" с перехватом клика через JavaScript. Так скринридер «увидит» элемент и сможет объявить: «Кнопка “Оформить заказ” недоступна».
Собрали саммари статьи, чтобы вы смогли оценить макеты подрядчика или провести экспресс-аудит вашего сайта.
Иерархия. На каждом экране — одно главное действие. Оно выделено цветом и размером, остальные кнопки отступают на второй план.
Форма и размер. Скругленные углы, высота не менее 36–48 px на десктопе — узнаваемая форма. Нестандартные формы и крупные размеры можно использовать для привлечения внимания к главному действию.
Цвет и контраст. Контрастность текста к фону — минимум 4,5:1 по WCAG. CTA-кнопка не сливается с окружением.
Выделение ключевого действия. Способы: размер, цвет, расположение и свободное пространство вокруг кнопки.
Доступность. Все важные состояния хорошо видимы.
Размер для «мобилки». Область нажатия — минимум 44×44 px. Ключевые кнопки — в зоне большого пальца, внизу экрана.
Текст на кнопке. Глагол + контекст: «Оформить заказ», без общих фраз и лишних конструкций.
Порядок кнопок. Главное действие — справа, отмена — слева.
Неактивное состояние. Если кнопка заблокирована — объясните почему. Нужна подсказка при наведении или сообщение при клике.
