Posts of Канал Ильи Бирмана

Вы, кстати, видали, какую красивую обложечку справочнику мы сделали?

Ребята, вопрос. Как мы назовём (или уже называем) всякие такие штуки в списках и таблицах, показывающие, что строчку можно перетащить (ну и за которую их как раз и надо тащить)? Вообще это метафора неровности, типа какая-то штука с более высоким коэффициентом трения, за которую проще зацепиться. Но в эпоху флет-дизайна это просто точечки потому что вот так. Индикатор перетаскивания? Зона перетаскивания? Таскалка? Неровность?

Нейрооптимизация Пока мы работали над инструкцией для нейросетей в Справочнике, несколько человек нам сказали, что сам справочник нейросетям надо отдавать в формате Маркдаун. Меня это возмутило до глубины души. Мы даже для обычных поисковых роботов уже давно перестали как-то специально контент адаптировать, слава богу, а тут — нейросети! Они могут декомпилировать кусок операционной системы даже! Неужели уж они не разберутся в ХТМЛе, который, вообще-то, является языком семантической разметки? В какой момент мы опять свернули не туда, что у нас появилась ещё менее требовательная к формату ввода технология, а мы всё равно думаем, что надо под неё как-то адаптироваться? Может, тогда убираться перед приходом уборщицы тоже прикажете? У Нильсена-Нормана ещё и вышла статья, что теперь правильно говорить не «юикс», а просто «икс», типа экспириенс бывает не только у юзеров, а у нейросетей тоже: https://www.nngroup.com/articles/ux-vs-experience-design/ Не представляю, что более вредное можно написать. Да, там в статье как-то вяло говорится, мол, человек всё равно остаётся главным, но это всё бред. Человек остаётся не просто «главным», а буквально единственным ради чего есть компьютеры. Если бы не было человека, ничему другому бы они не пригодились.

Обновление справочника за 3 ноября 2026 Справочник обновился: https://ilyabirman.ru/reference/ Главное — мы научили нейросети им осмысленно пользоваться. Для этого мы сделали инструкцию по аудиту и навык. Знаете, как в обычных справочниках бывают разделы типа «Как пользоваться этим справочником»? Вот у нас так же, только для нейросетей: «Как провести разбор интерфейса по этому справочнику». Вот промт, который мы предлагаем использовать: Проведи аудит интерфейса с точки зрения Справочника проектировщика интерфейса. Инструкция по аудиту: https://ilyabirman.ru/reference/audit/ Выполни аудит строго по ней. Если не можешь открыть страницу или найти этот раздел, скажи об этом и не отвечай по памяти. Вставляете его вместе со скриншотом, макетом или ссылкой на что-то — и получаете отчёт, как будто я ваш интерфейс посмотрел. Промт есть в конце справочника, оттуда его можно всегда взять. Но если вам даже этого делать не хочется, то там же можно скачать навык и установить его себе навсегда. Он уже содержит информацию о том, когда его применять. После этого ваша нейросеть просто сама станет в курсе интерфейсных дел. Расскажите, какие найдёте ошибки или странности, мы подкрутим ещё. Что касается содержания, то добавилась статья «Ссылка» в виде большого совета на сайте бюро (выше), ещё пачка терминов и иллюстраций. Всё новое и дополненное разом показывает, если вписать в поиск заклинание «r03».

Бирман с коллегами ожидаемо решили рассказать о ссылке: https://bureau.ru/soviet/20261103/?utm_source=tg-s-s-s261103-031126

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

