Kuzvac Lab.

Проектное руководство Magento для дизайнеров.

Добро пожаловать в эту коллекцию руководств по дизайну для Magento. Мы собираемся познакомиться с платформой, пройдём через каждый из аспектов, которые вам необходимо учитывать в своих дизайнах.

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

Введение

Кому следует прочитать это? Ну, всем вовлечённым в создании электронной коммерции Magento, а значит: дизайнеру, web-разработчику и наконец клиенту. Обучение всех о процессе, платформе и подходу имеет важное значение.

Это Magento

Magento в качестве фрейморка уже три года и даже вначале имело одно огромное преимущество над конкурентами (помимо того, что она мощная, это и её маркетинг): хорошо разработанная тема по умолчанию, которая громко и ясно показывает её возможности. Фактически, одна только тема Modern заставила меня присмотреться получше к этому фреймворку, что и сделало его моей профессией сегодня. Дело в том, что только путём установки Magento вы получаете годы опыта, испытаний и лучших методов в области электронной коммерции. Если вы посмотрите на страницу продукта, каталога, или весь процесс оформления заказа, для вас уже заложен хороший фундамент. Это, конечно, не всё необходимо для каждого магазина.

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

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

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

Начнём…

Основные разделы магазина

Есть несколько основных секций, которые должны быть охвачены в каждом дизайне Magento:

• CMS страницы (CMS pages)
• Страница списка товаров категории (Category product listing page)
• Страница товара (Product view page)
• Страница Регистрации/Входа пользователя (в залогиненном или гостевом виде) (User login/register page – (logged or guest view))
• Страница учётной записи пользователя (User account page)
• Процесс оформления заказа (Checkout process)

Для того, чтобы полностью понять разделы упомянутые выше, желательно перейти в демо-магазин Magento и выделить некоторое время для изучения внешнего вида (front-end) и внутреннего вида (back-end). В нижней части демонстрационной страницы есть три варианта для внешнего вида, внутреннего вида и multi-store демо для Community версии Magento.

Домашняя страница

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

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

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

Страница категории

Ссылка на Демо: Страница категории

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

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

Фильтр товаров

• Вид Сетка
• Вид Список

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

Сортировка товаров

Эта функция, которая отражает, насколько хорошо был проведён “Дизайн каталога” и вы должны уделять особое внимание потребностям своих клиентов, если вы намерены дать им возможность найти то, что они ищут.

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

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

Совет: это всего несколько часов работы, но это плата за то, чтобы были варианты “А-Я” и “Я-А” друг под другом, чем использование других, не интуитивных нажмите для этого.

Цены

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

Рейтинг

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

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

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

Страница товара

С Magento у вас есть 6+3 типов товара в вашем распоряжении, где те +3 размещаются по магазину как “Up-Sell” сопутствующие товары, “Cross-Sell” перекрёстные продажи или “Related” связанные товары.

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

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

Простой товар

Ссылка на Демо: Nokia 2610 Phone – Страница товара

Следующие элементы “Простого товара”, как правило, общие для всех видов продукции:

Совет: используйте “Firebug” или “Developer Tools”, чтобы взглянуть на элементы этой демо страницы.

• Основная область товара
• Сопутствующая, дополнительная область товара

Основная область товара

• Область картинки товара
  • Картинка товара
  • Ползунок увеличения изображения
  • Больше изображений
  • уменьшенные изображения
• Витрина продукта
  • Облясть рейтинга
  • Область описания доступности
  • Область цены
  • Поле Добавить в
  •  Место для кнопки добавить в корзину, “Добавить в пожелания” и “Добавить в сравнение”
  • Область краткого описания

Сопутствующая, дополнительная область товара

Этот раздел страницы товара предназначен для “Описания товара”, “Сопутствующих товаров”, “Отзывов”, “Меток товара” и т.п.

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

Простой товар с настраиваемыми вариантами

Ссылка на Демо: Простой товар с настраиваемыми вариантами

