UX проектирование мобильного демо-магазина для MoAction CMS

UX проектирование мобильного демо-магазина для MoAction CMS

Задача

Разработать интерфейс приложения «Каталог», на основе которого будут созданы компоненты мобильного интернет-магазина для конструктора веб-сайтов, содержащих каталоги данных и механизмы взаимодействия пользователя с ними, в mobile-first CMS MoAction

Функциональные требования

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

Технические требования

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

Уровень детализации

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

Материалы, которые были созданы:

  • PDF документы (7 листов) с группами функциональных экранов и экранов каждого типа интерфейса, PNG файлы;
  • маршрутные ux-кейсы (2 листа)- типичные сценарии пользовательского взаимодействия с каталогом.
  • Документация на интерфейсы ( таблица в XSL), содержащая информацию для каждого экрана и состояний, компонента и состояний по схеме условия появления/состояния и реакция на действия пользователя/способ реализации, всего в описании больше 100 позиций для экранов и контролов, каждая по по 4-м аспектам, согласно схеме.
  • Интерактивный прототип с работающими и взаимодействующими в пределах страницы компонентами интерфейса. Сделано для всех компонентов. Поиск и переходы на результаты поиска, редиректы страниц к общей навигации реализованы с помощью глобальных переменных.
  • Подключен внешний css-файл для шрифта иконок.

Типы интерфейсов, проработанные в прототипе

  • Навигация по каталогу
  • Список товара
  • Карточка товара
  • Поиск с автодополнением
  • Фильтр фасетной навигации
  • Корзина и форма заказа

Работа выполнялась в несколько этапов:

Разработка статических прототипов

Результат: файл Axure с каждой группой экранов на одном листе (7 листов) и набор PNG файлов для каждого экрана (~50шт.)

Группировка прототипов, отображающий каждый тип интерфейса, порядок смены страниц, экранов и состояний.

Результат: PDF документ (7 листов) со глобальной нумерацией всех экранов, прикрепленных к группе, маркерами с номером на контролах для идентификации в документации.

Разработка документации к интерфейсам

Результат: XLS-файл на >100 позиций для экранов и контролов, каждая по по 3-м аспектам

Пример для компонента интерфейс формы оформления заказа

Интерфейс/ компонент Условия появления Состояния и реакция на действия Способ реализации
Интерфейс формы оформления заказа / Компонет «Аккордион» – 3 шага для внесения данных заказа Компонента Accordion состоит из трех частей, первая из которых развернута всегда, другие скрыты, разворачивание каждого следующего блока зависит от заполненности и валидности предыдущего шага. Поля все обязательны, их количество минимально необходимое. На заполненные валидно предыдущие блоки можно вернуться;
тап на кнопке-заголовке секции – открытие секции, ее контент может быть изменен повторно, но также должен будет пройти снова через валидацию, позволяющую перейти (открыть автоматически) к след. секции формы
Доработать jQuery Accordion plug-in: первое событие открытия каждой секции, кроме первой связать с валидностью заполненности предыдущей секции
UX-кейсы маршрутов пользователя

Результат предоставлен в виде PNG файлы с детальной цепочкой изменений экранов при реализации пользовательского поведения на сайте (2 сценария)

Ниже представлены примеры шагов маршрута и фрагменты Customer Journey Map с группировками экранов в цепочку действий пользователя

Использование контекстного поиска в шапке сайта

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

Выборка товаров с помощью фильтра (фасетная навигация) в категории или результатах поиска

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

Просмотр страниц категории в двух режимах, переход к карточке товара

Мотивация пользователя: «Я попал в категорию этого сайта по запросу «брюки» в поисковой системе: что здесь интересного, какие брюки вообще сейчас в моде?»: такой пользователь настроен на более внимательное ознакомление с ассортиментом, ожидается что он посетит кроме списка товара и страницы самих товаров; просмотр товаров организован в два представления — плиткой и списком с деталями, для получения всей информации о товаре — переход к странице Карточки товара

Быстрое добавление товара в корзину

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

Просмотр увеличенного изображения товара

Мотивация пользователя: «мне нравится товар, я вижу уменьшенное изображение, как на маленьком экране рассмотреть его детали?»: привычная в приложениях функция pinch zoom — увеличение/уменьшение пальцами может быть реализована и на веб-сайте, комфортное перемещение между изображениями swip жестами.

Добавление товара у которого есть несколько размеров и расцветок, изменение его количества

Мотивация пользователя: «мне нравится товар, я хочу купить 2 экземпляра, что я должен тут сделать?»: выбрать изменемые параметры размер, цвет, без которых товар не добавится в корзину, добавить в корзину, перейти в корзину, добавить количество, перейти к оформлению заказа

Интерактивный прототип в Axure

Результат: Axure–билд с типовыми страницами и картой сайта каталога на примере интернет-магазина (15 страниц), Axure-исходный файл, где реализована интерактивность компонентов проекта.