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

Кнопка в веб-дизайне — это интерактивный элемент, который позволяет пользователю совершить определённое действие. По сути, кнопка — это «мост» между желанием человека и функцией системы, будь то отправка формы, оплата товаров в корзине, поиск билетов или переход на другую страницу. Пользователь наживает на кнопку, например «Оплатить» или «Оценить», и желаемое действие совершается: заказ на маркетплейсе оплачивается, отзыв на отель отправляется.
Кроме этого, на любом сайте кнопка — главный инструмент навигации и конверсии. Именно этот элемент помогает пользователю проходить задуманный UX-дизайнером сценарий, быстро выполнять свои задачи и целевые конверсионные действия.
Научиться создавать кнопки, которые работают на целевое действие, а также полноценные макеты для сайтов и сервисов любой сложности с нуля за 9 месяцев можно на курсе «Веб-дизайнер». Полезный бонус — бесплатные пробные уроки и полезные знакомства с опытными дизайнерами и экспертами из IT.

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

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

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

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

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

    Цвет и психология восприятия

    Цвет заливки кнопки помогает выстроить на сайте иерархию действий и привлекает внимание к главному элементу на экране. Яркие и контрастные цвета используют для первичных кнопок, так как они сразу бросаются в глаза. Нейтральные цвета или белый (бесцветный) с обводкой отлично подходят для второстепенных кнопок: они не отвлекают внимание пользователей.

    Александр Старинский

    При выборе палитры кнопок всё, что нужно, — помнить о паттернах: красный — ассоциация с удалением, ошибкой или негативным по смыслу действием. Зелёный — действие с положительной окраской, подтверждение и успех, жёлтый или оранжевый — действие, связанное с оплатой, серый «супердисейбленный» — «сейчас не работает».

    Формы и визуальный стиль

    Форма кнопки напрямую влияет на общую стилистику продукта. Острые углы создают ощущение строгости и технологичности, что часто используется в корпоративных или банковских сервисах. Напротив, скруглённые углы воспринимаются как более мягкие и безопасные. Поэтому даже в интерфейсах брендов со строгим tone of voice добавляют небольшое скругление для кнопок вроде 2рх или 4рх, чтобы не так сильно демонстрировать «строгость и сдержанность».

    Текст на кнопках

    Хороший текст на кнопке должен быть кратким и чётко отвечать на вопрос пользователя «Что произойдёт, если я нажму?». Лучше всего использовать сильные глаголы: «Купить», «Скачать» или «Отправить форму». Стоит избегать размытых формулировок вроде «Далее» или «ОК», если из контекста экрана не совсем ясно, куда они приведут.Текст на кнопке должен легко читаться, поэтому крайне важно следить за контрастом между цветом шрифта и цветом.

    Тестирование и оптимизация

    Самый надёжный способ проверить, выполняет ли кнопка свою задачу, — провести A/B-тестирование двух-трёх разных вариантов на реальных пользователях. Можно менять цвета, тексты или расположение элементов и замерять, какая версия приносит больше кликов и целевых действий. Тепловые карты и записи пользовательских сессий помогают понять, замечают ли люди кнопку и не путают ли её с некликабельными плашками. Более быстрый вариант — коридорное тестирование, его полезно провести на этапе прототипа, чтобы быстро отловить очевидные проблемы юзабилити.

0

0

4

Bulmen

Сохранить автора