Проектирование и выполнение проекта в материале. Навигация сайта-магазина

Содержание:

Введение

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

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

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

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

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

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

Задачи:

• Изучить литературу по данной теме;
• Изучить историю развития веб-дизайна;
• Изучить основные этапы разработки интернет-магазина;
• Выделить основные функции навигации сайта;
• Разработать элементы навигации интернет-магазина.

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ

1.1. История возникновения веб-дизайна

В 1990 году мир увидел первую веб-страницу — info.cern.ch. На сайте был лишь текст и ссылки (см. рис. 1.1). Первая версия HTML не позволяла визуализировать веб-страницы и придавать им индивидуальный лоск. Сплошь «текстовые» сайты просуществовали до 1994 года. Первые веб-дизайнеры — это люди без художественного образования, но умеющие писать на HTML.

Рис. 1.1. Первая веб-страница

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

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

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

Еще один качественный прорыв история развития web-дизайна совершила в 2000-е годы, когда технология CSS (Cascading Style Sheets) позволила отделить содержимое веб-страниц от их оформления. 2004–2006 годы считаются началом эры WEB-2.0 (см. рис. 1.2).

Рис. 1.2. Пример веб-страницы эры WEB-2.0

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

• плавные градиенты и мягкие цвета;
• объекты скругленной формы;
• зеркальность, глянцевость, «карамель» в кнопках, картинках и иконках;
• «специальные предложения» и бейджи на главной странице;
• паттерны на фон.

До 2007-го года просмотр веба на мобильных телефонах был испытанием не для слабонервных. Появление iPhone и массовое распространение социальных сетей дало толчок развитию мобильных приложений и веб-сайтов.

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

Использование сеток со столбцами при разработке макета сайта стало первым шагом к улучшению ситуации. Веб-дизайнеры стали использовать сетку в 960 пикселей, разделенную на 12 столбцов.

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

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

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

В 2011-м году у веб-дизайнеров наконец-то начинает появляться художественный вкус, и на смену «карамельной» моде приходит натуралистический дизайн (см. рис. 1.3).

Рис. 1.3. Пример натуралистического дизайна

Характерными чертами можно назвать «кожаный» фон приложения-календаря у iOS или трехмерную иконку «мусорной корзины».

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

К всеобщему счастью веб-дизайнеров, в 2012 году маятник моды качнулся в другую сторону (см. рис. 1.4). Глянцевые трехмерные кнопки были заменены плоскими векторными иконками и веб-шрифтами (прямо как на рассвете веб-дизайна в 1990-е), подтверждая выражение «Все новое — это хорошо забытое старое». В тренде также яркие цвета, интересная типографика, большие фоновые изображения и даже фоновое видео.

Рис. 1.4. Дизайн веб-страницы 2012 года

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

Прекрасно сочетается с Flat 2.0 такое направление, как Google Material Design (материальный дизайн), с его визуальными подсказками в виде интересной игры движений, света и теней.

Сейчас в моде также длительный скроллинг, винтажный стиль с пикселизированными картинками и галактическими фонами, визуальные элементы с большим разрешением (см. рис. 1.5).

Рис. 1.5. Современный дизайн сайта

1.2. Этапы разработки интернет-магазина

Традиционно проектирование нужно начинать со сбора требований к будущему проекту. С целью проекта в принципе все сразу понятно – продажи. Однако, в интернет-магазине, есть одна очень важная особенность, которую нужно выяснить в самом начале: как будут организованы все бизнес-процессы. Есть два глобально разных варианта, которые потом сильно повлияют на проектирование:

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

1. Сбор требований (брифинг)

• Какие цели ставит инициатор проекта и что в итоге он хочет получить. Кроме этого нужно точно выяснить критерии оценки достижения этой цели, они не всегда очевидны, даже если и кажутся таковыми. Это важно, именно из этого понимания будут делаться акценты в проектировании.
• Спросите про целевую аудиторию (ЦА): кто именно будет пользоваться сайтом, и какую полезность он получит. Ответ «все пользователи интернета» - недопустим, это будет означать, что инициатор проекта не понимает, для кого именно он создает этот проект, а значит и непонятно, как его делать. На этом этапе в идеале выяснить стандартные параметры ЦА: пол, возраст, регион и т.д. Обязательно нужно выделить ядро ЦА.
• Выявить прямых и косвенных конкурентов. Ответ «конкурентов нет», скорее всего, говорит о том, что человек не изучил конкурентную среду. Почти всегда есть конкуренты. Даже если идея проекта уникальная, ЦА уже пользуется какими-то сайтами, а значит, как минимум, есть косвенные конкуренты.
• Узнать про дедлайны, бюджетные ограничения, познакомиться с лицами, принимающими решения, и вообще выясните все организационные вопросы

