Блог Сергея Копылова

Посадочные талоны Аэрофлота

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

Получилось то, что на картинке выше. Талон хорош вот этим:

  • Разделена информация про рейс вообще и про то, что делать конкретному пассажиру в аэропорту. Есть отдельный столбец про то, кто пассажир, куда идти, ко скольки и куда сесть на борту.
  • Отрывной талон содержит всю информацию, которая пригодится через год после поездки в домашнем архиве.
  • Вся важная для сотрудников информация сгруппирована по краям или написана большим кеглем, найти легко.
  • Много места для названия мест вылета и прилёта, имени пассажира.
  • Талон складывается пополам и на правой половине есть всё, что нужно пассажиру.
Бланк был вот такой.

Расскажу о процессе.

Так как наша главная задача не потерять информацию, возьмём любой конкретный настоящий талон и выпишем, что на нём есть:

На существующем талоне информация выстроена по сетке, и чуть-чуть по смыслу, но очевидных блоков не получается. Попробуем объединить. Очевидно, что есть какая-то информация о рейсе, независимо от того, летит ли на нём кто-нибудь или нет и та информация, которая нужна в аэропорту. Ещё есть какая-то техническая, оставим на потом.

Обратим внимание на то, что выделено большим кеглем, вероятно, это то, что вправду больше нужно кому-то.

Попробуем как-нибудь это разместить.

Отрывной талон оставим на будущее, займёмся главной половиной.

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

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

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

Продолжим и расставим акценты:

Разделим цветами то, что напечатано на бланке и термопечать. Мы печатаем на стандартном бланке, а значит ограничены возможностями термопринтеров.

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

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

А что если обвести рейс и разместить пункт вылета и прилёта друг под другом? Заодно можем логотип вписать
в рамку, это же тоже про рейс.

Подписи делаем на двух языках, надо за этим следить. Но вообще хорошо, если подписей будет как можно меньше, а просто формат данных будет объяснять, что мы видим.
На всех языках мира написать мы всё равно не сможем.

А английский пусть будет первым, как некий универсальный язык.

Итак:

Идея с рамкой вроде сработала. Вообще, конечно, хорошо, когда элементов как можно меньше, но здесь рамка хорошо объединяет. На прошлом пакете я ещё имя клиента забыл, пожалуй, это не к рейсу, а к тому, что происходит
в аэропорту.

Ну что, расставим всё получше, нарисуем самолётик и иконку окна у места и возьмёмся за отрывной талон:

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

Ещё это круто тем, что если ты собираешь талончики, чтобы там в фотоальбом путешествий прилепить, то не забудешь какого числа и на чём летел.

Заодно круто получилось, что ещё одна рамочка такая же, как большая, появляется своё лицо. Теперь пора браться за детали.

Нагуглим настоящий талон Аэрофлота и дополним список информацией. Оказывается, там много технических данных, использование половины из списка неясно. Размещу в блоке дополнительной информации. Заодно, не буду здесь переводить: сотрудники в курсе, что это, а для остальных пусть будет небольшой загадкой о том, как работает аэропорт.

Отдельная проблема с классом бронирования. Это вроде и персоналу надо (потому, что нормальные люди не знают, что значит М), но и тебе важно, куда ты там сможешь зайти подождать. Короче, пока размещу в углу, потом спрошу.

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

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

Ну теперь совсем по мелочам:

У Аэрофлота, оказывается штрихкод меньше, чем вся ширина, наверно, это с оборудованием связано. Уменьшим.

Самолётик на отрывном нарисуем.

Проверим зону печати, создаётся впечатление, что сверху принтеры не печатают на какой-то полосе, слева тоже, а вот снизу и справа ограничений нет.

Добавим ISS Agent на правую часть, оно зачем-то у Аэрофлота дублируется.

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

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

На следующий день:

Вычитал в интернете, что думают другие ребята. Много народу предлагает всё отменить, поменять формат бумаги, полноцветную печать и т. д. Ну у нас это не пройдёт, задание — сделать на стандартном бланке.

Но несколько хороших идей есть: написать покрупнее ФИО, ограничиться несколькими размерами шрифта (и красиво, и реализовать будет проще), убрать гейт и время посадки с отрывного и так далее.

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

Чтобы двигаться дальше, нужно узнать технические ограничения печати: можно ли печатать разными шрифтами, разной толщиной, на разных уровнях, может там сетка жёсткая. Но это не так и важно, тут есть что куда подвинуть, если такие проблемы появятся. И не забыть разузнать про класс бронирования и нужен ли ISS Agent на отрывном талоне. Иконки ещё нужно будет перерисовать, а не из интернета брать.

Процесс работы над схемой троллейбусов Петрозаводска

О том, что получилось: Схема троллейбусов Петрозаводска.

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

Она висела в троллейбусах и на остановках, но на ней не смогли решить даже базовые вопросы: подписать все остановки (пришлось делать легенду), сделать надписи достаточно крупными и объяснить, как же устроено движение в центре. Впрочем, свою главную задачу в виде рекламы 2ГИС она выполняла.

