Дизайн кнопок для сайта: правила, примеры и ошибки

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

Вместе со старшим коммуникационным дизайнером компании «Самокат» Андреем Дороховым разобрали, какие бывают виды кнопок, как правильно их оформлять и какие типичные ошибки можно допустить.

В тексте расскажем:

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

Что такое кнопка в веб-дизайне

Кнопка — ключевой элемент любого сайта. По сути, это ссылка, упакованная в эффектную обёртку, которая облегчает знакомство пользователя с UX-сценарием сайта.

Любое действие пользователя на сайте сопровождается нажатием на кнопку — отправка формы, покупка товара или подтверждение выбора. И если клиент хочет, например, забронировать отель на сайте туроператора или агрегатора гостиниц, и компании, и покупателю будет проще, если перейти к оформлению заказа можно будет в один клик.

Кнопка и ссылка отвечают за разные сценарии. Ссылка чаще всего ведёт пользователя на другую страницу или раздел, а кнопка выполняет действие только на текущей странице сайта.

Опытные дизайнеры стараются не перегружать интерфейс обилием кнопок, используя их только для самых важных функций. Чтобы наверняка привлечь внимание пользователя, кнопку обычно делают визуально привлекательной — ей задают заметную форму, контрастный основному фону цвет, реакции на наведение и нажатие. Например, на белом фоне кнопку делают красной, на чёрном — оранжевой или голубой. Она может становиться больше при наведении или запускать короткую анимацию — дрожание, искры, изменение цвета текста.

Виды кнопок на сайте

Не все кнопки одинаково важны. Визуально разделить ключевые и второстепенные элементы интерфейса — одна из главных задач дизайнера. Чаще всего иерархия кнопок состоит из трёх уровней.

Помимо основных видов кнопок существуют и более специализированные варианты. Например, «опасная кнопка», которую дизайнеры используют для оформления деструктивных функций интерфейса — безвозвратное удаление аккаунта или отмены заказа.

Также существует «неактивная кнопка», которая подчёркивает недоступность какого-то действия. Обычно её оформляют в серых тонах, чтобы пользователь сразу понимал, что не может использовать какую-то часть инструментария сайта, — например, потому, что для этого нужно сначала зарегистрироваться или оплатить подписку.

Читайте также:

Компоненты интерфейса: полный разбор основных элементов — от кнопок до модальных окон

Кнопки, карточки, меню и уведомления — разбираемся, какие задачи они выполняют.

Основные правила дизайна кнопок

Разрабатывая дизайн интерактивных элементов, важно учитывать удобство пользователей. Главная кнопка должна привлекать внимание к основному действию, но делать это аккуратно — поэтому её стоит делать различимой, но не кричащей.

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

Самый удобный способ направить взгляд пользователя на кнопку — сделать её цвет контрастным основному фону сайта. Например, дизайнеры сайта клиники УГМК залили фон кнопки «Записаться на приём» оранжевым цветом, который отлично читается на нейтральном белом фоне. Учитывая, что оранжевые оттенки — это часть айдентики УГМК, дизайнеры решили сразу несколько задач: привлекли внимание пользователей к основному действию и грамотно использовали фирменную палитру бренда.

Сайт клиники правильно расставляет акценты — на главном экране есть только одна главная кнопка, а остальные кликабельные элементы подаются с помощью третичных ссылок и интерактивных иконок.

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

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

Андрей Дорохов

старший коммуникационный дизайнер компании «Самокат», переводчик с клиентского и обратно

---

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

Цвет и форма кнопки

В digital-дизайне чаще всего встречаются две основные формы кнопок — прямоугольная и со скруглёнными углами. Первую обычно используют технологичные компании, которые не боятся отпугнуть потенциальных клиентов строгим дизайном. Второй вариант — самый популярный, поскольку ощущается пользователями как более комфортный визуально.

Дизайнеры «Сбера» не только оформили главную кнопку в мягком, округлённом стиле, но и подогнали под неё весь интерфейс домашней страницы — перекличка между элементами унифицирует облик сайта, уверяя посетителей в надёжности компании.

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

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

Текст на кнопке: что и как написать, чтобы было понятно

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

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

Читайте также:

8 ошибок в дизайне интерфейсов, которые раздражают пользователей

От плохой обратной связи и непонятных режимов до удаления данных и громоздких форм.

Состояния кнопки: hover, active, focus и disabled

Разработка дизайна кнопки — это только полдела. Дизайнеры сайтов уделяют большое внимание состоянию интерактивных элементов — когда пользователь наводит курсор на кнопку и с ней что-то происходит.

Вот какие состояния кнопок принято выделять в digital-дизайне:

• Default / Normal — обычное состояние кнопки.
• Hover — кнопка реагирует на наведение курсора.
• Focus — выделение кнопки при использовании клавиатуры или голосового набора.
• Active — кнопка реагирует на момент нажатия.
• Loading — запрос выполняется.
• Disabled — кнопка неактивна.

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

Главное — не увлечься эффектами состояния. Чересчур кричащие анимации Hover или Loading могут раздражать, а состояние Disabled без дополнительного объяснения — запутать пользователей. Также не стоит прятать важную информацию за Hover — на мобильных устройствах это состояние не работает из-за отсутствия курсора.

Андрей Дорохов

старший коммуникационный дизайнер компании «Самокат», переводчик с клиентского и обратно

---

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

Частые ошибки в дизайне кнопок на сайте

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