Функциональность формы заказа

Lancez-Vous. C'est gratuit
ou s'inscrire avec votre adresse e-mail
Функциональность формы заказа par Mind Map: Функциональность формы заказа

1. Логика

1.1. Формы

1.1.1. Для кого самокат

1.1.1.1. Имя

1.1.1.1.1. Поле обязательное

1.1.1.1.2. Поле может содержать только русские буквы, пробел, тире

1.1.1.1.3. Длина поля не менее 2 и не более 15 символов

1.1.1.1.4. При некорректном вводе поле подсвечивается красным. Текст ошибки «Введите корректное имя»

1.1.1.2. Фамилия

1.1.1.2.1. Поле обязательное

1.1.1.2.2. Поле может содержать только русские буквы

1.1.1.2.3. Длина поля не менее 2 и не более 15 символов

1.1.1.2.4. При некорректном вводе поле подсвечивается красным, появляется текст ошибки «Введите корректную фамилию».

1.1.1.3. Адрес

1.1.1.3.1. Поле обязательное

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

1.1.1.3.3. Длина поля не менее 5 и не более 50 символов

1.1.1.3.4. Пробелы в поле до и после адреса удаляются при снятии фокуса

1.1.1.3.5. При некорректном вводе поле подсвечивается красным, появляется текст ошибки «Введите корректный адрес».

1.1.1.4. Станция метро

1.1.1.4.1. Обязательное поле

1.1.1.4.2. Поле содержит выпадающий список с подсказкой *Станции метро Москвы*

1.1.1.5. Телефон

1.1.1.5.1. Поле обязательное

1.1.1.5.2. Поле может содержать только цифры и знак +

1.1.1.5.3. Длина поля не менее 10 и не более 12 символов

1.1.1.5.4. При некорректном вводе подсвечивается красным. Текст ошибки «Введите корректный телефон».

1.1.2. Про аренду

1.1.2.1. Дата доставки

1.1.2.1.1. Поле обязательное

1.1.2.1.2. Выпадающий календарь. Появляется при клике на поле ввода

1.1.2.1.3. Выбрать дату можно только с завтрашнего дня

1.1.2.1.4. На календаре открывается текущий месяц

1.1.2.1.5. Вводить значения вручную в поле нельзя

1.1.2.1.6. Когда пользователь выбирает дату, значение сразу подставляется в поле

1.1.2.1.7. Пользователь может выбрать другую дату, поле подсвечивается синим

1.1.2.2. Срок аренды

1.1.2.2.1. Поле обязательное

1.1.2.2.2. Раскрывающийся список

1.1.2.2.3. Можно выбрать от 1 до 7 суток

1.1.2.3. Цвет

1.1.2.3.1. Поле необязательное

1.1.2.3.2. Чек-бокс

1.1.2.3.3. Чёрный жемчуг, серая безысходность. Можно выбрать как один, так и оба варианта.

1.1.2.4. Комментарий

1.1.2.4.1. Поле необязательное

1.1.2.4.2. Только русские буквы, цифры, пробел, тире, точка, запятая

1.1.2.4.3. Длина поля не более 24 символов

1.2. Кнопки

1.2.1. Дальше

1.2.1.1. Переводит на форму "Про аренду"

1.2.2. Назад

1.2.2.1. Переводит на форму "Для кого самокат"

1.2.2.2. При переключении между страницами введённая информация сохраняется.

1.2.3. Заказать

1.2.3.1. Если все поля заполнены корректно, при клике по кнопке заказ будет оформлен.

1.2.3.2. При нажатии на кнопку появится всплывающее окно с текстом «Номер заказа NNNNN.

1.2.3.3. Если не все обязательные поля заполнены корректно, при нажатии на кнопку появится ошибка «Введите корректный <имя поля>».

1.3. Посмотреть статус

1.3.1. Кнопка ведёт на экран «Статус заказа»:в нём уже заполнено поле «Номер заказа».

2. Верстка

