Файл: Проектирование и выполнение проекта в материале. Навигация сайта-магазина.pdf
Добавлен: 16.05.2023
Просмотров: 362
Скачиваний: 2
Хлебные крошки присутствуют на каждой странице, не считая главной. Обычно их располагают вверху слева. Кликабельные ссылки должны иметь не слишком выразительный, не крупный шрифт, отводящий элементы на второй план относительно основного контента.
Футер – подвал сайта, занимающий пространство внизу страницы. После полного ознакомления с текущим материалом он помогает покупателю быстрее перейти в искомые разделы или найти другую нужную информацию.
В пространстве подвала размещают следующие полезные компоненты:
- гиперссылки на все основные, дополнительные разделы онлайн-магазина без каких-либо ограничений;
- подробные контактные данные (адрес, реквизиты, номера телефонов, мессенджеры, электронные почтовые ящики);
- сноски на аккаунты компании в популярных соцсетях.
Чтобы быстрее сориентировать посетителя в множестве ссылок на разделы (см. рис. 1.11), целесообразнее размещать их столбцами, предварительно разбивая на понятные, логические подгруппы.
Рис. 1.11. Пример расположения ссылок на разделы
Для большего удобства пользователей в онлайн-магазинах используют кнопку для возврата в начало страницы. Обычно она оформляется в виде указывающей наверх стрелки. Кнопка дает возможность обойтись без долгих прокручиваний, быстро переводит клиента в шапку ресурса. Компонент особенно необходим площадкам с объемным информационным содержанием.
На вспомогательной панели инструментов часто размещают набор системных иконок-пиктограмм. Это кнопки, оформленные в виде привычных графических изображений. Элементы предназначены для перехода на главную (домик), к поиску или карте (лупа), к контактной информации (почтовый конверт). В зависимости от активности раздела иконки меняют цвет.
URL, выносимый в адресную строку, также является важным навигационным элементом ресурса. Он должен быть простым, понятным обычному пользователю, отражать не искаженную суть конкретной веб-страницы. Желательно прописывать адреса на латинице: https://site.ua/internet-magazin/glavnaya/.
Карта онлайн-магазина выполняет роль путеводителя по веб-сайту. Инструмент выносится на отдельную страницу и вмещает гиперссылки на все разделы/подразделы, представляя подробную структуру площадки. Клик по выбранному пункту карты мгновенно переносит клиента в определенную часть ресурса.
Помимо перечисленных, к навигационным элементам относятся шапка, фирменный логотип магазина со ссылкой на главную страницу, форма поиска (см. рис. 1.12).
Рис. 1.12. Пример шапки
1.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):
- Интернациональная литера «е». Яндекс про текст: «Мы знаем,
как важно найти подходящие слова»;
- Движение по спирали. Другими словами — замешивание,
скручивание, слоистость;
- Окружность, которая рифмует логотип с мисками, тарелками,
чашками и кастрюлями.
Рис. 2.2. Цепочка формирования логотипа
Оранжевый — очень удобный цвет. Это цвет углеводов, горячего хлеба, многих фруктов и так далее. Этот же цвет очень заметен в среде: такси, спецодежда, американские школьные автобусы, столбы-указатели — все это лежит в желто-оранжевом спектре. В веб-стандартах оттенок используемый в логотипе называется tangerine yellow — «мандариновый жёлтый».
Использование цветов и их сочетаний в коммерческих и бизнес-целях основывается на теории цвета или психологическом и эмоциональном восприятии цвета человеком. Грамотное цветовое оформление гораздо больше, чем просто украшение. Именно цветовое решение в дизайне страниц способно сыграть решающую роль в достижении поставленных перед интернет-ресурсом целей путем коррекции восприятия пользователями веб-страниц.
В общем и целом теория цвета в веб-дизайне базируется на трех составляющих, открывающих бездну возможностей и широкое поле для экспериментов для дизайнера при разработке интерфейса:
- Контраст
- Дополнение
- Резонанс
Использование резко контрастирующих друг с другом цветов и оттенков позволяет подчеркивать остроту, пикантность, важность отдельных элементов или информации. Контрастные оттенки, то есть диаметрально противоположные, выбираются с помощью цветового круга.
В дизайне сайта Яндекс.Еда используются два основных цвета (желтый и черный) и один дополнительный (морской зеленый). Основные цвета должны доминировать во всех коммуникациях бренда для правильности его идентификации. Дополнительные цвета оказывают поддержку основным и более широко раскрывают бренд.