Привет, коллега! Садись поудобнее. Давай поговорим о кнопках. Обычно, когда слышишь слово «дизайнер», представляют человека, который рисует космические интерфейсы, градиенты и тени. Но правда в том, что 90% времени мы проводим в войне с пикселями, пытаясь заставить пользователя сделать одно простое действие — нажать.
Мы не просто рисуем прямоугольники. Мы создаем точки невозврата. Микроконверсии — это не про «купи слона», это про магию момента, когда палец (или курсор) дрогнул и опустился именно на нашу кнопку.
Давай препарируем идеальный CTA (Call-to-Action). Без воды, только хардкор с приправой из психологии.
1. Размер: Никаких «мышек» и «слонов»
Закон Фиттса никто не отменял: время достижения цели зависит от расстояния до нее и размера цели.
В моей практике была история, когда заказчик просил сделать кнопку «Заказать» 40 на 80 пикселей. «Чтобы была изящная», — говорил он. Я смотрела на это и видела не кнопку, а капкан для мышки. Попасть в такую с телефона — это как кормить бегемота через замочную скважину.
Золотой стандарт:
- Для десктопа: Минимум 44x44 пикселя (стандарт Apple). Но лучше 50–60.
- Для мобильных: Тут свои законы джунглей. Подушечка пальца — штука широкая. Идеальный таргет — 48px (около 9 мм). Если кнопка меньше, пользователь начинает целиться, напрягается, а напряжение в дизайне — смерть конверсии.
В чем прикол: Если кнопка слишком огромная (на весь экран), это тоже плохо. Это не кнопка, это уже «стена». Глаз пугается отсутствия воздуха.
Нужен баланс: кнопка должна быть заметной, но не навязчивой и кричащей: «Смотрите, я здесь, я здесь!».
2. Цвет: Психология или «Красная кнопка — стоп?»
Самый частый вопрос: «А каким цветом сделать кнопку, чтобы жали?». Многие тыкают пальцем в небо и выбирают красный, мол, он привлекает внимание.
Стоп. Тут нужна холодная голова.
Да, красный — цвет опасности и страсти. Но если ваш сайт про йогу и дзен, красная кнопка будет смотреться как пожарная сигнализация в здании. Пользователь испугается и убежит.
Правило контраста, а не цвета:
Неважно, красный, зеленый или фиолетовый. Важно, чтобы кнопка была самым контрастным элементом на странице относительно фона. Глаз эволюционно настроен замечать то, что отличается.
Мой любимый прием — Принцип изоляции. Если весь сайт выполнен в холодных тонах (синий, серый), оранжевая или теплая кнопка будет работать как магнит. Вы как будто говорите мозгу: «Смотри сюда, тут тепло и уютно, жми!».
И да, забудьте про серые кнопки. Серый цвет в дизайне — цвет безнадежности. Он шепчет: «Я неактивен, даже не пытайся». Если ваша кнопка серая, вы теряете 30% конверсии еще до старта.
Хороший пример кнопки:
3. Текст: «Отправить» против «Получить пиццу»
О, это моя любимая мозоль. Текст на кнопке — это не просто надпись, это команда вселенной.
«Отправить», «Применить», «ОК» — это кнопки-эгоисты. Они говорят о действии пользователя (отправить форму), но не говорят о выгоде.
Секрет успеха:
Кнопка должна заканчивать мысль пользователя: «Я хочу...».
Сравните:
- «Отправить» — Скука. Работа. Очередная анкета в никуда.
- «Получить бесплатное руководство» — Выгода. Халява. Знания.
Чувствуете разницу? Второй вариант — это микроконверсия в чистом виде. Пользователь уже представил, как он держит это руководство.
Прикол в деталях: Используйте глаголы в первом лице. Иногда смена формулировки с «Забронировать» на «Забронировать для меня» повышает кликабельность на 10-15%. Потому что это персонализация. Кнопка будто разговаривает с вами.
4. Микроконверсии внутри кнопки
Идеальная кнопка дышит. У нее есть воздух внутри (паддинги). Текст не должен упираться в края. Если текст прилипает к рамке, читать его трудно, а значит, и жать подсознательно не хочется.
И форма имеет значение.
- Острые углы (квадрат) — надежность, стабильность, но легкая агрессия.
- Скругленные углы (пилюли) — дружелюбность, скорость, легкость. Наши глаза любят плавные линии, потому что в природе почти нет прямых углов. Скругленные углы ведут палец быстрее. Тесты показывают, что «пилюли» кликают охотнее, чем строгие квадраты.
Итог: Рецепт идеальной кнопки
Если собрать все воедино, идеальная кликабельная кнопка выглядит так:
- Размер: Комфортный подзатыльник (минимум 48px высотой), чтобы промахнуться было просто невозможно.
- Цвет: Контрастный, как черный ворон на белом снегу. Он выделяется, но не режет глаз.
- Текст: «А что мне будет?» — отвечает на этот вопрос еще до нажатия.
- Душа: Скругленные углы и воздух вокруг текста.
Помните, мы не просто рисуем интерфейсы. Мы выкладываем красную дорожку для пальца пользователя.
Наша задача — убрать все камушки, чтобы он прошел по ней и сделал то, что нам нужно, с улыбкой на лице.
А теперь идите и проверьте свои кнопки. Небось, там где-то затесался серый прямоугольник с надписью «OK»?
Больше интересных и полезных статей можно посмотреть на моем канале https://t.me/astium_design или личном сайте https://astium-design.ru/blog в разделе Блог.
Мой сайт - https://astium-design.ru
А также, есть группа в ВК, там я выкладываю всё самое актуальное https://vk.com/astium
Подписывайтесь, будет интересно)