Создание идеальной кнопки

Всё, что нужно знать о создании привлекательных кнопок.

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

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

Примеры:

1. Кнопка «домой» перенаправляет на главную страницу.
2. Кнопка «копировать» создаёт копию.
3. Кнопка «добавить новый продукт» открывает страницу для создания нового продукта.

Принципы

Согласно Google, хороший дизайн кнопок должен соответствовать трём принципам: узнаваемость, доступность и понятность.

Чёткая кнопка

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

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

Иногда кнопки могут содержать несколько элементов, где текст и значок несут разные значения.

Кнопка с текстом и значком

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

Создание доступной кнопки

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

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

Как сделать кнопку узнаваемой

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

Уведомление с текстовой кнопкой

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

Текст

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

Текст в контексте

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

Значки

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

Кнопки со значками

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

Иерархия

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

Размещение

Наиболее важные действия должны быть размещены в наиболее видимой области. Чем ниже кнопка, тем менее заметной она будет.

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

Акцент

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

Стиль

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

Размер

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

Резюме

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