Файл: НАВИГАЦИЯ САЙТА-МАГАЗИНА.pdf

Навигацию сайта можно сравнить с планировкой жилого помещения. Благодаря хорошей планировке можно без труда найти нужную комнату, не заблудиться и не перепутать её с кухней или спальней, но, если помещений, коридоров и дверей очень много, то человек может потеряться и ему такое помещение будет доставлять дискомфорт. Такие дела и обстоят с сайтами. Запутанная навигация, бесконечные ссылки, по которым пользователь попадает не туда, куда надо - всё это сбивает с толку. Придуманная навигация важна для поисковиков, ведь очень важно понимать какую ту или иную роль играет данная веб-страница. Кроме того, логичная навигация улучшает поведенческие показатели, поскольку посетители быстрее находят то, что ищут. Итак, какой же должна быть хорошая навигация для сайта, чтобы любому человеку было удобно ориентироваться? Вот её основные характеристики: 1) Ясность. Необходимо, чтобы все составляющие меню или пользовательского интерфейса хорошо просматривались и были ясны любому человеку на интуитивном уровне. В идеале на любую страницу или раздел пользователь должен сделать 3 клика. 2) Доступность на любой странице веб-сайта. На каждой странице должны быть чётко проработаны элементы навигации. Это даёт возможность посетителю перейти из любого раздела туда, куда он хочет. 3) Продуманное визуальное оформление. Элементы навигации должны контрастировать с фоном и основным текстом , но не выбиваться из общего цветового решения веб-ресурса. Из множества видов навигаций вы можете отдать предпочтение тем, что принесёт наибольшую пользу именно вашему веб-ресурсу: 1) основная – ссылки на важнейшие разделы, размещаемые преимущественно в меню. 2) языковая – элементы для выбора удобного языка, применяемые на площадках с мультиязычной аудиторией. 3) глобальная – гиперссылки, доступные с любой веб-страницы (ведущие на главную, в личный кабинет, корзину). 4) тематическая – ссылки на страницы, объединенные похожей тематикой. 5) рекламная – навигация для привлечения посетителей к рекламным блокам с предложением товаров/услуг (относящиеся к онлайн-магазину или другим ресурсам). 6) текстовая – компоненты, применяемые с целью оптимизации путем внутренней перелинковки (направляют пользователей к упомянутому в контенте материалу, расположенному в других разделах) 7) указательная – показывает текущее местонахождение посетителя (актуальна для крупных площадок). Навигация на сайте может быть реализована в 4 формах: 1) Текстовая. Ссылки, оформляемые в виде обычного текста. 2) Графическая. Функциональные гиперссылки, «замаскированные» в различные графические элементы – кнопки, изображения. 3) HTML. Выпадающие списки, компоненты, открывающиеся при наведении курсора на корневой раздел. Позволяют значительно сэкономить пространство. 4) Технологии Flash, Java. Интерактивные компоненты, реагирующие на нажатие или наведение курсора запрограммированным действием, эффектом. Шапка сайта. Должна быть визуально отделена от других элементов страницы и содержать следующие элементы (См. рис. 14): 1) Логотип, который лучше расположить в левом верхнем углу, так как такой вариант привычнее для пользователей. 2) Название компании и краткое описание деятельности – теглайн (если эта информация не указана в логотипе). Дополнительно можете указать ваше УТП. 3) Регионы работы, доставки товаров. Не нужно перечислять весь список, укажите данную информацию кратко. 4) Контактная информация. Если у вас несколько офисов или магазинов, то в шапке сайта стоит указать важные сведения только для главного, чтобы не перегружать шапку. 5) Рядом с номером телефона обязательно добавляем режим работы, чтобы пользователи видели, в какое время можно позвонить в компанию. 6) Ссылка на страницу корзины, если у вас интернет-магазин. 7) Форма заказа обратного звонка. Добавляйте только в том случае, если у ваших специалистов есть время оперативно обрабатывать с нее заявки. Нужна для тех пользователей, которые по каким-либо причинам не могут сами позвонить в компанию.

Рис. 14 Шапка сайта

