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

Опубликовано: 12.01.2019. Обновлено: 24.06.2022 928 0

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

Содержание статьи:

1. 1. Шапка сайта.
2. 2. Футер сайта.
3. 3. Карточка товара.
4. 4. Листинг товаров.
5. 5. Главная страница сайта.

Шапка сайта

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

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

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

Дескриптор помогает понять человеку, куда попал. Примеры дескрипторов:

Иногда вместо дескриптора вполне достаточно названия компании, которое говорит о деятельности:

• "Клиника гинекологии, репродуктивной и эстетической медицины".

Пример тз дизайнеру для оформления для шапки

Частая ошибка — необоснованная высота шапки, отодвигающая ниже поля зрения полезный контент сайта:

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

Футер сайта

Следующие элементы желательны в футере сайта:

• Сервисное меню.
• Значок копирайта, права защищены, копировать запрещено.
• Номер(а) телефона(ов).
• Название компании текстом.
• Ссылки на аккаунты компании в соц. сетях.
• Меню услуг.
• Ссылка на почтовый ящик.
• Адрес, включая название города.
• Ссылка на html-карту сайта.
• Дескриптор (краткое описание направления деятельности).
• Режим работы.
• Способы оплаты.
• Кнопка "наверх".
• Кнопка или ссылка "Обратный звонок".
• Форма поиска по сайту.
• Заслуги, награды, премии компании (если таковые имеются).
• Телефоны офисов в других городах (если таковые имеются).

• Годы существования компании. Выводим в том случае, если компания существует более 3-х лет. Текущий год лучше выводить скриптом, чтобы не приходилось каждый год обновлять.

  Если вывод осуществляется в файле шаблона, то можно использовать или php скрипт:

  

  или javascript:

  

  Если вывод производится внутри админки через визуальный редактор, может помочь только javascript.

Карточка товара

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

1. 1. Фото товара.
2. 2. Цена.
3. 3. Скидки/акции (при наличии).
4. 4. Возможность увеличить фото товара.
5. 5. Фотографии с нескольких ракурсов (когда одной фотографии недостаточно для формирования достаточно полного представления о товаре).
6. 6. Видео-обзор товара.
7. 7. Ссылка на категорию, в которой находится товар (может быть в составе "хлебных крошек").
8. 8. Кнопка "Купить" или "В корзину" (хорошо выделена и находится в поле зрения пользователя).
9. 9. Полное название товара.
10. 10. Способы, стоимость доставки и самовывоза.
    Если вариантов много, и все будут загромождать карточку товара, указываем самые выгодные значения. Например, если есть цены и способы доставки для Москвы, Московской области и других регионов. Указываем только для Москвы, но обязательно даём ссылку на страницу с остальными условиями.
11. 11. Сроки доставки и самовывоза с указанием конкретных дат, когда пользователь получит товар. 
12. Развёрнутое описание и характеристики товара.
13. 12. Комплектация.
14. 13. Ссылка на таблицу размеров или моделей. Или ссылка на другую таблицу, которая поможет покупателю сориентироваться в выборе.
15. 14. Блок с отзывами покупателей и рейтингом — звездочками.
16. 15. Блок с сопутствующими товарами.
17. 16. Блок с похожими товарами.
18. 17. Блок "поделиться в социальных сетях".
19. 18. Способы оплаты и безопасность платежей.
20. Оплата в кредит/рассрочку.
21. Информация по работе с юридическими лицами.
22. 19. Указание информации о наличии/количестве товара.
23. 20. Сертификаты качества на данный товар (при наличии).
24. 21. Инструкции по применению товара и по уходу за товаром. 
25. Информация о сроке службы и сроке годности.
26. 22. Страна-производитель.
27. 23. Возможность подписаться на изменение цены.
28. 24. Ссылка на сравнение товаров.
29. 25. Возможность добавить товар в избранное.
30. 26. Ссылки на такие же товары в другом цвете либо демонстрация возможной цветовой гаммы другими способами.
31. 27. Помощь в выборе товара.
32. 28. Фото товара, предоставленные покупателями магазина.
33. Возможность задать вопрос о товаре. Этот вопрос и ответ должны отображаться в карточке товара.
34. Информация о том, сколько раз купили товар. 
35. Ссылка на все товары данного бренда. 
36. Ссылка на все товары данной категории. 

