Посібник по можливостях

Мета даного посібника показати замовникам можливості нашого рішення і допомогти покупцям ефективно його використовувати.



Загальні

  • Інтерфейс оптимізований для трьох основних типів пристроїв:
  • Інтерфейс підтримує зміну орієнтації:
  • Всі елементи дизайну виконані з використанням векторної графіки, яка добре виглядає на екранах будь-яких розмірів і роздільних здатностей
  • Структура сайту складається з головної сторінки та сторінок продуктів по категоріях:
  • Бокове меню з посиланнями на доступні дії на сторінці:

Головна сторінка

Призначенням головної сторінки є надання покупцям простого способу навігації по категоріях продуктів, показати вкладки для топових продуктів і пошук продуктів по тексту.

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

Сторінка продуктів

На сторінці продуктів покупець може переглядати, фільтрувати, сортувати, порівнювати продукти.

  • Вигляд сторінки залежить від типу пристрою. На десктопі та планшеті зліва показується фільтр (див. Фільтр). Для телефону у вертикальній орієнтації одночасно показується або список продуктів або фільтр:
  • Щоб мати більше місця для списку продуктів можна сховати фільтр:
  • Різні режими перегляду для списку продуктів:
  • Сортування:
  • Використовується посторінкова навігація для показу списку продуктів.
    Можна задати кількість рядків на сторінці. Якщо задано ”Auto” тоді кількість рядків буде підібрано відповідно до висоти сторінки.
  • Продукт що переглядався блимне після повернення з сторінки продукта. Якщо він був змінений то блимне двічі (див.).

Фільтр

Фільтр є важливою частиною сторінки продуктів. Він допомагає покупцям скоріше знайти те, що вони шукають.

Основні моменти:

  • Для кожного атрибута продукту створюється відповідна опція фільтра
  • Опції в користувацькому інтерфейсі згруповані в ієрархію з можливістю розгорнути / згорнути
  • Перемикання між основними / вибраними / усіма опціями
  • Можливість очистити обрану опцію, групу або весь фільтр

Опції фільтра (UI - користувацький інтерфейс):

  • Логічний - використовується для атрибутів з значеннями Так / Ні. UI - прапорець. Приклад: Сенсорний дисплей
  • Список - використовується для атрибутів зі значенням зі списку можливих значень. UI - набір прапорців. Приклад: Виробник
  • Діапазон - використовується для атрибутів з числовим значенням. Покупець може ввести значення для полів Від і / або До. Також є повзунок з 2 стрілками для значень Від і До. Приклад: Вага
  • Кількість - використовується для атрибутів зі значенням кількості. UI - поєднання Логічного і Діапазону. Приклад - кількість портів USB. Покупець може вибрати прапорець - щоб показати продукти, які мають принаймі один порт. Або розгорнути опцію для фільтрації кількості за допомогою інтерфейсу Діапазону
  • Список/Діапазон - використовується для атрибутів з числовими значеннями, які згруповані в діапазони. UI - поєднання Списку і Діапазону. Приклад - Ціна. Покупець може вибрати згрупований діапазон, використовуючи інтерфейс Списку. Або переключитися на використання інтерфейсу Діапазону

Сторінка продукту

Сторінка продукту надає покупцеві повну інформацію про продукт.

  • Вкладки на сторінці продукту:
  • Ви можете переходити по списку товарів, використовуючи ”попередній продукт / наступний продукт” кнопки на верхньому правому куті:

Фотографії продуктів

Фотографії є однією з найбільш важливих характеристик продукту.

  • Для зручності покупців існує багато способів доступу до фотографій:
  • Покупець може перегортати фотографії безпосередньо на плитці продукту, використовуючи стрілки наліво та направо:
  • Покупець може відкрити ”Галерею фотографій” безпосередньо на сторінці продуктів. Для цього натисніть на значок розміщений в лівому верхньому кутку плитки продукту:
  • Для швидкої навігації по ”Галереї фотографій” покупець може використовувати галерею іконок, яка розміщена або внизу або справа, щоб максимізувати простір для великої фотографії:
  • Щоб зменшити розмір передаваних даних, фотографії нарізані у 4-х масштабах: іконка, маленький, середній, великий, шириною 50px, 135px 235px, і 500px відповідно, висота - пропорційно
  • Індекс поточної фотографії зберігається при переході на ”Галерею фотографій” чи сторінку продукту

Порівняння продуктів

Порівняння продуктів допомагає покупцям вибрати найкращий продукт, перш ніж купити.

Основні моменти:

  • необмежена кількість продуктів в списку порівняння
  • зміна порядку продуктів - перемістити направо / наліво, видалити
  • візуальна підсвітка різних значень атрибутів
  • показати всі атрибути чи лише різні
  • показати основні, вибрані чи всі атрибути
  • атрибути відображаються в ієрархічному форматі з опціями ”розгорнути все” і ”згорнути все”
  • можливість прокрутки у вертикальному та горизонтальному напрямках, з фіксованими зонами для імен атрибутів і назв продуктів