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

Содержание:

Введение

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

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

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

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

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

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

Задачи:

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» довольно похожи они оба состоят из двух блоков информации, где левый, это основные разделы сайта, а правый его подразделы довольно легко и быстро можно найти нужный вам раздел. Также они оба подсвечивают специальным цветом разделы, привлекающие внимания потенциального покупателя. У «Ситилинк» каталог выглядит немного по другому во первых он не скрыт и сразу видны все основные разделы и также каждый раздел обозначен тематической пиктограммой, что помогает на интуитивном уровне понять где какой раздел.

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

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

ГЛАВА 2. ПРОЕКТНО-ГРАФИЧЕСКАЯ ГЛАВА

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

2.1 Создание и описание идеи концепции навигации сайта

Данная мысль по изменению навигации онлайн-магазина «OZON» пришла мне, когда я совершал очередную покупку и запутался в наименованиях разделов каталога сайта. (см.рис.2.1. каталог) Приоткрытие каталога на пользователя сайта вываливается огромное количество информации с разными раздела и подразделами сайта. В которых нужно провести некоторое количество времени прежде чем найти нужный тебе раздел. Также каталог выглядит как перечень разделов товаров, без какой либо визуализации. Цели создания новой навигации были в том, чтобы упростить нахождение нужного товара потенциальному покупателю и сделать ее более эстетически приятной.

Рис.2.1. Каталог

Главная страница сайта также перегружена различной информацией в ней находиться большое количество всевозможных рекламных баннеров и различных ненужных подразделов. (см.рис.2.2. Главная страница) Попав на нее пользователь теряется. Для наилучшего решение этой проблемы стоит минимизировать количество ярких рекламных баннеров и разделов свести все к минимум нужной и функциональной информации. Основные цвета и стилистические решения были взяты из фирменного брендбука компании «OZON». Так как служебный шрифт компании не доступен в общем доступе было принято решение заменить его наиболее схожий.

Рис.2.2. Главная страница

2.2 Создание визуализации навигации сайта магазина

Для более понимании сути были разработаны эскизы будущей навигации сайта. При создание эскизов я основывался на комфортном и функциональном расположение блоков информации без лишней перегруженности интерфейса. Приступил к работе с создания эскиза главной страницы. (см.рис.2.3. Эскиз главная страница)

Рис.2.3. Эскиз главная страница

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

Рис.2.4. Эскиз каталога

При создание проекта был использован шрифт Tahoma в начертании Regular и Bold. (см.рис.2.5. Шрифт)

Рис.2.5. Шрифт

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

Рис.2.16. Пример начертания Bold

Regular используется для обозначения товаров на сайте и маленьких подкатегорий. (рис.2.7. Пример начертания Regular)

Рис.2.7. Пример начертания Regular

Цвета были использованы из Брендбука фирменного стиля компании «OZON» (см.рис.2.8. Цвета)

Рис.2.8. Цвета

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

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

Рис.2.9. Пример красного цвета

Серый цвет используется как подложка для изображения товаров. (см.рис.2.10. Пример серого цвета)

Рис.2.10. Пример серого цвета

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

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

Рис.2.11. Пример синего цвета

Основываясь на стилистике подраздела сайта «OZON» создаем визуализированную систему каталога. Создаем блок каталога, со всеми основными разделами сайта используя при этом фирменный цвет для создания подложек. Используя графический редактор Photoshop и его встроенную функцию «Обтравочная-маска» визуализируем каталог, используя тематические фото, подходящие для соответствующего раздела. (см.рис.2.12. Визуализированный каталог)

Рис.2.12. Визуализированный каталог

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

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

