Дизайн кнопок и элементов интерфейса, которые увеличивают конверсию: разбираем иерархию, анатомию и правила размещения

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

03

02

01

В этой статье вы узнаете:

Ошибочно полагать, что термины UX и UI взаимозаменяемые. Это отличные друг от друга направления в дизайне, но взаимосвязанные. Их общая главная цель: сделать сайт не только стильным, но и удобным, продающим.

UI – это седло, стремена и поводья. UX – это ощущение, что вы можете ездить на лошади

Дайн Миллер

веб-разработчик.

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

Цель UI: создать удобный, понятный и красивый пользовательский интерфейс. Мало подобрать цвета и актуальные иконки, нужно с ходу объяснить пользователю, какие функции эти иконки выполняют.

UI дизайнеры создают внешнюю оболочку продукта, делая ее понятной и визуально привлекательной для аудитории сайта.

Основные характеристики UI дизайна:

•

создание идеальной комбинации цветовой палитры, шрифтов, анимаций и форм;

•

фокус на элементах, с которыми взаимодействует пользователь;

•

удовлетворение эстетических предпочтений пользователей.

Аббревиатура UX расшифровывается как User Experience, что с английского переводится как «пользовательский опыт». Это и есть отличие от UI — UX-дизайнер заботится не только о внешнем виде сервиса, но и о взаимодействии пользователей с этим сервисом.

Основные характеристики UX дизайна:

•

структура будущей системы должна учитывать все пользовательские сценарии;

•

продукт должен помогать людям решать задачи.

Хороший UX-дизайнер отвечает за создание наглядного и интуитивно понятного интерфейса, который не приведет к путанице или затруднениям в использовании.

Навыки, необходимые UX-дизайнеру

02

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

Исследование и анализ
UX-дизайнер должен проводить исследования и сбор данных. Важно проводить анализ пользовательских потребностей, юзабилити-тестирование, опросы пользователей, анализ данных посещаемости.

01

04

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

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

03

05

Устойчивость к изменениям
UX-дизайнер должен гибко подходить к работе с пользовательским опытом. Иногда проекты могут изменяться в процессе разработки, поэтому важно быть готовым к изменениям и научиться действовать оперативно.

06

Коммуникационные навыки
Навык общения с заинтересованными сторонами всегда важен — например, чтобы защитить свое решение на презентации клиенту.

07

Знание технологий
Понимание технологий, используемых в разработке, умение работать в программных продуктах и платформах — хорошее преимущество. Необходимо базовое знание языков программирования и веб-технологий — HTML, CSS, JavaScript.

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

Пример из нашей практики: проектируя интерфейс киосков самообслуживания для Авиакода, команда Uplab исследовала текущие экраны и составила CJM, а арт-директор сделала картонный макет стойки в натуральную величину, чтобы проверить зоны нажатия и расположение кнопок. По итогам основную кнопку «Далее» всегда ставят справа и выделяют зеленым, а «Назад» — слева.

Хороший пользовательский интерфейс должен быть простым и интуитивно понятным для обычных пользователей. Если у аудитории возникают вопросы при взаимодействии с площадкой, срочно нужны доработки интерфейса.

Пользовательский интерфейс похож на шутку. Если тебе нужно это объяснять, это не так уж и хорошо

Марти Леблан

Генеральный директор и соучредитель Iconfinder

Правильный UX/UI дизайн сочетает в себе:

02

Простота — дизайн не должен требовать объяснений.

03

Консистентность — интерфейс последователен и находится в согласовании с другими элементами сайта.

Понимание пользователя — дизайнер должен ставить себя на место пользователя, чтобы понять их потребности и ожидания.

01

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

04

05

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

Эффективность — пользователь достигает своих целей на сайте или в приложении быстро и без лишних усилий.

06

Адаптивность — бесперебойная работа на всех устройствах и в любых условиях.

07

Тестирование и оптимизация — постоянное совершенствование дизайна на основе данных и обратной связи пользователей.

08

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

Принципы выше легко согласовать на старте, сложнее удержать их на десятках экранов и состояний. Мы в Uplab начинаем проект UX/UI-дизайна с аналитики, а решения собираем в UI-кит, чтобы кнопки, формы и акценты одинаково работали на всех страницах. Если вы планируете редизайн или новый продукт, расскажите о задаче, и мы обсудим, с чего стоит начать.

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

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

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

