Файл: навигация сайта - магазина.pdf

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

Креативный стиль оформления. Излишняя оригинальность в навигации неуместна. Нестандартные стили и непривычное месторасположение вынуждают посетителей долго блуждать по площадке, что приводит к повышению процента отказов, снижает конверсию. Разумнее отказаться от экспериментов, перенаправив креативность в разработку основного контента.
Общие названия пунктов меню. Надписи, используемые в главном/боковом меню, должны носить строго информативный характер. Нельзя использовать общие названия, безликие фразы, абстрактные понятия, шаблонные выражения. Для каждого значка следует подбирать лаконичные надписи, точно характеризующие содержимое пункта.
Чрезмерное количество выпадающих списков. Выпадающие списки экономят пространство и позволяют вместить максимальное количество подразделов. На практике использовать их не совсем удобно: при скольжении курсора они часто «убегают». Перечни в несколько уровней еще более сложны в применении, часто выходят за границы монитора. В итоге – низкая посещаемость страниц. Внедрять подобное меню нужно осторожно и умеренно. Однако элемент вполне оправдывает себя на крупных площадках с многочисленными разделами.
Множество пунктов. Второстепенные пункты нередко отвлекают посетителей от авторитетных разделов. В навигации важна краткость: нужно попытаться ограничить число пунктов в разумных пределах. Переполненная ссылками система сложна для восприятия.
Непродуманное расположение важных категорий. В процессе исследований доказано, что начало и конец списка обладают эффектом первичности и новизны. На середине списков концентрация внимания снижается. Именно поэтому нежелательно помещать первостепенные разделы по центру.

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

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

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

2.2. Анализ систем навигации аналогов

1. Целевая аудитория: молодые родители, 20+

Цветовая палитра: основной цвет голубой, белый, оранжевый.

Ассоциация: позитивное, яркое, вкусное

Достоинства: яркий дизайн, но при этом не так вызывающе смотрится

Недостатки: в шапке профиля нужен более читаемый шрифт, более подробная навигация (см.рис.2.2.)

2. Целевая аудитория: молодые родители, 20+

Цветовая палитра: основной цвет белый, синий

Ассоциация: качество, минимализм

Достоинства: читаемый шрифт, минималистичное решение, поисковая строка

Недостатки: не хватает более подробной навигации , добавить сочности сайту (см.рис.2.3.)

3. Целевая аудитория: молодые родители, 20+

Цветовая палитра: основной цвет белый и синий, нежно – розовый

Ассоциация: нежность, качество, игривость

Достоинства: понятный шрифт, поисковая строка

Недостатки: не хватает подробной навигации и яркости на сайте (см.рис.2.4.)

2.3. Бриф

1. Позиционирование. Цели дизайн -разработки. То, что позволит определить статус марки:

- Требования к популярности: понятность иконок;

- Ожидаемый потребительский эффект: графически привлекательный;

- Ожидаемый эффект для клиента: Уникальность, понимание.

2. Продукт. То, что поможет ответить на вопросы "какой"? и т.д.:

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

3. Потребитель. То, что поможет ответить на вопросы «кому»? и «зачем»? и определить целевую потребительскую аудиторию:

- Пол, возрастные группы потребителя - Женщины (Мамы) 20+;

- География (регионы потребления) - Россия;

- Социальные группы потребителей, статус - Люди со средним доходом;

- При необходимости - образ жизни, тип личности - Молодые мамы , ценящие качество, удобство использования, уникальность и функциональность;

- Повод для совершения покупки, искомые выгоды - Ежедневное употребление , удобство использования в течение всего календарного года. Разнообразный выбор;

- Интенсивность потребления, степень приверженности - Достаточно часто.

4. Конкуренты. То, что поможет сформировать «условный прилавок» и определить условия выживания марки:

- Продукты/конкурирующие структуры, существующие или ожидаемые на том же сегменте рынка - Детский мир, Дочки - Сыночки, Карусель;

- Конкуренты из смежных сегментов - Агуша, Фруто – Няня, Тёма;

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

5. Стратегия. Обещания. То, что поможет мотивировать потребителей:

- Рациональные обещания: преимущества, которые получит потребитель от покупки и/или потребления продукта - Сделать хороший рациональный выбор;

- Психологические ожидания: социальное и эмоциональное одобрение, самореализация потребителя и т.п. - Эмоциональное одобрение, осуществление ожидания в реальности.

6. Доказательства. Те подтверждения, без которых обещание не сможет сработать на рынке:

-  Элементы, свойства продукта, которые доказывают, оправдывают и заставляют верить обещанию - Иконки упрощают навигацию рекламно-информационному материалу; Делают интуитивно понятным указания на различные разделы, категории материала; Позволяют передавать пространную текстовую информацию в более лаконичном графическом виде.

7. Личность марки. То, с помощью чего марка находит общий язык с потребителем:

-  Тип отношений и тон общения, которые марка должна устанавливать с потребителями («друг», «помощник», «агрессор», «путеводитель» и т.п.). -

Друг, помощник, доверие.

Портрет потребителя:

- Молодые родители, мамы и папы 20+, у которых есть дети 0+;