1. Цели проекта и клиента

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

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

1. ЦА и персонажи

По сути это этап глубокого изучения целевой аудитории. Необходимо понять, кто именно целевая аудитория, кто из представителей ЦА является ядром, какие стоят задачи перед каждой целевой группой.

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

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

После подробного портрета ЦА можно приступать к персонажам. Это очень полезный прием для дальнейшей генерации идей. Имея понимание, кто ЦА в общем, её нужно разбить на группы типовых пользователей будущего проекта. Исходя из тематики проекта, группы можно объединять по роду деятельности, владению каким-то предметом, потребностям и т.д.

Для каждой группы придумывается типичный персонаж, который является представителем именно этой целевой группы. В идеале найти несколько живых людей и пообщаться с ними об их образе жизни. У каждого такого персонажа должно быть: имя-фамилия (использовать известных людей или знакомых – запрещено, чтобы не искажать восприятие), фотография (можно найти красивую аватарку в поиске VK), возраст, город проживания, род занятий, семейное положение, краткое описание его деятельности, привычек, задач, проблем, пользовательского опыта.

1. Исследование конкурентов

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

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

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

1. Задачи-проблемы-решения

На основе персонажей из позапрошлого этапа можно перейти к задачам-проблемам-решениям. У каждого человека всегда есть какие-то задачи, краткосрочные и долгосрочные.

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

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

1. Карта ума или Mind map

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

Для начала нужно взять несколько документов с идеями, которые сделали на прошлых этапах, и систематизировать. Все идеи необходимо разбить на глобальные блоки (разделы). Взаимоисключающие идеи объединяются или выбирается одна из них. По принципам мозгового штурма отбрасываются малополезные идеи. Общее количество блоков должно соответствовать будущим разделам сайта, у каждого из разделов могут быть подразделы. В идеале количество разделов не должно превышать 7-8 для большого портала.

1. Структура сайта

Имея карту ума, на которой видны основные разделы и подразделы, мы можем составить структуру сайта, по которой собственно и будем вести прототипирование в следующем этапе.

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

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

Рис. 1.6. Структура сайта.

1. Прототипирование

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

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

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

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

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

На выходе получается весьма объемный документ, который точно описывает будущую систему. В этом документе уже заложены интересные для ЦА «фишки», есть требования к дизайну и технологиям, есть полное описания любой функции на сайте. Документ утверждает заказчик и до конца разработки он больше не меняет, только после утверждения можно начинать этап продакшна сайта. Если это коммерческая разработка на заказ, ТЗ в обязательном порядке должно быть приложением к договору, и именно по нему будет происходить сдача-приемка работы.

1.3. Навигация и её функции

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

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

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

Рис. 1.7. Пример плохой навигации

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

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

• переключение между категориями и разделами верхнего уровня вне зависимости от текущего местонахождения пользователя;
• формирование представления о предлагаемых ресурсом товарах/услугах;
• облегчение поиска информации, помощь в оформлении заказа.

Учитывая критерии качественного юзабилити, навигация должна давать четкие ответы на такие вопросы:

1. Текущее положение пользователя на сайте.
2. Ранее посещенные юзером страницы.
3. Перечень доступных для посетителя страниц.

Необходимое количество ссылок определяется задачами площадки, объемом текстового, графического контента. Грамотная структура вмещает столько элементов, сколько требуется для удобного и оперативного перемещения по сайту. Оптимальный объем – не более 5-15% от общей площади ресурса (см. рис. 1.8).

Рис. 1.8. Шаблон хорошей навигации

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

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

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

Исходя из конкретно выполняемых функций, навигация подразделяется на следующие разновидности:

• основная – ссылки на важнейшие разделы, размещаемые преимущественно в меню;
• языковая – элементы для выбора удобного языка, применяемые на площадках с мультиязычной аудиторией;
• глобальная – гиперссылки, доступные с любой веб-страницы (ведущие на главную, в личный кабинет, корзину);
• тематическая – ссылки на страницы, объединенные похожей тематикой;
• рекламная – навигация для привлечения посетителей к рекламным блокам с предложением товаров/услуг (относящиеся к онлайн-магазину или другим ресурсам);
• текстовая – компоненты, применяемые с целью оптимизации путем внутренней перелинковки (направляют пользователей к упомянутому в контенте материалу, расположенному в других разделах);
• указательная – показывает текущее местонахождение посетителя (актуальна для крупных площадок).

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

