Проектируем первый экран, который никого не оставит равнодушным: 10 советов

Первый экран или hero section — первое, что видят люди, когда попадают на ваш сайт. Это уникальный шанс завоевать их расположение или потерять их навсегда.

Пользователю требуется всего несколько секунд, чтобы принять решение, хочет он продолжить взаимодействие или нет. Казалось бы, что тут сложного? Но за привлекательной картинкой стоит кропотливая работа маркетологов, дизайнеров и разработчиков. Как же найти правильное решение?

В этой статье мы собрали 10 лучших практик, которые помогут вам спроектировать эффективный первый экран.

1. Не забывайте о задачах, которые решает первый экран

Задача первого экрана — вызвать у пользователя желание узнать больше и выполнить целевое действие. Он служит своего рода приглашением к дальнейшей коммуникации.

Людям хочется сразу увидеть преимущества и решения проблем, а не читать, насколько хороша компания, или восхищаться крутым дизайном. Эти вещи уходят на второй план!

Главное изображение или hero image — визуальный стимул. Оно обещает аудитории улучшения и позитивные изменения.

Пользователь будет готов сделать шаг вперед, если:

• ему нравится визуальное оформление;
• он видит решение своей проблемы;
• его мотивирует изображение;
• его мотивирует заголовок;
• он понимает, что делать дальше.

2. Не забывайте о целях пользователей

В попытках удивить и удержать аудиторию, некоторые дизайнеры неосознанно подменяют цель пользователей своей собственной: показать потрясающий дизайн. Но пользователям интересен не дизайн.

Их задача — получить нужную вещь, услугу или информацию. Дизайн должен облегчать эту задачу, а не чинить дополнительные препятствия.

Продуманный дизайн не перетягивает на себя внимание, не отвлекает пользователей от поставленных целей и не сбивает их с толку чрезмерно впечатляющими эффектами.

Типичное содержание первого экрана:

• что предлагает компания;
• каковы преимущества этого предложения;
• почему компании следует доверять;
• какие действия нужно совершить пользователю.

Посыл очевиден: наша компания замечательная, пользователю необходимо поторопиться и нажать на эту кнопку. Увы, это так не работает. 🙃

Цели пользователей не имеют ничего общего с целями владельцев сайтов, маркетологов или дизайнеров.

Любой информации, не представляющей непосредственной ценности для пользователя, не место на первом экране. Слоганы и разделы типа «Мы лучшие», «Десять лет успешной работы», «Почему люди доверяют нам» и т.д. логичнее расположить ниже на странице.

Поставьте во главу угла цели пользователей.

Покажите пользователям то, что ОНИ хотят увидеть. Это самое важное. Всё остальное — надежность, доверие, гарантии — лишь укрепляет убежденность человека в том, что он пришел по адресу.

3. Никакого беспорядка

Первый экран должен быть простым и понятным. Вы демонстрируете здесь самую суть вашего предложения. Сделайте всё возможное, чтобы контент получился максимально читабельным. Что для этого нужно:

• чистый, лаконичный дизайн;
• четкая структура страницы;
• много «воздуха»;
• отсутствие отвлекающих деталей;
• продуманная иерархия;
• мотивирующие, лаконичные заголовки и подзаголовки;
• главное изображение, соответствующее сообщению;
• понятная и предсказуемая панель навигации.

Главное — простота и лаконичность!

4. Превратите цель пользователя в визуальный магнит

Задача дизайнера — визуализировать цель пользователя, сделав ее привлекательной, живой и цепляющей. Проведите всестороннее исследование и анализ аудитории, продукта и сайтов конкурентов. Это поможет найти вдохновляющие референсы и мотивирующие сообщения для вашего сайта.

Клиенты часто приходят на страницу, имея в голове конкретный образ своей цели. Важно учесть это и не обмануть их ожидания. Люди жаждут предсказуемости — это относится как к визуальному оформлению, так и к UX.

Следуйте правилу «одна идея — один образ». Заголовок должен резонировать с изображением, усиливать и подчеркивать его. Правильная комбинация текста и изображений стимулирует желание и готовность пользователя сделать следующий шаг.

5. Ищите триггеры

Работая над первым экраном, помните: вы создаете мотивационный триггер. Смело используйте разные маркетинговые, дизайнерские и психологические уловки, чтобы повлиять на восприятие пользователя.

У каждой аудитории своя мотивация. Изучите своих пользователей и найдите лучший способ вовлечь их как эмоционально, так и рационально. (За эмоциональной реакцией следует рациональная оценка информации).

Вы должны спланировать эмоции пользователей и заложить их в проект на стадии концепции.

Чтобы найти лучший триггер, спросите себя:

• Что должен почувствовать пользователь, увидев ваше предложение?
• Какие воспоминания оно должно вызывать?
• Какие ассоциации оно должно вызывать?

