Тенденция в дизайне: призывы к действию

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

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

Градиенты и цвет

Главная тенденция в дизайне СТА — это цветной градиент. Такой элемент привлекает внимание пользователей к действию на экране, а также помогает им распознать цель касания.

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

Размер 

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

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

В руководстве по доступности Level AAA Success  отмечается, что размер «целевых объектов указателя» должен быть не менее 44 на 44 пикселя CSS.

Дизайн визуальных выделений

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

Рассмотрим общие визуальные выделения: 

• Подчеркивание или использование разных цветов для встроенных текстовых ссылок;
• Падающие тени или внутренние тени для объектов;
• Закругленные углы или элементы в форме круга;
• Элементы с активным текстом, например «Войти» или «Отправить».

Создание состояний наведения и фокуса

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

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

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

Доступность текста

Во внешнем виде текстовых инструкций в СТА можно выделить 2 тенденции: 

• Кнопки и элементы касания используют регистр заголовка;
• Использование простых шрифтов обычного стиля.  

Рассмотрим некоторые советы по созданию текста в интерфейсах кнопок касания: 

• Текст несет в себе прямое действие и сообщает пользователям, что будет происходить дальше после нажатия кнопки;
• Старайтесь избавиться от лишних слов — будьте лаконичными;
• Избегайте жаргонизмов и профессионализмов; 
• Будьте последовательны и используйте одни и те же термины во всем дизайне.

Текстовые ссылки 

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

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

^{Источник: designshack.net}