Чтобы выбранные элементы работали, нужно соответствующим образом их оформить и реализовать на сайте. Существует несколько форм реализации:

1. Текстовая. Ссылки, оформляемые в виде обычного текста.
2. Графическая. Функциональные гиперссылки, «замаскированные» в различные графические элементы – кнопки, изображения.
3. HTML. Выпадающие списки, компоненты, открывающиеся при наведении курсора на корневой раздел. Позволяют значительно сэкономить пространство.
4. Технологии Flash, Java. Интерактивные компоненты, реагирующие на нажатие или наведение курсора запрограммированным действием, эффектом.

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

1.4. Ключевые навигационные элементы для интернет-магазина

Центральный навигационный компонент коммерческой площадки – главное меню. Его видно без прокрутки страницы. Традиционно меню делают горизонтальным и располагают прямо под шапкой, что наиболее удобно и привычно для пользователей (см. рис. 1.9).

Рис. 1.9. Пример расположения ключевых навигационных элементов

В главном меню должны присутствовать ссылки на основные страницы интернет-магазина:

• о компании;
• каталог товаров;
• доставка/оплата;
• возврат/гарантии;
• скидки/акции;
• отзывы;
• обратная связь;
• блог;
• контактная информация.

Не стоит стремиться вкладывать в данный блок полное содержание, исчерпывающую информацию о ресурсе. Это своего рода краткая выжимка, помогающая быстро ознакомиться с сутью и политикой проекта. Оптимальное количество разделов на панели – 5-7. При необходимости можно добавить второй ряд, подпункты, выпадающие списки, дополнительные уровни. Если к какому-либо из пунктов нужно привлечь внимание, следует выделить его шрифтом или цветом. Также желательно визуально отмечать активный раздел меню, в котором находится пользователь.

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

Рис. 1.10. Пример раздела «каталог товаров»

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

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

Футер – подвал сайта, занимающий пространство внизу страницы. После полного ознакомления с текущим материалом он помогает покупателю быстрее перейти в искомые разделы или найти другую нужную информацию.

В пространстве подвала размещают следующие полезные компоненты:

• гиперссылки на все основные, дополнительные разделы онлайн-магазина без каких-либо ограничений;
• подробные контактные данные (адрес, реквизиты, номера телефонов, мессенджеры, электронные почтовые ящики);
• сноски на аккаунты компании в популярных соцсетях.

Чтобы быстрее сориентировать посетителя в множестве ссылок на разделы (см. рис. 1.11), целесообразнее размещать их столбцами, предварительно разбивая на понятные, логические подгруппы.

Рис. 1.11. Пример расположения ссылок на разделы

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

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

URL, выносимый в адресную строку, также является важным навигационным элементом ресурса. Он должен быть простым, понятным обычному пользователю, отражать не искаженную суть конкретной веб-страницы. Желательно прописывать адреса на латинице: https://site.ua/internet-magazin/glavnaya/.

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

Помимо перечисленных, к навигационным элементам относятся шапка, фирменный логотип магазина со ссылкой на главную страницу, форма поиска (см. рис. 1.12).

Рис. 1.12. Пример шапки

1.5. Типичные ошибки навигации сайта

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

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

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

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

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

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

• Rozetka (см. рис. 1.13)

Рис. 1.13. Главная страница сайта Rozetka

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

• Zara (см. рис. 1.14)

Рис. 1.14. Главная страница сайта Zara

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

• Whistles (см. рис. 1.15)

Рис. 1.15. Главная страница сайта Whistles

Английский онлайн-магазин современной одежды – отличный пример минималистичной навигационной системы. Все разделы, включая поиск, вынесены в главное верхнее меню. Бокового меню нет. Площадка не загромождена лишними ссылками, все просто и понятно.

ГЛАВА 2. РАЗРАБОТКА ЭЛЕМЕНТОВ НАВИГАЦИИ

2.1. Описание проектируемой системы. Определение констант бренда

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

Кроме того, с помощью иконок обозначают категории товаров в интернет магазинах. Нажимая на значок, пользователь оказывается в соответствующей категории или карточке товара. Бывает, что иконки размещают в меню веб-ресурса.

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

