31 июля — 6 авг ← → 14—20 авг

Восстанавливаю архив своего канала в телеграме. Сегодня — неделя 7—13 августа.

Понедельник, 7 августа

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

Иногда такую непоследовательность оправдывают красотой, но тут ведь ещё и уродство. Может, вы скажете, зато билеты хорошо продаются? Не исключено, но это признак того, что руководитель — слабый. Сильный руководитель зарабатывает ещё больше, делая хорошее:
http://ilyabirman.ru/meanwhile/all/strength/

Пишу очередной совет про транспортные схемы (не ближайший). Делюсь знанием прямо из Гугль-дока:

А, вот иллюстрированный пост про изгибы за пределами станции:
http://ilyabirman.ru/meanwhile/all/black-and-white-diagrams/

Вторник, 8 августа

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

Совет:
http://bureau.ru/bb/soviet/20170808/

Сливаю вам ещё немного текста, который не войдёт в книгу «Пользовательский интерфейс» из-за жёстких редакционных стандартов:

Среда, 9 августа

Наверное, вы сто раз видели, но вот эволюция логотипа Старбакса:

Кайф в том, как постепенно оставалось самое главное. И становилось всё красивее.

А Серёжа Стеблина в своём канале про Иллюстратор @ne_znal_ai делится ссылкой на музей логотипов холодильников:
http://mloh.ru/

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

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

Четверг, 10 августа

В одном из вступительных заданий в Школу дизайнеров — такой айфон:

Зачем столько линий — загадка, но я хочу сказать три вещи (наверняка собьюсь со счёта, пока говорю). Во-первых, если вы делаете два скруглённых контура один в другом, то радиусы скругления должны быть разными, иначе на скруглениях возникают утолщения. Щас покажу.

Вот контур с двадцатипиксельными скруглениями:

Если из него вырезать меньший, но с такими же скруглениями, получается такой же эффект, как на айфоне выше:

Скругления надо уменьшить. Раз контур скукожился на 10 пикселей, то и скругления надо сделать (20−10=10) десятипиксельными, тогда центр скругления остаётся в той же точке •, что и у внешнего контура:

Во-вторых, скруглять радиусом — это вообще левак. Годится только, когда скругления надо сделать на 2-3 пикселя. См. давнюю заметку про это:
http://ilyabirman.ru/meanwhile/all/metro-line-curves/

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

Это картинка из рассказа Саши Караваева о том, как мы делали схему Челябинских трамваев (тут вторая часть, где как раз о скруглениях в начале; вообще-то читайте целиком):
http://aakaravaev.ru/works/navigation/cheltram-map/process-2/

Наконец, в-третьих, непонятно, зачем рисовать айфон, когда можно взять нарисованный красивый. По этому поводу ещё была такая заметка:
http://ilyabirman.ru/meanwhile/all/no-fake-ui/

Пятница, 11 августа

Случайная красота:

Клёвая идея для вёрстки — использовать место под минускульной единичкой:

Ещё амперсанд пожирнее, чтобы работал как такая точка. Это в Москве.

Суббота, 12 августа

Эту фотку я запостил в Инстаграм. Тут написано «Декоре». Удивительно, как много людей зачем-то берутся писать на дореволюционном русском, не разобравшись в разнице между ером (твёрдым знаком) и ятем (который читался е или и). С ятем на конце слово декоре — это декор в предложном падеже (говорилъ о декорѣ).

Всё о яте:
http://ilyabirman.ru/meanwhile/all/yat/

Воскресенье, 13 августа

Помимо того, что непонятно кому звонить, если что, забавно ещё и то, что машинист — это в т. ч. train operator.

Дайджест подготовил Вениамин Векк.

У Варламова про директора канцелярии дома Романовых (понятия не имею):

Он назвал действия Поклонской «смешными и нелепыми» и заявил, что она пребывает в «печальном состоянии души и ума»

И ещё:

За неё надо молиться, чтобы господь ей послал разумение.

Красиво говорит!

4—10 дек ← → 17—24 дек

Вот как выглядела прошедшая неделя в моём канале в телеграме:

Понедельник, 11 декабря

«Инк» такой:

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

Сверху-то видно, что просто набрали в Ворде и напечатали, без изысков. А снизу попытались сделать «дизайн», при этом поставили всё максимально криво.

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

Чтобы продавать кофе подороже, нужна либо совсем безупречная типографика (но и: офигенный интерьер, дорогая красивая посуда и всё остальное), либо всё максимально рукотворное. Вот небольшая кофейня в Амстердаме. Меню выглядит так, что, кажется, можно доверять:

А сейчас я сижу в любимом «Кафеликсе», тут довольно похожая эстетика:

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

Страница о проекте с кучей фоток:
http://chrisfox.com.au/interloop/

