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

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

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

Кстати, пользуясь случаем, даю ссылки на все свои доклады:

• Интерфейс — зло. Главное знание о работоспособном дизайне.
• Летающий асфальтоукладчик. Главное знание о ведении проектов.
• Шаблонизируй это. Как обойтись без менеджеров.
• Как сделать свой проект (так и называется).
• Как сделать схему метро (так и называется).

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

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

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

Это всё удивительные усилия, направленные на ухудшение результата.

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

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

Некоторые автолюбители ставят сигнализацию на свои корыта, чтобы всем вокруг трепать нервы. Когда такой персонаж жмёт на кнопочку на пультике, машина квакает один раз или два. Один квак означает, что машина закрылась, а два — что открылась. Это очень легко запомнить, потому что в слове close один слог, а в слове open — два. Собственно, поэтому так и квакает.

Благодаря этому знанию, я могу делать более полноценные выводы о происходящем вокруг. Когда за окном я слышу «ква», я понимаю: какой-то урод припёрся. А когда я слышу «ква-ква», я понимаю: какой-то урод сваливает. Если бы я не знал про open и close, то я бы просто думал: вот урод.

Потому что нормальные машины открываются и закрываются не издавая звуков. И когда мимо них произжает мусоровоз тоже не орут. А в идеальных машинах даже двигатель звуков не издаёт.

Пока готовлюсь к курсу, разгребаю всякие фотозалежи.

Вот навигация в амстердамской библиотеке.

Входим, перед нами главный эскалатор:

Задираем голову, сразу видим, что на каком этаже:

Атриумы — крутая вещь, сразу всё видно без лишних стрелок и схем.

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

Когда приезжаешь на эскалаторе, этаж встречает так:

В аналогичном стиле подписано всё:

Залы подписаны на стенах:

На колоннах:

Лифт-холл:

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

Справочник по стеллажам этажа:

Вид откуда-то куда-то:

Персональные ящички на минус-первом этаже:

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

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

Хрен с ним с названием. Но без слёз взглянуть на их интерфейсы нельзя. Они как бы говорят тебе: «чё пришёл?». Ладно хоть спустя век сайт научился сразу же показывать карту — раньше к ней нужно было проходить через цепочку необъяснимых кликов. А вот айфонное приложение всё ещё издевается над пользователем с особым цинизмом. Внутри там всё устроено по принципу «поставим любую кнопку куда попало, а иерархию экранов сделаем по заветам Эшера». Но самое главное, что оно периодически зажигает красный кружок, который означает «я больше не хочу работать, пока ты не скачаешь 100 мегабайт моей базы, не притрагиваясь к телефону». То есть мало им кретинизма с принудительным обновлением всей базы в тот момент, когда тебе как раз нужно найти шиномонтажку, так они ещё и не могут это сделать в фоновом режиме: скачивание останавливается, если я переключаюсь в другое приложение или просто выключаю экран. Сиди, смотри на прогрессбар и жди. Всё равно Яндекс не знает, где твоя шиномонтажка.

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

Несколько дней назад я написал про неё в английском блоге, теперь пишу по-русски.

Когда мы с Шуриком делали Ангстрем, наш мегаконвертер для Айфона (поставьте, если ещё не), мы придумали технологию Ångström Style System, которая ловко сокращается до слова ÅSS.

ÅSS — это движок стилей для Какао-приложений с синхронизация через Дропбокс. Стили обновляются, если потрясти телефон (шейк-ту-рефреш называется). Это суперспособ разделить код и дизайн. Благодаря нему я попробовал кучу разных цветовых схем, шрифтов, отступов, а главное, покрутил по-разному анимации. При этом не приходилось докучать Шурика просьбами «а давай попробуем ещё вот так» по двадцать восемь раз в день.

Курсор

Любимая заморочка в Ангстреме — анимация текстового курсора:

Это гифка, лучше смотреть в настоящем приложении (бесплатно).

Как я уже писал, я хотел длинный курсор, чтобы он торчал вверх и вниз за пределы текстовой строки. Но я ещё хотел, чтобы он приятно растягивался и отпружинивался, вместо того, чтобы просто мигать. Что это значит технически — да хрен его знает, надо крутить. Невозможно просто так взять и написать, насколько что должно тянуться и за какое время. Хотелось поподбирать все параметры.

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

