CTA-кнопка: еще больше кликов

CTA-кнопка: еще больше кликов

Epic Growth Channel

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

Поскольку основной целью CTA кнопки является привлечение внимания пользователя, дизайнеры стараются выделить ее размером относительно остальных кнопок в интерфейсе. Лидеры рынка предлагают свои лимиты по размерам кнопок: Apple предлагает использовать конопки 44х44 пикселя, Microsoft - 34х26 для мобильного UI-дизайна.

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

Формы и ассоциации

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

Треугольники — волнение, риск, опасность, равновесие, стабильность.

Круги, овалы и эллипсы — вечность, вселенная, магия, тайна.

Абстрактные формы — двойственность значения, уникальность, сложность.

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

Красный — уверенность, молодость и власть.

Оранжевый — дружелюбный, теплый и энергичный.

Желтый — счастье, оптимизм и тепло.

Зеленый — мир, рост и здоровье.

Синий — доверие, безопасность и стабильность.

Фиолетовый — роскошь, креатив и мудрость.

Черный — надежность, утонченность и опыт.

Белый — простота, спокойствие и чистота.

Плейсмент

Размещение кнопок тоже суперважно. Если они расположены в области, где глаза пользователей не могут их поймать, то другие визуальные аспекты, например, цвет или размер могут и не сработать. Согласно различным исследованиям, самые популярные шаблоны сканирования интерфейсов — это «F» и «Z». 50% пользователей не прокручивают страницу вниз. Поэтому предсказуемые макеты помогают юзерам эффективно читать и просматривать информацию.

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

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

Подборка статей на Medium по CTR-кнопкам, кому интересно:

UI/UX Design Glossary. Navigation Elements.

UX Design Glossary: Interface Navigation Elements. Set 2.

7 Tips to Enhance Mobile Interactions

3C of Interface Design: Color, Contrast, Content.

9 Effective Tips on Visual Hierarchy

Take It Easy: Tips for Effort-Saving User Interfaces.



Report Page