Вторник, 12 декабря

Новый стандарт (пока предварительный) включает невероятный дорожный знак рубля:

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

А трамваи стали рисовать с неправильным пантографом (надо его делать в виде ромба для безошибочной узнаваемости, несмотря на то, что это вид спереди):

Знак «Тут жесть, езжайте в другое место»:

Это очень красивая карта национального парка «Йеллоустоун»:

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

Студентка Ирина Волкова обратила моё внимание на то, что это ошибка — никакие это не изолинии. Я спросил, почему же не изолинии. Ну, то есть, может и нет, но откуда она знает?

Ирина объясняет: «Форма линий не похожа на природный рельеф. Разве что на антропогенный. Линии точно повторяют контур береговой линии и островов, а на стыке образуют странные остроугольные формы. Подводный рельеф не может полностью повторять надводные формы. Я не нашла карты с настоящими изолиниями на Йеллоустонское озеро, но есть несколько цифровых моделей рельефа (ЦМР). По ним можно представить, как идут линии, соединяющие одну глубину. Я сделала примерный рисунок изолиний на небольшом куске по ЦМР»

Картинка:

Чуть позже Ирина нашла настоящую карту этого озера с изолиниями:

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

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

Среда, 13 декабря

Читательница и студентка Школы стажёров Ирина спрашивает: «Есть название и два чекбокса. По правилу они должны располагаться в столбик, но подиси чекбоксов — это располочение полочек слева и справа. Когда они стоят в ряд, мне как человеку, который постоянно путает право и лево быстрее сориентироваться когда они стоят в соответствии своим подписям — в ряд. Что делать, как правильно?»

Сначала о том, что за правило. Вот кусок совета о теории близости в интерфейсе:

Совет целиком:
http://bureau.ru/bb/soviet/20160503/

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

Пример, когда чекбосы в строку взрывают мозг:

Хрен поймёшь, где какой день недели.

Но в нашем-то случае, где речь о пространственном расположении, конечно же нужно их поставить по сторонам :-) Это про естественное соответствие Нормана.

Это картинка про то, как мучаются люди из-за того, что между расположением ручек и конфорок нет естественного соответствия.

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

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

Четверг, 14 декабря

На днях я писал про новый предварительный стандарт дорожных знаков. Наверное многие из вас подумали: «Бирман ваще уже, перепосчивает сюда новости с Тёминого ЖЖ. Ясен пень, мы там уже сами прочитали».

На самом деле я несколько отстал от РССа и Тёмин пост про это прочитал только сегодня. Тот факт, что Студия имеет к этому отношение, объясняет и знак рубля (кайф), и Директ в качестве рекомендуемого шрифта (левак). (Я ещё подумал, когда листал стандарт: какого хрена тут делает Директ?)

Директ — замечательный шрифт сам по себе. Вот картинка из Тёминого ЖЖ, простите уж:

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

Я использовал его на своём знаке о парковке на газонах:

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

Воскресенье, 17 декабря

Я нашёл уникальный музейный экспонат. В 2009-м году я отправлял Опере письмо с критикой её интерфейса, сделанного жопой вместо рук:

Дайджест подготовил Иван Ветошкин.

Читатель книги «Пользовательский интерфейс» Валентин Немцев написал мне интересное письмо про модальность и редактор «Вим». С разрешения Валентина привожу его целиком:

Илья, привет!

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

Я пользуюсь исключительно vim (современная версия vi) для написания кода и хочу рассказать, почему я предпочитаю его всем другим редакторам кода, несмотря на модальность, надеюсь, это будет интересно.

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

Теперь про модальность. Продвинутые пользователи vim очень редко совершают модальные ошибки. Дело в том, что режим вставки не является режимом в строгом смысле, согласно определению Раскина. Этот режим включают только на время ввода текста, а так как за раз вводится небольшое количество текста, переход в режим вставки, ввод текста и выход из него становятся одним жестом. Это все работает, если ты выучил vim, умеешь печатать вслепую, ну или достаточно уверенно, иначе ввод текста не становится частью жеста и все разваливается.

На самом деле в vim больше десятка режимов, они включаются по-разному, но все они отключаются возвратом в нормальный режим, часть автоматически, когда vim распознает конец команды по смыслу, часть — нажатием esc. Вставка текста ощущается как ввод чего-то в Spotlight, где ты не забываешь нажать enter после окончания ввода. Индикация режимов существует, но нет нужды ей пользоваться. В случае, если в ответ на команду происходит что-то не то (например, из-за опечатки), я нажимаю esc, чтобы вернуть редактор к известному состоянию, после чего отменяю последнюю правку, если она случилась и пробую еще раз.

