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

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

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

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

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

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

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

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

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

На колоннах:

Лифт-холл:

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

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

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

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

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

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

Хрен с ним с названием. Но без слёз взглянуть на их интерфейсы нельзя. Они как бы говорят тебе: «чё пришёл?». Ладно хоть спустя век сайт научился сразу же показывать карту — раньше к ней нужно было проходить через цепочку необъяснимых кликов. А вот айфонное приложение всё ещё издевается над пользователем с особым цинизмом. Внутри там всё устроено по принципу «поставим любую кнопку куда попало, а иерархию экранов сделаем по заветам Эшера». Но самое главное, что оно периодически зажигает красный кружок, который означает «я больше не хочу работать, пока ты не скачаешь 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 напоследок.

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

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

У некоторых людей с этим проблема. Им на помощь спешит знак:

См. ещё у Андрея Шитова правило, помогающее отличать лево от права.

С какого-то перепугу в одной из прошивок Айфона появилась опция «засрать статусбар цифрами». В настройке это называется Show Percentage, но сути это не меняет. Смысл в том, что рядом с индикатором батарейки в ПВУ появляется число, показывающее заряженность в процентах. (В Эпле иногда такое бывает, что они вдруг думают, что делают Андроид, а не Айфон, и вхреначивают какую-то нибудь совершенно невменяемую опцию.)

И есть загадочные люди, которые включают это.

Информативность — это хорошо, мы про это на курсе говорим всё время, всем дизайнерам объясняем, рассматриваем способы её повышения в интерфейсе. Но здесь-то не информативность никакая, а настоящий информационный мусор. Нумерик буллшит (введём такой термин).

Заряженность батарейки — условная вещь. Вот вроде много было, а вот на солнце чуток в интернет повтыкал — уже мало осталось. Точнее изобразить батарейку, чем её уже изображает иконочка, невозможно. Какая разница между 67% и 72%? Да никакой нет разницы! Спустился в метро на двадцать минут — поиски 3-джи тебе больше съели.

Зато сразу начинаешь думать, блин, вот пока только на 98% зарядился телефон, надо дождаться 100% перед тем, как вытыкать. Или смотришь после длинного разговора, на сколько там уменьшилось. Или читаешь книжку в очереди и краем глаза поглядываешь, что быстрее меняется — номера страниц или количество процентов.

Дались вам эти цифры, погоду на Марсе и то полезнее смотреть, чем эту туфту.

Максим Ильяхов написал про кнут и пряник:

Один один и тот же критический комментарий может как деморализовать, так и вдохновить.

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

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

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