2.5 Проектування інтерфейсу користувачів

Результати проектування інтерфейсів користувача приведені на рисунках 2.1-2.22. На рисунках 2.18-2.22 зображені перші ітераціі окремих сторінок.

На рисунку 2.1 зображена головна сторінка сайту. На сторінці знаходяться: меню, яке розташоване у верхній частині сторінки, з посиланнями до головної сторінки, сторінки контактної інформації, сторінки доставки та сторінки корзини (якщо сайтом користується гість або зареєстрований користувач) або сторінки заказів (якщо сайтом користується адміністратор), меню, яке розташоване у правій частині сторінки, з посиланнями до сторінок: каталогу товарів, перчаток, шоломів, боксерок, майок та трусів та бінтів, кап та бандажів, а також до сторінки додавання товару (якщо сайтом користується адміністратор), форма авторизації, в якій розміщуються поля логін та пароль, кнопка «ввійти» та посилання до сторінки реєстрації, форма пошуку інформації в Google, в якій розміщуються поле для введення інформації та кнопка «пошук», та централна частина сторінки, в якій буде знаходитися загальна інформація щодо сайту, яка в свою чергу буде братися з текстового файлу.

На рисунку 2.2 зображена сторінка контактної інформації. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.1, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: тут буде знаходитись контактна інформація, яка буде прописана в структурі HTML.

На рисунку 2.3 зображена сторінка доставки. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.1, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: тут буде знаходитись інформація про доставку, яка буде прописана в структурі HTML.

На рисунку 2.4 зображена сторінка корзини. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.1, але відмінність буде у формі авторизації та в інформації, яка знаходиться в центральній частині сторінки, а саме: у формі авторизації буде відображатись повідомлення з привітанням та з статусом, кнопка «вийти» та посилання до сторінки профілю, а у сторінки частині сайту буде знаходитись таблиця (якщо корзина не пуста) з товарами, які користувач додав до корзини, кнопка «очистити корзину», поле з загальною вартістю обраних товарів, посилання до каталогу товарів та кнопка «оформити заказ».

На рисунку 2.5 зображена сторінка корзини. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.6, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: тут буде відображатися таблиця (одна, декілька або зовсім жодної, в залежності від кількості заказів) з заказом, в якій буде знаходитись інформація про покупців та куплені товари, а також кнопка «видалити заказ».

На рисунку 2.6 зображена головна сторінка. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.1, але відмінність буде у формі авторизації, а саме: буде відображатись повідомлення з привітанням та з статусом, кнопка «вийти» та посилання до сторінки профілю.

На рисунку 2.6.1 зображена головна сторінка. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.1, але відмінність буде у формі авторизації, а саме: буде відображатись повідомлення про помилку, а нижче ті ж самі елементи, що и на сторінці 2.1.

На рисунку 2.7 зображена сторінка реєстрації. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.1, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: тут буде відображатися повідомлення, що всі поля обов’язкові для заповнення, і форма для вводу інформації в поля: логин, пароль, повторити пароль, прізвище, ім’я, по-батькові, електронна адреса та код, а також поле з випадковим 6-тизначним кодом, кнопка «cancel» і кнопка «ok».

На рисунку 2.7.1 зображена сторінка реєстрації. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.7, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: перед формою для заповнення інформації та повідомленням, що всі поля обов’язкові для заповнення, буде виводитись повідомлення про помилку в некоректно заповненому полі.

На рисунку 2.8 зображена сторінка каталогу товарів. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.1, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: тут буде відображатися таблиця з категоріями товарів, в якій будуть знаходитись посилання до сторінок цих категорій у вигляді зображень і найменувань категорій. Таблиця повинна відображатись таким чином: в кожному рядку по 3 комірки, в кожній комірці 1 категорія.

На рисунку 2.9 зображена сторінка перчаток (сторінки шоломів, боксерок, майок та трусів, бінтів, кап і бандажів мають такий самий вигляд). На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.1, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: тут буде відображатися таблиця з товарами категорії перчатки, в якій будуть знаходитись: посилання до сторінок з детальним описом цих товарів у вигляді зображень товарів і напису «детальніше», назва товарів і вартість товарів. Таблиця повинна відображатись таким чином: в кожному рядку по 3 комірки, в кожній комірці 1 товар. Якщо сайтом користується адміністратор, то разом з кожним товаром виводяться посилання до сторінки змінення інформації про товар та посилання на видалення товару.

На рисунку 2.10 зображена сторінка оформлення заказу. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.6, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: тут буде виводитись повідомлення, що треба ввести у поля, форма для заповнення інформації у поля: адреса доставки та контактний телефон, кнопки «відміна» і «далі».

На рисунку 2.11 зображена сторінка детального опису товару. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.1, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: тут буде виводитись вся можлива інформація щодо товару: зображення товару, назва, опис до товару, розмі, колір, вартість за одиницю товару, а також поле для вводу кількості товару, посилання до сторінки каталогу товарів та кнопка «додати товар до корзини».

На рисунку 2.12 зображена сторінка оформлення заказу. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.6, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: тут буде виводитися повідомлення про успішне оформлення заказу та номер заказу.

На рисунку 2.12.1 зображена сторінка оформлення заказу. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.10, але доповниться інформація, яка знаходиться в центральній частині сторінки, повідомленням про помилку у полі, яке було заповнено не коректно.

На рисунку 2.13 зображена сторінка зміни інформації про товар. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.6, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: буде виводитись повідомлення, після якого зображується форма з заповненими полями, в яких можна цю інформацію змінити, а також кнопки «відмінити» і «далі».

На рисунку 2.14 представлена сторінка додавання товару. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.13, але відмінність буде в тому, що не виводиться повідомлення, а також поля для вводу не заповнені (окрім поля зображення, в якому написан шаблон заповнення).

На рисунку 2.15 зображена сторінка перчаток після того як було нажате посилання «видалити» товара перчатки 1. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.9, але без того товару, який був видалений.

На рисунку 2.16 зображена сторінка профілю. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.6, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: тут буде виводитися повідомлення, що ви знаходитися у профілі, нижче буде відображена таблиця, яка міститиме в одному стовпчику інформацію про користувача, в іншому поля для змінення своїх даних, а нижче розташовані поля для вводу паролю, нового паролю і повторення нового паролю, а закінчується все кнопками «відмінити» і «обновити дані».

На рисунку 2.17 зображена сторінка кап, бінтів, бандажів. На сторінці знаходяться ті ж самі елементи, що і на сторінці 2.1, але відмінність буде в інформації, яка знаходиться в центральній частині сторінки, а саме: тут буде відображатись таблиця з трьома категоріями товарів: капи, бінти та бандажі. В таблиці будуть знаходитись посилання до сторінок цих категорій у вигляді зображень і найменувань категорій. Таблиця повинна відображатись таким чином: в кожному рядку по 3 комірки, в кожній комірці 1 категорія.