Мне написал Дмитрий Капранов, который недавно рекламировал здесь свой блог:
Илья, добрый день!
Прошла неделя с тех пор, как был размещен мой рекламный пост, хочу поделиться впечатлениями.
Я доволен результатами. За неделю по ссылкам в заметке перешло около 900 пользователей. Таким образом, каждый переход обошелся мне в 8,8 рублей. Аудитория отзывчивая — комментирует, подписывается через РССки и заходит повторно.
Хочу поблагодарить за такую возможность. Думаю, что в будущем можно будет сделать ещё что-нибудь, например, рекламу в другом формате.
Спасибо!
Кстати о рекламе в другом формате. Давным давно можно стать спонсором рубрики «Что почитать на выходных». Точно так же можно стать спонсором другой рубрики, например «Аудио по четвергам» или «Видео по вторникам».
В новом году появится возможность размещать рекламу в моём канале в телеграме, где подписчиков как раз стало больше пяти тысяч. Как и во всех других случаях, реклама всегда будет помечена как реклама.
Обратите внимание, что прислав отзыв, Дмитрий бесплатно получил дополнительное упоминание. Если вы размещали у меня рекламу и ещё не присылали отзыв, присылайте, я буду рад его опубликовать. Я опубликую его независимо от того, как вы оцениваете результат — мне важно показать будущим рекламодателям полную картину для принятия решения.
Восстанавливаю архив своего канала в телеграме. Сегодня — неделя 7—13 августа.
Понедельник, 7 августа
Раздватрип последовательно делает свой интерфейс хуже и хуже. Последнее время творится полный ад. Вот что из нарисованного является кнопкой, что полем, а что — просто прямоугольником?
Иногда такую непоследовательность оправдывают красотой, но тут ведь ещё и уродство. Может, вы скажете, зато билеты хорошо продаются? Не исключено, но это признак того, что руководитель — слабый. Сильный руководитель зарабатывает ещё больше, делая хорошее: http://ilyabirman.ru/meanwhile/all/strength/
Пишу очередной совет про транспортные схемы (не ближайший). Делюсь знанием прямо из Гугль-дока:
Сергей спрашивает: «Мне необходимо сверстать медицинские формы в соответствии со стандартом, но предназначенные не для ручного заполнения, а для печати с уже заполненными полями. Какой шрифт мне выбрать и рисовать ли линию под полями?»
Сливаю вам ещё немного текста, который не войдёт в книгу «Пользовательский интерфейс» из-за жёстких редакционных стандартов:
Среда, 9 августа
Наверное, вы сто раз видели, но вот эволюция логотипа Старбакса:
Кайф в том, как постепенно оставалось самое главное. И становилось всё красивее.
А Серёжа Стеблина в своём канале про Иллюстратор @ne_znal_ai делится ссылкой на музей логотипов холодильников: http://mloh.ru/
Помимо самих логотипов, тут очень неожиданно сделан сам сайт. Кто бы из вас догадался, что так можно? Я бы точно никогда такого не придумал.
А это картина Теодора Жерико «Офицер конных егерей императорской гвардии, идущий в атаку». Я не искусствовед, поэтому не смогу ничего внятного про неё рассказать, но она просто очень крутая — композиция, цвет, детали, вот это всё. Попробуйте посмотреть на неё пару минут внимательно.
Четверг, 10 августа
В одном из вступительных заданий в Школу дизайнеров — такой айфон:
Зачем столько линий — загадка, но я хочу сказать три вещи (наверняка собьюсь со счёта, пока говорю). Во-первых, если вы делаете два скруглённых контура один в другом, то радиусы скругления должны быть разными, иначе на скруглениях возникают утолщения. Щас покажу.
Вот контур с двадцатипиксельными скруглениями:
Если из него вырезать меньший, но с такими же скруглениями, получается такой же эффект, как на айфоне выше:
Скругления надо уменьшить. Раз контур скукожился на 10 пикселей, то и скругления надо сделать (20−10=10) десятипиксельными, тогда центр скругления остаётся в той же точке •, что и у внешнего контура:
Когда скругления сделаны по-честному, а не радиусом, подружить внешнее и внутеннее, чтобы толщина была одинаковой, ещё чуть сложнее. А когда у вас транспортная схема с пучками линий — ещё сложнее.
Клёвая идея для вёрстки — использовать место под минускульной единичкой:
Ещё амперсанд пожирнее, чтобы работал как такая точка. Это в Москве.
Суббота, 12 августа
Эту фотку я запостил в Инстаграм. Тут написано «Декоре». Удивительно, как много людей зачем-то берутся писать на дореволюционном русском, не разобравшись в разнице между ером (твёрдым знаком) и ятем (который читался е или и). С ятем на конце слово декоре — это декор в предложном падеже (говорилъ о декорѣ).
Мысль хорошая, но интересно, что всё, что я могу тут видеть, это адок снизу. Сразу чувствуется, что кофе там дадут не лучше, чем сверху.
Сверху-то видно, что просто набрали в Ворде и напечатали, без изысков. А снизу попытались сделать «дизайн», при этом поставили всё максимально криво.
Если руки настолько из жопы, то лучше всё-таки довериться Ворду. Хотя бы будет ровно и не больно глазам.
Чтобы продавать кофе подороже, нужна либо совсем безупречная типографика (но и: офигенный интерьер, дорогая красивая посуда и всё остальное), либо всё максимально рукотворное. Вот небольшая кофейня в Амстердаме. Меню выглядит так, что, кажется, можно доверять:
А сейчас я сижу в любимом «Кафеликсе», тут довольно похожая эстетика:
Художник Крис Фокс сделал инсталляцию на одной из станций сиднейского метро: переплёл деревянные лестницы отслуживших эскалаторов. Получилась крутота:
Новый стандарт (пока предварительный) включает невероятный дорожный знак рубля:
Есть ещё такой удивительный знак, не похожий вообще ни на какие другие знаки и запрещающий то, что запрещено и без него:
А трамваи стали рисовать с неправильным пантографом (надо его делать в виде ромба для безошибочной узнаваемости, несмотря на то, что это вид спереди):
Знак «Тут жесть, езжайте в другое место»:
Это очень красивая карта национального парка «Йеллоустоун»:
В школах бюро есть одно место, где я показываю её фрагмент и называю штриховку водоёмов «изолиниями глубины».
Студентка Ирина Волкова обратила моё внимание на то, что это ошибка — никакие это не изолинии. Я спросил, почему же не изолинии. Ну, то есть, может и нет, но откуда она знает?
Ирина объясняет: «Форма линий не похожа на природный рельеф. Разве что на антропогенный. Линии точно повторяют контур береговой линии и островов, а на стыке образуют странные остроугольные формы. Подводный рельеф не может полностью повторять надводные формы. Я не нашла карты с настоящими изолиниями на Йеллоустонское озеро, но есть несколько цифровых моделей рельефа (ЦМР). По ним можно представить, как идут линии, соединяющие одну глубину. Я сделала примерный рисунок изолиний на небольшом куске по ЦМР»
Картинка:
Чуть позже Ирина нашла настоящую карту этого озера с изолиниями:
Конечно, после такого объяснения я сразу почувствовал себя тупым — ясно, что на моей карте не изолинии. Благодаря Ирине теперь не только я, но и вы сможете мгновенно отличать настоящие изолинии от просто красивой штриховки воды.
Отдельно замечу, что хватило бы самой мысли про неестественные изломы контуров, но Ирина пошла дальше и показала настоящие изолинии именно этого озера — это круто.
Среда, 13 декабря
Читательница и студентка Школы стажёров Ирина спрашивает: «Есть название и два чекбокса. По правилу они должны располагаться в столбик, но подиси чекбоксов — это располочение полочек слева и справа. Когда они стоят в ряд, мне как человеку, который постоянно путает право и лево быстрее сориентироваться когда они стоят в соответствии своим подписям — в ряд. Что делать, как правильно?»
Сначала о том, что за правило. Вот кусок совета о теории близости в интерфейсе:
Надо сказать, про чекбоксы я такого вроде бы нигде не говорил, хотя, конечно, в большинстве случаев они тоже лучше смотрятся вертикальным столбиком. Но в радиокнопках это намного важнее именно из-за того, что это не независимые элементы, а группа взаимоисключающих вариантов.
Пример, когда чекбосы в строку взрывают мозг:
Хрен поймёшь, где какой день недели.
Но в нашем-то случае, где речь о пространственном расположении, конечно же нужно их поставить по сторонам :-) Это про естественное соответствие Нормана.
Это картинка про то, как мучаются люди из-за того, что между расположением ручек и конфорок нет естественного соответствия.
А вот пример того, как используют естественное соответствие продвинутые ребята:
Конечно, было бы удобнее находить где кто, если бы подписи были прямо над головами. Но тут была ещё задача не тронуть фотографию. Такой приём хорошо работает со всякими музейными экспонатами, в которые влезать нельзя. На табличке сбоку можно аккуратно объяснить, где что на картине, расположив элементы соответственно.
Четверг, 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. Это три минуты пешком от перекрёстка Алленби, Шеинкин и Кинг-Джордж:
Приходите с интересными вопросами, несите макеты сайтов и интерфейса.
Фейс-айди в сто раз круче тач-айди, хотя это трудно было представить. Чаще всего его просто не замечаешь — берёшь телефон и пользуешься. Иногда, если провести снизу вверх слишком решительно, можно на мгновение увидеть анимацию на экране. Но он узнаёт тебя настолько быстро, что это совершенно не напрягает. Ни в какое сравнение не идёт с теми случаями, когда тач-айди не узнаёт твой палец с первого раза, и нужно прикоснуться ещё раз.
Он узнаёт в темноте, узнаёт под любым углом. В моих солнечных очках меня тоже узнаёт. Единственный минус — не узнаёт, если держать телефон горизонтально. За неделю с телефоном я об это запнулся один раз.
Бывает, проснёшься утром и читаешь что-нибудь, и тут срабатывает будильник. Теперь телефон видит, что ты на него и так смотришь, поэтому играет звук будильника совсем тихо. Это, конечно, можно было сделать сто лет назад до всякого фейс-айди — телефон и так много знает о том, что я делаю, но всё же. Так к 2027-му году будильник научится не срабатывать, когда я уже проснулся и ушёл в душ. У меня на руке часы и я двигаюсь, не ори, я давно проснулся!
Когда приходят уведомления, на экране отображаются только названия приложений, но не текст. Текст появляется, когда ты берёшь телефон и смотришь на экран. Магия. И самое приятное, что по любому уведомлению можно просто провести и попадёшь в его приложение без дурацкого экрана «Ой, приложи-ка палец сначала».
А ещё мило, что когда открываешь какой-то сайт с полями логина-пароля, на экране тоже на мгновение появляется анимация тач-айди — и потом поля заполняются. Мне уже пожаловались, что такое происходит и на моём сайте — посмотрю попозже, как это деактивировать.
Есть странность. Когда покупаешь что-то в Апсторе, подтвердить покупку надо двойным нажатие боковой кнопки. Что? Раньше это было по тач-айди. Понятно, что недостаточно того, что ты смотришь в телефон — нужно какое-то активное действие. Но почему такое странное действие? Можно было сделать снизу кнопку «Подтвердить», при нажатии на которую срабатывал бы фейс-айди.
Я ещё не попробовал Эпл-пей с ним (потому что в Израиле никто не знает про современные технологии) но уже понял, что все мои переживания были напрасными. Сейчас в Москве настрою.
Отсутствие кнопки хоум — не проблема совсем. Писали, что нужно два-три дня, чтобы привыкнуть. Я привык просто сразу; не помню, чтобы я хоть раз пытался просто нажать в нижнюю часть телефона. Переключение между программами стало в пять раз проще и быстрее, особенно я тащусь от возможность просто провести слева направо по хоум-индикатору, чтобы перелистнуть в предыдущее приложение.
Поскольку кнопки Хоум теперь нет, чтобы сделать скриншот теперь нужно нажать Громче+Сбоку. Пару раз я так делал скриншот случайно, пытаясь нащупать громкость в кармане.
С ОЛЕД-экраном чёрный цвет, наконец-то, по-настоящему чёрный. Читать в полной темноте очень приятно, а интерфейс на чёрном фоне выглядит красивее. К сожалению, правда, не все программы ещё научились использовать чистый чёрный. Например, эпловский Айбукс в режиме чтения на тёмном фоне использует тёмно-тёмно-серый.
Недостаток этого экрана — некоторый едва уловимый блеск пикселей. Они как будто чуточку переливаются, когда меняешь угол зрения. Я это едва замечаю, и никто из тех, кому я это говорил, вообще не понимает, о чём я.
После 6S-плюс экран не кажется маленьким, а оттого, что сам телефон стал меньше, сплошная радость.
Не уверен, что это появилось именно в десятке, но теперь есть стереозвук. Когда Эплы это анонсировали, я думал, что это фигня: ну какой стереозвук при таком размере? Оказалось, что если держать телефон горизонтально на обычном телефонном расстоянии, звук действительно стерео. Не говоря уж о том, что он намного чище, громче и басистее, чем был на старом телефоне.
Ну и тактильная обратная связь стала ещё приятнее. Особенно когда жмёшь на экране на кнопочку фонарика или камеры, ощущение, что реально эта кнопка кликает. На старом телефоне я всё-таки ощущал вздрагивание телефона целиком.
А, ну и я, конечно, белый взял, потому что наконец-то Эплы додумались, что передняя часть даже у белого телефона должна быть чёрной.