Для курсовой работы был выбран веб-сайт Яндекс.Еда. Это сервис быстрой доставки еды из ресторанов через мобильное приложение или веб-сайт. Доставку осуществляют курьерские службы — партнеры сервиса Яндекс.Еда и собственные курьеры ресторанов. На выбор доступны пиццерии, пекарни, рестораны грузинской и японской кухни, бургерные, стейк-хаусы и другие заведения.

По состоянию на июнь 2019 года Яндекс.Еда работает в Москве, Санкт-Петербурге, Казани, Сочи, всего в 24 городах России. Яндекс.Еда работает более чем с 10 тысячами ресторанов, включая «Макдоналдс», «Папа Джонс», «Якитория», «Хлеб Насущный», «Теремок», FARШ, Black Star Burger, «УРЮК», сеть ресторанов «Ростинтер» (куда входят IL Патио, TGI FRIDAYS, «Планета Суши», «Шикари» и кофейни Costa Coffee), KetchUp, Burger Heroes и т.д.

Сервис Яндекс.Еда был создан на базе компании Foodfox (основана в марте 2016 Максимом Фирсовым и Сергеем Полиссаром). 22 декабря 2017 года компания «Яндекс.Такси» приобрела 100% российского сервиса доставки еды Foodfox.

19 января 2018 года компания Яндекс.Такси учредила дочернюю компанию ООО «Яндекс.Еда». В компании сообщили, что Яндекс.Еда войдет в новую холдинговую структуру, которая образуется в результате закрытия сделки по слиянию бизнесов Яндекс.Такси и Uber в России и СНГ.

18 июня 2018 года сервис Яндекс.Еда вышел в первый регион и запустил доставку в Санкт-Петербурге.

У данного сервиса есть несколько второстепенных вариантов логотипа и основной (см. рис. 2.1), который рекомендован к использованию во всех маркетинговых коммуникациях.

Рис. 2.1. Основной логотип

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

В логотип упакованы три образа (см. рис. 2.2):

1. Интернациональная литера «е». Яндекс про текст: «Мы знаем,

как важно найти подходящие слова»;

1. Движение по спирали. Другими словами — замешивание,

скручивание, слоистость;

1. Окружность, которая рифмует логотип с мисками, тарелками,

чашками и кастрюлями.

Рис. 2.2. Цепочка формирования логотипа

Оранжевый — очень удобный цвет. Это цвет углеводов, горячего хлеба, многих фруктов и так далее. Этот же цвет очень заметен в среде: такси, спецодежда, американские школьные автобусы, столбы-указатели — все это лежит в желто-оранжевом спектре. В веб-стандартах оттенок используемый в логотипе называется tangerine yellow —  «мандариновый жёлтый».

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

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

• Контраст
• Дополнение
• Резонанс

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

В дизайне сайта Яндекс.Еда используются два основных цвета (желтый и черный) и один дополнительный (морской зеленый). Основные цвета должны доминировать во всех коммуникациях бренда для правильности его идентификации. Дополнительные цвета оказывают поддержку основным и более широко раскрывают бренд.

Черный — нейтральный, но очень сильный цвет, ассоциирующийся с изысканностью, сдержанностью, властью (см. рис. 2.3). Присутствуя на любом сайте и сочетаясь с другими цветами, черный способен вызывать разные или подчеркивать эмоции и ассоциации. Также черный может выступать доминирующим цветом в дизайне, однако опасность его чрезмерного использования состоит в том, что страница может ассоциироваться у посетителя со злом и нервозностью.

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

Рис. 2.3. Черный

От желтого веет теплотой, творчеством, весельем и позитивом (см. рис. 2.4). Эмоции здесь самые приятные и положительные. Однако, нужно быть аккуратнее, чтобы цвет не переутомлял, именно такой исход возможен в больших его количествах. Он самый гибкий, везде проникает, помогает преодолеть трудности, способствует концентрации внимания. Под воздействием желтого цвета быстро принимается решение и мгновенно выполняется, потому он является отличным мотиватором действовать, однако, здесь также имеет место впечатление праздника, вкус детства, ощущение беспечной радости и счастья. Желтый не намекает на вожделение или злость. Он подходит при необходимости вызвать у людей хорошее настроение и искреннюю улыбку.

Рис. 2.4. Жёлтый

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

Рис. 2.5. Морской зеленый

