Ирина Никулина – Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов (страница 44)

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

Главная страница должна отвечать на следующие вопросы посетителя сайта:

– Что здесь продают?

– Кто продает?

– Как купить товар или заказать услугу?

Рис. 62. Внешняя структура первой страницы

Упрощенная внешняя структура интернет-магазина (первая страница):

1. «Шапка» (хедер).

2. Меню.

3. Промо-блок с акциями и спецпредложениями (топ товаров, новинки и т.д.).

4. Модуль «Повышение лояльности» с реальными отзывами, гарантиями, лицензиями, сертификатами, наградами и пр.

5. Информационный блок с основными ключевыми словами и преимуществами компании.

6. Контакты.

7. «Подвал» сайта (футер).

Обратите внимание: для дизайна интернет-магазина слайдер или большой баннер с УТП не является обязательным. На таком сайте основная задача – сразу перевести внимание посетителя на каталог акционных или популярных товаров, не отвлекать его лишними деталями от покупки или заказа товара.

Разберем подробнее основные модули внешней структуры.

3. «Шапка» сайта, меню и слайдер

«Шапка» сайта (хедер)

Зачем нужна «шапка» сайта

Хедер (от англ. «header» – заголовок) – это верхняя плашка, верхняя часть сайта. «Шапка сайта» – это первое, что видит посетитель сайта. При правильном заполнении она помогает удостовериться, что пользователь зашел на нужный сайт.

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

Такие элементы, как логотип и слоган – участвуют в формировании бренда и узнаваемости компании.

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

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

Схема «шапки» сайта

«Шапка» сайта (по-английски «хедер») – это первое, что видит посетитель сайта. Она помогает сориентироваться человеку и подсказывает, где он находится, показывает логотип и контакты. «Шапка» сайта везде одинаковая, на всех страницах, поэтому посетитель сайта всегда может вернуться в верхний модуль сайта и записать телефоны компании, если он нигде их больше не нашёл.

Элементы «шапки» сайта:

– Логотип компании

Обычно располагается в левом верхнем углу сайта. Его площадь не должна занимать более 20-25% всего хедера. Добавьте в него ссылку на главную страницу (на большинстве сайтов делают именно так, поэтому пользователи уже привыкли к такой схеме.)

– Краткая информация о компании (направление деятельности)