В нашем проекте разрабатывались прототипы навигация главной страницы и каталога онлайн магазина «OZON» и их финальные визуализированные версии. Для расчета стоимости работы мы взяли за основу цены предоставляемые «Вебстудия Дивиер»¹³. Их цены (с НДС) на следующие виды работ: графические элементы 500 руб. за элемент, оптимизация изображения для каталога 150 руб за единицу, рекламный статичный баннер 2000 руб, анимированный баннер HTML5 4500 руб. Используя эмпирический метод вычисления мы высчитали стоимость проекта. Графические элементы 550*23=12650 руб., оптимизация изображения для каталога 200*23=4600 руб., статичный баннер 2200 руб., анимированный баннер HTML5 4700 руб. Общая сумма проекта составила 24150 руб.

Готовый проект сайта магазина

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

Рис.2.13. Мокапы

Заключение

В современном мире важна точность и быстрота принятия решений так как время чаще всего ограничено, это касается и онлайн покупок. Громоздкие, перегруженные информацией интерфейсы сайтов магазинов отнимают много времени. Все чаще цениться сайты с простым и понятным интерфейсом и красивым внешним видом не перегруженные лишними элементами. С точки зрения продаж простые и понятные интерфейсы сайтов магазинов также находятся в более выигрышном положение. Так как потенциальный покупатель тратить меньше времени на выбор товара, значит, есть вероятность, что он купит больше. Если покупатель нашел нужный ему товар без проблем то в будущем есть большая вероятность что он совершит покупку здесь снова, чем воспользуется сайтом, на котором ему было затруднительно найти товар. Основываясь на анализе проведенной в первой главе было создана новая навигация для онлайн магазина «OZON». Для создание главной страницы была взята за пример страница онлайн магазина «Ситилинк». Информационное заполнение рекламного баннера и баннера с важной информацией была взята с концепции онлайн магазина «Утконос». Придание более целостного вида полю поиска также было взято с онлайн магазина «Утконос». Внешний вид каталога и его навигация была взяты из стилистики подразделов самого магазина «OZON».

Новая навигация была создана с использованием опыта конкурентов для более комфортного и функционального использования сайта онлайн магазина «OZON»

Список литературы

Основная литература:

1. Красносельский С. А. Основы проектирования: учебное пособие. - М.: Директ-Медиа, 2014. – 232. - режим доступа http:// biblioclub.ru

Дополнительная литература:

2. Тарасова, О. П. Организация проектной деятельности дизайнера: учебное пособиеИздательство: ОГУ, 2013. – То же [Электронный ресурс]. – URL:http://biblioclub.ru

3. Туэмлоу Э. Графический дизайн. Фирменный стиль, новейшие технологии и креативные идеи. – М.: АСТ, Астрель, 2014. – 256 с.

4. Алан К. Об интерфейсе. Символ-Плюс, 2009. – 688 c.

5. Раскин Д. Интерфейс: новые направления в проектировании компьютерных систем. Символ-плюс, 2005. – 272 с.

6. Кесенбери У. Брукс К. Сторителлинг в проектировании интерфейсов. Как создавать истории, улучшающие дизайн. RosenFeld, 2013. – 336 c.

7. Монтейро М. Дизайн-это работа. Манн,Иванов и Фербер, 2012. – 295 с.

8. Кришна Г. Хороший интерфейс - невидимый интерфейс. Питер, 2016. – 256 с.

9. Круг С. Как сделать сайт удобным. Юзабилити по методу Стива Круга. Питер, 2010.- 208 с.

10. Кедлек Т. Адаптивный дизайн. Делаем сайты для любых устройств. Питер, 2013.-288 с.

Электронные ресурсы

11. Основные элементы и примеры использования [электронный ресурс] ‒ Режим доступа: ‒ URL: https://idbi.ru/blogs/blog/navigatsiya-v-dizayne-sayta (21.04.20)

12. Навигация для сайта интернет магазина [электронный ресурс] ‒ Режим доступа: ‒ URL: https://beseller.by/blog/navigaciya-dliya-internet-magazina/ (21.04.20)

13. Вебстудия Дивиер [электронный ресурс] ‒ Режим доступа: ‒ URL: https://www.divier.ru/ceny/ (17.06.20)

Антиплагиат