Функциональности, которые должны быть реализованы для каталога ECOMMERCE

Ekaterina Gerasimova

Успешный интернет-магазин. Какой каталог электронной коммерции на платформе Magento, самый простой по навигации?

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

Amazon

Оценка по рейтингу Alexa: 9 (01/01/2013)

Меню

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

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

Тут есть множество фильтров, которые помогают пользователю в навигации по каталогу: Марка, Тренд, Цены, Скидки, Цвета и т.д.

 amazon_menu

 

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

 

Плюсы

  • Цветной фильтр отображает цветные кнопки (это проще, чем читать названия цветов).
  • Фильтр может быть отключен в том же месте, в котором он был включен.
amazon_menu

 

Минусы

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

 amazon_pros

 

 

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

 

 

Overstock

Оценка по рейтингу Alexa: 660 (01/01/2013)

Меню

Здесь найти свитер гораздо легче и это можно сделать всего за 2 клика с первой попытки. Каждое изображение товара в каталоге отображается с одного (стандартного) угла камеры.

 

Поиск по каталогу

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

 overstock_catalog

 

Плюсы

  • Удобная функция быстрого просмотра. Это позволяет пользователям просматривать информацию о товаре, не открывая новую страницу.
  • Окно быстрого просмотра легко читается. Вся информация отображается в двух вкладках, которые также содержат дополнительную информацию о товарах и фотографиях.
  • Товары со скидкой сразу привлекают внимание характерным значком «Распродажа».
  • Товары классифицируются по возрастанию/убыванию и это легко можно увидеть в начале страницы. Кроме этого, есть довольно много параметров классификации (6).
  • Кнопка отключения фильтра - это отдельный фильтр.
  • Фильтры выполнены в виде списков. Крупный шрифт текста также повышает читабельность.
  • Пользователю не нужно открывать новые страницы, т.к. товары отображаются динамически. Новые товары для просмотра загружаются автоматически при прокрутке страницы вниз, без необходимости использования постраничной навигации.
  • Резиновый макет каталога позволяет показывать различное количество товаров, которые будут отображаться на странице, в зависимости от размера экрана пользователя.
  • Есть кнопка «Вернуться в начало»

 overstock_catalog_pros


Минусы

  • Включенный фильтр исчезает из общего списка и отображается в верхней части страницы. Это спонтанное изменение его расположения сбивает с толку.
  • Есть еще одна кнопка, заставляющая голове кружиться – это кнопка «Вернуться вверх». Она появляется, как в левой стороне страницы, так и в её середине.
  • Включение цветного фильтра не так удобно, как в Amazon. В данном случае существует стандартный список с названиями цветов.

 overstock_catalog_cons

 

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


Victoria `s Secret
Оценка по рейтингу Alexa: 1115 (01/01/2013)

Меню

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

 

Поиск по каталогу

Необходимый свитер был найден быстро. Все необходимые разделы находятся в левой колонке.

 

Внешний вид каталога

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

 

Плюсы

  • Быстрый просмотр есть только по 2 параметрам – размер и цвет.

Минусы

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

 victoriassecret_catalog_cons

 

Тем не менее, модели на сайте очень красивые и магазин производит хорошее впечатление.

  

Revolve clothing 

Оценка по рейтингу Alexa: 8206 (01/01/2013)

 

Меню

Горизонтальное меню с раскрывающимся списком позволяет мгновенно найти свитер. Это наиболее распространенный способ поиска нужной категории.

 

Поиск по каталогу

Здесь собраны вместе различные типы категорий. Кроме обычных разделов: Мужское, Женское, Тренд, есть разделы: Распродажа, Горячие Предложения, Блог, и Новинки. Самые популярные продукты рекламируются в блоге.

 

Внешний вид каталога

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

 

Плюсы

  • Функция быстрого просмотра позволяет просматривать все фотографии сразу.
  • Окно Быстрого Просмотра, которое держится открытым в левом верхнем углу, может быть отключено, и каталог будет выглядеть более традиционно и, как следовало ожидать, окно Быстрого Просмотра появится рядом с товаром. Но сначала пользователю понадобится подумать об этой функции и найти её.
  • Система классификации упрощает поиск. Все 4 классификационных параметра отображаются в верхней части каталога на одной линии. И они сразу же становятся видны.
  • Цветовая функция позволяет просматривать дополнительные параметры цвета для конкретного товара. Это означает, что дополнительные параметры цвета для конкретного товара сразу же становятся видны, т.к. маленькие цветные иконки отображаются возле каждой товарной позиции.
  • Этот фильтр также хорошо разработан. Он содержит 3 основных параметра (цвет, размер, цена) и оснащен кнопкой сброса.
  • Разработчики не забыли и о кнопке «Вернуться в начало».
  • Кнопка «Посмотреть Другие Товары» успешно заменила постраничную функцию в нижней части страницы. Дополнительные продукты можно просматривать, не открывая новую страницу.
revolveclothing_catalog_pros

 

Минусы

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

 

Ssense
Оценка по рейтингу Alexa: 9726 (01/01/2013)

 

Меню

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

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


Также нет отзывов покупателей. Возможно, никто так и не осмелился купить любой из этих товаров?

 ssense_catalog_cons

Плюсы

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

 

Минусы

  • При наведении курсора на товар, изображение изменяется. Перемещаясь по странице, постоянное мерцание изображения быстро утомляет глаза. Чтобы избежать этого, просто необходима кнопка «Увеличить Изображение».
  • Отсутствует функция Быстрого Просмотра.
  • Плох выбор шрифта (верхний регистр, кнопка shift) для меню категорий и названий товаров. Постоянно заглавные буквы затрудняют чтение.
  • Странно, что каталог не загружается автоматически. Страница каталога очень длинная и требует прокрутки, но в нижней части страницы пользователь сталкивается с функцией постраничной навигации.
  • Еще один минус в том, что нет кнопки «Вернуться вверх».
  • Есть только 3 параметра (цена, сроки, скидки) в левой колонке, вместо ожидаемых фильтров.


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

 

Важные моменты для пользователей:

 

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

 

Параметры, которые облегчают навигацию по каталогу:

  • Легко используемые фильтры (цвет, цена, размер и т.д.).
  • Классификация с четко видимым списком (в одну линию).
  • Функция Быстрого Просмотра.
  • Отсутствие постраничной навигации.
  • В большом каталоге наличие кнопки «Вернуться в начало».
  • Палитра цветов.

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

must_features_for_ecommerce_catalog