Файл: Навигация сайта-магазина (Разбор навигационных систем схожих по тематике сайтов).pdf

Введение

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

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

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

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

Цель проектирования:

Комфортная визуальная и функциональная среда сайта-магазина

Задачи:

1. Разобраться в проблеме. Подобрать необходимые технические и графические решения для создания навигации сайта магазина

2. Создание визуальной части навигации в сайта магазина.

2. Показать этапы создания навигации сайта магазина.

ГЛАВА 1. ИССЛЕДОВАТЕЛЬСКО-АНАЛИТИЧЕСКАЯ ГЛАВА

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

Разбор навигационных систем схожих по тематике сайтов

Для разбора навигационных систем сайтов магазинов возьмем три схожих по тематике сайта: Утконос, Wildberries, Ситилинк. (см.рис.1.1 Логотипы магазинов) Все три из них являются онлайн магазинами по продаже различных групп товаров.

Рис.1.1. Логотипы магазинов

Начнем разбор навигации с онлайн магазина «Утконос» Первым делом рассмотри его главную страницу. (см. рис.1.2. Главная страница «Утконос»)

Рис.1.2. Главная страница «Утконос»

Главная страница магазина «Утконос» встречает нас большим интерактивным рекламным баннером на котором показываются самые горячие предложения. Это первое что увидит потенциальный покупатель зайдя на сайт. Шапка сайта имеет яркий зеленый цвет на котором отлично видно окно поиска, большая надпись «каталог товаров» которую вы легко можете заметить.

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

Далее рассмотрим «Каталог товаров» онлайн магазина «Утконос» (см.рис.1.3. Каталог товаров «Утконос»)

Рис.1.3. Каталог товаров «Утконос»

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

Далее на очереди онлайн магазин «Wildberries». Рассмотрим его главную страницу. (см.рис.1.4. Главная страница «Wildberries»)

Рис.1.4. Главная страница «Wildberries»

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

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

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

Рассмотрим каталог сайта «Wildberries». (см.рис.1.5. Каталог «Wildberries»)

Рис.1.5. Каталог «Wildberries»

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

Давайте дальше рассмотрим последний в списке онлайн магазин «Ситилинк». Для начала рассмотрим его главную страницу. (см.рис.1.6. Главная страница «Ситилинк»)

Рис.1.6. Главная страница «Ситилинк»

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

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

Под ними расположены четыре оранжевых баннера которые несут важную служебную информацию сайта.

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

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

Рассмотрим каталог сайта магазина «Ситилинк» (см.рис.1.7. Каталог «Ситилинк»)

Рис.1.7. Каталог «Ситилинк»

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

Также стоит заметить, что шрифт у «Ситилинк» не масштабируется и на экранах с большим разрешением текст будет плохо виден.

1.2 Разбор проблематики навигации сайта

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

Очень часто главную страницу магазина делают очень яркой из большого количества рекламных баннеров, которые несут минимум информации, но занимают максимум места. В такой мешанине из разных цветов легко запутаться не то что найти нужный тебе товар. Отличным примером как раз для этого выступит «Wildberries». (см.рис.1.8. Рекламные баннеры «Wildberries»)

Рис.1.8. Рекламные баннеры «Wildberries»

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

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

Вот у «Ситилинка» с информативностью потенциального покупателя обстоят дела куда лучше. (см.рис.6 Главная страница) С главной страницы вы можете узнать скидки на все товары, посмотреть новые поступления, увидеть всю важную информацию о сайте и увидеть список всех акций на данный момент. Но вот визуальный стиль «Ситилинк» мало информативен и блеклый взять хотя бы странно расположенный рекламный баннер который полностью выбивается из общей стилистики и попросту не понятно зачем он там нужен.

Рассмотрим поисковые окна на примере все тех же магазинов. Прекрасно выполнено окно поиска у «Утконос» его отлично видно он выдает вам подсказки в поиске товаров у него даже есть голосовой ввод текста, что явно некоторым пользователям придется по вкусу. (см.рис.1.9. Окно поиска «Утконос»)

Рис.1.9. Окно поиска «Утконос»

Окно поиска в «Wildberries» выполнено общей стилистике сайта. (см.рис.1.10. Окно поиска «Wildberries») Большого размера полу прозрачная область которая заметна, но не бросается в глаза так делают большинство похожих сайтов. Но у нее есть небольшая интересная функция он позволяет тебе искать товар по картинки, это очень упрощает поиск специфических вещей.

Рис.1.10. Окно поиска «Wildberries»

Окно поиска в «Ситилинк» пример как не надо делать, оно маленького размера и имеет почти такой же цвет, что и фон из-за чего просто сливается с ним. (см.рис.1.11. Окно поиска «Ситилинк»)

Рис.1.11. Окно поиска «Ситилинк»

Каталоги у «Утконос» и «Wildberries» довольно похожи они оба состоят из двух блоков информации, где левый, это основные разделы сайта, а правый его подразделы довольно легко и быстро можно найти нужный вам раздел. Также они оба подсвечивают специальным цветом разделы, привлекающие внимания потенциального покупателя. У «Ситилинк» каталог выглядит немного по другому во первых он не скрыт и сразу видны все основные разделы и также каждый раздел обозначен тематической пиктограммой, что помогает на интуитивном уровне понять где какой раздел.