Переверстка тикетбаса, часть 3., Поиск и покупка билета.

Привет, последняя часть переверстки тикетбасабай.

Для начала давайте попробуем заказать билет на старом сайте.
К примеру, нам нужно (за каким-то хреном) съездить в Фаниполь.

Первое, что я вижу — это окно выдачи результатов поиска.
Есть один вариант на маршрут Минск—Клецк. Верстка в стиле «Убеейте меняя»

Я ознакомлен.

Окно выбора места в автобусе. Главный косяк здесь — это то, что таблица
не отображает расположение мест в салоне автобуса. Такая возможность,
конечно, сомнительный бонус, но я себя чувствую спокойнее,
когда сразу знаю где в автобусе искать свое место.

Идем дальше.

Кстати, я обожаю визуализировать свои чувства при просмотре и оценке
качества чьей-нибудь верстки. Вот картинка для верхнего скрина.

Выпадающее меню «Тип билета» содержит гораздо больше опций,
чем можно себе представить. Все они влияют на конечную стоимость билета.
Учтем это на будущее.

Окно выбора типа билета и ввода ФИО и страны проживания.
Считаю необходимым сделать автоввод данных, раз на сайте есть
функция авторизации.

Окно «Оформление заказа». Последний шаг перед оплатой. Содержит инфу
по направлению следования, дате, времени, тип билета стоимости и места
в автобусе.

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

Гомер, помоги мне изобразить правильное чувство.

Ок, пойдет

Ну что же, последний шаг — выбор платежной системы.

После оплаты получил вот такой чек.

Мда. Половина инфы лишняя, строки слиплись,
набор прописными, черт подери сколько-ж можно-то?

Кстати, самые наблюдательные заметили, что дата стоит 2 июля.
Что тут скажешь — затянул я с переверсткой тикетбаса.

Пора герою вершить правосудие. Сейчас на ваших глазах, я создам
новый интерфейс для покупки билета, учтя все ошибки, допущенные
в текущей версии сайта.

Форма «Поиск билетов» была еще сделана в первой части.

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

Надо сказать, что самое неприятное в переверстке, да и вообще в создании интерфейса
в том, что, разбирая по утру, уже, вроде бы сделанную работу, начинаешь замечать,
что структура информации неверная, главное сделано мелко, а второстепенное
крупно, это окно не должно быть здесь, а здесь должно, или вот тут не достает такой-то
кнопки. Да и вообще нихера не понятно, что делать, если, к примеру, решил поменять
исходные данные. К примеру, уже подошел к оплате, но с тобой решил поехать
твой друг? А разницу комиссий платежных систем учел? А что если нужно вернуться назад
и поменять что-нибудь? Ничего не посыпется? Короче по итогу понимаешь, что нельзя
не думать рамками конкретной функции, а нужно видеть связи между всеми шагами
операции, и, делая форму выбора времени, уже заранее думать о последнем этапе
покупки. Все взаимосвязано. Вот что у меня в итоге получилось.

Крупно пару моментов

  1. «Хлебные крошки». Благодаря им видно кол-во предстоящих операций,
    а также можно будет вернуться на шаг-другой назад, если понадобится.
  1. Приятная мелочь — количество свободных мест.
  1. Не забыл про окно выбора типа билетов.

Нажали «Продолжить». Переходим к окну выбора места в автобусе.

Схему автобуса предварительно перерисовал

Обратите внимание на крошки. «Время отправления...» теперь подчеркнуто, т. е.
превращено в ссылку, нажав на которую можно будет вернуться в предыдущий раздел.

Вот вид сверху.

Последний этап. переходим к оплате. Тут при верстке я тоже залип на время,
постоянно переверстывая вариант за вариантом.

Вот троечка из процесса

Вот готовый вариант

Если кол-во пассажиров резко изменилось, то всегда можно его подкорректировать.

Имя и фамилия прописались автоматом, но не намертво — при желании
можно поменять пассажира на другого. И тут же поменять тип билета, чтобы
не возвращаться назад.

Если закрыть окно, так и не выполнив ни одну из операций (оплатить или отменить),
то в дальшнейшем вводить все заново не придется, т. к. вся инфа о неоплаченном
билете сохранится в разделе «Мои билеты», о чем свидетельствует цифра
1 в красном кружке.

Нажмем на «Мои билеты»

Видим наш заказ, ждущий, когда же его оплатят.

Уф, готово! Спасибо всем за ваше ожидание и внимание!
Впереди много нового, не переключайтесь!

Поделиться
Отправить
Запинить
Популярное