Задача
Разработать интерфейс приложения «Каталог», на основе которого будут созданы компоненты мобильного интернет-магазина для конструктора веб-сайтов, содержащих каталоги данных и механизмы взаимодействия пользователя с ними, в 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 с группировками экранов в цепочку действий пользователя