В моём детстве в троллейбусах висели примерно такие схемы:

Они куда более информативные и неплохо привязанные к географии, рассматривать их было интересно. Но вокруг линий было довольно много свободного места, а общий стиль схемы сложно было назвать красивым. Впрочем свободное место тоже выполняло свою функцию: на нём размещались рекламные блоки.

Я начал свою работу с чтения статей в интернете и знакомством с самыми разными транспортными схемами. Некоторые я даже расечататал и повесил на стену над диваном.

И вот в последние недели я взялся за реализацию.

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

Я попробовал повернуть её так, как она располагалась на старых схемах, однако в таком формате заполнить пустые поля было бы проблематично, поэтому я вернул всё назад.

После этого, я упростил линий с учётом своего представления о том, где прямая, а где поворот, когда я еду на троллейбусе. То есть, я просто представил, как мне кажется, есть ли поворот там или там. Оказалось, что если поворот существенно меньше 90 градусов, то он таким и не воспринимается.

Потом я расположил линии по сетке: под углами в 90 и 45 градусов. Чем меньше разных вариаций углов на схеме, тем проще она воспринимается. Оказалось, что это не очень сложно, многие углы уже были похожими.

Пришла очередь подписей: они будут занимать больше всего пространства, поэтому стоит сначала разместить их и только потом отлисовывать сами маршруты троллейбусов. Кроме того, я понимал, что самая сложная ситуация с маршрутами в центре: они сходятся из районов и пересекаются на небольшом пяточке, на котором много остановок, и нужно догадаться, на какой остановке можно пересесть и на какой маршрут. Я выделил серым область, которую должен был занимать центр, и стал уменьшать расстояния между остановками на окраинах. Кроме того, это помогло мне вписать схему в формат, чтобы неиспользуемого места стало меньше.

Пришло время чертить линии. Я выбрал какие-то разные цвета, построил линии и расставил остановки чёрными чёрточками. Пока нет смысла делать их более красивыми важно прикинуть в целом. Центр я закрыл плашечкой, чтобы не думать о тех сложностях, которые меня ждут :)

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

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

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

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

И тут мне пришла в голову мысль о том, что не нужно пытаться нарисовать все маршруты у вокзала: можно просто увеличить масштаб ещё сильнее и нарисовать саму дорожную развязку. Я оставил это на потом.

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

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

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

Пришло время очередной приборки. Часть линий просто не помещалась в формат. Пеньки остановок были не везде. Ещё нужно было перепроверить, что остановки расставлены правильно, а остановки с односторонним движением пометить стрелочками. И, конечно, ещё немного перерисовать центр.

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

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

По отзывам стало известно, что какие-то остановки я перепутал, какие-то автобусы давно не ходят, а где-то есть просто помарки. Исправим это, добавим маршруты автобусов в самом городе между районами, изменим форму реки. Осталось перерисовать центр, чтобы изгибы были менее ломанными, а круг у вокзала превратился в ту сложную фигуру, какой является в жизни. Ну и добавить линию в Кижи :)

Пора выпускать.

Схема троллейбусов Петрозаводска

Я сделал схему троллейбусов Петрозаводска:

У неё есть несколько плюсов, по сравнению с существующими схемами:

  • надписи достаточно большие, чтобы было видно на карманной формате A5, и на форматах A4 и A3 в троллейбусах;
  • впервые решена проблема с пониманием того, как идут троллейбусы в районе вокзала;
  • отмечены автобусы в районы, в которые троллейбусы не ходят.

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

Таким образом, расстояния не соблюдаются, однако схема не ведёт себя, как схема метро: все повороты, которые воспринимаются как повороты в поездке сохранены. Старожилы представляют, к примеру, поездку по Первомайскому проспекту (слева вверху схемы), как поедку по прямой, несмотря на то, что географически, там немало небольших изменений направления. Кроме того, это первая схема, где север примерно там, где и на самом деле.

Поэтому схема нужна в первую очередь тем, кто не очень хорошо представляет, как на общественном транспорте можно добраться до нужного района или остановки и может составить первое впечатление об этом. Тем, кто живёт в городе десятки лет схема и не нужна: они хорошо представляют её в голове, маршрутов-то не так и много.

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

Процесс создания.

Образование и среда

Я вывел формулу того, чем должно заниматься государство в первую очередь. Был бы я политиком, я бы писал это на каждом билборде и в каждом буклете. Итак:

Образование и среда.

Выноски

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

Сотни тысяч элементов на странице

Меня, бывает, спрашивают о том, как что-то реализовать, когда элементов очень много.

Например:

На странице отображены 100 000 товаров и у каждого есть кнопки действий. Как указать обработчик событий для этих кнопок так, чтобы не множить функции? Постраничного листания нет, подгрузки при прокрутке тоже.