В 2016 году Яндекс анонсировал собственный шрифт Yandex Sans (см. рис. 2.6), над которым работали 2,5года. Гарнитура основана на Arial. Современный нейтральный шрифт, отличающийся от основных конкурентов и довольно точно передающий образ Яндекса и «голос» бренда. Этот шрифт используется во всех сервисах Яндекса, в том числе на веб-странице Яндекс.Еда.

Рис. 2.6. Шрифт Yandex Sans

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

Рис. 2.7. Главная страница Яндекс.Еда

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

2.2. Эскизы системы навигации, окончательный вариант, стилеобразующие элементы и визуализация разработки

При создании иконок ориентировалась на наброски блюд (см. рис. 2.8) ассоциативно понятные любому современному пользователю и стилизовала их в пиктограммы.

Рис. 2.8. Наброски

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

1. Черный — самый сильный из всех нейтральных цветов. Его

достоинство в том, что он обычно ассоциируется с силой, элегантностью и формальностью, создаёт ощущение утонченности и загадочности в дизайне;

1. Желтый часто считают самым ярким и энергичным из всех

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

Для разработки навигационных знаков использовались две толщины линий 0.75 и 1.25 (пт), круги диаметром 1 и 0.5 (мм) (см. рис. 2.9).

Рис. 2.9. Линии и круги

Для лучшего восприятия проделанной работы и понимания как окончательный вариант элементов навигации смотрится на веб-странице, нужно поместить их в среду (см. рис. 2.10).

Рис. 2.10. Окончательный вариант

Быстрое и надежное решение в этой их размещение на главной странице в программе Photoshop (см. рис. 2.11).

Рис. 2.11. Расположение иконок на сайте

ЗАКЛЮЧЕНИЕ

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

Требования к дизайнеру зависят от целей компании. Но редко встречаются дизайнеры, которые обладают всеми необходимыми навыками одинаково хорошо. Чаще они хороши в чём-то одном, и именно этим они ценны.

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

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

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

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

Научная и учебная литература

1. Красносельский С. А. Основы проектирования: учебное пособие. - М.: Директ-Медиа, 2014. – 232. – [Электронный ресурс]. – URL: http://biblioclub.ru
2. Диков, А. В. Веб-технологии HTML и CSS: учебное пособие – М.: Изд-во: Директ-Медиа, 2012. – То же [Электронный ресурс]. – URL: http://biblioclub.ru
3. Костюченко, О. А. Творческое проектирование в мультимедиа: монография. – Изд-во: Директ-Медиа, 2015. – То же [Электронный ресурс]. – URL: http://biblioclub.ru
4. Кузнецова, Л. В. Лекции по современным веб-технологиям. – Изд-во: Интернет-Университет Информационных Технологий, 2010. – То же [Электронный ресурс]. – URL: http://telegraf.design/artem-tolstyh-samyj-glavnyj-trend-pravilnoe-dizajn-myshlenie-trendy-v-dizajne-2017-go/

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

1. Проекторат [электронный ресурс] ‒ Режим доступа: ‒ URL: http://projectorat.ru/on-icons-in-russian/ (дата обращения 19 июня 2020).
2. UXPUB [электронный ресурс] ‒ Режим доступа: ‒ URL: https://ux.pub/polnoe-rukovodstvo-po-sozdaniyu-interfeysnyh-ikonok/ (дата обращения 19 июня 2020).
3. Design & Productivity [электронный ресурс] ‒ Режим доступа: ‒ URL: https://medium.com/design-productivity/что-имели-в-виду-авторы-логотипа-яндекс-еды-4206701f32f9 (дата обращения 19 июня 2020).
4. Генератор продаж [электронный ресурс] ‒ Режим доступа: ‒ URL: https://sales-generator.ru/blog/navigatsiya-na-sayte/ (дата обращения 19 июня 2020).
5. Way to Start [электронный ресурс] ‒ Режим доступа: ‒ URL: https://waytostart.ru/blog/kak-sozdat-internet-magazin (дата обращения 19 июня 2020).
6. Веб-студия АВАНЗЕТ [электронный ресурс] ‒ Режим доступа: ‒ URL: https://a1z.ru/vse-dlya-internet-magazina/132-sozdat-populyarnyy-sayt-magazin.html (дата обращения 19 июня 2020).
7. Cossa [электронный ресурс] ‒ Режим доступа: ‒ URL: https://www.cossa.ru/trends/166020/ (дата обращения 19 июня 2020).
8. Хабр [электронный ресурс] ‒ Режим доступа: ‒ URL: https://habr.com/ru/post/245153/ (дата обращения 19 июня 2020).