Большая переверстка Минсктранса, часть 4-1. Раздел «Расписание»

Привет всем! Сегодня мы займемся разделом «Расписание»

Вот как он выглядит в меню старого сайта. Как видите кроме четырех видов маршрутов
(городских, междугородних, международных и экскурсионных) тут еще какие-то правила,
порядки и национальный аэропорт «Минск».

Главная проблема этого меню в том, что, к примеру, из подраздела «Городские маршруты»
прямиком в «Международные маршруты» не попадешь одним кликом, как минимум нужно
делать два:

1) кнопка браузера «Назад»,
2) выбор раздела «Международные маршруты»

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

Перейдя по ссылке «Городские маршруты» мы видим следующее.

Давайте по-порядку:

1) Вкладка «Минск» (кто и зачем ее так назвал?), в которой три ссылочки «Автобусы»,
«Троллейбусы» и «Трамваи». Нажал на ссылку — получил длиннющий список всех номеров
и соответствующие им названия маршрутов.

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

Маленький столбец из кнопок «i» тоже напрягает. А че там под этой кнопкой? А вот че:

Ну нафиг!

2) Вкладка «Поиск остановки». Поиск остановки по названию, а также маршрутов,
которые через нее проходят. 3) Вкладка «Поиск маршрута» — поиск маршрута,
чего непонятного-то?

Ну что ж, займемся вкладкой «Минск». Нажимаем на первый автобусный маршрут №1.
Смотрим.

Слева все остановки маршрута в одном направлении и все остановки в обратном.
Жмешь на любую строку и узнаешь в правом окне во сколько минут в течение
конкретного часа автобус №1 придет на нажатую остановку. Вроде все понятно, так?
Но уже видно, что направления «туда-обратно» можно выполнить
в виде сегментированных кнопок — нажал на нужную, получил список.
А не нажал, то и не увидел.

До кучи — линеейчки, плашечки и столбик iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
(у меня в строку получилось :)

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

Да и еще. В левом верхнем углу чекбокс — нажал узнал, какие номера проходят, через
выбранную остановку. Это гуд, что можно эту инфу включать выключать — так меньше шума.

Буду показывать проделанную работу задом наперед. Потому что так удобнее.
И да, к черту интригу. Пойдем от общего к частному.

Вуа-ля.

Подберемся поближе

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

Переход между видами транспорта теперь у нас в виде кнопок.

Список маршрутов набран в две колонки — теперь правая часть экрана не пустует и можно
по-меньше скролить вниз. Никаких ячеек с рабочими и нерабочими днями недели,
никаких столбцов из кнопок «i». Нужная вся эта инфа? Нажми на нужный маршрут и смотри!

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

Итак, жмякаем на автобусный маршрут №1 «ДС-Веснянка — Вокзал».
Смотрим для начала на общую картину.

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

Разные направления в разных сегментированных кнопках, как я и говорил выше. Два в одном —
это ж какая экономия экрана! Самые наблюдательные заметили ссылочку на карту маршрута.
Тут ей самое место, а не в выпадающем окне по-нажатию кнопки «i».

Маленькое и полезное нововведение:

Прежде чем идти дальше, подытожим что мы успели сделать

1) Переход между разделами маршрутов теперь в один клик.

2) Список маршрутов в разделе городского транспорта теперь в две колонки.

3) Убрали мусор в виде дней недели и кнопок «i».

4) Сократили место под список остановок в два раза, благодаря сегментированным кнопкам.

5) Дополнительная, срочная и оперативная инфа набрана по-человечески и находится
прямо перед глазами.

6) Ну там.., все стало чище, приятнее и понятнее.

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

Меленько. Там же четыре числа всего, можно и крупнее!

Непонятно (например как вводить время отправления —
разделять пробелом? точкой? двоеточием? или неважно?).

Шумно. Зачем вываливать все время сразу?
Экономить пространство будем? А?

Мы тут медленно подбирамеся к поиску местоположения и маршрутов на карте.
Нужны иконочки. Я решил, что иконка начала пути — это «А», иконка конца пути —
это «Б». Ну как в школе, понимаете? «Из пункта А в пункт Б...»

Открываю иллюстратор и малюю. Готово!

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

А вот я решил найти остановку Тимирязева.

Блииже!

Теперь сразу видно какой транспорт на ней останавливается (все номера кликабельны и ведут
в раздел с расписанием маршрута). Также можно найти остановочку на карте (нажав на пин).
А можно обозначить ее на карте как начало или конец пути (иконки «А» и «Б»).
Немного терпения, раздел «Поиск маршрута» впереди.

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

ААА! Мы близки к завершению! Последняя вкладка «Поиск маршрута».
Смотрим на проблемы.

Берт охренел.

Не, шучу. Все не так плохо. Разобраться можно. Но долго, некрасиво, тяжело...

Начну с рисования секундомера. Мы же тут маршрут прокладывать собираемся.

Та-даам.

Теперь разбираемся, что все это значит. Значит у нас две опции — узнать прямой рейс
и рейс с пересадками.

Прямой рейс по традиции показывает нам ближайшее и заданное время.

Немного деталек.

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

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

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

Ну и конечно же ссылочка на карту.

Готово! В следующем посте я покажу как я переделал
разделы международных, междугородних и экскурсионных маршрутов.

До новых встреч!

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