Ctrl + ↑ Пазней

Обновление антисхемы

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

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

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

Первый подход. Анти-антисхема

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

Чтобы не рисовать целый город, придумал такой ход: нарисую для каждой станции схему вида «дойти отсюда за 3 минуты», потом соберу в одно целое. Использую такой масштаб, чтобы поместить перечень станций с «картой» на одну ось времени.

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

Максимизация полезности того, что есть

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

Улицы

Уважаемые комментаторы критиковали и список улиц. Мол, неясно, почему именно эти, кому нужен переулок Фабрициуса, и т. д. Считаю, нужно объяснить: сразу планировал отобразить как раз улицы, напрямую примыкающие к станциям. Был уверен, что в статьях Википедии о метро, откуда брал список, перечисляются именно они.

Партизанскую рисовал с натуры.


Да, занявшись выходами, обнаружил, что всё не так. Не хватает Жасминовой, Жилуновича, Смоленской и ещё нескольких, а Пинская и Домашевская к метро не примыкают. Проблема есть. Но переулок Фабрициуса всё-таки в начальную концепцию вписывается и поэтому, простите, останется на антисхеме :)

Ссылка на полный pdf

Смерть моих иллюзий

Ещё год назад хотел рассказать, чем закончилось дело с посещением БАЭС. Но только теперь боль утихла, и способен без слёз вспомнить, как это было. Предысторию читайте в постах о расписание Антона Иокова, мини-теории инфостендов и ошибке дизайнера.

См. также пост в ЖЖ Саши Чеботарёва, как он сходил к руководству метро.

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

Так выглядел информационный плакат на тот момент

Подход БАЭС такой: берут ватман, делят на прямоугольники. Как в газете, выделяют места для «рубрик». Потом для этих прямоугольников-рубрик придумывают наполнение. В центре внимания создателя — не информация, а «пятнашки» из блоков. Если, например, слишком мало данных, — увеличивают декоративные элементы.

Почему-то подумали, что нужна новая «рубрика» — график движения транспорта. Расписание Антона захотели потому, что оно всегда вписывается в прямоугольник. И ответ на наш новый вариант инфоплаката был примерно такой: ребята, просто найдите место для расписания Антона в нашем прекрасном текущем инфоплакате, а о вашем забудьте.

Новый черновой вариант инфоплаката, который рассматривать не стали

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

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

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

Форма расписания подсказала и концепцию «вписывания» в инфоплакат: отказываемся от прямоугольников-рубрик и вместо «пятнашек» пускаем всё одним потоком.

Газетный принцип наполнения остаётся, а информации помещается больше.



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

Плакат в .pdf

Но нас ждало разочарование. Оказалось, у руководителя БАЭС уже нет времени разговаривать, он поручил нас помощнику. Тот посмотрел, послушал и обещал сам связаться с нами для дальнейших обсуждений. Естественно, никто не связывался. Сами раз пять пытались безрезультатно напроситься на новую встречу, пока наконец не поняли, что тогда нас просто вежливо послали подальше.

Итого

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

О тестовых заданиях

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

Задание кажется несложным: «…разработать форму-конфигуратор для интернет-магазина барабанных установок. Результат — джипег 800 × 415 пикселей» (главное ограничение — маленькая площадь). Ок, попробуем.

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



Теперь думаю над каждым блоком отдельно: 1) в верхний блок добавлю предустановки для неискушённого пользователя; 2) раз у барабанов повторяются одни и те же параметры, вынесу их за скобки и сделаю таблицу; 3) блок добавления барабана пусть будет саджестом на подобие поиска на Онлайнере; 4) а в блок «Купить» добавлю общее звучание установки и цену. Получается вот так:

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

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

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

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

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

Исправлю эти моменты: 1) вношу прямо в заголовок переключение режимов «своя/профессиональная/среднего уровня/бюджетная»; 2) показываю кликабельность всех редактируемых элементов таблицы; 3) названия барабанов и тарелок становятся ссылками на страницы с подробным описанием (в задании ничего на этот счёт не сказано, значит предположим, такие страницы могут существовать).

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

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

UPD: варианты решения задачи на сайте Студии.

Редизайн железнодорожного билета

На той неделе приснился Джесси Гарретт. Этот странный сон напомнил, что я ещё не предлагал вариант оформления железнодорожного билета. Давайте исправим это.

Фотография с сайта в-минске.рф

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

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

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

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

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

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

Да, не забыли потенциальную группу имени пассажира и номера паспорта. Помним и линию сгиба. В подарок проводнику сделаем отрывной корешок и подправим типографику. Готово.



Спросите, при чём же тут Джесси Гарретт? Да особо ни при чём. Просто я именно через знакомство с ним узнал этот простой, но действенный принцип редизайна: 1) выписываем всё подряд, 2) группируем, 3) расставляем приоритеты внутри групп и между ними. Постоянно руководствуюсь. Рекомендую.

UPD: Оказывается, существуют ещё варианты редизайна похожих билетов. Интересно:

lookatme.ru/mag/live/experience-experiments/203403-redesign-s02-e02?medium=website

artgorbunov.ru/bb/soviet/20131028/

Редизайн электронного железнодорожного билета

Инфографика как проверка гипотезы

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

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

Пример. В 2013 году делал тестовое задание для Людвига Быстроновского, в котором нужно было проиллюстрировать, почему на планете сменяются времена года. Предположение было такое — если взять разные уровни (что происходит в космосе, на земле и на поверхности земли), и последовательно «надеть» их на ось времени, сможем сравнить эти процессы, картинка сложится.

Второй пример. 2015 год. Инициативная группа решила установить в Минске лебедевский «Знак, рядом с которым все фотографируются». В поддержку компании был нужен рассказ об уже установленных знаках. Так как актуальным был ещё и вопрос выбора цвета будущего знака, решил совместить познавательное с практичным. Не просто рассказать о знаках, а посмотреть на них в разрезе цветов. Я был почти уверен, что существует корреляция между цветами знака и, например, численностью населения города, в котором он установлен. Или между цветом и степенью удалённости от центра. Или ещё какая-то.

Рассказ на Бехансе, как я рисовал инфографику про знаки (англ.)

Гипотеза не подтвердилась. Никакой явной зависимости между цветами знаков и их расположением, историей или судьбой, нет. Что становится понятно за секунду, когда смотришь на инфографику.

Что касается тестового для Людвига, там вообще смешно получилось. Работа попала в «Тепло», я поехал в Москву на собеседование. Там Людвиг решил обсудить её со мной. Когда он узнал про «разные уровни, надетые на ось времени», реакция была такая: «П*#здец, ах, оно ещё всё и на одной оси. Ну, тогда это вообще клиника.» (Цитата почти дословная :)

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

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

UPD2: Кирилл Беляев сформулировал всё это намного лаконичнее.

Ctrl + ↓ Раней