zabika.ru 1

Интернет-магазин. Спецификация интерфейса.



Автор:

Евгений Казаков

E-mail:

Evgeniy.Kazakov@gmail.com

Skype:

evgeniy.kazakov

Тел.:

+7 (921) 331-82-90

Оглавление




Оглавление 3

Введение 4

Описание функциональности 4

Сценарии использования 6

Структура сайта 9

Описание экранов 10

Главная страница 10

Каталог и категории товаров 11

Общий каталог 11

Каталог телефонов 12

Каталог гарнитур 13

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

Корзина 15

Оформление заказа 16

Оплата и доставка 20

Личный кабинет 21

Управление постраничной навигацией 23


Введение

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

Описание функциональности


Интернет-магазин «Mobile-Piter» специализируется на торговле мобильными телефонами, гарнитурами и различными аксессуарами. Магазин имеет широкий ассортимент моделей и ориентирован на самых разных покупателей. Владельцы идут в ногу со временем и организовали поддержку электронных платежей для систем «Webmoney» и «Яндекс.Деньги». Приобретенные товары доставляются курьером или в пункт выдачи.

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

Функция

Описание

Поиск товара

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

Представление информации о товаре

Каждый товар представленный на сайте должен иметь подробное описание:

  • Название и артикул товара;

  • Цену;

  • Несколько фотографий;

  • Сопроводительный текст;

  • Техническое описание.

Выбор и добавление товара в «корзину»

Выбранный пользователем товар, добавляется в «корзину», которая предоставляет следующий набор функций:


  • Выбор количества единиц товара;

  • Удаление товара из «козины»;

  • Переход к оформлению заказа.

Предоставление информации о состоянии заказов

Сайт хранит информацию о всех заказах сделанных пользователем. Описание заказа включает следующие данные:

  • Номер заказа;

  • Дату формирования;

  • Статус заказа;

  • Сумму;

  • Описание товаров;

  • Дату выполнения.




Управление заказами

Пользователь может не только просматривать информацию о своих заказах, но и управлять ими. Любой активный заказ можно:

  • Отменить;

  • Отложить;

  • Восстановить, если заказ был отложен.

Регистрация на сайте

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


Сценарии использования


Сценарий

Описание

Выбор товара

Заинтересованные лица и их требования:


  • Покупатель. Хочет купить новый телефон.

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

    Результаты. Покупатель добавил товар в корзину.

Основной успешный сценарий:

  1. Покупатель переходит на один из разделов каталога товаров

  2. Переходит на страницу конкретного товара и изучает его характеристики

  3. Пользователь нажимает на кнопку «купить»

  4. Товар добавляется в корзину

    Покупатель повторяет действия 1-4 пока не выберет все товары

  5. Покупатель переходит к оформлению заказа

Расширения (или альтернативные потоки):

    1.а Покупатель вводит название товара в строку поиска

      1 Переходит на страницу с результатами поиска

      2 Повторяет действия из пунктов 2-5 основного сценария

    5.а Покупатель хочет удалить часть товаров из корзины

      1 Покупатель нажимает кнопку «удалить» напротив лишнего товара.

      2 Покупатель переходит к оформлению заказа

    5.б Покупатель хочет изменить количество товаров в заказе

      1 Изменяет количество единиц интересующего товара

      2 Покупатель переходит к оформлению заказа

Специальные требования:

  • Изменение количества товаров сохраняется автоматически, когда поле с кол-вом товаров теряет фокус ввода.

Оформление заказа

Заинтересованные лица и их требования:

  • Покупатель. Хочет оформить свой заказ и скорее его получить.

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


    Результаты. Покупатель оформляет заказ и получает подтверждение, что заказ принят к обработке.



Основной успешный сценарий:

  1. Покупатель вводит номер мобильного, фамилию и имя

  2. Выбирает способ доставки курьером

  3. Выбирает способ оплаты

  4. Указывает адрес доставки

  5. Пользователь переходит на страницу со сводными днными по товару

  6. Нажимает кнопку «Подтвердить заказ» и завершает оформление заказа

Расширения (или альтернативные потоки):

  1. Покупатель вспомнил, что ввел не тот номер телефона

      1 Покупатель нажимает ссылку «назад» и переходи на предыдущий экран

      2 Покупатель редактирует номер телефона

      3 Переходит к пункту 2 основного сценария

      Используя ссылку назад пользователь может возвращаться к предыдущим экранам мастера из пунктов 1 — 4

  1. Если пользователь выбрал доставку до пункта самовывоза то шаг 4 основного сценария пропускается

    6.а Покупатель переходит по ссылке «редактировать данные по заказу»

      1 Покупатель возвращается к первому экрану мастера.

      2 Покупатель выполняет действия основного сценария

Специальные требования:

  • Пока все обязательные поля на форме не заполнены, кнопка перехода к следующему экрану мастера оформления заказа остается не активной

  • Если обязательное для заполнения поле осталось пустым то система выдает всплывающую подсказку с требованием заполнить поле.

  • SMS сообщение с подтверждением принятия заказа к обработке должно приходить в течении 30 секунд.



Работа с заказами


Заинтересованные лица и их требования:

  • Покупатель. Хочет получить информацию о состоянии сделанных заказов

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

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




  1. Пользователь вводит номер телефона и пароль и входит в личный кабинет

  2. Покупатель ознакомился со своими заказами и оставил их без изменений

    Расширения (или альтернативные потоки):

    1.а Если пользователь не может вспомнить пароль от личного кабинета

  1. Пользователь нажимает на ссылку «восстановить пароль» и переходит на экран восстановления пароля

  2. Пользователь вводит номер мобильного телефона

  3. Пользователь получает на указанный номер SMS сообщение с паролем от личного кабинета

    2.а Покупатель хочет отложить заказ на время

      1 Покупатель нажимает кнопку «отложить» напротив выбранного заказа

    2.б Покупатель хочет отменить заказ

      1 Покупатель нажимает кнопку «удалить» напротив выбранного заказа

