Постановка задачи
К ранее созданному алгоритму сравнения CSV файлов необходимо прикрутить пользовательский интерфейс. За основу необходимо брать интерфейсы сервиса https://smallpdf.com/.
Изображения в тексте документа даны для справки – описание в документе приоритетнее описания на изображениях.
Введение
Процесс сравнения CSV файлов сервисом разделен на несколько этапов:
1. Выбор типа операции сравнения;
2. Загрузка файлов;
3. Сравнение;
4. Выгрузка файлов.
Для того чтобы принудить пользователя к покупке платного доступа к системе, в процесс введены ограничения:
· Не более 2х сравнений в час;
· Отсутствие возможности повторно использовать файлы для сравнения без их повторной загрузки в сервис.
Ниже будут описаны пользовательские интерфейсы и их функционал
Выбор типа операции сравнения, авторизация, промо, регистрация
Страница выбора типа операции является главной и должна находиться по адресу https://comparecsv.com/, для копирования дизайна см. https://smallpdf.com/
Страница должна содержать:
1. Название сервиса с маленькой буквы – «comparecsv»
2. Описание сервиса – «The easiest way to compare CSV Files.»
3. Кнопка авторизации – «Log In», вызывающая всплывающее окно с формой авторизации
a. Либо логин пользователя (в случае авторизации) – всех символов слева от @ в email’е, использованном при регистрации
4. Промо кнопка – «Upgrade», ведущая к промо странице https://comparecsv.com/pricing (https://smallpdf.com/pricing)
a. Либо кнопка вызова меню пользователя (в случае авторизации) в виде круга с первой буквой логина внутри, цвет рандомный из списка цветов кнопок выбора типа сравнения
i. Элемент списка «Complete sign-up» со ссылкой на страницу выбора тарифа https://comparecsv.com/payment в случае, если платный доступ истек или не приобретен
· Либо некликабельный элемент списка «Pro (One day)», если приобретен однодневный доступ
· Либо некликабельный элемент списка «Pro (Year)», если приобретен годовой доступ
ii. Элемент списка «Log out», позволяющий пользователю выйти из учетной записи
5. Четыре кнопки выбора типа операции сравнения: «Complement», «Intersection», «Symmetric difference», «Union» (в качестве цвета заливки кнопок использовать цвета первых четырех кнопок https://smallpdf.com/, применять тени, переадресовывать на соответствующие страницы)
Пункты 1, 3, 4 и их подпункты далее «Элементы шапки».
Макеты страниц и всплывающих окон изображены ниже на Рисунках 1-8.
Рисунок 1. Макет страницы выбора типа сравнения
Рисунок 2. Макет всплывающего окна с формой авторизации 
Состав элементов формы авторизации следующий:
1. Заголовок формы – «Log In»
2. Кнопка закрытия окна
3. Кнопка авторизации через аккаунт гугл – «Login with Google»
4. Кнопка авторизации через аккаунт фэйсбук – «Login with Facebook»
5. Поле ввода имэйла с иконкой письма и текстом «Email»
6. Поле ввода пароля с иконкой замкА и текстом «Create a Password»
7. Кнопка входа – «Access»
8. Ссылка на всплывающее окно регистрации нового пользователя – «Sign Up»
9. Ссылка на всплывающее окно восстановления пароля – «Reset Password»
Рисунок 3. Макет всплывающего окна с формой восстановления пароля
Состав элементов формы восстановления пароля следующий:
1. Заголовок формы – «Password Change»
2. Кнопка закрытия окна
3. Текст-подсказка – «Please enter your email and the new password. We will send you an email to confirm the password change»
4. Поле ввода имэйла с иконкой письма и текстом «Email»
5. Поле ввода пароля с иконкой замкА и текстом «New Password»
6. Поле ввода пароля с иконкой замкА и текстом «Confirm new Password»
7. Кнопка отправки формы – «Send»
8. Ссылка закрытия окна – «Cancel»
Рисунок 4. Макет промо страницы (однодневный доступ)
Рисунок 5. Макет промо страницы (годовой доступ)
Состав элементов промо страницы следующий:
1. Шапка
a. Элементы шапки
b. Отсечка шапки
2. Заголовок страницы с маленькой буквы – «comparecsv Pro»
3. Подзаголовок страницы – «Pricing & Features»
4. Область выбора тарифа
a. Заголовок – «Pro»
b. Текст – «$»
c. Комбобокс со значениями:
i. «one day access» (по-умолчанию)
ii. «yearly access»
d. Текст «1.5» «if paid for» при значении комбобокса «one day access»
i. Либо текст «12» «annually for» при значении комбобокса «yearly access»
e. Кнопка регистрации – «Sign Up», вызывающая всплывающее окно с формой регистрации
5. Список, по высоте выравненный по высоте области выбора тарифа со строками:
a. Иконка галочки, выровненный с левого края текст «Unlimited Access», выровненный с правого края текст «Process as many files as you like.»
b. Иконка галочки, выровненный с левого края текст «Multiple File Operations», выровненный с правого края текст «Reuse of uploaded files within 24 hours saves time and energy. Amazing!»
c. Иконка галочки, выровненный с левого края текст «Priority Support», выровненный с правого края текст «You have our full support if something doesn’t work as expected.»
d. Иконка галочки, выровненный с левого края текст «Zero ads», выровненный с правого края текст «Enjoy the full beauty of comparecsv without annoying ads.»
Рисунок 6. Макет всплывающего окна с формой регистрации
Состав элементов формы регистрации следующий:
1. Заголовок формы – «Sign Up»
2. Кнопка закрытия окна
3. Поле ввода имэйла с иконкой письма и текстом «Email»
4. Поле ввода пароля с иконкой замкА и текстом «Create a Password»
5. Кнопка отправки формы – «Sign Up»
6. Ссылка закрытия окна – «Cancel»
Рисунок 7. Макет страницы выбора типа сравнения (пользователь авторизован)
Рисунок 8. Макет страницы выбора типа сравнения (пользователь авторизован) с активным меню пользователя
Для описанных выше пользовательских интерфейсов должен быть реализован функционал, представленный ниже в Таблице 1.
Таблица 1. Функционал страниц и всплывающих окон раздела «выбор типа операции сравнения, авторизация, промо, регистрация»
| № | Местонахождение функционала | Описание функционала | Способ тестирования |
| Шапка | Вызов окна с формой авторизации | Сравнение с оригиналом | |
| Шапка | Ссылка на промо | Сравнение с оригиналом | |
| Шапка | Отображение юзернэйма | Сравнение с оригиналом | |
| Шапка | Кнопка меню пользователя | Сравнение с оригиналом | |
| Шапка | Меню пользователя | Частичное сравнение с оригиналом | |
| Выбор типа сравнения | Кнопки выбора типа сравнения: ссылки на соответствующие страницы, тени, цвета | Стр. 2, п. 5 | |
| Окно с формой авторизации | Авторизация гугл | Сравнение с оригиналом | |
| Окно с формой авторизации | Авторизация фэйсбук | Сравнение с оригиналом | |
| Окно с формой авторизации | Email авторизация и обработка ошибок | Сравнение с оригиналом | |
| Окно с формой авторизации | Вызов окна с формой регистрации | Сравнение с оригиналом | |
| Окно с формой авторизации | Вызов окна с формой восстановления пароля | Сравнение с оригиналом | |
| Окно с формой смены пароля | Смена пароля и обработка ошибок | Сравнение с оригиналом | |
| Окно с формой смены пароля | Активация пароля по ссылке из имэйла, включая шаблон письма | Сравнение с оригиналом | |
| Промо страница | Переключение тарифа | Стр. 6, п. 4 | |
| Промо страница | Вызов окна с формой регистрации | Сравнение с оригиналом | |
| Окно с формой регистрации | Регистрация и обработка ошибок | Сравнение с оригиналом | |
| Окно с формой регистрации | Активация пользователя по ссылке из имэйла, включая шаблон письма | Сравнение с оригиналом |