или

На странице отображаются 5 000 товаров с партиями, остатками, необходимо изменять эти данные. Что бы вы стали делать, если бы страница стала тормозить? Как бы вы искали источник проблемы?

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

В этом нет никакой необходимости. Никакой человек не может управлять данными, когда их тысячи. Нашему мозгу уже и 30 штук — довольно много. Правильное решение: сделать так, чтобы на фронтенде не отображались, не хранились, и не обрабатывались тысячи элементов. Тогда и не нужно будет решать эти надуманные задачи.

Секрет работы в маленьких группах

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

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

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

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

  • Опросить мнение у всех участников
  • Придумать лучшее решение, учитывающее это мнение
  • Рассказать о нём, услышать возражения, но только один раз
  • Претворить решение в жизнь
  • Нести ответсвенность за последствия решения и менять его при необходимости

Здесь не нужна какая-то формальность в пунктах и последовательности, нужно просто примерно понимать процесс.

А у всех других ребят остаётся право сменить этого человека на другого, если что-то раз за разом не нравится.

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

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

P.S. На всякий случай отмечу, что я много раз был как и тем, кто принимает решения, так и тем, к мнению которого просто прислушиваются.

Хорошо поставленная задача

Разберём случай, когда до дизайнера или разработчика доходит какая-то задача, сформированная цепочкой менеджеров и аналитиков по чаяниям заказчика на конкретном примере.

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

Обычно до разработчика доходит какая-то такая задача:

«Необходимо создать страницу с отображением всего списка свидетельств, с возможностью изменения набора столбцов и фильтров. Изначальные наборы столбцов такие-то, наборы фильтров такие-то. Обеспечить разный уровень доступа для разных пользователей, возможность создания и подписания новых документов, выгрузки в EXCEL, XML, CSV, PDF, Word сохранения истории изменений. Ктопку такую-то разместить здесь, такую-то здесь, вот эту сделать зелёной. Набор полей документа формируется с учётом ФЗ № такой-то такой-то, ...»

И так ещё 10 страниц. Это совершенно ужасная постановка задачи, которая одновременно подразумевает, что дизайнер или разработчик тупой, как дрова, и может действовать только по алгоритму. И с другой стороны, она перекладывает на разработчика самые ресурорсоёмкие операции, как, например, поиск набора полей в каком-нибудь приложении к федеральному закону.

Разработчику говорят, что делать, но не говорят, почему. Нет ответов на следующие вопросы:

  • Почему мы вообще это делаем? Какую проблему заказчика мы решаем?
  • Зачем нужна возможность изменения набора столбцов и фильтров?
  • Что значит разный уровень доступа? Кто вообще будет этим пользоваться и в каком случае?
  • Каким образом должна быть реализована подпись? Физическим ключом в USB? Паролем? Электронной подписью?
  • Что значит «отображение всего списка свидетельств»? Сколько их всего? А если несколько миллионов? Вы уверены, что кому-то нужно сразу видеть миллион свидетельств за несколько лет?
  • Выгрузка миллионов записей из БД с внешними ключами и данными из других таблиц и форматированием в каком-то формате займёт очень много времени и сильно нагрузит базу. Существует ли реальный сценарий использования этой функции?

Ну и так далее. Зато есть ненужные подробности о расположении кнопок и перечисления «как бы» форматов файлов выгрузки. Конечно, здесь очевидно, что менеджеры не смогли узнать реальную проблему заказчика и как решить именно её имеющимися средствами.

Неопытный разрабочик просто возьмёт это в реализацию не думая и начнёт программировать шаг за шагом. Задача окажется трудновыполнимой даже за несколько месяцев (что его тоже не побеспокоит), всё будет тормозить потому, что для такого общего решения недостаточно просто добавить индексы в БД, чтобы всё работало быстро, и в конце концов, когда задачу покажут заказчику, у него полезут глаза на лоб и он удивится, как такую неповоротливую махину можно было делать несколько месяцев, когда она всё равно не работает, потому, что оттестировать все варианты поведения и отображения такой махины невозможно.

Если же пообщаться с заказчиком, слушая не только предложенное решение, а ещё его проблемы, то всё станет на свои места. Окажется, что с этим списком должны работать такие-то врачи и работники загса. Что права на изменение и добавление такие-то. Что любые поля нужно отображать, чтобы было видно, отфильтровалось или нет (конечно, здесь нужно придумать другое решение), что вывод всех документов сразу не нужен, а нужен в разрезе по медицинской организации.

Такую задачу уже можно сделать за неделю, и, даже если какие-то из требований были описаны неверно, у нас есть ещё много времени, чтобы это исправить.

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

Турник и площадка во дворе

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

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

Короче, вот такая штука, как у Лебедева, только с одним турником.

А ещё в подъезде нужно между 4 и 5 этажом турник на стене повесить на зимнее время.

P.S. За картинку спасибо Рите.

Ранее Ctrl + ↓