Простой товар с настраиваемыми вариантами раздел вариантов с полем “Добавить в корзину” внутри, так как покупка зависит от выбранных вариантов. Это необходимо иметь в виду, так как эта страница должна быть обновлена в дизайне для простого товара.

Цена может быть установлена как “Специальная цена” или “Обычная цена” и в этом случае оба случая должны быть рассмотрены в дизайне в дизайне. кроме того, есть вариант Уровня цен, который объясняется в базе знаний Magento.

Наборы

Ссылка на Демо: Наборы

Страница наборов имеет макет подобный простому товару, за исключением цены, которая может отображаться как “От/До” и “Начиная с”, а так же с добавлением “Цена в этой комплектации”.

В типах наборов есть так же различия в Общих страницах и страницах Цен, а именно:

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

Представление цены: Определяет, будет ли цена товара отображаться как диапазон, от наименее дорогого компонента к самому дорогому (Диапазон цен), либо показан самый дешёвый (Начиная с).

Сборный товар

Ссылка на Демо: Сборный товар

Единственное существенно различие от представления страницы “Простого товара” в том, что все продукты группы представлены в таблице.

Настраиваемые товар

Ссылка на Демо: Настраиваемые товар

Это представление страницы товара, с настраиваемыми параметрами товара в форме выпадающего списка, аналогичного тому, что мы видели в “Наборы”.

Цифровой товар (Загружаемый товар)

Ссылка на Демо: Загружаемый товар

Макет очень похож на макет “Простой товар” и “Типовую” (Sample), который содержит ссылку на загружаемую часть этого “Цифрового товар”.

После покупки, клиенты могут загрузит товар со страницы оформления заказа.

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

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

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

Ещё одним общим примером является, когда продукта нет в наличии, но по прежнему отображается в магазине. В этом случае область “Добавить в корзину” не отображается. Это так же необходимо учесть в дизайне.

Сопутствующие товары, Перекрёстные продажи и Связанные товары

Ссылка на Демо: Сопутствующие товары

Сопутствующие товары выводятся на странице товара, в описание товара. Этот пример показывает более дорогие клавиатуры и другие товары, как сопутствующие менее дорогие клавиатуры.

Перекрёстные продажи

Ссылка на Демо: (Сначала добавьте что нибудь) Страница корзины

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

Кросс-продажи товаров можно рассматривать как импульсивные, такие как журналы и конфеты прямо на кассе в продуктовых магазинах.

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

Типы продуктов и цены

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

Типы товаров:

• Простой товар и “Простой” с вариантами
• Наборы Сборный товар и “Сборный” с вариантами
• Настраиваемый товар и “Настраиваемый” с вариантами
• Загружаемый товар и “Загружаемый” с вариантами
• Виртуальный товар и “Виртуальный” с вариантами

Типы цен

• Основная цена
• Специальная цена
• Цена От/до
• Цена в этой комплектации
• Уровень цен

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

“Цена От/до” и “Цена в этой комплектации” отображаются для Наборов, где цена колеблется от элемента с самой низкой ценой до элемента с самой высокой ценой в наборе. На странице категории будет только цена “От/до” для этого товара.

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

Например: вы продаёте канцелярские товары и вы хотите сделать акцию, где клиенты, которые покупают три коробки бумаги для принтера сэкономили деньги по сравнению с покупкой по одной коробке.

Далее вы пройдём “Страницу корзины” тем самым станем на один шаг ближе к самому процессу Оформления заказа.

Корзина

Ссылка на Демо: (Сначала добавьте что нибудь) Корзина

Очевидно, есть два состояния корзины: пустая и наполненная.

Наполнение корзины

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

Вкратце:

• Корзина
• Область перекрёстных продаж
• Скидки, доставка и кнопка оформления заказа

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

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

Доставка, скидочные коды/купоны вместе с кнопкой Оформления заказа должны быть размещены внутри div (.cart-collateral-block) и так как они содержат поля ввода, которые отображают сообщения об ошибках, они так же должны быть разработаны.

