Переверстка тикетбаса, часть 1

Sat, 24 Nov 2018 18:24:32 +0300

Привет, друзья! Я вам тут подготовил новый мегапост, первую часть захватывающей
эпопеи о том, как я переверстывал сайт www.ticketbus.by. Почему его?
Как он относится к Минсктрансу? Очень просто — ссылка на него стоит как раз
на сайте Минсктранса в разделе международных перевозок.

Итак, давайте взглянем на экспонат.

Сложно описать словами чувства, которые я испытал, впервые зайдя на тикетбасбай.
Гомер, помогай.

Да, спасибо, примерно так и было.

Это самый настоящий, махровый образец того, как делать нельзя. Эту фразу можно
было даже не писать, вы же сами все видели!

Давайте возьмем себя в руки и препарируем наш экспонат.
Определимся с целями и задачами.

Начнем сверху, потом медлеенно, медленноо, пойдем вниз.

1) Область регистрации.

Верстка тут даже не валялась. Дизайнер случайно пролил тут несколько
фраз, линеек и кнопок, которые растеклись как им угодно. Кстати по части
UX тут отдельная песня, обхохочешься просто, но это во второй части.
Спойлер, ага.

2) Спукаемся ниже.

Тут у нас плашки с названиями разделов. За какием х... в одной горнице
столько разномастных страниц? Чем отличается «РАСПИСАНИЕ» и «Расписание
с автовокзалов»? Оплаченные заказы это уже не мои заказы? Кстати, не удивился,
найдя тут раздел «Пошаговая инструкция» — какому еще сайту понадобится
руководство по использованию? Правильно, тикетбасу. Здесь надо будет хорошенько
поработать лопатой и разгрести эту путаницу, попутно удаляя все ненужное нахрен.

3) О, наконец-то нашли поля ввода города отправления и прибытия.

А рядом валяются костыли в виде «На этой странице Вы можете ознакомиться...» или
«Если вы не помните точного названия остановочного пунтка...» и бла-бла-бла.
Есть тут все же один приятный момент — инфа о количестве проданных билетов.
Фактоиды всегда хорошо.

4) Раздел «Новости».

Ответьте мне, за каким хером мне нужно знать что 22.08.2016 г. открылась регистрация
через соцсети? Или что с 22 августа покупка осуществляется только через выбор
места? Это пользователь и так поймет, как только начнет пользоваться сайтом.
Но, например, ссылка на мобильное приложение или новость о покупке билетов
на рейс Гомель-Москва-Теплый стан важны, но не должны стоять в куче, в отдельном загоне.

5) И вот мы в подвале.

Тут куча всякого хлама — строительный мусор, лыжи, старая картошка, банки, велик,
ковер и два сломанных стула. Много паутины и пахнет мочой. Если серьезно, то весь
этот текстовый мусор нужно разгрести — что-то удалить, что-то отправить
в соответствующие разделы. И конечно же не делать, сука, такие длинные строки.

Ну что же, помоем руки и приступим к работе.

Начнем с логотипчика. Вот такое точно не катит.

Мудрить долго не буду, а просто скрещу билет и название системы.

Вот что получилось

Едем дальше. Прикидываю разделы, рисую эскизы, считаю сетку.

Размер 1280, поля по 40 px, т. е. рабочая область 1200 px, колонок будет 16.

Считаю межколонник — 16 px

Рисую сетку. Кстати вот это очень клевый ресурс для этих целей.

Та-да.

Ок, вот что у меня в итоге получилось.
Давайте разберемся подробнее.

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

2) Форма для ввода поисковой инфы. На этой же плашке ссылки на расписание автовокзалов
РБ и Правила возврата билетов. Раньше одна ссылка была в меню разделов сайта, другая
в новостях, хотя должны быть поближе к глазам пользователя.

3) Слева несколько по-настоящему нужных разделов из плиточного меню (помните
вверху такие синие плашки были? ну так вот). Раздел «Новости» трансформировался
в раздел «Актуально». Количество инфы снизилось, что-то я выбросил совсем, что-то
будет появляться в процессе поиска и покупки билетов. Фактоид стал заметнее и обрел
новый облик, в соответствии с фирменным стилем.

4) Внизу у нас способы оплаты и контакты.

Вот и все.. Хотя нет. Не все. Давайте заглянем правде в глаза — мой вариант
полное говно. Конструкция говно, форма ввода инфы слабая, раздел «Актуально»
вообще никому не упал — зачем мне знать про какой-то рейс Гомель-Москва-Теплый
стан, если я зашел за билетами до Фаниполя? Факу, договору оферты и другим
отщепенцам место только в подвале.

Выношу вердикт:

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

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

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