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.