Главное меню (См. рис. 15). Лучше всего данные ссылки расположить горизонтально под шапкой сайта. При выборе названий для разделов не забываем про семантическое проектирование. Основные разделы, которые должны быть в главном меню: 1) Каталог услуг или товаров (выпадающий пункт меню). 2) Страница о компании. 3) Способы оплаты и доставки (для интернет-магазинов). 4) Гарантии и возврат (для интернет-магазинов). 5) Портфолио (если есть, что показать). 6) Акции и скидки. 7) Отзывы (для сайтов услуг). 8) Блог (если есть). 9) Контакты.

Рис. 15 Главное меню

Форма поиска. Маст-хэв для больших сайтов, в особенности для интернет-магазинов и информационных порталов. Подвал сайта (См. рис. 16). Многие сайты игнорируют данный блок, а ведь он помогает пользователю после просмотра страницы быстрее перейти в другой раздел или найти дополнительные ссылки, которых нет в основном меню. В подвале должны содержаться: 1) Ссылки на все разделы сайта. На все без исключения. Продублируйте ссылки из основного меню и укажите дополнительные разделы. Размещайте их столбцами и делите на логические подгруппы, чтобы было легче в них ориентироваться. 2) Контактная информация. Лучше указать подробнее, чем в шапке сайта, добавив адрес и реквизиты компании. 3) Ссылки на соцсети. Здесь они не помешают. 4) Форма заказа обратного звонка (только если добавили ее в шапке сайта.)

Рис. 16 Подвал сайта

Так же есть дополнительные элементы навигации, которые помогают пользователю разобраться в структуре сайта, но подходят не для всех ресурсов. Хлебные крошки или локальная навигация (См. рис. 18). Показывают путь, пройдённый пользователем, или местонахождение страницы в иерархии сайта. Стоит добавить, если у вас многоуровневый сайт (вложенность более 2 уровней). Рекомендации по оформлению: 1) Должны находиться на всех страницах сайта, кроме Главной. 2) Следует расположить хлебные крошки слева под главным меню и в одном месте на всех страницах. 3) Использовать небольшой размер шрифта. 4) Все элементы, кроме последнего, должны быть ссылками на соответствующие страницы сайта. 5) Последний элемент должен совпадать с названием страницы и быть выделенным (лучше жирным начертанием).

Рис. 17 Хлебные крошки

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

Рис. 18 Боковое меню

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

ГЛАВА 2. РАЗРАБОТКА НАВИГАЦИИ САЙТА-МАГАЗИНА

2.1. Описание идеи и создание эскизов

Идея по разработки навигации сайта-магазина пришла тогда, когда нужно было заказать товар для питомца на совсем не удобном сайте, который называется "Зоокурьер". На данном сайте не идеально абсолютно всё: шапка, под которой баннер и меню товаров (См. рис.19), акции (См. рис. 20) и подвал (См. рис. 21). Всё разбросано в разные стороны, словно всё существует отдельно друг от друга, много пустых мест, в одном блоке иконка находится внутри, в другом за его пределами, один текст больше-другой меньше. Во-вторых, запись о выгодных предложениях выглядит так, словно предупреждают о чём-то тревожном. Данную запись следует лучше убрать, так как при просмотре товаров на некоторых из них идёт акция и посетитель автоматически будет понимать о том, что в данном товаре идёт выгодное предложение. В-третьих, очень неудобное перечисление товаров. Само название «Товары» очень мелко написано, люди с плохим зрением трудно разберут запись и сами разделы плохо видно, к тому же было бы логично разделить это всё на такие разделы, как: для кошек, для собак, для птиц, для рыб, для грызунов и для рептилий, и обозначить эти разделы крупными иконками, чтобы было лучше видно и покупатель мог быстро сориентироваться. Говоря теперь об акциях. слово «Акция» написано очень мелко. Надпись нужно написать либо крупным кеглем, либо поставить знак % и на других акциях, где идёт что-либо в подарок – поставить иконку подарка. Так же очень плохо написана сама суть акции, текст плохо читается, так как он залезает на фотографию товара. Надписи нужно подписать под товаром и выделить жирным, чтобы было удобно читать и человек обращал внимание на выгодное предложение. Так как плохо оформлена шапка, то и с подвалом решили не заморачиваться. Логотип можно было уже и не применять, вместо него можно добавить раздел «Обратная связь», расстояние между столбцами разное, цвет шрифта можно было использовать и один (либо серый, либо коричневый), а так же не хватает информации о том, какими банковскими картами можно оплачивать заказ.

