Главная страница сайта: как удержать клиента

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

Что должно находиться на странице

Для объективности представим себя тем самым пользователем, впервые попавшим на сайт. Поразмышляем, что именно мы хотим видеть на странице.

Шапка сайта

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

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

Шапка сайта должна содержать следующие элементы:

• Логотип. Оптимально, если он будет расположен с левой стороны.
• Название компании. Если оно указано в логотипе, то дублировать его нет необходимости.
• Краткое описание основного направления деятельности. Если оно логично вытекает из логотипа или названия, то данную информацию можно не указывать, чтобы не загромождать шапку.
• География работы или указание регионов, в которые осуществляется доставка. Например, по всему миру, по России и странам СНГ, или же в пределах конкретной области/населенного пункта.
• Контактная информация – указание электронной почты, основного номера телефона (если их несколько), адрес офиса и режим работы.
• Форма обратной связи под номером телефона.
• Для интернет-магазинов дополнительно нужно добавить ссылку на корзину и избранное.

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

Если не хватает хотя бы одного основного элемента, то посетитель просто запутается. Приведем в качестве наглядного примера шапку сайта samura.ru. Здесь не хватает указания рода деятельности компании. Из логотипа и названия невозможно точно понять, что можно найти на сайте – заказать японскую еду или купить одежду самураев? И только когда пользователь опускает свой взгляд немного ниже, то он понимает, что здесь можно купить кухонные ножи.

А в качестве хорошего примера можем привести сайт pizzaricca.ru – здесь указана вся необходимая информация и плюс добавлено преимущество, «фишка» компании («Первая квадратная пицца! На четыре куска больше!»).

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

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

Главное меню

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

Главное меню должно включать ссылки только на основные разделы сайта. Так пользователь сможет быстро ознакомиться со списком доступных возможностей и легко сориентироваться. Оптимальное количество разделов – от 5 до 7. Если таких разделов оказалось больше, то мы рекомендуем разбить меню на два блока – один будет находиться над шапкой сайта и включать в себя ссылки на такие полезные страницы как «Доставка», «Оплата», «Информация для партнеров» и так далее, а второй уже позволит перемещаться по каталогу.

Первый экран

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

1. Описание своих преимуществ на фоне конкурентов. Грамотно используйте УТП – оно должно быть уникальным, конкретным и ценным. То есть потенциальный клиент должен сразу понять, в чем заключается ваша фишка и какую он может получить выгоду от сотрудничества с вами лично для себя. Рассказ о том, чем вы отличаетесь от конкурентов, можно дополнить ссылкой на список услуг и предложением оставить заявку.
2. Добавить информацию об актуальных скидках, акциях и новинках. Лучше всего смотрятся специальные предложения, оформленные в виде медленно перелистываемых слайдов. У посетителя должна быть возможность самостоятельно переключать слайды, поэтому добавьте стрелочки. Каждый слайд должен быть кликабелен и вести на соответствующую страницу.

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

Каталог товаров или список предоставляемых услуг

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

Не надо так! На просторах интернета можно встретить много сайтов, в которых товары и услуги вынесены только в боковое меню.

Главная страница – это ваш шанс зацепить посетителя. Используйте эту возможность, чтобы ярче рассказать об ассортименте, добавляйте изображения и иконки. Дополнительно создайте блок «Новинки», «В тренде», «Товары со скидкой» - выберите несколько позиций и добавьте на них соответствующие ссылки.

Выгоды для клиента

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

Дополнительные услуги

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

Схема работы

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

Примеры работ

Данный раздел актуален для сайтов услуг. Выберите самые качественные фотографии из вашего архива и сопроводите их информативной подписью. Опишите, какая задача стояла, и что именно вы сделали. Можно указать примерную стоимость. Если позволяет тематика, то можно оформить данный блок в виде слайдера в формате «До» и «После».

О компании

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

Отзывы клиентов

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

Не пишите отзывы самостоятельно и не заказывайте их написание у фрилансеров. Посетители обязательно поймут, что «что-то тут не так». Когда все отзывы написаны как под одну гребенку – это выглядит крайне подозрительно. Уж лучше вообще обойтись без данного раздела, чем делать его «чтобы было».

Полезные материалы

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

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

Форма консультации

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

Подвал сайта

Наконец, мы добрались до низа страницы. Здесь добавьте ссылки на основные разделы и продублируйте контактную информацию, указанную в шапке.

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

Распространенные ошибки

Напоследок перечислим основные ошибки, которые допускают разработчики при оформлении главной страницы:

• Много или мало текста. Сплошные картинки или стена из букв – даже сложно выбрать, что из этого смотрится хуже. Старайтесь распределять текст равномерно по странице, сопровождая его изображениями там, где это уместно.
• Слайдеры рядом. Особенно это режет глаз, когда оба слайдера анимированы. Либо выдерживайте расстояние, либо делайте один слайдер статичным, а другой – с анимацией. Лучше всего разбить их на вкладки – так и выглядит компактнее, и пользователю намного удобнее ориентироваться.
• Разбиение контента более чем на 2 столбца. Выглядит перегружено и плохо воспринимается.
• Всплывающие окна. Пользователь только зашел на ваш сайт, а тут сразу же всплыло раздражающее окно! Соблазн закрыть сайт очень велик.
• Неуникальные или некачественные фотографии. Используйте только авторские фото хорошего качества – это поможет продавать товары и услуги.
• Отсутствие оптимизации под мобильные устройства. С каждым годом людей, использующих смартфоны и планшеты для просмотра сайтов, становится все больше. Учитывайте это, если не хотите потерять львиную долю прибыли.
• Медленная загрузка страницы. Нет ничего более раздражающего, чем постоянно подвисающий сайт! Обязательно проверьте ресурс через сервис PageSpeed Insights.

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