Зову на курс недизайнеров На мой интерфейсный курс приходят не только дизайнеры: были и разработчики, и менеджеры, и даже разные предприниматели изредка. Но в основном всё же дизайнеры. Ребята, которые говорили «только я не дизайнер», рисовали некрасиво, но по смыслу оно вполне могло было бы неплохо. И тогда я советовал освоить готовые компоненты и научиться основам вёрстки, чтобы собирать хорошие на вид интерфейсы. На курсе, который на днях закончился, я заметил что с тотальным использованием нейросетей стало невозможно сказать, кто «дизайнер», а кто «нет». Один из самых продуманных и одновременно лучших на вид интерфейсов сделал участник, который никаким дизайном до этого вообще не занимался. Все люди — дизайнеры! Вдохновившись этим примером, приглашаю на курс всех, кому интересно проектировать продукты с хорошими интерфейсами. Всё, мы дожили до момента, когда не важно, умеешь ли ты рисовать, знаешь ли Фотошоп или Фигму, умеешь ли компоненты настраивать. Главное — уметь думать. И мой курс идеально подходит для этого времени, потому что я никогда и не учил рисованию, Фотошопу и Фигме. Но я как-то всегда чувствовал, что инструменты — это не главное, они всё время меняются. Нужно их знать, но с ними люди и без меня разберутся. Иногда люди спрашивали, мол, чё ты показываешь пример из Виндоуса 95, он же давно устарел. Но я как-то всегда чувствовал, что золотые примеры нужно беречь, потому что они иллюстрируют какой-то подход, а вот на тренды или моду можно и наплевать. Нужно быть в курсе, но люди и без меня смогут по сторонам посмотреть. В общем, обязательно приходите все. Открыта запись на курс, который начнётся через неделю: https://bureau.ru/courses/ui-online/

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

Коллеги по-быстрому вырезали кусочек из вчерашнего мастер-класса об анимациях. Перед тем, как я сел делать анимацию, я там решил прокомментировать текущие события, а именно как Сяоми пытался подделать Айфон Дуо, но не смог. Если вы не понимаете, в чём разница, посмотрите. А также идёт запись на мой интерфейсный курс, который пройдёт с 7 ноября по 6 декабря. В рассрочку стоит 7900 ₽ / мес.: https://bureau.ru/courses/ui-online/ Лучший курс. Лекция об анимациях там тоже есть.

No text

Приходите! Планирую в этот раз прям открыть новую панель анимации в Фигме и покрутить там разное, чтобы получилось хорошо.

Уже скоро: в 19:00 мск начнётся мастер‑класс Ильи Бирмана «Анимация в интерфейсе». Вступить в чат трансляции

Думаем дальше № 69 — «Мне уже надо на спичечный завод» с Викой Лисицыной С Викой Лисицыной обсуждаем новые айфоны, дизайн с нейросетями и дизайн для инопланетян. 0:00 — Айфон 18 Про 5:53 — Айфон Дуо 15:58 — Беспомощность нейросетей в дизайне 26:19 — Важность дизайн-системы для нейродизайна и роль Фигмы как источника правды 30:20 — Пиксель-пёрфект не нужен. Заменяемая дизайн-система как заменяемый шрифт 37:46 — Верстать сложно 40:29 — Автоматизация дизайн-ревю и подсчёта знаков на плане 49:51 — Порядок в коде при вайбкодинге 55:07 — Дизайн для неграмотных пользователей в Пакистане 1:06:24 — «Рисёч» и исследования 1:09:46 — Как применить исследование, что картинки воспринимаются лучше фотографий 1:13:51 — Как Илья далёк от широких народных масс 1:20:01 — Про принцип «Без обучения» Эпл · Ютюб · Я.Музыка · Спотифай · Мейв Но лучше подписаться по РСС в подкастном приложении: https://cloud.mave.digital/51724

Голосуем за название 69-го выпуска подкаста. Дистанционно и электронно!

Нумерной ад во «Вкусно и точке» Оказалось, что если зайти во «Вкусно и точку», то тебе надо будет взять «локатор» — хрень с номером 83, чек с номером 74 и сесть за стол с номером 225. Число номеров представляется мне избыточным.

Бирман не советует устраивать сюрпризы серьёзным лысым дядькам: https://bureau.ru/soviet/20261027/?utm_source=tg-s-s-s261027-271026

Скинул студентам и сам с большой радостью перечитал старый замечательный совет Артёма о согласовании в дизайне: https://bureau.ru/soviet/20170724/