В итоге после нескольких часов подбора цифирок получилось вот так:

"cursor": {
  "showTime": 0.2,
  "hideTime": 0.2,

  "color": "@colors.textNumberColor",

  "period12": 0.4,
  "timingType12": "linear",

  "period21": 0.2,
  "timingType21": "easeOut",

  "height1": 48.0,
  "width1": 2.0,
  "delay1": 0.3,
  "alpha1": 1.0,

  "height2": 78.0,
  "width2": 1.0,
  "delay2": 0.1,
  "alpha2": 0.33
},

Это примерно 3% всей «таблицы стилей» Ангстрема.

Синхронизация через Дропбокс и шейк-ту-рефреш

Это две главных радости.

Вообще вынести переменные, связанные со стилем, в отдельный файл — само по себе хорошая идея. Уже так я мог бы играть с разными параметрами и пересобирать программу, не вникая в код Шурика. Как я понимаю, так работает ДБ5 Брента Симмонса.

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

1. Открываю Ангстрем на телефоне и иду в экран, который хочу подкрутить.
2. Открываю файл стилей из Дропбокса Сублайм-текстом на Маке.
3. Меняю параметры, которые хочу подкрутить и сохраняю файл.
4. Трясу телефоном и сразу вижу, как всё выглядит с новыми параметрами.

То есть прямо запущенное приложение тюнится вживую. Это очень круто.

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

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

Вы пришли на сайт Аэрофлота зарегистрироваться на рейс, и вам показывают салон. Вы летите без компании. Какое место выберете?

Здесь есть конкретное место, которое я взял не задумываясь: это самое правое место в пятнадцатом ряду. Почему именно это? Я всегда беру место у окна: это даёт возможность закрыть шторку и уснуть, при этом никто тебя не разбудит, когда надумает идти в туалет. А в пятнадцатом ряду не только свободно место у окна, но ещё и занято у прохода.

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

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

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

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

Когда я был в Лондоне в ноябре, на станции «Черинг-кросс» прошла выставка обложек карманной версии схемы метро:

Вариант с мишенью — мой любимый, у меня такая даже лежит где-то в коробке со всякими схемами, буклетами и билетами.

После длинного перерыва мы возобновляем наш курс о навигации в общественных местах. Он пройдёт 19, 20, 21 и 23 апреля у нас в Коворкафе, записывайтесь и приходите.

Курс придумал и проводил Артём Горбунов, в подготовке материалов участвовали Таня Мисютина Бибикова и Никита Иванов, а теперь его буду вести я. Это совершенно офигительный курс, и я жду его с нетерпением. Последние три месяца интенсивно готовлюсь, дополнил его кучей нового.

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

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

Есть много чисто практических аспектов: как избежать столпотворения в узком месте в метро и наоборот, как сделать, чтобы люди не забывали заглядывать в магазин, расположенный в тупике торгового центра. Какие способы кодирования предпочтительнее в каких случаях и почему, на какой высоте и как размещать указатали, чем руководствоваться при выборе пиктограмм, написании текста, создании голосовых объявлений. Показываем на примерах, как плохой информационный дизайн способен сбить человека с толку, рассказываем о приёмах улучшения дизайна. Говорим о разном физическом воплощении навигации, от бумажек А4 с подписью «Администрация» до электронных навигационных устройств.

Есть целый мир знаний только про стрелки в навигации, у нас их виду и размещению посвящена отдельная тема.

Отдельное место в моём сердце занимает тема про транспортные схемы.

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

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

Навигация — моя любимая область. Записывайтесь и приходите!

Я тут дописал трек. Чокнутый пситранс с техно-влиянием. 148 ударов в минуту:

Значительная часть материала сделана давно, но собрать всё в логичную историю и отточить пиксели дошли руки только сейчас. Сл. 2:09 барабаны; 3:09 такой бас и 3:22 вот такой; 3:40 ой; 5:17 щекотно; 5:32 шутка; 5:36 тарелки; 5:59 механика; 6:17 напоследок.

Ранее выпущенная музыка — в музыкальном разделе сайта.