Пустая корзина

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

Оформление заказа (Одностраничное)

Ссылка на Демо: (Сначала добавьте что-нибудь) Одностраницчная покупка

Есть два основных раздела в “Одностраничной покупке”:

• Стадии оформления - показывает ход оформления вашего заказа
• Основное содержание - шага оформления заказа в виде вкладок
  • -Метод оформления заказа
  • -Информация о плательщике
  • -Информация о доставке
  • -Метод доставки
  • -Информация об оплате
  • -Подтверждение заказа

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

Если вы ещё не сталкивались с проблемой создания полностью настраиваемого оформления заказа, то настоятельно рекомендуем только “окинуть взгядом” этот раздел.

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

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

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

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

Окна сообщений

В Magento все контекстные взаимодействия между пользователем и магазином происходят через окна сообщений. Окна сообщений показываемые пользователю могут иметь вид “Сообщения об ошибке” или “Сообщения об успешном выполнении”. Поскольку эти сообщения являются неотъёмлемой частью user experience, их дизайн и размещение следует рассматривать как приоритетные, а не на авось.

Пример сообщения об ошибке в контексте:

Пример сообщения об удачном выполнении после введения правильных данных:

Пример сообщения об ошибке после применения неприемлемых данных:

Пример сообщения уведомления после применения данных:

Главное внимание должно быть отдано окнам сообщений обращения к макету (minding layout) и контексту.

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

Поиск

Ссылка на Демо: Результаты поиска

Встроенный в фронтенд Magento поисковик имеет три пути поиска продукции:

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

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

Страница без результатов

Что же пользователь может увидеть, кроме стандартного “Окна сообщения”, сообщающего, что ничего не было найдено?

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

Расширенный поиск

Форма расширенного поиска

Результаты расширенного поиска

Поиск с автозаполнением

404 страница

Страница Демо: Ничего нет

404 страница идёт вместе с Magento по умолчанию, но её, так же как и фавиконку можно упустить из внимания и она не получит должного внимания. Будучи CMS страницой вы можете спланировать спланировать её таким образом, чтобы сделать её менее напряжённой и предложить пользователю запасной вариант.

Боковые блоки

Я использую “Боковые блоки” для всего, что находится за пределами основного содержания, например в двух или трёх колоночных шаблонах.

• Многоуровневая навигация
• Выбор валюты
• Подписка на новости
• Популярные теги
• Опросы
• Сравнение товаров
• Сопутствующие товары
• Корзина

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

Моя учётная запись и Деловые электронные письма

Моя учётная запись

Вухуу! Мы, наконец, подошли к последнему разделу нашего руководства.

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

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

Разрабатывать область “Моя учётная запись” без каких то реальных данных сложно, но постарайтесь вдохновиться другими сайтами, став их клиентами и точно определить. что хороши плохо в магазинах, в которых вы уже зарегистрированы.

Деловые электронные письма

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

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

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

Заключение

Я понимаю, что это долго читается, так что в конце я перечислю некоторые моменты и важные материалы.

Общие рекомендации

• Узнайте платформу - это вам понадобится для работы над вашими проектами.
• Опыт покупки - это неоценимо. Получите это.
• Обратитесь к экспертам Magento - оперативная обратная связь,когда вы сомневаетесь.
• Думайте - на перёд и назад: Как клиент, владелец магазина и разработчик.

Конечные результаты дизайна

Эти рекомендации относительно представление вашего PSD разработчику или клиенту. Также было бы здорово использовать какой нибудь “Облачный сервис”, как “SugarSync” или “Dropbox” для совместного использования.

• Один PSD - организовывайте в композиции слоёв, или группы слоёв.
• Добавляйте пометки - опишите Что, Где, Как и Почему, при необходимости. 
• Задайте цвета - это чрезвычайно полезно при написании CSS 
• Для ссылок, определите наведённое, посещённое и обычное состояния.

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

Помните, никто не заметит, что вы делаете, пока вы не сделаете это.