Специальные требования:

  • Если введенные номер и/или пароль были неверными система выводит всплывающую подсказку с сообщением об ошибке.

Структура сайта



Описание экранов

Главная страница

Экран


Описание



Главная страница содержит следующие элементы:


Каталог и категории товаров

Общий каталог




Экран

Описание



Страница каталога товаров должна давать покупателю максимально полное представление об ассортименте магазина.

Товары сгруппированы по основным категория каталога.

Страница содержит следующие элементы:

  • Заголовок и номера телефонов;

  • Главное меню;

  • Категории товаров;

  • Форму поиска;

  • «Корзину»;

  • Списки товаров по категориям.





Каталог телефонов




Экран

Описание



Страница каталога телефонов отображает отсортированный, многостраничный список телефонов конкретной марки.

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


Страница содержит следующие элементы:



Каталог гарнитур




Экран

Описание



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

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

Страница содержит следующие элементы:

  • Заголовок и номера телефонов;

  • Главное меню;

  • Категории товаров;

  • Форму поиска;

  • «Корзину»;

  • Форму фильтрации товаров;


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




Экран

Описание



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

Секция популярных товаров показывает пользователю какие товары покупатели берут вместе с этим товаром.

Секция спец. предложение предлагает купить несколько товаров по более выгодной цене.

Страница содержит следующие элементы:
  • Крупное изображение товара;


  • Цену товара;

  • Цену без скидки;

  • Кнопку купить;

  • Общее описание товара;

  • Технические характеристики товара;

  • Секции: спец. предложений, популярных и похожих товаров.



Корзина


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

Корзина может иметь два состояния свернутое и развернутое.

Экран

Описание




В свернутом состоянии корзина показывает сколько товаров и на какую сумму выбрано.

Если в корзине больше 3 товаров, то показываются только первые 3. Остальные товары будут видны только в развернутом состоянии корзины.

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

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



В развернутом состоянии корзина показывает все выбранные товары.

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

Так же каждый товар можно удалить из корзины.




Занимательная анимация

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

Переход корзины из свернутого в развернутое состояние и обратно происходит плавно в течении ~0.5 c. Корзина постепенно разворачивается и выезжает из верхнего правого угла (там где располагается свернутая корзина ) к центру экрана.


Оформление заказа


Для оформления заказа применяется мастер, который помогает пользователю оформить заказ и выбрать предпочтительные способы оплаты и доставки. Полное оформление закаха проходи за 5 шагов. На каждом экране мастера показывается один из параметров заказа.

Немного о валидации полей ввода

Для поля ввода номера телефона надо установить маску вида:

'(___)___-__-__'. А так же добавить валидацию номера телефона на сервере.

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

Экран

Описание

Шаг 1: ввод контактных данных. Пользователь вводит номер мобильного телефона и свои имя и фамилию.

Страница содержит следующие элементы:


  • Заголовок и номера телефонов;

  • Главное меню;

  • Форму для ввода контактных данных.



Шаг 2: выбор способа доставки. Пользователь выбирает способ доставки курьерьером или из пунктами самовывоза.

Страница содержит следующие элементы:

  • Заголовок и номера телефонов;

  • Главное меню;

  • Форму для выбора способа доставки.





Шаг 3: выбор способа оплаты. Пользователь выбирает способ оплаты заказа.

Страница содержит следующие элементы:

  • Заголовок и номера телефонов;

  • Главное меню;

  • Форму для выбора способа оплаты заказа.

Экран

Описание



Шаг 4: ввод адреса доставки. Пользователь вводит адрес по которому будет доставлен заказ. Если на шаге 2 пользователь выбрал пункт самовывоза, то этот шаг пропускается.

Страница содержит следующие элементы:

  • Заголовок и номера телефонов;

  • Главное меню;

  • Форму ввода адреса доставки


Шаг 5: подтверждение данных заказа. Пользователю показывается таблица со сводными данными по заказу.


Страница содержит следующие элементы:


  • Заголовок и номера телефонов;

  • Главное меню;

  • Таблица со сводными данными по заказу.



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

Страница содержит следующие элементы:

  • Заголовок и номера телефонов;

  • Главное меню;

  • Сообщение с подтверждением о том, что заказ принят.

Оплата и доставка




Экран

Описание



Страница содержит всю необходимую информацию о способах оплаты и доставки товаров.

Страница содержит следующие элементы:

  • Заголовок и номера телефонов;

  • Главное меню;

  • Категории товаров;

  • Форму поиска;

  • «Корзину»;

  • Информационные разделы о способах оплаты и доставки.


Личный кабинет




Экран

Описание



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

Текущий заказ можно:

  • Удалить;

  • Отложить на время;
  • Восстановить отложенный заказ.




Страница содержит следующие элементы:

  • Заголовок и номера телефонов;

  • Главное меню;

  • Категории товаров;

  • Форму поиска;

  • «Корзину»;

  • Список текущих заказов.

  • Список выполненных заказов.













Управление постраничной навигацией


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

Как должен вести себя настоящий paginator:

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

  2. Когда выделенным становится центральный элемент правой границы списка страниц ( состояние 2) он там и остается. То есть при перемещении по страницам с лево на право выделенный элемент всегда остается в центре, а номера страниц буду смещаться влево.

  3. При достижении правой границы выделенный элемент перестает сидеть на одном месте и неумолимо начинает приближаться к последней странице (состояние 5).

  4. Для перемещения с права на лево все аналогично.