Файл: Проектирование и выполнение проекта в материале. Навигация сайта-магазина.pdf

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

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

1. Задачи-проблемы-решения

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

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

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

1. Карта ума или Mind map

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

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

1. Структура сайта

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

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

---

На выходе получается полная структура сайта со всеми разделами и подразделами. Это скелет, вокруг которого будут наращивать прототипы в следующем этапе (см. рис. 1.6).

Рис. 1.6. Структура сайта.

1. Прототипирование

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

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

1. Техническое задание

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

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

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

1.3. Навигация и её функции

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

---

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

То же и с сайтом. Плохая навигация с множеством ссылок путает, пугает пользователя, усложняет процесс поиска информации (см. рис. 1.7).

Рис. 1.7. Пример плохой навигации

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

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

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

Учитывая критерии качественного юзабилити, навигация должна давать четкие ответы на такие вопросы:

1. Текущее положение пользователя на сайте.
2. Ранее посещенные юзером страницы.
3. Перечень доступных для посетителя страниц.

Необходимое количество ссылок определяется задачами площадки, объемом текстового, графического контента. Грамотная структура вмещает столько элементов, сколько требуется для удобного и оперативного перемещения по сайту. Оптимальный объем – не более 5-15% от общей площади ресурса (см. рис. 1.8).

Рис. 1.8. Шаблон хорошей навигации

При разработке навигации магазина учитывают ряд обязательных требований:

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

---

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

Исходя из конкретно выполняемых функций, навигация подразделяется на следующие разновидности:

• основная – ссылки на важнейшие разделы, размещаемые преимущественно в меню;
• языковая – элементы для выбора удобного языка, применяемые на площадках с мультиязычной аудиторией;
• глобальная – гиперссылки, доступные с любой веб-страницы (ведущие на главную, в личный кабинет, корзину);
• тематическая – ссылки на страницы, объединенные похожей тематикой;
• рекламная – навигация для привлечения посетителей к рекламным блокам с предложением товаров/услуг (относящиеся к онлайн-магазину или другим ресурсам);
• текстовая – компоненты, применяемые с целью оптимизации путем внутренней перелинковки (направляют пользователей к упомянутому в контенте материалу, расположенному в других разделах);
• указательная – показывает текущее местонахождение посетителя (актуальна для крупных площадок).

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

Чтобы выбранные элементы работали, нужно соответствующим образом их оформить и реализовать на сайте. Существует несколько форм реализации:

1. Текстовая. Ссылки, оформляемые в виде обычного текста.
2. Графическая. Функциональные гиперссылки, «замаскированные» в различные графические элементы – кнопки, изображения.
3. HTML. Выпадающие списки, компоненты, открывающиеся при наведении курсора на корневой раздел. Позволяют значительно сэкономить пространство.
4. Технологии Flash, Java. Интерактивные компоненты, реагирующие на нажатие или наведение курсора запрограммированным действием, эффектом.

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

---

1.4. Ключевые навигационные элементы для интернет-магазина

Центральный навигационный компонент коммерческой площадки – главное меню. Его видно без прокрутки страницы. Традиционно меню делают горизонтальным и располагают прямо под шапкой, что наиболее удобно и привычно для пользователей (см. рис. 1.9).

Рис. 1.9. Пример расположения ключевых навигационных элементов

В главном меню должны присутствовать ссылки на основные страницы интернет-магазина:

• о компании;
• каталог товаров;
• доставка/оплата;
• возврат/гарантии;
• скидки/акции;
• отзывы;
• обратная связь;
• блог;
• контактная информация.

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

Если ресурс обладает расширенной структурой, стоит снабдить его дополнительным боковым меню (см. рис. 1.10). В этот блок выносят подразделы и рубрики, на которые делятся главные категории площадки. Боковое меню размещают в соответствующих разделах, не дублируя на всех веб-страницах. Рекомендуемое место для данного элемента – слева от основного содержимого. Благодаря фактически неограниченному пространству вертикального меню, с его многоуровневостью не возникает проблем. Главное – соблюдать умеренность и не перестараться.

Рис. 1.10. Пример раздела «каталог товаров»

Локальная навигация, называемая «хлебными крошками», представляет собой цепочку ссылок, ведущую от текущей веб-страницы к главной. Символичное название позаимствовано из знаменитой сказки, где Гензель бросал для Гретель крошки, чтобы указать путь, по которому следует его искать. Так и на сайте: независимо от местонахождения юзера навигационная цепочка позволяет в любой момент вернуться на шаг/два/три обратно. Строка отражает архитектуру ресурса, текущее место, его вложенность.

---