Работа над карточкой клиентского сайта

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

   №	Пункт	Комментарий
   1	Фото товара.	+
   2	Цена.	+
   3	Скидки/акции (при наличии).	При покупке от 1700 руб. подарок на выбор. С фразы "подарок на выбор" — ссылка.
   4	Возможность увеличить фото товара.	+
   5	Фотографии с нескольких ракурсов (когда одной фотографии недостаточно для формирования достаточно полного представления о товаре).	запросить у клиента фото товара в упаковке
   6	Видео-обзор товара.	запросить у клиента
   7	Ссылка на категорию, в которой находится товар (может быть в составе "хлебных крошек").	+
   8	Кнопка "Купить" или "В корзину" (хорошо выделена и находится в поле зрения пользователя).	+
   9	Полное название товара.	+
   10	Способы, стоимость и сроки доставки.	Бесплатная доставка до метро. Со всего предложения ссылка.
   11	Развёрнутое описание и характеристики товара.	Запросить у клиента массу товаров или объём, если товар жидкий.
   12	Комплектация.	—
   13	Ссылка на таблицу размеров или моделей.	Подготовить таблицу курсов медведки со стоимостью.
   14	Блок с отзывами покупателей и рейтингом — звездочками.	Проверить, есть ли модуль или плагин для данной cms. Установить. Если модуля нет, поставить задачу на разработку.
   15	Блок с сопутствующими товарами.	Проверить, есть ли модуль или плагин для данной cms. Установить. Если модуля нет, поставить задачу на разработку.
   16	Блок с похожими товарами.	Проверить, есть ли модуль или плагин для данной cms. Установить. Если модуля нет, поставить задачу на разработку.
   17	Блок "поделиться в социальных сетях".	Установить.
   18	Способы оплаты.	Оплата наличными, электронными деньгами, по карте и другими способами. С фразы "другими способами" — ссылка.
   19	Указание информации о наличии/количестве товара.	Проверить, есть ли модуль или плагин для данной cms. Установить. Если модуля нет, поставить задачу на разработку.
   20	Сертификаты качества на данный товар (при наличии).	Проверить на других сайтах клиента. Если нет, запросить.
   21	Инструкции по применению товара.	Проверить описание всех товаров на наличие инструкции, дать ссылку.
   22	Страна-производитель.	Если не указано, запросить у клиента.
   23	Возможность подписаться на изменение цены.	Проверить, есть ли модуль или плагин для данной cms. Установить. Если модуля нет, поставить задачу на разработку.
   24	Ссылка на сравнение товаров.	—
   25	Возможность добавить товар в избранное.	+
   26	Ссылки на такие же товары в другом цвете либо демонстрация возможной цветовой гаммы другими способами.	—

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

Пример тз дизайнеру (некоторые ссылки в примере могут не работать):

Листинг товаров

Типовые элементы листинга товаров:

1. 1. Изображение товара.
2. 2. Ссылка на карточку товара.
3. 3. Кнопка "Купить" или "В корзину".
4. 4. Рейтинг звездочками.
5. 5. Стикеры "New", "Скидка" и др.
6. 6. Ссылка на сравнение товаров.
7. 7. Ссылка "добавить в избранное".
8. 8. Частичная информация о ключевых характеристиках товаров.

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

Пример листинга с такой проблемой:

Пример листинга, где характеристики выведены:

Главная страница сайта

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

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

1. 1. Ссылки на главные разделы с товарами/услугами. Часто оформляются с иконками или изображениями. Можно сопровождать пояснениями.
2. 2. Блок, презентующий опыт компании. Как правило, в этом блоке много цифр:
   • работаем с 2005 года,
   • 10000 выполненных проектов,
   • 90 филиалов по всех стране,
   • и т.д.
3. 3. Блок "Портфолио". Как правило, это презентативная выборка. Если среди клиентов имеются известные бренды, их размещают здесь.
4. 4. Блок "Отзывы". Самый простой вариант — текстовые отзывы. Более убедительно выглядят сканы бумажных отзывов, фото клиентов с продукцией, видео клиентов. Этот блок может быть совмещён с блоком "Портфолио".
5. 5. Форма для заявки, вызов замерщика и т.д.
6. 6. Блок новостей. Демонстрирует 1-3 последние новости, содержит ссылку на новостной раздел.
7. 7. Блок "Преимущества работы с компанией".
8. 8. Блок с фото всех или избранных сотрудников. Содержит ссылку на раздел "Сотрудники".
9. 9. Блок "Достижения компании", если таковые имеются.

В разных тематиках могут применяться дополнительные блоки. Каждый раз необходимо изучать топовых конкурентов.