Как веб-дизайн заставляет людей покупать: 5 историй из жизни, где всё решили кнопки и шрифты
Вступление: «Дизайн — это не про красоту. Это про деньги»
Однажды мой друг-маркетолог сказал: «Хороший дизайн — это когда пользователь не замечает, как достал кошелёк». Вот реальные кейсы, где цвет, шрифт или анимация увеличили продажи. И да, тут не будет цифр вроде «конверсия выросла на 173%» — только истории.
1. История про кнопку, которую никто не замечал
Что было: Интернет-магазин чая жаловался: «Люди добавляют товары в корзину, но не покупают».
Что сделали:
Совет: Если элемент важный — сделайте его самым ярким на странице. Даже если он «перекричит» логотип.
2. Как длинная форма подписки стала короче кота
Что было: Сервис онлайн-курсов просил ввести 10 полей для регистрации. Люди уходили на третьем шаге.
Что сделали:
Фишка: Прогресс-бары и анимация превращают скучные процессы в игру.
3. Шрифт, который всех бесил
Что было: Сайт ювелирного бренда использовал декоративный готический шрифт. Клиенты звонили и спрашивали: «А это точно не секта?».
Что сделали:
Важно: Шрифт должен соответствовать аудитории. Бабушкам — крупный Arial, хипстерам — геометрический Sans.
4. Фото, которые пугали клиентов
Что было: Студия фотосъёмки использовала на сайте тёмные, драматичные портреты. Клиенты думали: «Они точно не сделают меня похожим на вампира?».
Что сделали:
Секрет: Люди покупают у тех, кто похож на них. Покажите реальных клиентов, а не моделей из глянца.
5. Навигация, в которой все терялись
Что было: На сайте строительной компании было 20 пунктов меню. Клиенты писали: «Где тут рассчитать стоимость?».
Что сделали:
Правило: Если клиент не видит кнопку «Купить» — это не его проблема, а ваша.
P.S. Почему это работает?
Люди принимают решения эмоционально, а не логически. Дизайн — это язык, который говорит:
Вступление: «Дизайн — это не про красоту. Это про деньги»
Однажды мой друг-маркетолог сказал: «Хороший дизайн — это когда пользователь не замечает, как достал кошелёк». Вот реальные кейсы, где цвет, шрифт или анимация увеличили продажи. И да, тут не будет цифр вроде «конверсия выросла на 173%» — только истории.
1. История про кнопку, которую никто не замечал
Что было: Интернет-магазин чая жаловался: «Люди добавляют товары в корзину, но не покупают».
Что сделали:
- Убрали серую кнопку «Оформить заказ» — она сливалась с фоном.
- Нарисовали красную кнопку с текстом «Забрать чай со скидкой» (и добали микроанимацию: она «дышала» при прокрутке).
- Что вышло: Люди стали чаще нажимать — потому что кнопка выглядела как «подарок», а не обязанность.
Совет: Если элемент важный — сделайте его самым ярким на странице. Даже если он «перекричит» логотип.
2. Как длинная форма подписки стала короче кота
Что было: Сервис онлайн-курсов просил ввести 10 полей для регистрации. Люди уходили на третьем шаге.
Что сделали:
- Оставили только email и пароль.
- Добавили прогресс-бар с котиком, который бежал к финишу (и подпись: «Ещё 2 шага — и ты внутри!»).
- Что вышло: Пользователи стали доходить до конца — им было жалко «бросить котика».
Фишка: Прогресс-бары и анимация превращают скучные процессы в игру.
3. Шрифт, который всех бесил
Что было: Сайт ювелирного бренда использовал декоративный готический шрифт. Клиенты звонили и спрашивали: «А это точно не секта?».
Что сделали:
- Выбрали минималистичный шрифт с засечками.
- Увеличили межстрочный интервал — текст «задышал».
- Что вышло: Люди перестали сомневаться в адекватности бренда и стали читать описание украшений.
Важно: Шрифт должен соответствовать аудитории. Бабушкам — крупный Arial, хипстерам — геометрический Sans.
4. Фото, которые пугали клиентов
Что было: Студия фотосъёмки использовала на сайте тёмные, драматичные портреты. Клиенты думали: «Они точно не сделают меня похожим на вампира?».
Что сделали:
- Заменили фото на светлые кадры с улыбающимися людьми.
- Добавили раздел «До/После»: как выглядели модели до макияжа.
- Что вышло: Заявки выросли — клиенты перестали бояться «перегрима».
Секрет: Люди покупают у тех, кто похож на них. Покажите реальных клиентов, а не моделей из глянца.
5. Навигация, в которой все терялись
Что было: На сайте строительной компании было 20 пунктов меню. Клиенты писали: «Где тут рассчитать стоимость?».
Что сделали:
- Сократили меню до 5 пунктов.
- Добавили кнопку «Рассчитать за 60 секунд» в шапке и в подвале.
- Сделали её зелёной — как дорожный знак «Выход».
- Что вышло: Клиенты перестали звонить с вопросом «Как оформить заказ?» — они находили кнопку сами.
Правило: Если клиент не видит кнопку «Купить» — это не его проблема, а ваша.
P.S. Почему это работает?
Люди принимают решения эмоционально, а не логически. Дизайн — это язык, который говорит:
- «Тут безопасно» (через простые формы и понятные кнопки).
- «Это для тебя» (через фото реальных людей).
- «Скорее жми!» (через цвет и движение).