Чтобы найти тот самый эмоциональный триггер, зачастую требуется мозговой штурм. Составьте список эмоций и их возможных визуализаций — привлекательных изображений, иллюстраций или видео. Протестируйте лучшие идеи.

Это залог высокой конверсии и любви аудитории.

Эмоции не обязательно должны быть положительными. Например, однажды Apple успешно использовала страх, запустив кроваво-красный сайт, посвященный борьбе со СПИДом, с предложением стать донором крови. Это выглядело впечатляюще. Не знаю, как насчет донорства, но многие люди купили красные iPhone.

6. Покажите явные или скрытые преимущества

Эффективный триггер всегда связан с выгодой для пользователя. Он подталкивает людей к выполнению действий, которые позволят им получить эти преимущества.

Что чаще всего отображают на первом экране:

• продукт;
• действие;
• преимущества;
• контекст;
• процесс;
• фото владельца компании.

Что бы вы ни выбрали, вы должны показать преимущества.

Явные — очевидные преимущества использования продукта или услуги.

Скрытые — повышение статуса, значимости, успеха, навыков и возможностей пользователя.

Зная свою аудиторию, вы сможете решить, на чем стоит сделать акцент в каждом конкретном случае. Беспроигрышный вариант — демонстрация неявных преимуществ. Например, сайт, продающий гвозди, покажет гораздо более высокую конверсию, если на первом экране будет размещена фотография умелого аккуратного мастера, а не просто куча гвоздей. Клиентам будет приятно почувствовать себя рукастыми хозяевами.

7. Управляйте вниманием пользователя

Четко определите, куда вы хотите направить взгляд посетителей. Что они увидят в первую очередь? После этого? На чем должен задержаться их взгляд? Все зависит от задач вашего сайта и продукта. Иерархию основных элементов необходимо продумать заранее, а затем протестировать, чтобы убедиться, что интерфейс воспринимается так, как вам нужно.

Мы направляем взгляд пользователя при помощи доминант и фокусных точек. Доминирующие элементы — самые крупные и заметные. Фокусные точки — иконки, кнопки и другие элементы, которые пользователь видит после доминант. Они удерживают его внимание в определенных зонах и, как правило, располагаются ближе к краям экрана.

Лайфхак №1: Примените к макету эффект размытия и покажите его недизайнеру. Что человек увидит в первую очередь? Что привлечет его внимание больше, а что меньше? Это хороший способ исправить неудачные решения, пока не стало слишком поздно.

Лайфхак №2: Используйте ай-трекинговые программы. Даже простое бесплатное приложение поможет вам проверить, правильно ли расставлены акценты.

Если вы обнаружили, что взгляд пользователя недостаточно долго задерживается на каком-то важном элементе, доработайте его. Возможно, стоит выделить этот элемент еще больше, сделав его крупнее или ярче, добавив анимацию, увеличив размер шрифта и т.д. (Тестируйте разные варианты!)

Делайте основной акцент на эмоциональных триггерах, а не на CTA-кнопках.

Все элементы вашей композиции должны быть иерархически упорядочены. Форма, цвет, контраст, размер, баланс, движение, типографика — всё должно выстраиваться в целостную организованную систему.

Устраните отвлекающие детали. Если какой-то элемент не сильно влияет на первое впечатление, сделайте его менее заметным, скройте или переместите в другое место.

8. Используйте релевантные изображения

Изображения релевантны, если они соответствуют цели, идее и содержанию сайта. Любые расхождения приводят к непониманию и недоверию. Например, устаревший визуал будет смотреться неуместно на сайте, посвященном инновациям, как и никому не нужные вау-эффекты, отвлекающие пользователей от основного сообщения.

Главное изображение должно донести суть предложения.

9. Используйте короткий мощный заголовок

Короткий мощный заголовок привлечет аудиторию. Однако придумать его не так просто, как кажется. Это творческий процесс. И снова я рекомендую провести мозговой штурм. Пространство на экране ограничено, поэтому вам нужно в лаконичной форме донести свои ценности, рассказать о решении проблемы и преимуществах или же задать вопрос, который сможет заинтересовать посетителей. Мозговой штурм — отличный способ найти оригинальную идею.

10. Не давите на пользователей

Любое, даже самое впечатляющее изображение, будет бесполезно без убедительного призыва к действию. Однако к написанию CTA следует подходить с осторожностью.

Никогда не давите на пользователей!

Будьте дружелюбны и неагрессивны. CTA — логичный шаг на пути пользователя к цели. Если вам не удалось заинтересовать человека с помощью заголовка и изображений, никакая CTA-кнопка не заставит его подписаться на рассылку или совершить покупку.

Сделайте целевое действие привлекательным для пользователя с помощью UI/UX.

Только в этом случае ваши CTA-элементы будут эффективными. Кнопка никого не мотивирует. Людей мотивируют идеи и образы будущего.

Спасибо за внимание!

* Meta признана в РФ экстремистской организацией