Вот пример относительно частой операции: я хочу заменить строку в кавычках (включая кавычки), внутри которых сейчас стоит курсор, на имя переменной var. Для этого я набираю ca"var, что можно читать как change text around quotes to «var». Vim переходит в режим вставки после нажатия ", я нажимаю esc, чтобы вернуться в нормальный режим. Описанная выше команда (включая возврат в нормальный режим) вводится в один жест, я не задумываюсь над последовательностью кнопок, не смотрю на индикацию текущего режима и никогда не забываю нажать esc в конце.

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

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

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

Последний на сегодня интересный факт про vim — его первую версию, vi, создали 40 лет назад для терминалов, у которых появился монитор вместо принтера (отсюда название, visual), а на клавиатуре не было стрелок. Современные версии vim до сих пор используют текстовый программный интерфейс, сделанный для терминалов тех лет. Несмотря на то, что этот интерфейс с тех пор получил поддержку мыши и другие обновления, по своей сути этот интерфейс ближе к телеграфу, чем к современным графическим интерфейсам. MacOS и встроенный в нее Terminal с запущенным vim, работающий на современном макбуке, до сих пор во многом эмулирует клавиатуру и принтер, подключенные по телефонному проводу к мейнфрейму с UNIX.

Спасибо за отличную книгу!

Это всё мне напомнило мои рассуждения про интерфейс пионеровских «Сидиджеев». В заметке я писал, что их интерфейс модален и рассказывал про разные его режимы. Но позже я понял, что на самом деле модальности там нет, потому что в каждый момент времени режим является непосредственным предметом моего внимания, а для модальности необходимо, чтобы режим я не осознавал. Я про такое ещё писал в заметке про прокрутку.

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

В воскресенье, 24 декабря проведу Живые советы в Тель-Авиве, в книжном магазине «Бабель». Начало в 19:30. Адрес — ул. Йона Ханави, 46. Это три минуты пешком от перекрёстка Алленби, Шеинкин и Кинг-Джордж:

Приходите с интересными вопросами, несите макеты сайтов и интерфейса.

Событие в Фейсбуке

10-й Айфон — кайф.

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

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

Бывает, проснёшься утром и читаешь что-нибудь, и тут срабатывает будильник. Теперь телефон видит, что ты на него и так смотришь, поэтому играет звук будильника совсем тихо. Это, конечно, можно было сделать сто лет назад до всякого фейс-айди — телефон и так много знает о том, что я делаю, но всё же. Так к 2027-му году будильник научится не срабатывать, когда я уже проснулся и ушёл в душ. У меня на руке часы и я двигаюсь, не ори, я давно проснулся!

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

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

Есть странность. Когда покупаешь что-то в Апсторе, подтвердить покупку надо двойным нажатие боковой кнопки. Что? Раньше это было по тач-айди. Понятно, что недостаточно того, что ты смотришь в телефон — нужно какое-то активное действие. Но почему такое странное действие? Можно было сделать снизу кнопку «Подтвердить», при нажатии на которую срабатывал бы фейс-айди.

Я ещё не попробовал Эпл-пей с ним (потому что в Израиле никто не знает про современные технологии) но уже понял, что все мои переживания были напрасными. Сейчас в Москве настрою.

Отсутствие кнопки хоум — не проблема совсем. Писали, что нужно два-три дня, чтобы привыкнуть. Я привык просто сразу; не помню, чтобы я хоть раз пытался просто нажать в нижнюю часть телефона. Переключение между программами стало в пять раз проще и быстрее, особенно я тащусь от возможность просто провести слева направо по хоум-индикатору, чтобы перелистнуть в предыдущее приложение.

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

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

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

После 6S-плюс экран не кажется маленьким, а оттого, что сам телефон стал меньше, сплошная радость.

Не уверен, что это появилось именно в десятке, но теперь есть стереозвук. Когда Эплы это анонсировали, я думал, что это фигня: ну какой стереозвук при таком размере? Оказалось, что если держать телефон горизонтально на обычном телефонном расстоянии, звук действительно стерео. Не говоря уж о том, что он намного чище, громче и басистее, чем был на старом телефоне.

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

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

В выходные сходил в клуб «Блок», где играл Лен Факи. Уже не первый раз у меня такое, когда тот, на кого шёл, не особо порадовал, а вот неизвестный мне диджей Yogg перед ним сыграл отлично. Звучали даже два знакомых трека: Atom™: Stromlinien и Koen Hoets: Nostalgia. Весь сет у него был в таком спокойно-медитативном духе, но, оказывается, это отлично работает в клубе.

Про сам «Блок».

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

Всё это очень мило, такого я ещё нигде не встречал. Самая главная радость для меня — то, что не курят на танцполе. Там всё равно нашлось несколько курильщиков, но они не напрягали, потому что вентиляция в клубе тоже прекрасная. В общем, вполне можно ходить.

Нате вам клипец из Тель-Авива: