Эффективный дизайн кнопок: лучшие советы

Кнопка – стандартный вариант управления для современного человека. Невозможно представить мир без кнопок и кнопочек. Они решают большие и маленькие задачи:

• Открывают двери.

• Делают фото.

• Греют обед. 

Одним касанием мы можем включить пылесос, запустить приложение, активировать систему. Обычный пользователь даже не догадывается, какие процессы стоят за этим. Алгоритмы словно говорят: «Не переживайте ни о чем, просто нажмите кнопку, а мы сделаем все остальное за вас». 

Но не менее важны и кнопки в digital-пространстве:

1. Оплата покупок. 

2. Лайки на понравившийся контент.

3. Реакция на пост и отправка комментария…

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

Кнопка или ссылка: большая разница

Давайте «на берегу» разберемся, в чем отличие между кнопкой и ссылкой:

• Кнопки призваны информировать в доступной форме о перечне действий, что можно осуществить. Они чаще всего встречаются в формах, чатах, на панелях инструментов. Главная задача – совершение разных действий. 

• Ссылки нужны для навигации по страницам (или одной странице) – к примеру, в профиль в соцсети, на страницу с нужной статьей. 

«Портрет кнопки»

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

Можно выделить 6 основных состояний кнопки:

1. Стандартное (состояние покоя) – в это время кнопка являет собой интерактивный элемент интерфейса, который котов в любое время быть использованным по назначению.

2. Состояние фокуса – элемент дает «ответ» на пользовательское действие. Например, человек выделяет кнопку с помощью любого инструмента ввода. 

3. Наведение мыши на кнопку – наведение курсора мыши на элемент.

4. Нажатие – это активное состояние.

5. Состояние загрузки – это значит, что элемент осуществляет действия (например, отправляет форму с опросом). 

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

ТОП-6 востребованных видов кнопок

Оказывается, существует много видов кнопок (по форме, размеру и цветам), которые вы можете использовать в работе:

• Старая добрая классика – объемная кнопка. 

• Объемная кнопка с иконкой, которая может выглядеть более информативной. 

• Контурные кнопки. Их еще называют «призрачными». Отлично вписываются в облегченный минималистичный дизайн. 

• Текстовая кнопка (похожа на ссылку, но сохраняет функционал кнопки). 

• Кнопка в виде иконки (изображения). 

• Плавающая кнопка, при контакте с которой появляется выпадающее дополнительное меню. 

Как выбрать оптимальный стиль кнопки. Тут нет (и не может быть) универсальных рецептов, так как такое решение будет напрямую зависеть от таких 3-х ключевых параметров:

1. Цели добавления. 

2. Используемая платформа. 

3. Брэндбук (фирменные цвета и другие факторы). 

Стиль кнопки: что это за «зверь»?

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

• Чаще всего используется 1 заметная кнопка (еще такой стиль называется «основным»).

• Ее дополняют второстепенные кнопки.

• Их сменяют, в свою очередь, побочные кнопки для «третичных» пользовательских действий. 

Давайте сформулируем пример таких кнопок для абстрактной социальной сети:

1. Основной стиль: отправить комментарий на «стену». 

2. Вторичный стиль – сохранение черновика комментария. 

3. Третичный стиль – удаление написанного. 

Подобная иерархия не для красоты, а для удобства пользователя: она дает ему вектор движения, не позволяя растеряться. 

«А это разве кнопка»?

Главное правило – делать кнопки похожими на кнопки. В бестселлере Стива Крута, известного usability-инженера, написано «Не заставляйте думать!». Он описывает много пунктов, но основная мысль в том, чтобы интерфейс был очевидным. Головоломки хороши в других местах. 

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

Единый стиль и его важность!

Будем кратки: единство стиля должно стать нормой. Оно решает много задач:

1. Улучшение скорости и точности взаимодействия.

2. Избегание ошибок. 

3. Пользователь чувствует, что он контролирует ситуацию на пути к желаемому результату. 

Во время определения основных, вторичных и третичных кнопок, советуем сделать их одной «семьей», найдя что-то общее (форма, цвет, мигание и так далее). 

Размер имеет значение

В мире кнопок также важен размер. Если посетителю не будет удаваться нажать на кнопку или в процессе он будет «задевать» соседние элементы, это вызовет только раздражение и сформирует негативный опыт. Лучше сделать кнопки больше, чем потерять лояльных клиентов. Статистика гласит, что для большинства платформ подойдут интерактивные элементы с размером от 48×48 dp, тогда как уже полюбившиеся всем нам пиксели (px) отображаются по-разному на экранах разных устройств. 

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

Жесты и касания

Советуем двигаться в сторону прогресса и использовать не только классические касания, но и жестовое пользовательское взаимодействие с интерфейсом. Это нужно для экономии времени и приятного тактильного чувства контроля. За последнее время они все чаще появляются в нашей жизни:

• Свайп, когда нужно смахнуть страницу. 

• Двойное касание для оценки «лайк»! 

• Долгое удержание для появления дополнительного меню. 

Как назовешь корабль: прописные истины

Да, правильное «имя» кнопки помогает совершать целевое действие. Проверено на практике пользователями сервиса рассылок DashaMail. Если вы странно и нелогично назовете кнопку, придется встретиться с «санкциями»:

1. Пользователи не понимают, что нужно сделать.

2. Они тратят больше времени.

3. Совершение ошибок. 

Будьте четкими и конкретными. Это всегда работает на 5+!

Запрет на неактивные кнопки

Неактивные кнопки – это «мертвые души». Четко по Гоголю. Вспомните, как вы столкнулись с такой проблемой в Сети:

• Вы застреваете на странице, где есть кнопка, которая «против активности».

• Вы не проходили курс на тему «Как вернуть к жизни кнопку». 

• Вы не знаете, почему она не работает (и заработает ли). 

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

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

ТОП-10 советов по дизайну кнопок

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

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

2. Стиль как ода индивидуальности. Сделайте так, чтобы кнопки сочетались с другими элементами, представленными в интерфейсе, чтобы они не противоречили вашему фирменному/корпоративному стилю. 

3. Варианты состояния – это важно! Продумайте это заранее, чтобы пользователю было очевидно, что элемент сработал при взаимодействии. 

4. Грамотная иерархия кнопок. Оформляйте с отличием друг от друга кнопки первичные, вторичные и третичные. Это упрощает восприятие и делает необходимые действия логичными и простыми. 

5. Примите решение, нужно ли вам действие «по умолчанию»! Нередко такой вариант приводит к пользовательским ошибкам и негативной реакции. Если такой исход событий можно исключить – надо сделать это. 

6. Стандартные решения – это не плохо. Наоборот, пользователь видит то, что ему привычно и знакомо, поэтому не тратит время и силы на раздумья. 

7. Еще раз про размер. Кнопки должны быть настолько большими, насколько это возможно, чтобы люди взаимодействовали с ними без «танцев с бубном». Учитывайте, что среди аудитории могут быть люди с плохим зрением. 

8. Понятное название – мы уже говорили об этом, но еще раз напомним о важности корректного имени. Один такой «промах» может стоить потери платежеспособности клиентов.

9. Неактивные кнопки – только в крайнем случае. Лучше – создать уведомление, чтобы оповестить об изменениях. 

10. Доступность дизайна во благо простоты восприятия.

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

Можем посоветовать, если есть такая возможность, проводить тестирования (А/В), чтобы понять, какой вариант работает лучше в вашем случае. Можно даже отправить рассылку, задав вопрос подписчикам, предложив им поделиться своим экспертным мнением. Это всегда подкупает! 

На этом всё о кнопках! Удачи и встретимся в новых полезных публикациях от DashaMail!