Добавлен: 18.05.2023
Просмотров: 294
Скачиваний: 3
СОДЕРЖАНИЕ
Глава 1.СТРУКТУРА НАВИГАЦИОННЫХ СИСТЕМ
1.1. Навигационная система, как способ визуализации
1.2.Типы и виды навигационной системы сайта
1.3. Навигационные элементы для сайта-магазина
Глава 2 ИССЛЕДОВАНИЯ НАВИГАЦИОННЫХ СИСТЕМ САЙТ - МАГАЗИНА
2.1. Исследование объекта сайта - магазина
2.2. Анализ систем навигации аналогов
Глава 3 РАЗРАБОТКА И ПРОЕКТИРОВАНИЕ ДИЗАЙНА НАВИГАЦИОННОЙ СИСТЕМЫ
3.1. Описание дизайн - концепции. Эскизирование
3.2. Стилеобразующие элементы и цветовое решение
ВВЕДЕНИЕ
Данная тема считается актуальной на сегодняшний день, так как сегодня множество людей ежедневно, не выходя из дому, покупают различные товары на сайтах - магазинах. Огромными темпами растет количество «электронных» покупателей. Сайты - магазины уменьшают издержки производителя, сэкономив на содержании обычного магазина, расширяют рынки сбыта, так же как и расширяет возможность покупателя – покупать любой товар в любое время в любом месте. Это сайтам - магазинам неоспариваемое преимущество перед обычными магазинами. Этот момент является существенным при переходе производителей с «обычной» торговли на «электронную». Высокое качество продукции, умение донести информацию о продукте до потребителя и эффективная система сбыта, делает предприятие успешным на рынке. Ведь удобная площадка, на которой можно легко сориентироваться и быстро отыскать нужную информацию, привлекает гораздо больше покупателей, чем сложный, запутанный сайт. Именно поэтому владельцы популярных интернет-магазинов уделяют так много внимания навигационной системе. Актуальность данной темы: изучить навигационные системы сайт - магазинов, и на основе анализов, произвести обзор. Объект исследования: на основе анализов, выявить недостатки навигационной системы сайта - магазина. Предмет исследования: навигационная система сайта - магазина. Цель работы: упростить процесс поиска категорий товаров на сайте - магазина. Задачи: исследование навигационных систем сайт - магазинов, определить объект исследования, рассмотреть и проанализировать аналоги, выявить достоинства и недостатки, составить бриф, описать дизайн - концепт, создать эскизы и выбрать конечный результат, визуализировать.
Глава 1.СТРУКТУРА НАВИГАЦИОННЫХ СИСТЕМ
1.1. Навигационная система, как способ визуализации
Навигация – ключевой критерий удобства сайта - магазина, своеобразная «карта местности». Представляет собой набор специальных приёмов, методов и элементов, дающих возможность посетителям перемещаться между различными страницами ресурса. В большинстве случаев данная система предопределяет успешность продвижения и показатели проекта. Степень её значения часто сравнивают с функциями планировки дома. Простое и логичное расположение комнат, санузла, кладовых, входов и выходов позволяет гостям свободно ориентироваться, не заблудиться в новом помещении. Похожее предназначение имеют и указатели на вокзалах, в метрополитене, которые подсказывают пассажирам верный путь к нужному месту. Так же и с сайтом. Плохая навигация с множеством ссылок путает и пугает пользователя, усложняет процесс поиска информации. Грамотно продуманная и реализованная навигационная система, наоборот, помогает клиенту быстрее разобраться, перейти на необходимую страницу и ознакомиться с интересующим материалом. Это важно и для поисковых машин, которые благодаря понятной навигации правильнее оценивают роль конкретной страницы на сайте. Навигационная система состоит из разных типов гиперссылок. Отображаясь на каждой странице сайта - магазина, они отвечают за:
- переключение между категориями и разделами верхнего уровня вне зависимости от текущего местонахождения пользователя;
- формирование представления о предлагаемых ресурсом товарах или услугах;
- облегчение поиска информации, помощь в оформлении заказа.
Необходимое количество ссылок определяется задачами площадки, объемом текстового, графического контента. Грамотная структура вмещает столько элементов, сколько требуется для удобного и оперативного перемещения по сайту. Однако нельзя и перебарщивать, чрезмерно загромождая пространство. Оптимальный объем – не более 5-15% от общей площади ресурса. При разработке навигации сайта - магазина учитывают ряд необходимых требований:
- Простота. Подразумевает создание понятных на интуитивном уровне, видимых компонентов пользовательского интерфейса и меню. Идеально, когда переход между разделами и страницами ограничивается несколькими кликами;
- Доступность. Предполагает расположение навигационных элементов, ведущих к разным блокам или разделам, на каждой странице сайта - магазина;
- Стильное оформление. Требует качественной графической проработки составляющих. Гармонично сочетаясь с дизайном ресурса, элементы навигации должны выделяться среди основной информации с помощью контрастных цветов, шрифтов, других приемов.
Удачная, правильно сформированная навигационная система мотивирует пользователя зайти на нужную страницу, подталкивает к определенным действиям, удерживает и заинтересовывает случайных посетителей, не отпуская их к конкурентам. (см.рис.1.1.) Проекты с логичным оформлением и структурой могут рассчитывать на множество постоянных клиентов и высокую конверсию.
1.2.Типы и виды навигационной системы сайта
Исходя из конкретно выполняемых функций, навигация подразделяется на следующие разновидности:
- основная – ссылки на важнейшие разделы, размещаемые преимущественно в меню;
- языковая – элементы для выбора удобного языка, применяемые на площадках с мультиязычной аудиторией;
- глобальная – гиперссылки, доступные с любой веб -страницы (ведущие на главную, в личный кабинет, корзину);
- тематическая – ссылки на страницы, объединенные похожей тематикой;
- рекламная – навигация для привлечения посетителей к рекламным блокам с предложением товаров/услуг (относящиеся к онлайн -магазину или другим ресурсам);
- текстовая – компоненты, применяемые с целью оптимизации путем внутренней перелинковки (направляют пользователей к упомянутому в контенте материалу, расположенному в других разделах);
- указательная – показывает текущее местонахождение посетителя (актуальна для крупных площадок).
Не обязательно использовать на сайте - магазина все перечисленные виды навигационной системы. Можно выбрать целесообразные в конкретном случае, скомпоновать несколько разновидностей. В процессе выбора следует руководствоваться объемом информации, тематикой, позиционированием ресурса. Главное – создать посетителям удобства, необходимые для поиска нужной информации. Чтобы выбранные элементы работали, нужно соответствующим образом их оформить и реализовать на сайте. (см.рис.1.2.) Существует несколько форм реализации:
- Текстовая. Ссылки, оформляемые в виде обычного текста.
- Графическая. Функциональные гиперссылки, «замаскированные» в различные графические элементы – кнопки, изображения.
- Выпадающие списки, компоненты, открывающиеся при наведении курсора на корневой раздел. Позволяют значительно сэкономить пространство.
- Интерактивные компоненты, реагирующие на нажатие или наведение курсора запрограммированным действием, эффектом.
Форма реализации основной и вспомогательной навигационной системы должна соответствовать целям, задачам проекта, обеспечивать максимальное удобство для пользователей, а также вписываться в рамки. Более простой считается текстовая навигация. Реализовать интерактивные компоненты на порядок сложнее.
1.3. Навигационные элементы для сайта-магазина
Центр навигационной системы – главное меню. Его видно без прокрутки страницы. Традиционно меню делают горизонтальным и располагают прямо под шапкой, что наиболее удобно и привычно для пользователей. В главном меню должны присутствовать ссылки на основные страницы сайта - магазина:
- о компании;
- каталог товаров;
- доставка/оплата;
- возврат/гарантии;
- скидки/акции;
- отзывы;
- обратная связь;
- блог;
- контактная информация.
Не стоит стремиться вкладывать в данный блок полное содержание, исчерпывающую информацию о ресурсе. Это своего рода краткая выжимка, помогающая быстро ознакомиться с сутью и политикой проекта. Оптимальное количество разделов на панели – 5-7. При необходимости можно добавить второй ряд, подпункты, выпадающие списки, дополнительные уровни. Если к какому-либо из пунктов нужно привлечь внимание, следует выделить его шрифтом или цветом. Также желательно визуально отмечать активный раздел меню, в котором находится пользователь. (см.рис.1.3.) Дополнительное боковое меню. В этот блок выносят подразделы и рубрики, на которые делятся главные категории площадки. Рекомендуемое место для данного элемента – слева от основного содержимого. Благодаря фактически неограниченному пространству вертикального меню, с его многоуровневостью не возникает проблем. Главное – соблюдать умеренность и не перестараться. (см.рис.1.4.)
На вспомогательной панели инструментов часто размещают набор системных иконок-пиктограмм. Это кнопки, оформленные в виде привычных графических изображений. Элементы предназначены для перехода на главную (домик), к поиску или карте (лупа), к контактной информации (почтовый конверт). В зависимости от активности раздела иконки меняют цвет.
1.4.Техническое задание
Объект исследования: на основе анализов, выявить недостатки навигационной системы сайта - магазина. Предмет исследования: навигационная система сайта - магазина. Цель работы: упростить процесс поиска категорий товаров на сайте - магазина. Задачи: изучить навигационные систем сайт - магазинов, определить объект исследования, рассмотреть и проанализировать аналоги, выявить достоинства и недостатки, составить бриф, разработать и спроектировать дизайн навигационной системы, описать дизайн - концепт, создать эскизный ряд, выбрать конечный результат, визуализировать.
Перечень тематических концепций:
- Питание, игрушки, одежда, коляски, спорт, гигиена;
Размещение:
- В верхней шапке сайта
Размер:
- 16х16; 18х18; 32х32 пиксела
Формат:
- png, svg
Исходные материалы:
- Предоставить исходные материалы в pdf.
Цвет:
- Использование фирменного цвета компании из представленного брендбука.