Привет, друзья. На связи Константин, веб-дизайнер с 20-летним стажем. 15 лет в студийном аду (хихик) и 5 лет в свободном фриланс-плавании.
Вчера в директ прилетел вопрос, который я слышу на каждом втором брифинге:
«Как через визуальные образы удержать внимание? Может, красную полосу добавить? Говорят, она привлекает…»
И каждый раз ищут магию там, где её нет.
Я выдыхаю, наливаю чай и пишу этот пост. Потому что удерживать внимание нужно. Но красная полоса тут не при чем. Давайте разберемся, как это работает на самом деле, без шаманства и магии.
Миф №1. Волшебная таблетка дизайнера
Многие владельцы бизнеса (да и некоторые новички в вебе) искренне верят, что у нас, дизайнеров, есть секретный артефакт. Типа той самой красной тряпки для быка. Мы сейчас поколдуем в Figma или Photoshop, поставим нужную картинку — и пользователь впадет в транс: «О БОЖЕ, КАКОЙ ГРАДИЕНТ, Я ОСТАЮСЬ ЗДЕСЬ НАВСЕГДА!»
Это иллюзия.
Визуальный образ — это не капкан. Это упаковка. И какой бы красивой ни была обертка, если внутри конфеты нет вкуса (читай: пользы), пользователь выплюнет ее в первую же секунду и уйдет к конкуренту.
База, с которой надо начинать: Не «ЧТО», а «КТО»
Прежде чем думать, какую картинку поставить в первый экран, я задаю клиенту один неудобный вопрос:
«Кто эти люди, которые должны смотреть на экран, затаив дыхание? И какую свою боль они пришли сюда залечить?»
Понимание Целевой Аудитории — это не галочка в брифе. Это компас.
Визуальные образы для сайта пенсионного фонда и для барбершопа в центре Москвы — это две разные галактики. Если на сайте банка будет мельтешить поп-арт в стиле Уорхола, внимание вы, конечно, удержите, но это будет внимание недоуменного человека, который уже тянется закрыть вкладку.
Главный секрет удержания:
Пользователь приходит НЕ за красотой. Он приходит ЗА РЕШЕНИЕМ СВОЕЙ ПРОБЛЕМЫ.
И лучший визуальный образ — это тот, который кричит на языке пользователя:
«Эй, у тебя болит вот тут? Мы знаем как лечить. Смотри, вот так просто и быстро».
— не “красивая девушка с ноутбуком”, а экран с реальным результатом
— не “абстрактный успех”, а “до/после”
— не “процесс”, а итог, который получит клиент
Дизайн должен НЕ ОТВЛЕКАТЬ от этого месседжа, а ПОДДЕРЖИВАТЬ его.
Миф №2. «Уплотнить на квадратный дециметр»
Ох уж этот вечный страх клиента, что пользователь «не поймет». Из-за этого страха главная страница сайта превращается в газету «Вечерние Чё там у вас?» 1998 года.
Тут и акция, тут и 15 преимуществ, тут и карта проезда, тут и портрет учредителя, и кошка, и кнопка «Заказать» размером со спичечный коробок в уголке.
Запомните железное правило юзабилити и дизайна (я вывел его кровью):
Чем больше элементов в одном поле зрения, тем МЕНЬШЕ ценность каждого из них.
Вы заходите в пустую комнату, где на стене висит одна картина в подсветке. Вы будете стоять и смотреть на нее.
Вы заходите в комнату, где все стены от пола до потолка завешаны картинами, плакатами, стикерами и ценниками. Что сделает ваш мозг? Правильно, он скажет: «Слишком сложно, я устал, пойдем в ТикТок отдыхать».
Как направлять взгляд: Юзер Флоу как маршрут в лесу
Удержать внимание — значит повести пользователя за руку.
В дизайне это называется User Flow (путь пользователя). Даже на самом простом лендинге я выстраиваю этот путь визуально.
1. Столб-указатель (Узнавание)
Верхний экран. Крупно и четко. Не «Мы креативная диджитал-экосистема», а «Сделаем дизайн сайта, который окупится за месяц». Визуальный образ должен отражать результат, а не процесс.
2. Тропинка (Согласие и доверие)
Прокручивая ниже, пользователь должен увидеть, что вы не мошенник и путь безопасен. Тут работают кейсы, фото работ, отзывы. Но не все 45 штук в сетку 10х10, а лучшие 3 с крупными картинками. Воздух вокруг блока — ваш друг.
3. Финишная ленточка (Целевое действие)
Одна, четкая кнопка. Без альтернативы «А может скидку? А может прайс? А может чат?». Выбор убивает конверсию.
Приемы, которые реально работают (без магии)
И все же, как именно управлять вниманием визуально? Я не буду учить вас правилу третей или золотому сечению. Вот три приема с «20-летней гарантией»:
- Прием «Один против всех». Хотите, чтобы прочитали заголовок? Сделайте его крупным. Очень крупным. И оставьте вокруг него МНОГО воздуха. Это создает эффект «Одинокого голоса в тишине». Он будет услышан.
- Прием «Разбитое зеркало». Вместо того чтобы впихнуть 10 фото вашей продукции в ряд, поставьте ОДНО качественное, сочное изображение на половину экрана. Мозгу легче обработать одну единицу информации, чем десять. Он скажет «спасибо» и задержится подольше.
- Прием «Куда смотрит — туда кликают». Если вы ставите фото человека, следите, куда он смотрит. Его взгляд должен быть направлен НА ТЕКСТ ИЛИ НА КНОПКУ, а не в край монитора. Мы подсознательно следим за взглядом других людей. Это старая, но рабочая хитрость.
Резюме от старого вебмастера
Визуальные образы удерживают внимание не потому, что они яркие и красивые. А потому, что они уместные и ясные.
Забудьте про магические полоски. Включите эмпатию.
Поймите боль клиента.
Уберите лишнее.
Оставьте воздух.
И помогите человеку быстро понять, что он попал по адресу.
И тогда дизайн начинает работать.
Без магии. Без шаманства. Просто потому что вы наконец сделали его для человека.
P.S. А если хотите, чтобы я посмотрел на ваш сайт и сказал, что там лишнее и куда направлен взгляд пользователя — пишите в личку. Консультация бесплатная.