2.1. Соответствие макету

2.1.1. Поле "Имя"

2.1.1.1. Соответствуют по цвету, размеру, ширине и длине

2.1.1.2. Размещены правильно

2.1.1.3. Орфография и правописание правильны

2.1.2. Поле "Фамилия"

2.1.2.1. Соответствуют по цвету, размеру, ширине и длине

2.1.2.2. Размещены правильно

2.1.2.3. Орфография и правописание правильны

2.1.3. Поле "Адрес"

2.1.3.1. Соответствуют по цвету, размеру, ширине и длине

2.1.3.2. Размещены правильно

2.1.3.3. Орфография и правописание правильны

2.1.4. Выпадающий список "Станции метро"

2.1.4.1. Соответствуют по цвету, размеру, ширине и длине

2.1.4.2. Размещены правильно

2.1.4.3. Орфография и правописание правильны

2.1.4.4. Слева поля размещен маркер соответствующего цвета

2.1.5. Поле "Телефон"

2.1.5.1. Соответствуют по цвету, размеру, ширине и длине

2.1.5.2. Размещены правильно

2.1.5.3. Орфография и правописание правильны

2.1.6. Выпадающий календарь "Дата доставки"

2.1.6.1. Соответствуют по цвету, размеру, ширине и длине

2.1.6.2. Размещены правильно

2.1.6.3. Орфография и правописание правильны

2.1.7. Раскрывающийся список "Срок аренды"

2.1.7.1. Соответствуют по цвету, размеру, ширине и длине

2.1.7.2. Размещены правильно

2.1.7.3. Орфография и правописание правильны

2.1.8. Чек-бокс "Цвет"

2.1.8.1. Соответствуют по цвету, размеру, ширине и длине

2.1.8.2. Размещены правильно

2.1.8.3. Орфография и правописание правильны

2.1.9. Текстовое поле "Комментарий"

2.1.9.1. Соответствуют по цвету, размеру, ширине и длине

2.1.9.2. Размещены правильно

2.1.9.3. Орфография и правописание правильны

2.2. Работа в разных окружениях

2.2.1. Корректная работа страниц при разных разрешениях экрана

2.3. Тестирование UI

2.3.1. Чек-бокс

2.3.1.1. Чекбокс и описание должны быть на одном уровне

2.3.1.2. Группа чекбоксов выровнена по одному краю

2.3.1.3. Все чекбоксы выборки — одинаковые по размеру и цвету

2.3.2. Поле ввода данных

2.3.2.1. Название поля соответствует его логике

2.3.2.2. Поля выровнены согласно требованиям

2.3.2.3. Введённые данные не касаются границ поля

2.3.3. Текстовое поле

2.3.3.1. Название поля соответствует его логике

2.3.3.2. Поля нужно выровнять согласно требованиям

2.3.3.3. Введённые данные не касаются границ поля

2.3.4. Выпадающий список

2.3.4.1. Ширина списка соответствует размеру поля ввода

2.3.4.2. Если в списке есть значение из большого количества символов, оно разбивается на несколько строк

2.3.4.3. Значения отсортированы в определённом порядке

2.3.4.4. Все выпадающие списки веб-приложения — одинаковые по размеру и цвету

2.3.5. Раскрывающийся список

2.3.5.1. Все раскрывающиеся списки веб-приложения — одинаковые по размеру и цвету

2.3.5.2. Значения отсортированы в определённом порядке

2.3.6. Кнопка

2.3.6.1. Название кнопки должно соответствовать её логическому замыслу

2.3.6.2. При нажатии и/или наведении вид кнопки должен меняться

2.3.7. Надпись

2.3.7.1. Не должно быть ошибок орфографии или пунктуации

2.3.7.2. Если надпись поясняет элемент выбора данных, она должна быть выровнена по одному краю

2.3.8. Плейсхолдер

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

2.3.8.2. Все плейсхолдеры веб-приложения должны выглядеть одинаково