Кнопка – это не просто элемент интерфейса, а настоящая воронка, которая направляет пользователя к желаемому действию. Но как сделать ее настолько привлекательной, чтобы человек не просто смотрел, а хотел нажать?
Вот несколько секретов:
- Цвет и контраст: используйте яркий, контрастный цвет, который выделяется на фоне остального дизайна.
- Размер и форма: кнопка должна быть достаточно большой, чтобы на нее было легко нажать. Откажитесь от сложных геометрических форм – простота и ясность – ключ к успеху. Это особенно актуально для покупок с мобильных устройств. Вне зависимости от размера экрана, оптимальная высота кнопки — от 42 до 72 пикселей (11-19 мм), идеально — 60 пикселей (16 мм). Очень тщательно продумайте размер зоны прикосновения и внутреннего поля. Результаты исследования, проведенного MIT Touch Lab, показали, что средний размер для прикосновения подушечками пальцев составляет 10-14 мм, а для кончиков пальцев — от 8 до 10 мм, при этом оптимальный минимальный размер зоны прикосновения будет 10Х10 мм.
- Текст: текст на кнопке должен быть четким, лаконичным и отражать действие, которое вы хотите, чтобы пользователь совершил. Рекомендации по размеру текста: минимальный размер: 14 пикселей, оптимальный размер: 16 пикселей. Вертикальные отступы от текста равны размеру шрифта либо немного больше, горизонтальные отступы, это вертикальные отступы умноженные на 2
- Эффект наведения: добавьте эффект наведения, чтобы кнопка “реагировала” на действия пользователя.
- Позиционирование: разместите кнопку в логичном месте и в контексте окружающего контента. Чтобы выстроить иерархию действий, создайте разные стили кнопок с помощью цветов или форм. Иначе основные и неосновные СТА будут сливаться. Пользователь не поймет, чего от него хотят в первую очередь и растеряется. Придется как минимум вчитываться в надписи на кнопках.
- Тестирование: не бойтесь тестировать различные варианты, чтобы понять, что лучше всего работает для вашей аудитории.
Помимо того, что я уже написала, есть ещё несколько важных моментов, которые нужно учитывать при создании привлекательной кнопки.
- Контекст: кнопка должна быть гармонично вписана в общий дизайн сайта или приложения. Её стиль, цвет и форма должны соответствовать общему стилю, чтобы не выглядеть как инородное тело. Обратить внимание аудитории на кнопку можно, просто оставив вокруг нее свободное пространство. Дополнительно могут использоваться всевозможные указатели и стрелочки, направленные на СТА.
- Ожидания пользователя: кнопка должна соответствовать ожиданиям пользователя. Если он ожидает увидеть зелёную кнопку "Купить", а она красная и называется "Приобрести", это может его сбить с толку. Напоминайте рядом с call to action, какую выгоду получит покупатель от конкретного товара.
- Доступность: кнопка должна быть доступна для всех пользователей, включая людей с ограниченными возможностями. Используйте контрастные цвета, достаточный размер шрифта и продуманное расположение элементов. Если страница длинная, кнопку дублируют, также можно закреплять область экрана с кнопкой, чтобы СТА постоянно был на виду.
И, конечно, не забывайте о своём творческом вдохновении. Кнопка может быть не только функциональным элементом, но и красивой и интересной деталью вашего дизайна.