Рис. 19 Шапка, баннер и меню

Рис. 20 Акции

Рис. 21 Подвал

Разрабатывая макеты в программе, было тщательно всё продумано, где и что будет располагаться и на каком уровне. В начале был разработан макет шапки. Было принято решение логотип оставить на законном месте и в данном порядке расположить поисковую строку, телефон, кабинет и корзину. Под шапкой баннер, а под баннером блоки меню (См. рис. 22).

Рис. 22 Макет шапки, баннера и меню

Второе по разработке - это акции (См. рис.23), в которых изменили пару нюансов - это добавление иконок знака процента и подарка и спуск текста под товар, чтобы покупателям было удобно читать о чём данная акция.

Рис. 23 Макет акций

И последний макет - это макет подвала (См. рис. 24). По разработке навигации подвала было принято убрать логотип, так как он там лишний и занимает место и сделать деление на три столбца. Первый столбец называется "Каталог", где под названием идёт перечисление того, что в нём имеется. Второй столбец посвящён дополнительной информации о том, как сделать заказ, о его доставке и тому подобное. Третий столбец говорит нам о способах оплаты, где будут располагаться иконки банковских карт, об обратной связи, где можно написать письмо в магазин и контактный номер телефона, который упоминался в шапке сайта.

Рис. 23 Макет подвала

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

2.2. Разработка иконок для сайта

Для того, чтобы покупателям было удобно ориентироваться на сайте, была разработана серия иконок (См. рис. 24). Знаки для товаров разработаны в виде животных, чтобы человек визуально понимал, что это за раздел. Так ещё доработаны другие знаки для личного кабинета, корзины, телефона и акций. Композиция закрыта, углы округленные, цвет взят из логотипа

Рис. 24 Иконки для сайта

2.3. Размещение разработок на сайте

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

Рис. 25 Мокап шапки, баннера и меню

Теперь надпись про акции (См. рис. 26) товаров стало лучше видно и благодаря иконкам сразу можно понять о чём данная акция: знак процента гласит о скидках, а иконка подарка о подарке при покупке данного товара.

Рис. 26 Мокап акций

Подвал (См. рис. 27) так же преобразился, глядя на него покупатель теперь сразу понимает как он может расплатиться: картой или наличными и может написать письмо администрации при необходимости. Каталог и дополнительная информация остались прежними, только благодаря сетке она расположена ровно, как полагается в дизайне сайта.

Рис. 27 Мокап подвала

2.4. Оценка стоимости проекта

Информация о компании: Компания "Зоокурьер" занимается продажей товаров для животных и их доставкой. Целевая аудитория: Мужчины и женщины от 30 до 40 лет со среднем доходом. Имеют собственное жильё или снимают квартиру. Анализ существующего сайта: неграмотная навигация и оформление сайта-магазина. Цель: разработка навигации для сайта-магазина товаров для домашних питомцев Задачи: проанализировать плюсы и минусы сайта, разработать систему навигации и иконки. Требования к дизайну и оформлению: Стиль сайта оставить прежним, отработать шапку сайта, подвал и акции. Так же разработать иконки для разделов животных, чтобы покупателю было проще ориентироваться в товарах. Состав исполнителей: арт-директор, 3 графических дизайнера, менеджер. Срок работы: 2 дня Работа менеджера - беседа с клиентом, расспрос о предпочтениях, составление брифа, поиск конкурентов, надзор работы дизайнеров в установленное время Работа дизайнеров - изучение брифа, создание эскизов, составление макетов в программах, создание нейминга, создание дизайна футболок и POS-материалов, согласование вариантов с менеджером или арт-директором. Работа арт-директора - подготовка данных для отдачи клиенту в типографию. Оплата: 5500 руб. - 11 иконок ( 1 иконка - 500 руб.), 3000 руб. - 3 макета (1 макет - 1000 руб.), 7500 руб.- 3 мокапа (1 мокап - 2500 руб). Итог: 16000 руб.