Правила юзабилити

Первый экран сайта и основные зоны внимания лендинга

Команда AskUsers

Команда AskUsers

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

Если беглый взгляд посетителя не найдет нужной и полезной ему информации в течение 3-5 секунд, он покинет сайт. Именно поэтому правило «Встречают по одежке» очень актуально при оформлении первых экранов. Главная страница сайта выполняет функцию «красивой оболочки», «фантика вкусной конфеты». Если правильно и красиво «упаковать» первый экран, то пользователь заинтересуется дальнейшим содержимым сайта.

candies1.jpg

Цели первого экрана

Попав на страницу сайта, посетитель обычно задает похожие вопросы:

question.jpg

Куда я попал?

Туда ли я попал, куда хотел?

У каждого бизнеса разные цели первого экрана. У сайта по продаже туров в Египет – продать тур. У сайта Интернет-магазина оптики – завлечь посетителя на другие страницы для осуществления подбора и покупки очков. А у сайта образовательных услуг цель первого экрана – подписка на рассылку.

sovet.jpg

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


Основные элементы первого экрана лендинга

1. Заголовок первого (главного) экрана. В нем поясняете, чем вы занимаетесь, род деятельности компании. Он должен быть кратким и понятным при прочтении. Если вы продаете туры, то пишите на первой странице «Продажа туров в Египет». На сайте оптики хорошим заголовком будет «Очки на любой кошелек». А на сайте образовательных услуг пишите, например, «Обучение Интернет-маркетингу».

Простой совет: Покажите свой сайт постороннему человеку и спросите понятно ли чем занимается компания? Если ответ очевиден, то ничего менять на первом экране не нужно.

2. Картинка или видео – это визуальный контент. Картинка помогает воспринимать информацию. Она может быть:

  • Характерной особенностью продукта (для Интернет-магазина оптики – симпатичная девушка в очках).
  • Картинка – процесс (для активного отдыха в горах – динамичное фото горнолыжника, покоряющего склон).
  • Картинка – результат (для подписки на образовательные услуги – фото чемодана со знаниями, книги).
  • Картинка – символ (для продажи обручальных колец используется голубь, сердце, т.е. соответствующий символ).

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

3. Призыв к действию у пользователя. Призыв к действию может быть в виде кнопки «Записаться», «Зарегистрироваться» или «Узнать больше». Подробнее о том, как правильно оформить кнопку целевого действия в разных разрешениях экрана вы можете прочитать здесь. Изменив дизайн кнопки вы можете увеличить конверсию в несколько раз.

Эти три элемента или зоны внимания на сайте являются обязательными. Их можно дополнять по необходимости следующими элементами:

  • Название и логотип компании. Используйте фирменные цвета и название во всех обращениях с целевой аудиторией.

  • Форма обратной связи – телефон, онлайн-чат.

  • Характеристики вашего уникального торгового предложения.

Пример оформления первого экрана лендинга

cxema-8icf1.jpg

Минус сайта – отсутствует кнопка призыва к действию «Купить», в качестве предложения можно добавить кнопку «Заказать обратный звонок».

На первой страничке сайта посетителя важно провести по цепочке заголовок–картинка–действие. А целью первого экрана является целевое действие потребителя. Триггеры способны усилить влияние на желание остаться на сайте или совершить целевое действие.

Узнайте больше об оформлении первого экрана, прочитав статью о «волшебном правиле 7+2».

Успехов вам в оформлении первого экрана!

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

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

Закажи юзабилити-тестирование прямо сейчас
Заказать
13285
Читать также