У ссылки же всего одна функция — перенос пользователя на другую страницу или блок.

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

Понимать разницу между кнопкой и ссылкой важно и для доступности: программы экранного доступа по-разному озвучивают эти элементы.

Каждое состояние кнопки должно иметь особенности, которые отличают его от других состояний и окружающего макета. Кардинально менять ее внешний вид не нужно, а вот дополнить небольшими элементами будет кстати.

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

Типы состояний кнопки:

02

Нормальное — интерактивный и готовый к использованию элемент интерфейса.

03

В фокусе — при выделении кнопки при помощи клавиатуры или другого инструмента. Элемент как бы сообщает, что он готов к действию.

Неактивное — элемент интерфейса неактивен.

01

При наведении — состояние после наведения на него курсора мышки.

04

05

Активное — состояние после нажатия на кнопку.

Загрузка — кнопка сообщает, что происходит действие. Например, сохранение данных в форме.

06

Выбор формы кнопки зависит от цели платформы и брендбука. Самые распространенные - прямоугольные с закругленными углами. Их легко идентифицировать, они органично смотрятся рядом с полями для ввода.

Большая контрастная кнопка, как магнит, притягивает внимание пользователей. Например, кнопка «Showreel» на главной странице digital-агентства должна быть заметной, но не отвлекать от просмотра контента.

Маленькие кнопки устраняют информационный шум. Их обычно используют для второстепенных действий.

Цвет кнопок также имеет важное значение. Например, зеленый цвет часто используется для кнопок, связанных с успешными действиями — «Сохранить», «Оформить». Красный цвет обычно предупреждает или уведомляет об ошибках.

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

Этот принцип дизайнеры Uplab применили в работе с сервисом интернет-бухгалтерии «Моё дело», где запросом клиента было «сделать образ бренда менее формальным, сохранив деловой характер». Основой нового фирменного стиля, разработанного нами, стал прямоугольник, а цвета мы привязали к продуктам. Кнопки в разделах тоже сделали без скруглений и в новой цветовой палитре.

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

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

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

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

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

Лучше сделать «правильную» кнопку действием по умолчанию. Тогда следует выполнить ее в «основном» стиле и дополнительно выделить ее. Так мы удовлетворим потребности пользователей и интуитивно приведем его к нужному действию.

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

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

Так, для Группы ГАЗ дизанейры Uplab делали корпоративный сайт и сайты четырех дивизионов. Все пять ресурсов объединила одна дизайн-система с общей сеткой и палитрой из шести цветов, включая один акцентный. Посетитель, переходя с сайта на сайт, видит знакомые элементы на привычных местах и не тратит время на то, чтобы заново разбираться в интерфейсе. После запуска посещаемость сайтов группы выросла в среднем на 56,5%.

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

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

Для оценки доступности взаимодействия с дизайном можно использовать определенный набор инструментов.

UX/UI дизайнерам рекомендуется плотно взаимодействовать с командой разработчиков во время создания макета сайта. Роль «кнопка» должна использоваться для всех интерактивных элементов, которые отвечают на действия пользователя.

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

Важно проследить, что кнопки достаточно большие и расположены так, чтобы их было удобно нажимать пальцем одной руки.

Важен не только дизайн кнопки, но и ее посыл. За это отвечает текст. Пользователь должен сразу понимать, что он получит при клике.

Для названий кнопок рекомендуется использовать глаголы. При помощи слов отображайте на кнопке то, что она делает. Как будто кнопка спрашивает пользователя — «Хотите (Добавить в корзину)?» или «Хотите (Подтвердить заказ)?».

Избегайте общих слов — «Отправить/Подтвердить», а также слов «Да» или «Нет».

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

Вот несколько правил, как располагать кнопки:

02

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

03

Элементы для отмены или возврата на предыдущую страницу обычно располагаются на левой стороне. Можно быстро вернуться к предыдущему действию или отменить текущую операцию.

Важные действия обычно идут слева направо — от наиболее важных к наименее.Это позволяет пользователям быстрее ориентироваться на сайте или в приложении.

01

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

04

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

Неактивное состояние используется, чтобы показать, что этот элемент не активен, но скоро заработает. Так поступают, потому что временное исчезновение кнопки может запутать пользователя.

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