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

При составлении структуры сайта надо учесть несколько важных факторов.

Уровень вложенности страниц на сайте

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

Настройка ЧПУ

Использование так называемых человекопонятных адресов страниц (ЧПУ) давно стало необходимой частью оптимизации. Еще десять лет назад для определения ресурсов в ходу были адреса веб-страниц, состоящие из наборов символов. Такие URL не несли полезной информации для пользователей, трудно запоминались и были неудобны для восприятия. ЧПУ – полная противоположность подобным URL. Теперь, опираясь только на адрес источника, можно определить, в какой раздел вы попали и чему будет посвящена статья. Например, ссылка https://вебакадемия.рф/coreldraw – ведёт на страницу курсов по программе CorelDRAW.

Удаление дублированного контента

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

4. Этапы планирования структуры сайта

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

Этап 1. Постановка задач

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

Этап 2. Создание списка разделов

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

Этап 3. Создание карты ресурса

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

Рис.61. Карта (структура) сайта

5. Программы для построения древовидной структуры сайта

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

Программы, помогающие создать структуру сайта:

XMind – программа для построения майнд карт, структур (есть как платная, так и бесплатная версия). Программа обладает достаточно широким функционалом, есть версии для Window, macOS, Linux.

Diagrams.net – бесплатный онлайн сервис для создания структур и диаграмм. Из плюсов: есть шаблоны и возможность выгрузки результатов в облачные сервисы.

Microsoft Visio – платный софт от компании Майкрософт, подойдет для создания структур сайта любой сложности и направленности.

Глава 10. Внешняя структура сайта

В этой главе:

1. Определения

2. Структура интернет-магазина

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

4. Преимущества и модуль «О компании»

5. Каталог, Модуль «Схема работы», «Партнеры»

6. Отзывы, гарантии, сертификаты

7. Новости, контакты, подвал сайта

1. Определение

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

Внешняя структура сайта представляет собой макет страницы, на котором блоками обозначены отдельные её элементы (расположение модулей на странице, например, на Главной). См. рис. 62.

В первую очередь речь идёт о Главной странице сайта. На этой странице бывает максимальное количество модулей по сравнению с остальными страницами.

Тем не менее, есть повторяющиеся модули на всех страницах, обычно это:

– Шапка сайта.

– Первый баннер (он же может быть слайдером, сменой нескольких баннеров).

– Меню сайта.

– Мобильное меню.

– Форма заявки (обратной связи).

– Контакты.

– Интерактивная карта в контактах.

– Подвал сайта.

От того, насколько грамотно и просто продумана структура сайта, зависит конверсия сайта; время, которое провели посетители на сайте; количество посетителей и заказов.

2. Структура интернет-магазина

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

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

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

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

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

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

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

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

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

2. Меню.

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

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

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

6. Контакты.

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

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

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

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

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