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, который подсвечивает добавленный товар.

Переход корзины из свернутого в развернутое состояние и обратно происходит плавно в течении