- Проживающие в России;

- Имеющие средний заработок;

- Ведут активный образ жизни, работают;

- Нехватка времени

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

Глава 3 РАЗРАБОТКА И ПРОЕКТИРОВАНИЕ ДИЗАЙНА НАВИГАЦИОННОЙ СИСТЕМЫ

3.1. Описание дизайн - концепции. Эскизирование

Частая ошибка навигации сайта - магазина – это сложная или запутанная навигация, которая отталкивает покупателей. Следуя правилу: чем проще ориентироваться на сайте, тем быстрее пользователь найдет необходимую информацию и, сделает заказ. Основной принцип удобной навигации сайта - магазина : сделать так, чтобы покупатель всегда понимал в каком разделе и на какой странице он находится, откуда он перешел сюда и куда может перейти дальше. Исходя из данной информации, было принято решении о разработке навигационной системы для сайта - магазина детских товаров, создать минималистичные пиктограммы, которые будут максимально понятны для всех. Лаконичные линии, яркие, но сдержанные цвета. Простой дизайн, но при этом будет отвечать всем требованиям. Анализируя рынок детских товаров, первое что бросается в глаза это изобилие дизайна, буйство красок, максимально кричащие цвета и элементы дизайна. Для детей это конечно привлекательно, но не для их родителей. Из - за повседневной суеты и изобилия красок, глазам родителей хочется дать отдых. Что бы они глядя на сайт - магазин не напрягали свое зрение, а наоборот расслабили, и с концентрировались на главном - на совершении заказа на сайте. Проанализировав всю данную информацию сайта - магазина, было принято решение о разработке эскизного ряда навигационной системы. В него входит шесть позиций: питание, игрушки, одежда, коляски, спорт, гигиена. Т.к. выше сказано о том, что дизайн пиктограмм будет простой и понятный, дабы не перегружать информацией пользователя, было использовано минимальное количество линий, без лишних деталей. В первом эскизном ряде, дизайн легкий, не перегружающий глаз, адаптивный, линии тонкие и мягкие, без острых углов. Очень приятный на восприятие. Изображено на них: детская бутылочка, игрушечный мишка, ползунки, коляска, мячик, подгузники. (см.рис.3.1.) Во втором эскизном ряде, уже использована более массивная и толстая линия. Линия четко очерчивает контур пиктограммы. Изображено на них: баночка детского питания и ложка, игрушечный мишка, ползунки, коляска, мячик, подгузники. (см.рис.3.2.) В третьем эскизном ряде у пиктограмм уже толщина линий контура средняя, дизайн минималистичен и понятен. Ни них изображено: детская бутылочка, игрушечный мишка, ползунки, коляска, велосипед, подгузники. (см.рис.3.3.)

3.2. Стилеобразующие элементы и цветовое решение

Проанализировав все эскизные ряды для навигационной системы, был принят окончательный вариант, выбрать первый эскизный ряд. Эти эскизы, максимально отвечают поставленным требованиям, их дизайн простой, но при этом лаконичный, абсолютно понятен, не перегружает восприятие в целом, и приятно смотреть на эти пиктограммы, линии в них тонкие, мягкие, без острых углов. Что и требуется для сайта - магазина детских товаров. Цветовое решение у сайта достаточно скромное, логотип сайта обрамлен нежно красным оттенком, и зеленым оттенком залита шапка сайта. Гарнитура была использована Cambria. (см.рис.3.4.) Цветовая гамма, была подобрана максимально мягкой, не навязчивая, и не кричащая. Но при этом глазу приятной и достаточно яркой. В пиктограммах было использовано 7 оттенков, из них нежно - красный, который используется в логотипе сайта - магазина. Цветовое решение для сайта - магазина:

белый: RGB:255 255 255 CMYK: 0 0 0 0;
бело - голубой оттенок RGB: 239 249 252 CMYK: 6 0 1 0;
голубой RGB: 171 212 224 CMYK: 36 2 12 0;
желто - горчичный: RGB: 234 197 100 CMYK: 6 20 75 0;
нежно - красный: RGB: 244 54 76 CMYK: 0 99 66 0;
светло - коричневый: RGB: 156 112 91 CMYK: 6 0 1 0;
серо - черный: RGB: 94 94 94 CMYK: 58 50 53 24. (см.рис.3.5.)

3.3. Разработка и визуализация системы навигации

При разработке навигационной системы сайта - магазина, были учтены факторы, которые влияли на окончательный вариант. Несмотря на огромный ассортимент сайта - магазина детских товаров, необходимо было разработать понятную, четко организованную навигационную систему. (см.рис.3.6.) Было принято решение, что шапку сайта - магазина сделать уже по краям, но расширить в длину, что бы пиктограммы лучше читались на фоне шапки. Основные разделы категории товаров вынесены в главное верхнее меню. В правом верхнем углу присутствуют иконки, которые отвечают за оформление заказа. Каждый раздел оснащен выпадающим списком из дополнительных категорий. Активный пункт подсвечивается цветом. (см.рис.3.7.) Бокового меню нет, площадка не загромождена лишними ссылками, все просто и понятно.