Как создать эффективный первый экран сайта

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

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

Первый экран представляет собой блок на странице сайта, который пользователь видит при открытии сайта. При создании первого экрана решается ряд задач:

• Формирование первого впечатления о продукте/услуге.

Эта задача решается через создание стильного дизайна, эффектного и понятного УТП, грамотного расположения элементов. При просмотре первого экрана пользователь может испытать широкий спектр эмоций: от восторга до разочарования. Дизайнер же способен сделать так, чтобы пользователь захотел узнать о продукте больше и приобрести его.

• Знакомство с продуктом.

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

• Создание атмосферы, необходимой бренду.

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

Каждый блок страницы на сайте имеет определенный набор элементов. Давайте рассмотрим типовой набор элементов, которые могут использоваться на первом экране сайта.

Заголовок

В заголовке первого экрана обычно указывают название компании/организации, род деятельности или УТП. Под заголовком можно разместить оффер — актуальное акционное предложение, например, со скидками на услуги или сервисные опции (например, «Бесплатная доставка», «Чек-лист в подарок» и т. д.). На первом экране при желании можно разместить 3-5 преимуществ вашего продукта или услуги, которые помогут наиболее полно, но при это лаконично рассказать пользователю, почему стоит обратить внимание на ваше предложение.

Изображение или видеоролик

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

Призыв к действию — Call To Action

На большинстве первых экранов помимо заголовка и изображения размещают и призыв к действию (Call To Action). CTA может быть представлен в виде кнопок (например, «Купить сейчас», «Узнать больше», «За покупками», «Записаться на прием»). Во время оформления первого экрана дизайнеру нужно уделить особое внимание кнопке CTA, так как от нее во многом зависит процент конверсии на сайте. Кнопка должна быть достаточно заметной, чтобы зацепить внимание пользователей, но при этом она должна органично вписываться в общий дизайн экрана. Текст на кнопке должен быть читабельным, а действие, которое предлагается сделать пользователю, должно быть логически обоснованным. Если вы, например, разрабатываете дизайн для интернет-магазина одежды, то логичным решением будет сделать кнопку СТА с текстом: «За покупками», «В каталог», «К новинкам». При этом размещать кнопки «Зарегистрировать личный кабинет», «В корзину» — будет не вполне логичным, так как пользователь хочет вначале оценить, что ему предлагают, а уже потом регистрировать аккаунт и добавлять что-то в свою корзину.

Форма заявки

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

Меню сайта/Навигация

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

Логотип

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

Ссылки на социальные сети

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

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

Рациональность

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

Оптимизация

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

Аналитика

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

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

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

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

Изображение должно быть заметным

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

Явите миру лицо продукта

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

Уместность — залог успеха

Изображение, которое вы выбираете должно транслировать ваше УТП. С помощью него вы можете подтвердить пользу вашего продукта, рассказать, каков процесс его производства, и самое главное — продемонстрировать результат, к которому ваш продукт позволяет прийти.

Попробуйте заменить изображение на видео

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

Красота в простоте

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

Визуальная иерархия

Принцип визуальной иерархии — один из основополагающих принципов, о которых нужно помнить каждому дизайнеру при проектировании не только первого экрана, но и всех блоков сайта. Согласно принципу визуальной иерархии контент на странице, будь то текст, видео или декоративные детали, должен иметь четкую структуру, в которой есть главные и второстепенные элементы. Главными элементами на первом экране сайта являются заголовок и изображение/видео. Это значит, что их нужно оформить таким образом, чтобы они выгодно контрастировали на фоне бэкграунда, панели навигации и других второстепенных элементов. Подробнее о построении визуальной иерархии мы говорили в материалах «Основы композиции в вебе» и «Управление вниманием пользователя».

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

Наложение элементов друг на друга

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

Отказ от белого пространства

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

Много лишних элементов

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

Отсутствие конкретики

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

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

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