Временные режимы Как вы, возможно, знаете, режимы в интерфейсе — это плохо. Но ещё хуже временные режимы. Такое часто встречается в бытовой технике и разных приборах. Режим — это состояние интерфейса, в котором одинаковые действия пользователя приводят к одинаковым результатам. В разных режимах одни и те же действия дают разные результаты. В Фотошопе — множество режимов: клик по изображению может сделать что угодно в зависимости от выбранного инструмента и его параметров. Проблема в том, что пользователь не всегда помнит, в каком режиме находится интерфейс, и из-за этого ошибается: хотел нарисовать линию, но случайно сделал градиент. Представим телевизионный пульт. Кнопки «влево» и «вправо» регулируют громкость, а «вверх» и «вниз» переключают каналы. Эти же четыре кнопки используются для навигации по меню. Если пользователь, находясь в меню, захочет сделать погромче и по привычке нажмёт «вправо», у него ничего не выйдет: сейчас эта кнопка означает «увеличить ширину изображения». Но меню в телевизоре — не просто режим, а временный режим: если десять секунд ничего не нажимать, оно закроется. Когда пытаешься настроить телевизор по инструкции, это ужасно раздражает: пока ты находишь по инструкции, куда жать дальше, меню уже исчезает и приходится начинать с начала. Временные режимы в автомобильных интерфейсах не только раздражают, но и опасны. Например, чтобы добавить бас, нужно открыть меню, найти эквалайзер, выбрать низкие частоты и отрегулировать их ручкой. Пока добираешься до очередного нужного пункта, на твоём светофоре загорается зелёный, и настройку приходится откладывать до следующего светофора. Скорее всего, там придётся снова пробираться через всё меню. Зная, что интерфейс не дождётся следующего светофора, ты будешь вынужден настраивать звук прямо во время движения. Если избежать режимов в интерфейсе невозможно, хотя бы не используйте временные режимы. Если уж пользователь передумал настраивать телевизор или эквалайзер, пусть сам нажмёт «Закрыть». Изначально опубликовано на английском языке в 2013 году: https://ilyabirman.net/meanwhile/all/timed-modes/

У участника курса аккуратно нарисована форма, но всё-таки что-то мешает восприятию её структуры. Разбираемся, что это, и как можно исправить. 8 минут: https://www.youtube.com/watch?v=T7HH1AB7eI4 Идёт запись на ноябрьский курс, сейчас −10%. В рассрочку это 7110 ₽ / мес.: https://bureau.ru/courses/ui-online/ Это лучший курс об интерфейсе.

С диктовкой всё смешнее и смешнее. Вчера когда отвалилась горячая клавиша, я первым делом пошёл проверять в настройке горячих клавиш (такая есть в ЧатаГПТ), но там в списке просто нет такой команды как диктовка. Сегодня читатель подсказывает, что это настраивается не в настройке горячих клавиш, а в настройке диктовки (логика). Я радостно иду туда, нахожу там Dictation shortcut, ставлю туда нужый мне шорткат, после чего появляется подпись Not supported.

Разложить прототип на макеты Когда-то рисовать макеты было легко, а делать прототипы — сложно, но постепенно все научились делать и прототипы. Недавно я писал, что не люблю прототипы и хочу видеть макеты: прототипы скрывают внутреннюю логику, а при проектировании меня интересует именно она. Даже то, как разложены макеты по холсту, уже многое говорит о том, чем думал дизайнер: https://ilyabirman.ru/meanwhile/all/designing-and-creating-explanations/ Сейчас благодаря нейросетям делать прототипы даже проще, чем рисовать макеты. Нейросеть просто выдаёт готовый кликабельный прототип; макетов в этом процессе в принципе не было и нет. Но что толку, что она его выдаёт? Как ты поймёшь, что там всё действительно по уму сделано? Я всё равно хочу видеть систему целиком, а не одно её измерение, поэтому всегда прошу нейросеть разложить мне все состояния по полочкам, показать связи между ними. Да, наглядно показать всю внутреннюю логику системы стало сложнее, чем просто сгенерировать что-то кликабельное. Но если ты хочешь сделать не просто «что-то», а сделать чётко, то без этого никак.

Недавно приложение ЧатаГПТ обновилось и утратило возможность перетаскивать чаты в удобном тебе порядке. Открыть второе окно оно иногда даёт, а иногда не даёт — тупо пункта меню File → New Window иногда нет просто так. Щас вот обновилось — у диктовки пропала горячая клавиша, только мышкой жми.

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