https://blogengine.ru/blogs/tags/polzovatelskiy-interfeys/ Автоматически собираемая лента заметок, написанных в блогах на Эгее ru Aegea 11.0 (v4079e) Автоматически собираемая лента заметок, написанных в блогах на Эгее no 137773 https://ilyabirman.ru/meanwhile/all/ui-course-frag-191/ Fri, 30 Jan 2026 02:06:31 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-191/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Любопытный фрагмент семинара, где мы разбираем сложную штуку в интерфейсе выбора адреса, если что-то не находится. Как помочь человеку ввести адрес, если что-то пошло не так? Разбираем там едва уловимое ощущение, что в интерфейсе происходит «что-то странное». 11 минут:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/EdfE1-DSFL4?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 191 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 26 апреля 2024 года.</p> <p>Открыта запись на курс, который пройдёт 31 января — 1 марта.</p> <p><a href="https://bureau.ru/courses/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 137712 https://ilyabirman.ru/meanwhile/all/interfeys-dlya-samostoyatelnyh-polzovateley/ Thu, 09 Oct 2025 12:15:19 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/interfeys-dlya-samostoyatelnyh-polzovateley/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>У меня уже месяца полтора в черновиках лежит такой текст: «Тим Кук думает, что голосовой помощник в телефоне это прикольно, потому что раньше для этого нужен был человек, а теперь это телефон. А для обычного человека это не так: я и раньше это делал в телефоне, а теперь мне просто предлагают по-другому, причём как-то менее прямолинейно». И всё не доходят руки развить мысль.</p> <p>Ещё я думаю, что <a href="https://t.me/nikitonsky_pub/884">заметка Никиты Прокопова про ассистентов</a> очень хорошая. Несколько раз уже к ней возвращался. В общем мысль мне хочется развить в сторону того, что хрен бы с ним с Тимом Куком, но важный вывод для себя как проектировщика интерфейса в том, что хороший интерфейс — как рычаг: он помогает человеку делать что-то самому, но без лишних усилий, и именно это приносит кайф. В этом плане «Таб» в курсоре — это отлично, а чат сбоку — это несколько слабее.</p> <p>Естественно, тут важно, что человек и хотел сам. Например, сканер штрихкода на кассе просто читает номер, а не заставляет его вписывать — это хорошо. Никто и не хотел никогда его вписывать. Его и сканировать-то не хочется; в идеале просто на выходе из супермаркета с тебя списывается правильная сумма, да и всё.</p> <p>А если я монтирую рилсик, планирую поездку, подбираю музыку для микса, разгребаю фотографии — то я хочу, чтобы компьютер давал мне все инструменты, чтобы это было делать легко и приятно, но не чтобы он это делал за меня.</p> <p>Тут граница неочевидна, конечно. Многим людям окей, что им музыку подбирает автопилот. Или если раньше они обращались в турфирму, то наверное сейчас их тоже устроит турробот.</p> <p>Ну короче, как видите, это всё ещё черновик. Помогайте! Видимо, вывод такой, что важно понимать, что есть такой сценарий, когда человеку важно не просто как-то сделать, а как именно сделано, важно иметь чувство контроля, ощущать авторство и т. д. И для этого тоже нужны интерфейсы.</p> 137681 https://ilyabirman.ru/meanwhile/all/ui-course-frag-183/ Tue, 07 Oct 2025 15:09:07 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-183/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>В интерфейсе участницы курса я заметил, что список выбранных окон встречается в двух местах в разной роли. Сразу же приходит в голову использовать его в одном месте в обоих смыслах. Ну и это вообще рабочий ход мысли на все случаи жизни. 4 минуты:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/laiarbyW__Y?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 183 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 5 апреля 2024 года.</p> <p>Открыта запись на курс, который пройдёт 8 ноября — 7 декабря. Сейчас −30% из-за ранней записи, а в рассрочку вообще получается 5530 ₽ / мес.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 137665 https://ilyabirman.ru/meanwhile/all/questions-dump/ Mon, 06 Oct 2025 10:12:06 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/questions-dump/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Я рассказывал, почему <a href="https://ilyabirman.ru/meanwhile/all/onboarding/">плохо встречать пользователя онбордингом</a>, и показывал, как хорошо сделано в Телеграме, что информация о новых фичах появляется в отдельном чате, который можно посмотреть, когда дойдут руки.</p> <p>Вот похожий паттерн в «Настройке» у Эпла:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/questions-dump.jpg" width="768" height="620" alt="" /> </div> <p>Вместо того, чтобы задавать мне десяток вопросов перебивающими друг друга диалогами, как они делают в большинстве случаев, тут они собирают вопросы в один экран, где с ними можно разбираться по желанию. Это я заскриншотил после того, как один из вопросов уже снял.</p> <p>Назовём такой паттерн «Свалка вопросов». Когда свежеустановленная программа хочет доступ к микрофону, геолокации и чему-то там ещё, хорошо бы ей тоже собрать все свои требования в одном понятном месте.</p> 137579 https://ilyabirman.ru/meanwhile/all/ui-course-frag-180/ Sat, 27 Sep 2025 03:10:14 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-180/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Участница курса спрашивает, как найти грань, после которой длинную форму пора переделать на пошаговую. А я отвечаю уклончиво и философско. 6 минут:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/XY6DONMlpUo?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>Это фрагмент № 180 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 29 марта 2024 года.</p> <p>Открыли запись на курс, который пройдёт 4 октября — 2 ноября.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 137468 https://ilyabirman.ru/meanwhile/all/listening-83/ Wed, 17 Sep 2025 14:28:38 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/listening-83/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Всё, что можно слушать, <a href="https://ilyabirman.ru/meanwhile/all/layfhak-pro-slushanie-lekciy-i-dokladov/">я стараюсь слушать</a>, а не читать и не смотреть. Потому что когда у меня свободны глаза, я предпочитаю делать что-то более полезное.</p> <p>Вот что я слушал в последнее время, что мне понравилось:</p> <ol start="1"> <li><a href="https://www.youtube.com/watch?v=vagyIcmIGOQ">Дэвид Хайнемайер Хенсон у Лекса Фридмана</a>. Всё правильно и про программирование, и про бизнес, и про отношение к жизни, а также интересно про гонки, особенно после того, как посмотришь эпловскую «Формулу 1».</li> <li><a href="https://overcast.fm/+ABD4yYAS3fM">What To Do When The World Is Falling Apart</a>. Недавно открыл для себя такого классного ютюбера-психотерапевта. Тут он отлично прочищает мозги людям со взглядами типа «мир нам всё должен» вместо того, чтобы начать самостоятельно чё-то решать.</li> <li><a href="https://atp.fm/644">ATP 644: You Have to Invert</a>. В этом выпуске любимого подкаста АТП обсуждают новый дизайн Макоса, и там много классного, особенно речь Сиракьюсы о том, как тупо отрывать панели от краёв экрана в районе 1:08.</li> <li><a href="https://daringfireball.net/thetalkshow/2025/07/31/ep-428">The Talk Show 428: Michigan-Starred Fine Dining</a>. А это выпуск шоу Джона Грубера, где они с гостем Луи Мантией ситуацию с дизайном интерфейсов в Эпле и тот факт, что у Алана Дая, оказывается, даже нет образования на эту тему.</li> <li><a href="https://www.youtube.com/watch?v=5KmpT-BoVf4">Сэм Альтман о боге, Илоне Маске и загадочной смерти своего бывшего сотрудника</a>. Интервью Такера Карлсона! Ребята стоят друг друга, конечно.</li> </ol> 137460 https://ilyabirman.ru/meanwhile/all/ui-course-frag-179/ Tue, 16 Sep 2025 14:51:53 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-179/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Участница курса говорит, что ей хотелось добавить экран для проверки и исправления ошибки. Объясняю, почему в хорошем интерфейсе так делать не надо. 4 минуты:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/ftiQbv2dNYE?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>ЧатГПТ от моего лица: «В этом фрагменте я рассуждаю о соблазне вставить в интерфейс специальный экран подтверждения: мол, пользователь загрузил документ (например, СНИЛС), и теперь давайте попросим его перепроверить, всё ли он сделал правильно. Но такие экраны, как правило, не работают: если человек сам не заинтересован в проверке, он просто нажмёт „ОК“ и пойдёт дальше. А если заинтересован — он и без нас перепроверит. Мы не ведомство, которое может заставить. Поэтому лучше не навязывать действия, а встроить обратную связь прямо в рабочий процесс. Например, при съёмке паспорта сразу показать, какие поля распознаны, какие — нет. Или, если документ загружен, но с ошибками, — пометить его где-нибудь в списке. Тогда пользователь сам решит, хочет ли он в это вникать. Главное — не мешать и не бесить, а деликатно держать в курсе»</p> <p>Это фрагмент № 179 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 22 марта 2024 года.</p> <p>Открыли запись на курс, который пройдёт 4 октября — 2 ноября. Сейчас −10% из-за ранней записи.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 137365 https://ilyabirman.ru/meanwhile/all/nazhmite-knopku-kotoroy-net/ Thu, 11 Sep 2025 13:43:55 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/nazhmite-knopku-kotoroy-net/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Рассмотрим такой пример:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/press-continue-1@2x.png" width="295" height="278" alt="" /> </div> <p>Здесь нам предлагают нажать кнопку, которой нет. Смешно, но это классика, таких скриншотов у меня несколько из разных продуктов. Иногда это просто кривизна перевода, но часто — как здесь — просто бардак в процессе разработки, когда редакторы, дизайнеры и программисты ничего друг о друге не знают и вообще работают в разных часовых поясах.</p> <p>Как же решить эту проблему? Ну типа, всегда же может случиться ошибка? Это же не специально.</p> <p>А ответ простой: никогда не нужно в интерфейсе призывать нажать на кнопку по её названию. Это само по себе означает дебильный дизайн, даже если всё внимательно проверили и такая кнопка на экране есть.</p> <p>Нахрена объяснять, для чего жать на кнопку? Я что, по названию кнопки не пойму? Чтобы дать доступ, нужно нажать на кнопку «Дать доступ», чтобы продолжить — на кнопку «Продолжить», а чтобы привязать — на кнопку «Привязать». Тут авторы запутались в трёх глаголах, а глагол должен быть в принципе один на это действие. Тогда и проверять его на совпадение с чем-то ещё не придётся.</p> <p>Короче:</p> <div class="e2-text-picture"> <img src="https://ilyabirman.ru/meanwhile/pictures/press-continue-2@2x.png" width="295" height="278" alt="" /> </div> 137287 https://ilyabirman.ru/meanwhile/all/think-on-44/ Wed, 03 Sep 2025 11:01:04 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/think-on-44/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>С Сашей Каном обсуждаем окна в Айпад-ОСе 26, а потом погружаемся в мир исследований.</p> <p>Все выпуски подкаста:<br /> <a href="https://podcasts.apple.com/us/podcast/думаем-дальше/id1744862171">Эпл</a> · <a href="https://www.youtube.com/playlist?list=PLl7kvlp_qh0j9uzQGU2ws4DkBWdbjY1_d">Ютюб</a> · <a href="https://music.yandex.com/album/29069497">Я.Музыка</a> · <a href="https://thinkon.mave.digital">Мейв</a> · <a href="https://cloud.mave.digital/51724">РСС для подкастного приложения</a></p> <table cellpadding="0" cellspacing="0" border="0" class="e2-text-table"> <tr> <td style="text-align: left">0:00</td> <td style="text-align: left">ИИ-помощники и пользовательский интерфейс</td> </tr> <tr> <td style="text-align: left">7:43</td> <td style="text-align: left">Изменения на Айпад-ОСе 26. Почему так сложно сделать оконный интерфейс?</td> </tr> <tr> <td style="text-align: left">19:46</td> <td style="text-align: left">Что значит «изобрести интерфейс». Фигма переизобрела выделение, а вот паринг линз в Вижене-про и автоузнавание штрихкодов полок в Вайлдберисе — это не изобретения</td> </tr> <tr> <td style="text-align: left">27:56</td> <td style="text-align: left">Исследования. Эргономические. Антиукачивание</td> </tr> <tr> <td style="text-align: left">30:10</td> <td style="text-align: left">Концептуальные. Мультитач. Пейпер. Баркодокнопка</td> </tr> <tr> <td style="text-align: left">36:31</td> <td style="text-align: left">Социологические и психологические. Как Стив Джобс «заметил», что пользователи ставят обои. С цифровыми деньгами ощущения не те</td> </tr> <tr> <td style="text-align: left">45:36</td> <td style="text-align: left">Поведенческая экономика. Приманки и калибровка</td> </tr> <tr> <td style="text-align: left">50:04</td> <td style="text-align: left">Не так интересен результат, как метод исследования</td> </tr> <tr> <td style="text-align: left">55:52</td> <td style="text-align: left">Качество коммерческих исследований. Лучше никакое исследование, чем плохое</td> </tr> <tr> <td style="text-align: left">59:29</td> <td style="text-align: left">Где Саша несогласен с Ильёй про исследования</td> </tr> <tr> <td style="text-align: left">1:08:27</td> <td style="text-align: left">Про метрики. Нейросети будут налету генерировать дизайн для наилучших метрик</td> </tr> <tr> <td style="text-align: left">1:13:29</td> <td style="text-align: left">Саша закидывает тему повышения спроса на хороший дизайн</td> </tr> <tr> <td style="text-align: left">1:16:09</td> <td style="text-align: left">Покупатели не хотят, чтобы кассиров уволили из-за внедрения касс самообслуживания</td> </tr> </table> <p>Виспер и ЧатГПТ послушали выпуск за вас и делятся выводами:</p> <blockquote> <p>Разговор начинается с размышлений о будущем интерфейсов и роли помощников на основе искусственного интеллекта. С одной стороны, хочется, чтобы программы просто делали то, что нужно, без изучения функций и кнопок, с другой — под капотом всё равно есть конкретные ограничения. Это вызывает проблему: как пользователю понимать, что возможно, а что нет, и как разработчикам приложений оставаться заметными, если «лицо» программы исчезает, а взаимодействие сводится к универсальному ассистенту. Отсюда возникает конфликт интересов — пользователю интерфейсы становятся не нужны, но разработчикам именно интерфейсы дают способ выделяться.</p> <p>Дальше обсуждают многооконность на Айпаде как пример задачи, которая кажется простой («сделайте как на Маке»), но на деле упирается в фундаментальные различия в устройствах взаимодействия: тач и клавиатура с мышью. Из-за этого Эпл десятилетиями не может придумать удобную модель. В разговоре сравнивают эволюцию интерфейсов в истории: от множества окон и панелей в старых приложениях до современных интегрированных решений, где всё организовано в одном рабочем пространстве. Отмечается, что настоящие интерфейсные изобретения — это не красивые анимации вроде «динамического острова», а новые способы работы с инструментами, как в случае с Фигмой и её переосмыслением выделения объектов.</p> <p>Затем переходят к теме исследований в дизайне. Рассматриваются разные их корни: эргономические исследования, которые учитывают физические ограничения и анатомию; концептуальные исследования, где создаются экспериментальные интерфейсы «в вакууме» (как в лабораториях Эпла или в приложении Пейпер); социологические подходы, когда изучают пользователей в реальном контексте; и психологические — поведенческая экономика и наблюдения за тем, как люди принимают решения. Отмечается, что методология здесь важнее самих выводов, ведь именно в дизайне исследований заложено умение получать достоверные данные.</p> <p>Наконец, они обсуждают коммерческие реалии. В индустрии часто не хватает времени и бюджета на качественные исследования, из-за чего появляются профанации: исследователи выдают банальности или результаты, которым нельзя доверять. При этом в компаниях культ цифр и метрик: на первый план выходит рост показателей, а не качество интерфейсов. Это приводит к опасению, что дизайнеры и исследователи будут нужны всё меньше, так как нейросети смогут бесконечно генерировать варианты интерфейсов и тестировать их на метриках в реальном времени. На фоне этого возникает идея о том, что стоит не только учить дизайнеров, но и повышать у заказчиков и пользователей культуру понимания хорошего дизайна.</p> <p>Основные идеи и выводы:<br /> — Голосовые ассистенты убирают видимость функций, и нужно заново придумывать, как показывать пользователю возможности системы.<br /> — Разработчикам трудно выделяться без интерфейсов: всё может превратиться в безликий сервис, где конкурируют только ценой.<br /> — Многооконность на Айпаде — пример того, как простая на вид задача упирается в специфику устройства и приводит к годам неудачных решений.<br /> — Настоящие интерфейсные инновации — это новые модели взаимодействия (пример: выделение объектов в Фигме), а не косметические приёмы.<br /> — Источники исследований разнообразны: от эргономики до социологии и поведенческой экономики; главное — метод дизайна эксперимента.<br /> — В коммерческих условиях исследования часто страдают качеством и подменяются банальностями или пустыми метриками.<br /> — Растёт роль цифр и дешбордов, но именно нейросети способны лучше всех заниматься бесконечными А/Б-тестами, что ставит под вопрос будущую роль дизайнеров.</p> <p>Этот выпуск будет интересен дизайнерам интерфейсов, исследователям, продакт-менеджерам и всем, кто задумывается о будущем профессии. Также он будет полезен тем, кто хочет понять, почему интерфейсы меняются так медленно, и как исследования могут (или не могут) помочь создавать новые способы взаимодействия.</p> </blockquote> 137284 https://ilyabirman.ru/meanwhile/all/ui-course-frag-178/ Tue, 02 Sep 2025 22:51:36 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-178/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Разбираем кусок интерфейса конструктора окон, где у каждой детали иконочка i с информацией о том, на сколько эта деталь увеличивает сроки изготовления. Объясняю, почему так лучше не делать, и как делать. 5 минут:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/bId3ORgHipo?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>ЧатГПТ от моего лица: «В интерфейсе конструктора окон пользователь меняет параметры — например, количество створок или тип открывания — и при этом меняется срок изготовления. Это важно объяснить, но не так, чтобы мешать. В предложенном варианте для пояснений используются всплывающие подсказки на иконках: нужно навести, подождать, прочитать — и так для каждого параметра. Но если человек хочет быстро сравнить разные конфигурации, такой способ превращается в пытку. Вместо этого лучше показывать итоговую смету — список параметров, цен и сроков — в отдельной разворачивающейся панели. Она не мешает собирать окно, но позволяет понять, что и на что влияет»</p> <p>Это фрагмент № 178 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 22 марта 2024 года.</p> <p>Открыли запись на курс, который пройдёт 4 октября — 2 ноября. Сейчас −30% из-за ранней записи.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 137244 https://ilyabirman.ru/meanwhile/all/ui-course-frag-177/ Thu, 28 Aug 2025 14:59:20 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-177/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Почему пошаговость кажется упрощением дизайнерам, но пользователям усложняет жизнь. 2 минутки:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/UNctbi4hCCk?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>ЧатГПТ неплохо сформулировал от моего лица: «В этом фрагменте я говорю о проблеме, когда интерфейс делится на несколько шагов, хотя настраиваемые параметры зависят друг от друга. В случае с пластиковыми окнами — способ открывания, количество створок и расположение ручки — это части одной системы. Разрывать их на отдельные экраны значит лишать пользователя возможности видеть целостную картину. Настройка теряет наглядность, а пользователь не понимает, что именно он в итоге выбрал. Такие параметры лучше показывать вместе — на одном экране»</p> <p>Это фрагмент № 177 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 22 марта 2024 года.</p> <p>Заканчивается запись на курс, который пройдёт 30 августа — 28 сентября.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 137098 https://ilyabirman.ru/meanwhile/all/alan-must-dye/ Fri, 15 Aug 2025 19:38:23 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/alan-must-dye/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Слушая и читая в последнее время о том, что происходит в Эпле с интерфейсом, с удивлением узнал, что Алан Дай, который сейчас отвечает там за дизайн, вообще не имеет никакого образования в области интерфейса, — он вообще графический дизайнер!</p> <p>И это бы ещё полбеды, но уровень его некомпетентности такой, что он даже не знает, что не знает чего-то важного. Рассказывают, что когда на встречах кто-то из ребят начинает оперировать терминами типа «время прицеливания» или «локус внимания», он закатывает глаза и реагирует на это типа «ох, опять эти интерфейсные зануды». То есть он не просто не разбирается в интерфейсах, а прямо-таки гордится своим пренебрежением к этой области! В общем, нас ждут тёмные времена.</p> 137009 https://ilyabirman.ru/meanwhile/all/type-to-search-finder-mixed/ Wed, 06 Aug 2025 19:45:00 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/type-to-search-finder-mixed/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Хоть в Нортон-командере, хоть в Проводнике Виндоуса всегда было принято, что сначала идут папки, а потом уже файлы. А на Маке по-классике было по-другому: файлы и папки идут вперемешку исходя из выбранной сортировки.</p> <p>Несколько лет назад Эпл сдался и добавил нормальную сортировку в Файндер — папки стали идти в начале, файлы потом.</p> <p>Хоть в Нортон-командере, хоть в Проводнике Виндоуса, хоть в Файндере на Маке всегда была возможность выбрать в списке файл, просто начав писать его имя. Я удивляюсь, как люди иногда крутят огромные списки файлов, ища нужный глазами, хотя можно просто нажать 1-2 буквы.</p> <p>Так вот, представьте, открыли вы в файндере папку, а в ней, в частности, такое:<br /> <tt>images/</tt><br /> <tt>index.php</tt></p> <p>И вы жмёте на кнопку с буквой i. Очевидно, что курсор должен перейти к папке images. Но в реальности он переходит к файлу index.php. Потому что хоть визуально сортировка и поменялась, но где-то в глубине души Файндер всё ещё верит, что index.php находится выше, чем папка images.</p> <p>Вайб-кодинга тогда ещё не было, но сделано на сравнимом уровне качества.</p> 136971 https://ilyabirman.ru/meanwhile/all/mobile-desktop-recognizability/ Sun, 03 Aug 2025 20:13:35 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/mobile-desktop-recognizability/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>До какой степени дизайн может меняться при адаптации под мобилу?</p> <p>У меня есть такой критерий: мобильный и десктопный дизайны должны быть взаимоузнаваемы. Если я пользовался сайтом на компьютере, а потом зашёл с телефона, всё должно быть в ожидаемых местах. Ну и наоборот.</p> <p>Если, например, на десктопе у нас этажик из шести картинок в ширину, а на мобиле они превращаются в два этажика по три картинки — это окей. А если вместо картинок появляется кнопка «Посмотреть фотографии», открывающая попап, то не окей. Если на десктопе есть большой блок текста, а на мобиле его часть спрятана за раскрывашку «Показать больше» — это окей. А если для мобилы предлагается написать более короткий текст, то не окей.</p> <p>Я не согласен с идеей разделения сценариев. Это когда рассуждают в духе: «На мобиле обычно люди смотрят на бегу, поэтому им важнее раздел X, чем раздел Y, так что давайте поставим его выше». Тут нарушается принцип взаимоузнаваемости.</p> <p>Можно поставить дизайн десктопа и мобилы рядом и задать себе вопрос: можно ли сказать, что это одно и то же, просто как бы в разном масштабе? человек, знакомый с одним дизайном, будет уверенно ориентироваться во втором? Если нет, я бы попросил переделать.</p> 136947 https://ilyabirman.ru/meanwhile/all/chestnoe-andu-dokumenta-i-sostoyaniya/ Fri, 01 Aug 2025 11:39:02 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/chestnoe-andu-dokumenta-i-sostoyaniya/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Как вы знаете, в программах должна быть функция анду, чтобы исправить ошибку. Но есть нюанс.</p> <p>В Иллюстраторе если выделить часть точек объекта, подвинуть эти точки, а потом нажать анду, точки-то вернутся на место, но выделение изменится. Придётся заново выделять, чтобы подвинуть правильно.</p> <p>В Эпл-ноутсах если выделить текст справа налево, вырезать его, а потом нажать анду, текст вернётся, и даже выделение будет такое же на вид, но программа забудет, что ты выделял справа налево — шифт+стрелки теперь буду двигать правый край выделения. Придётся заново выделять, если нужно подправить именно левый край.</p> <p>Важно запрограммировать анду правильно, чтобы оно не только откатывало изменения в документе, но и полностью восстанавливало предыдущее состояние программы.</p> 136869 https://ilyabirman.ru/meanwhile/all/ui-course-frag-176/ Sat, 26 Jul 2025 12:24:38 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frag-176/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>В интерфейсах бывает, что дизайнеры хотят что-то сказать пользователю, и «говорят» это в подписях элементов интерфейсов в нарушение синтаксиса. В итоге пользователю вообще ни черта непонятно. 3 минутки:</p> <div class="e2-text-video"> <iframe src="https://www.youtube.com/embed/dlnCTOPoov4?enablejsapi=1" allow="autoplay" frameborder="0" allowfullscreen></iframe> </div> <p>ЧатГПТ от моего лица: «В этом фрагменте я объясняю, что элементы интерфейса работают по правилам — у каждого свой „синтаксис“ и ожидаемое поведение. Если, например, внутри выпадающего списка вместо значения написать подсказку вроде „требуется замер“, это будет сбивать с толку: пользователь ожидает увидеть там варианты выбора, а не комментарии. То же самое с кнопками — на них должен быть глагол действия („Оплатить“), а не призыв что-то ввести в другом месте. Когда элементы начинают вести себя не по правилам, интерфейс становится непредсказуемым и мешает пользователю».</p> <p>Это фрагмент № 176 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 22 марта 2024 года.</p> <p>Идёт запись на курс, который пройдёт 30 августа — 28 сентября. Сейчас −30%, потому что заранее. Недавно обновились несколько лекций и добавилась новая.</p> <p><a href="http://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 136855 https://ilyabirman.ru/meanwhile/all/kak-upihnut-v-ekran-spisok-iz-300-chelovek/ Thu, 24 Jul 2025 12:00:50 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/kak-upihnut-v-ekran-spisok-iz-300-chelovek/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Недавно участвовал в обсуждении дизайна, где надо было отобразить список из трёхсот человек. Это экран результатов тестирования — показаны участники и как кто из них справился.</p> <p>Дизайнер говорит, что список получается очень длинный и не влезает в боковую панель. Рассуждает вслух: может, надо сначала показать тех, кто сдал успешно, а может наоборот, тех, кто не сдал... может надо показать первых десятерых, а остальных спрятать за раскрывашку... а может надо как-то по отделам их тут разделить?.. Это всё может быть, но вот в чём проблема: все эти варианты приходят в голову исходя из проблемы «я не могу упихать», которая вообще не в мире пользователя.</p> <p>Если вы оказались в такой ситуации, задайте себя реально важные вопросы: зачем этот список пользователю? что он в нём хочет найти, увидеть, понять? на какие решения это повлияет?</p> <p>У нас выяснилось, что пользователю полезно понимать, кто не прошёл тест, чтобы можно было им написать, мол, давайте-ка проходите. Я спрашиваю: а если половина не прошли тест, он что, будет 150 человекам в личку писать? Может, мы сделаем кнопку «Напомнить», которая будет сама отправлять уведомления? А может оно и без кнопки сможет за этим следить и напоминать тем, кто забыл? Тогда полный список не особо-то и нужен. Бывает любопытно просто поглядеть, кто прошёл, кто нет.</p> <p>Ещё выяснилось, что иногда нужно про конкретного человека понять, прошёл он или нет. Ну окей, запихиваем в прокручиваемую область, не боясь, что не влезает, а сверху ставим поле поиска-фильтра. А, стоп, а кто эти конкретные люди, про которых интересно? Почему про всех неинтересно, а про конкретных десятерых интересно? Выяснилось, что это потому что наш пользователь их сам добавлял проходить этот тест. Если кто другой добавлял, то это их проблемы, а вот если добавил «я» сам, то значит мне результаты этих людей важны. Ну так блин, давайте показывать не всех, а как раз «моих», а остальных и правда можно спрятать за раскрывашку какую-то!</p> <p>Вопрос «зачем это пользователю», как может показаться со стороны, дизайнер интерфейса должен задавать себе первым делом. Но вот в жизни это часто не так. Часто какой-то другой человек ставит дизайнеру задачу в форме «на экране должен присутствовать список», потому что он так чувствует, и дизайнер начинает думать, что это правда и есть задача.</p> 136830 https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-175/ Mon, 21 Jul 2025 19:21:32 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-175/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>За те годы, что <a href="https://bureau.ru/educenter/ui-online/">мой интерфейсный курс</a> идёт в онлайне, я выложил уже <a href="https://ilyabirman.ru/meanwhile/tags/ui-course-frags/">почти две сотни фрагментов с наших семинаров</a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.</p> <p>Разобрал 175 фрагментов.</p> <p>Сборная солянка:</p> <ul> <li>№ 1. <a href="https://www.youtube.com/watch?v=xzUNC_VGNFk">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму</a></li> <li>№ 2. <a href="https://www.youtube.com/watch?v=_Jv9dT2B7Nc">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа</a></li> <li>№ 19. <a href="https://www.youtube.com/watch?v=5VCi1KN7WdE">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе</a></li> <li>№ 26. <a href="https://www.youtube.com/watch?v=Pc0GryUpCgM">ФИО как в паспорте и эффект японской квартиры</a></li> <li>№ 89. <a href="https://www.youtube.com/watch?v=eLOGLY3_h7U">Прямоугольнизация дизайна и свобода, которую даёт фотошоп</a></li> <li>№ 119. <a href="https://www.youtube.com/watch?v=Hwi6ddaRZ38">О дизайне переключателя (segmented control) и положении кнопки</a></li> <li>№ 138. <a href="https://www.youtube.com/watch?v=GNxf6DAZR-Q">Разное про кассу в магазине</a></li> <li>№ 146. <a href="https://www.youtube.com/watch?v=CSvgFqJ8p1Q">Разбор конфигуратора окон и как классифицировать сообщения об ошибках</a></li> </ul> <p>Почти самостоятельные лекции:</p> <ul> <li>№ 3. <a href="https://www.youtube.com/watch?v=LBBWjtEHLxU">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне</a> (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)</li> <li>№ 33. <a href="https://www.youtube.com/watch?v=du6SqjjLEzQ">Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм</a></li> <li>№ 37. <a href="https://www.youtube.com/watch?v=SwyTvRljimM">Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс</a></li> <li>№ 46. <a href="https://www.youtube.com/watch?v=JTqRG_7e3O8">Про сложное цветовое кодирование и триаду Мейксенара</a></li> <li>№ 55. <a href="https://www.youtube.com/watch?v=3q0HH7mUMYA">Соответствие между логической структурой и выразительными средствами и дизайн-системы</a></li> <li>№ 167. <a href="https://www.youtube.com/watch?v=V5StnSF_7sc">Опрятность прячет проблемы</a></li> </ul> <p>Метод:</p> <ul> <li>№ 30. <a href="https://www.youtube.com/watch?v=-np87CaMjKs">Метод «Например»</a></li> <li>№ 40. <a href="https://www.youtube.com/watch?v=MuDea0wOabA">Сценка со звонком в пиццерию</a></li> <li>№ 126. <a href="https://www.youtube.com/watch?v=ro4EBiCJ1iE">Решение существует</a></li> </ul> <p>Формы:</p> <ul> <li>№ 4. <a href="https://www.youtube.com/watch?v=bPSaKS1bbsE">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее</a></li> <li>№ 5. <a href="https://www.youtube.com/watch?v=OMJV8exdbnU">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки</a></li> <li>№ 11. <a href="https://www.youtube.com/watch?v=how0mkG7ui4">Первое впечатление, синтаксис и язык формы заказа с доставкой</a></li> <li>№ 15. <a href="https://www.youtube.com/watch?v=c91KziF01sQ">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму</a></li> <li>№ 28. <a href="https://www.youtube.com/watch?v=GrkuX84kKeo">Улучшаем форму обратной связи Букинг.кома</a></li> <li>№ 35. <a href="https://www.youtube.com/watch?v=dckw7tqm1M4">Первое впечатление от формы</a></li> <li>№ 50. <a href="https://www.youtube.com/watch?v=oepQvJtNgUU">Упорядочиваем вёрстку формы</a></li> <li>№ 52. <a href="https://www.youtube.com/watch?v=hPGiFsdTKa8">Расстояние между полями и сокращение подписей</a></li> <li>№ 53. <a href="https://www.youtube.com/watch?v=IR0zLLBf65Y">Редизайним форму настройки сложной логики</a></li> <li>№ 63. <a href="https://www.youtube.com/watch?v=KbZAeVFaEcU">Добавление нескольких телефонов в форме</a></li> <li>№ 84. <a href="https://www.youtube.com/watch?v=phraobT9Ufk">Разбираем мелочи в форме регистрации</a></li> <li>№ 85. <a href="https://www.youtube.com/watch?v=DnTeUK1OqLQ">Исправляем форму формы, ну и немножко содержание</a></li> <li>№ 103.<a href="https://www.youtube.com/watch?v=b4NPKYiT9n4">Плейсхолдеры в каждом поле — это как иконки у каждого пункта меню</a></li> <li>№ 104. <a href="https://www.youtube.com/watch?v=dqnYrhXSMms">Подробный разбор сложной формы</a></li> <li>№ 108. <a href="https://www.youtube.com/watch?v=9RUUtqehkyU">Кирпичная кладка и другие недостатки формы</a></li> <li>№ 118. <a href="https://www.youtube.com/watch?v=9kB6CfCE0aM">Обозначение обязательных и необязательных полей</a></li> <li>№ 130. <a href="https://www.youtube.com/watch?v=ublwi2BmrH0">Как сделать сетку в форме</a></li> <li>№ 143. <a href="https://www.youtube.com/watch?v=VlEbVJGgGXw">Не надо ставить элементы формы под главную кнопку</a></li> <li>№ 145. <a href="https://www.youtube.com/watch?v=WjX759lGaHI">У Гугля плохой дизайн</a></li> <li>№ 154. <a href="https://www.youtube.com/watch?v=YIwCjtdp5Y4">Форма слишком сложная</a></li> <li>№ 156. <a href="https://www.youtube.com/watch?v=5gxBJOV4yzA">Размеры и кнопка в форме</a></li> <li>№ 159. <a href="https://www.youtube.com/watch?v=rMnnM3o_JXo">Поле поиска — это не часть полей формы</a></li> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/web-forms/">веб-формы</a></p> <p>Элементы интерфейса:</p> <ul> <li>№ 60. <a href="https://www.youtube.com/watch?v=NdBt_Oqydk4">Рассуждения о текстовых кнопках</a></li> <li>№ 67. <a href="https://www.youtube.com/watch?v=WqFfT7yDMJg">Меняем табы на переключалку и настраиваем вёрстку</a></li> <li>№ 72. <a href="https://www.youtube.com/watch?v=IV2nVMcaQ7U">Представляем выбор внятно радиокнопками</a></li> <li>№ 76. <a href="https://www.youtube.com/watch?v=wihXJHHK3yo">Так это кнопка или ссылка? Оказывается, это радиокнопка!</a></li> <li>№ 114. <a href="https://www.youtube.com/watch?v=n4Cb774L2_U">Что не так с аккордеоном</a></li> <li>№ 116. <a href="https://www.youtube.com/watch?v=9tewBcFm-1M">Как назвать чупа-чупс</a></li> <li>№ 144. <a href="https://www.youtube.com/watch?v=ZFLMkM02lp8">Три вида серенького текста в поле</a></li> <li>№ 147. <a href="https://www.youtube.com/watch?v=FusPcntg-oI">Показываю старинные радиокнопку и чекбокс</a></li> <li>№ 151. <a href="https://www.youtube.com/watch?v=mMTivJldcAQ">Про хоум-индикатор</a></li> <li>№ 169. <a href="https://www.youtube.com/watch?v=hpnt4JyiU2o">У прямоугольника недостаточно признаков поля</a></li> </ul> <p>Интерфейс:</p> <ul> <li>№ 9. <a href="https://www.youtube.com/watch?v=gUklbkeDdYg">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование</a></li> <li>№ 16. <a href="https://www.youtube.com/watch?v=99o_4c7HTUk">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки</a></li> <li>№ 44. <a href="https://www.youtube.com/watch?v=2aQnKL5nLUw">Упрощаем экран успешного заказа пиццы</a></li> <li>№ 61. <a href="https://www.youtube.com/watch?v=-zzLglJ9bEc">Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»</a></li> <li>№ 74. <a href="https://www.youtube.com/watch?v=aLETIvOafg0">Так это форма или мастер?</a></li> <li>№ 75. <a href="https://www.youtube.com/watch?v=zngun6Kw1q4">Точно описываем поведение интерфейса для разработчиков</a></li> <li>№ 77. <a href="https://www.youtube.com/watch?v=U_9t3-mJXp0">Жму синюю кнопку на автомате, не читая</a></li> <li>№ 83. <a href="https://www.youtube.com/watch?v=D0zKnGG10tY">Уважать ли интерфейсные традиции разных платформ?</a></li> <li>№ 86. <a href="https://www.youtube.com/watch?v=wq4MQNpFrbg">Не надо ничего активировать</a></li> <li>№ 97. <a href="https://www.youtube.com/watch?v=jwbEj5v3bu8">Ширина и прокрутка на десктопе</a></li> <li>№ 101. <a href="https://www.youtube.com/watch?v=pn_X2x_8XPo">Елена Семёновна и валидация ввода</a></li> <li>№ 105. <a href="https://www.youtube.com/watch?v=Ew75feYtGMs">Как именно работает взаимодействие?</a></li> <li>№ 107. <a href="https://www.youtube.com/watch?v=GBj17b4l10s">Как делать, чтобы программа не тормозила</a></li> <li>№ 109. <a href="https://www.youtube.com/watch?v=-8neywtnhT8">Двухпанельный интерфейс</a></li> <li>№ 115. <a href="https://www.youtube.com/watch?v=Tq8Rh7GPqhM">Мир пользователя</a></li> <li>№ 121. <a href="https://www.youtube.com/watch?v=xKPaH3XiW-4">О связях сущностей в сложных системах</a></li> <li>№ 122. <a href="https://www.youtube.com/watch?v=XvPjm7mQ0n8">Думать из мира пользователя</a> (продолжение из 115)</li> <li>№ 149. <a href="https://www.youtube.com/watch?v=UENZW1gNjpU">Двойная обратная связь</a></li> <li>№ 150. <a href="https://www.youtube.com/watch?v=crgZi_CW6xU">Зелёный значит «всё хорошо»</a></li> <li>№ 153. <a href="https://www.youtube.com/watch?v=9E-iYfjEqg0">В играх всё иначе</a></li> <li>№ 155. <a href="https://www.youtube.com/watch?v=cG6jewXdWL4">Кнопка «Сохранить» — плохой знак</a></li> <li>№ 168. <a href="https://www.youtube.com/watch?v=ax1BrxWlcOw">Что делать, пока ЭВМ думает медленно?</a></li> </ul> <p>Таблицы:</p> <ul> <li>№ 8. <a href="https://www.youtube.com/watch?v=IvzDUzH-Sk0">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря</a></li> <li>№ 10. <a href="https://www.youtube.com/watch?v=mE0pZIVgJLE">Что не позволено базе данных, то позволено обычной таблице</a></li> <li>№ 29. <a href="https://www.youtube.com/watch?v=N2LINRApqmg">Круговая диаграмма для красоты, табличка для пользы дела</a></li> <li>№ 39. <a href="https://www.youtube.com/watch?v=MgwYwu3wkk4">Дизайн универсальных таблиц с непредсказуемым содержимым</a></li> <li>№ 65. <a href="https://www.youtube.com/watch?v=oz571oi6w24">Живые спарклайны в таблице</a></li> <li>№ 102. <a href="https://www.youtube.com/watch?v=QyHEWiMR_0A">Как выравнивать цифры в таблицах</a></li> <li>№ 112. <a href="https://www.youtube.com/watch?v=zSJijCINU58">Собираем табличку с диапазоном и разной точностью</a></li> <li>№ 113. <a href="https://www.youtube.com/watch?v=ZDvDnJ1HSP0">Рекомендую жирную, а не бледную шапку в таблице</a></li> <li>№ 117. <a href="https://www.youtube.com/watch?v=PBzl0pIUqk0">Горизонтальная прокрутка в таблицах</a></li> <li>№ 142. <a href="https://www.youtube.com/watch?v=tOiNW_F_PH4">Про динамические таблицы</a></li> <li>№ 157. <a href="https://www.youtube.com/watch?v=36V12nuC0kY">Иерархия в таблице</a></li> <li>№ 171. <a href="https://www.youtube.com/watch?v=0F-zmFtcWwI">Повышаем плотность таблиц</a></li> </ul> <p class="foot">См. также тег: <a href="https://ilyabirman.ru/meanwhile/tags/tables/">таблицы</a></p> <p>Графики, диаграммы, инфографика:</p> <ul> <li>№ 34. <a href="https://www.youtube.com/watch?v=u682Zi8_FBk">Визуализация помогает увидеть закономерности</a></li> <li>№ 43. <a href="https://www.youtube.com/watch?v=BvugvUfyXmg">Объясняю про тафтианские 45 градусов на графике</a></li> <li>№ 94. <a href="https://www.youtube.com/watch?v=8986vOikHRk">Если данных мало, то и график не нужен</a></li> <li>№ 95. <a href="https://www.youtube.com/watch?v=WSXYgIwdziI">Рассуждения про инфографику и её задачи</a></li> <li>№ 98. <a href="https://www.youtube.com/watch?v=9pf94f8Mz7Q">Когда визуализация потрачена впустую</a></li> <li>№ 110. <a href="https://www.youtube.com/watch?v=qsDWBf-xcVs">В чём проблема интерактивных графиков</a></li> <li>№ 111. <a href="https://www.youtube.com/watch?v=wJJdSn4Vk-Q">Нужны не круговые диаграммы, а таблица</a></li> <li>№ 132. <a href="https://www.youtube.com/watch?v=Urn9TDalPg4">Дискуссия о задачах инфографики</a></li> <li>№ 134. <a href="https://www.youtube.com/watch?v=zMmO0bWqELQ">Музыкальная нотация и чтение с листа</a></li> <li>№ 172. <a href="https://www.youtube.com/watch?v=Oz3A44Em8ms">Толщина — носитель цвета</a></li> </ul> <p>Редактура в дизайне:</p> <ul> <li>№ 7. <a href="https://www.youtube.com/watch?v=1DdsndXWHSE">Механически редактируем примечание к таблице</a></li> <li>№ 24. <a href="https://www.youtube.com/watch?v=bxSu-Vx0Nz8">Отступления от синтаксиса интерфейса и линейки в таблицах</a></li> <li>№ 49. <a href="https://www.youtube.com/watch?v=H3UvwkQH8_o">Редактура привела к радиокнопке</a></li> <li>№ 66. <a href="https://www.youtube.com/watch?v=-6LaXViTWzc">Исследование о тексте в интерфейсе Эпла (1980-е)</a></li> <li>№ 70. <a href="https://www.youtube.com/watch?v=Zphn9ixcd0U">Показать примечание в контексте и заодно сократить</a></li> <li>№ 80. <a href="https://www.youtube.com/watch?v=AmuCRWsSdpA">Редактируем интерфейс конфигуратора окон</a></li> <li>№ 92. <a href="https://www.youtube.com/watch?v=bYk0_q6tWLA">Поле «Комментарий для курьера»</a></li> <li>№ 96. <a href="https://www.youtube.com/watch?v=1l35NtOBogE">Жирный против курсива</a></li> <li>№ 120. <a href="https://www.youtube.com/watch?v=H-tk4IhJWnA">Непонятный выбор и названия кнопок</a></li> <li>№ 127. <a href="https://www.youtube.com/watch?v=oJkMBxIeLE0">Редактируем регистрацию на вымышленном сайте</a></li> <li>№ 129. <a href="https://www.youtube.com/watch?v=5e2pwuF8raQ">Формулировки ошибок в форме</a></li> <li>№ 135. <a href="https://www.youtube.com/watch?v=ERNjOfUbXZY">Сокращаем текст про почту</a></li> </ul> <p>Вёрстка:</p> <ul> <li>№ 17. <a href="https://www.youtube.com/watch?v=td6deeU-7kU">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально</a></li> <li>№ 42. <a href="https://www.youtube.com/watch?v=sXRWQ05cO3I">Улучшаем эстетику с помощью контраста и прямоугольности</a></li> <li>№ 73. <a href="https://www.youtube.com/watch?v=49DSUMomhNE">Верстаем интерфейс конструктора окон</a></li> <li>№ 78. <a href="https://www.youtube.com/watch?v=JFKJHdQJvNQ">Неудачные выравнивательные связи</a></li> <li>№ 99. <a href="https://www.youtube.com/watch?v=yj5dFy9HQ-Y">Комментирую вёрстку окна</a></li> <li>№ 160. <a href="https://www.youtube.com/watch?v=UeSCu7MFeAw">Двигаем иконки в виджете</a></li> <li>№ 161. <a href="https://www.youtube.com/watch?v=a0HYHigmUx8">Вписываем кусок карты в виджет</a></li> <li>№ 162. <a href="https://www.youtube.com/watch?v=cbpDb3k_t5k">Чистим виджет от шума</a></li> <li>№ 164. <a href="https://www.youtube.com/watch?v=AebU9xyd-QI">Виджет умного дома с иконками</a></li> <li>№ 173. <a href="https://www.youtube.com/watch?v=EaSKacTWobU">Срисовываем большой круг для виджета</a></li> <li>№ 174. <a href="https://www.youtube.com/watch?v=aV65V1H4w3I">Срисовываем виджет погоды</a></li> </ul> <p>Эстетика:</p> <ul> <li>№ 12. <a href="https://www.youtube.com/watch?v=kmlb272BAdo">Как делать градиенты в инфографике</a></li> <li>№ 13. <a href="https://www.youtube.com/watch?v=29GAdT6dXBA">Упаковка таблицы, симультанный контраст и борьба за красоту цветов</a></li> <li>№ 27. <a href="https://www.youtube.com/watch?v=X1v54YA8g7c">Cкруглённое поле поиска и ужасный шрифт Мирьяд-про</a></li> <li>№ 79. <a href="https://www.youtube.com/watch?v=58GldX-JZig">Улучшаем дизайн кнопки</a></li> <li>№ 81. <a href="https://www.youtube.com/watch?v=rlCxhBCxJww">Классические признаки поля ввода и кнопки</a></li> <li>№ 87. <a href="https://www.youtube.com/watch?v=ox38_G9lQuo">Вспомогательные линии — тоньше и скромнее</a></li> <li>№ 91. <a href="https://www.youtube.com/watch?v=hieOe3wu-7E">Аналогия между элементами интерфейса и буквами шрифта, которые можно взять готовые</a></li> <li>№ 93. <a href="https://www.youtube.com/watch?v=hh1oSLA0XaE">Задисейбленность кнопки</a></li> <li>№ 140. <a href="https://www.youtube.com/watch?v=Z8C1RMcR2fk">Выбор цветов для интерфейса</a></li> <li>№ 141. <a href="https://www.youtube.com/watch?v=E40xHhr73Ig">Шрифты с засечками в интерфейсе</a></li> <li>№ 148. <a href="https://www.youtube.com/watch?v=X7mBhTG08xA">Настраиваем толщины линий</a></li> <li>№ 152. <a href="https://www.youtube.com/watch?v=hvv_ohLK1xU">Много стилей и плохие тени</a></li> </ul> <p>Ход:</p> <ul> <li>№ 6. <a href="https://www.youtube.com/watch?v=BKu6wqOvgfg">Ставим красную блямбу рядом с таблицей</a></li> <li>№ 20. <a href="https://www.youtube.com/watch?v=CaiDj7OOUbc">Изображаем нестандартную конструкцию окна символом</a></li> <li>№ 25. <a href="https://www.youtube.com/watch?v=N2Qk697fe24">Чтобы пользователь нажал, можно написать «Жми!» </a></li> <li>№ 71. <a href="https://www.youtube.com/watch?v=TAg6cnGIsh4">Запрещаю выравнивание по центру</a></li> </ul> <p>Бизнесовое и продуктовое:</p> <ul> <li>№ 23. <a href="https://www.youtube.com/watch?v=xq7ntaU6FTU">Как продать подписку на «Афишу»</a></li> <li>№ 32. <a href="https://www.youtube.com/watch?v=qeyRl3IVSGQ">Закоулки интерфейса можно просто не делать</a></li> <li>№ 38. <a href="https://www.youtube.com/watch?v=k6iyy4vJ1Co">Продаём окна, объясняя разницу профилей</a></li> <li>№ 47. <a href="https://www.youtube.com/watch?v=6rDKRg6SlVc">Аккуратное внедрение нового дизайна без ущерба привычкам</a></li> <li>№ 48. <a href="https://www.youtube.com/watch?v=MhdZzXw_Tzc">Что, если на реализацию хорошего интерфейса нет времени</a></li> <li>№ 56. <a href="https://www.youtube.com/watch?v=3polv_KHa5g">Разделяем сценарии оплаты частично, ровно по счёту и впрок</a></li> <li>№ 57. <a href="https://www.youtube.com/watch?v=TeolvcH5f_8">Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»</a></li> <li>№ 59. <a href="https://www.youtube.com/watch?v=UcIjtMreNHA">Постоянные напоминания о цене могут мешать покупать</a></li> <li>№ 64. <a href="https://www.youtube.com/watch?v=PQzVzgYfvfQ">Вопросы клиента к интерфейсу кассы самообслуживания</a></li> <li>№ 82. <a href="https://www.youtube.com/watch?v=2qV6CCRT6lA">Заранее спросить у клиента про сео и персональные данные</a></li> <li>№ 88. <a href="https://www.youtube.com/watch?v=Mt45AuwOnvA">Убрал шум — добавь сигнал!</a></li> <li>№ 90. <a href="https://www.youtube.com/watch?v=-GHjDFHWrBA">Классно упростить себе задачу</a></li> <li>№ 100. <a href="https://www.youtube.com/watch?v=yTIrl1jnEHU">Программисты могли бы подумать о пользе для бизнеса</a></li> <li>№ 106. <a href="https://www.youtube.com/watch?v=3fzeLHVhvy0">Оговорка, что интерфейс — это не всё</a></li> <li>№ 136. <a href="https://www.youtube.com/watch?v=qh5BmDJ48yI">Дисейблить ли кнопку с точки зрения канонов интерфейса и бизнеса?</a></li> <li>№ 175. <a href="https://www.youtube.com/watch?v=NqKDGROn8AQ">Работа дизайнера — разобраться в теме</a></li> </ul> <p>Инструмент:</p> <ul> <li>№ 18. <a href="https://www.youtube.com/watch?v=vHCy9izr0v4">Последовательное волшебство в интерфейсе Фотошопа</a></li> <li>№ 41. <a href="https://www.youtube.com/watch?v=NF8fC2Cp8iU">Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов</a></li> <li>№ 45. <a href="https://www.youtube.com/watch?v=H3CF-RG9lIc">Режимы наложения слоёв с овощами и фруктами</a></li> <li>№ 54. <a href="https://www.youtube.com/watch?v=uILlCs5L_mY">Секреты встроенной скриншотилки на Маке</a></li> </ul> <p>Работа над дизайном и подача:</p> <ul> <li>№ 36. <a href="https://www.youtube.com/watch?v=czu2l7RfEWs">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру</a></li> <li>№ 58. <a href="https://www.youtube.com/watch?v=2tANVy6u2TQ">Не описывайте макеты и не делайте «невозможные» макеты</a></li> <li>№ 128. <a href="https://www.youtube.com/watch?v=zCldGigmk04">Что не так с ваерфреймами</a></li> <li>№ 139. <a href="https://www.youtube.com/watch?v=tqfe5-w0VPo">Сначала презентуйте линейно, а потом уже рисуйте диаграммы</a></li> <li>№ 158. <a href="https://www.youtube.com/watch?v=WjHJhh6K7dk">Важность подачи дизайна</a></li> <li>№ 165. <a href="https://www.youtube.com/watch?v=uCssgVrDCqM">Крутой интерфейс кассы и крутая его презентация</a></li> <li>№ 170. <a href="https://www.youtube.com/watch?v=mlqnrYCBqr0">Дизайн дизайна, или как расположить макеты на холсте</a></li> </ul> <p>Разное интересное:</p> <ul> <li>№ 14. <a href="https://www.youtube.com/watch?v=tYJMrY5zWlo">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10</a></li> <li>№ 21. <a href="https://www.youtube.com/watch?v=fPVmyMbixXw">Что бы я поменял в дизайне Бёрдвью спустя девять лет</a></li> <li>№ 22. <a href="https://www.youtube.com/watch?v=7Mc6IaaXNsc">Технические ограничения и дизайн для будущего</a></li> <li>№ 31. <a href="https://www.youtube.com/watch?v=bCMAOeqapDI">Двусмысленная иконка и проверка венгерским языком</a></li> <li>№ 51. <a href="https://www.youtube.com/watch?v=SQQLWeCaHs8">Глючная обработка ввода пользователя в интерфейсе Сафари</a></li> <li>№ 62. <a href="https://www.youtube.com/watch?v=4JzD6d9V0nU">Что делать, если клиент хочет фигню?</a></li> <li>№ 68. <a href="https://www.youtube.com/watch?v=x6RbJD24N6o">Благодарности и в чём польза теории</a></li> <li>№ 69. <a href="https://www.youtube.com/watch?v=JoA5JZcBoS0">Что делать дизайнеру, если разработчики напрограммили всю магию?</a></li> <li>№ 123. <a href="https://www.youtube.com/watch?v=zoN15-R2gQ8">Благодарности</a></li> <li>№ 124. <a href="https://www.youtube.com/watch?v=gCTCA_dQOp4">Мастрид ли Тафти?</a></li> <li>№ 125. <a href="https://www.youtube.com/watch?v=35uwvF6SZb8">Как я отношусь к войсикам и кружочкам</a></li> <li>№ 131. <a href="https://www.youtube.com/watch?v=2PC5L3tv6fA">Когда нужны моноширинные цифры</a></li> <li>№ 133. <a href="https://www.youtube.com/watch?v=o2DjvI6nVts">Плакаты и бумага, которая горит</a></li> <li>№ 137. <a href="https://www.youtube.com/watch?v=dfe9kO0a054">Почему я не могу дать список дизайнеров, за которыми надо следить</a></li> <li>№ 163. <a href="https://www.youtube.com/watch?v=K98thEFlCng">Про компасную стрелку, стороны света и смелость</a></li> <li>№ 166. <a href="https://www.youtube.com/watch?v=GLfjVm4Douk">Как быть с пустой лепёшкой</a></li> </ul> <p>Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 30 августа — 28 сентября.</p> <p><a href="https://bureau.ru/educenter/ui-online/" class="button buy-button big-button">Почитать о курсе</a></p> <p class="foot">Программа, отзывы, запись</p> 136675 https://ilyabirman.ru/meanwhile/all/superpedestrian/ Fri, 18 Jul 2025 16:56:52 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/superpedestrian/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>Рассказал о проекте, который делал больше трёх лет назад — интерфейс управления флотом самокатов Суперпедестриана:</p> <div class="e2-text-picture"> <a href="https://ilyabirman.ru/superpedestrian/" class="e2-text-picture-link"> <img src="https://ilyabirman.ru/meanwhile/pictures/superpedestrian-cover.jpg" width="920" height="607" alt="" /> </a></div> <p>Очень люблю такие интерфейсные задачки, когда надо разобраться в каких-то замороченных процессах.</p> 136627 https://ilyabirman.ru/meanwhile/all/think-on-42/ Sun, 13 Jul 2025 16:16:58 +0500 Илья Бирман https://ilyabirman.ru/meanwhile/all/think-on-42/ <p><a href="https://ilyabirman.ru/meanwhile/">Илья Бирман</a>:</p> <p>С Мишей Нозиком обсуждаем феномен Дрибла, голосовое управление компьютером и конечно же исследования.</p> <p>Все выпуски подкаста:<br /> <a href="https://podcasts.apple.com/us/podcast/думаем-дальше/id1744862171">Эпл</a> · <a href="https://www.youtube.com/playlist?list=PLl7kvlp_qh0j9uzQGU2ws4DkBWdbjY1_d">Ютюб</a> · <a href="https://music.yandex.com/album/29069497">Я.Музыка</a> · <a href="https://thinkon.mave.digital">Мейв</a> · <a href="https://cloud.mave.digital/51724">РСС для подкастного приложения</a></p> <table cellpadding="0" cellspacing="0" border="0" class="e2-text-table"> <tr> <td style="text-align: left">0:00</td> <td style="text-align: left">Помыть стекло и «феномен Дрибла»</td> </tr> <tr> <td style="text-align: left">6:26</td> <td style="text-align: left">Дэшборды, плашечки и иллюзия порядка</td> </tr> <tr> <td style="text-align: left">15:49</td> <td style="text-align: left">Про порядок в вещах в шкафу</td> </tr> <tr> <td style="text-align: left">19:02</td> <td style="text-align: left">Борьба с плоскими линиями на графике</td> </tr> <tr> <td style="text-align: left">26:15</td> <td style="text-align: left">Голосовые интерфейсы — не такая уж и чушь?</td> </tr> <tr> <td style="text-align: left">33:18</td> <td style="text-align: left">Ассистенты против самостоятельности</td> </tr> <tr> <td style="text-align: left">47:30</td> <td style="text-align: left"><a href="https://ilyabirman.ru/meanwhile/all/pryamo-v-mozg/">Прямо в мозг</a> и прямо из мозга</td> </tr> <tr> <td style="text-align: left">52:24</td> <td style="text-align: left">Ползунок автономности и как учитывать надвигающийся ИИ в дизайне интерфейсов</td> </tr> <tr> <td style="text-align: left">57:24</td> <td style="text-align: left">Дайсон и исследования про ненужность «Мини» и «Вокмена»</td> </tr> <tr> <td style="text-align: left">1:00:42</td> <td style="text-align: left">«Считаете ли вы этот интерфейс более современным?» и другие закрытые вопросы в исследованиях</td> </tr> <tr> <td style="text-align: left">1:05:13</td> <td style="text-align: left">Разные исследования про то, как люди покупают</td> </tr> <tr> <td style="text-align: left">1:09:04</td> <td style="text-align: left">Исследования: помощь в обсуждении с клиентом, цели, интерпретации, гипотезы и планируемые действия</td> </tr> <tr> <td style="text-align: left">1:17:50</td> <td style="text-align: left">Инсайт про автоматические кассы</td> </tr> </table> <p>Виспер и ЧатГПТ послушали выпуск за вас и делятся выводами:</p> <blockquote> <p>Выпуск начинается с обсуждения метафоры «помыть стекло» — состояния, когда дизайнер не может оценить концепцию, пока не уберёт поверхностные ошибки: неправильные кавычки, нули в числах, неровности. Илья признаёт, что это может быть способом прокрастинации: пока правишь детали, легче втягиваешься в размышления о глубинных проблемах. Миша поддерживает мысль, что красивая картинка может притупить критическое мышление, и приводит пример с постером, который визуально выразительный, но по сути бесполезный. Они обсуждают иллюзию порядка, которую создают плашки, линеечки и заголовки: кажется, что всё хорошо, а на самом деле структурной мысли нет.</p> <p>Дальше разговор переходит к графикам в интерфейсах. Поднимается важная проблема: как выглядят графики при разном объёме данных, и как сделать так, чтобы даже при редких значениях они оставались полезными и понятными. Они приводят пример с графиком рейтинга в шахматах, где решили отображать каждую игру как точку — это дало реалистичную и красивую визуализацию, а не обобщённую и пустую.</p> <p>Затем обсуждают будущее голосовых интерфейсов: где они действительно полезны, а где мешают. Илья размышляет, что голос — лишь промежуточный этап, пока не появятся способы «ввода прямо из мозга». Миша говорит, что важно оставлять действия за собой, а не передавать всё «ассистентам», даже если они умны. Они обсуждают идею, что идеальный интерфейс — это тот, где исчезает сам процесс взаимодействия, остаётся только мысль и результат. Приводится пример из фильма с Брюсом Уиллисом, где он общается с компьютером о характеристиках оружия, и это воспринимается как будущее. А также появляется важная мысль: сейчас дизайнеру стоит начинать проектировать интерфейсы уже с учётом того, что пользователь будет взаимодействовать с ними голосом или через ЛЛМ.</p> <p>Последняя часть — про исследования. Много критики в сторону неумелых исследований с закрытыми вопросами и неправильными интерпретациями. Но также есть уважение к настоящим исследователям, которые умеют задавать правильные вопросы и выстраивать внятную интерпретацию. Исследование не должно быть самоцелью, его польза — в расширении круга наблюдений и возможных решений, а не в «доказательстве» того, что решение верное. Примеры с автоматическими кассами, вокменом и мини-купером показывают, что результаты исследований часто дают неожиданные идеи, но действовать нужно с умом.</p> <p>Основные идеи и выводы:<br /> — Иногда чистка мелочей в дизайне (типографика, выравнивание) — это не «помыть стекло», а способ втянуться в задачу и начать думать.<br /> — Красивый макет может усыплять критическое мышление: кажется, что всё отлично, даже если суть провалена.<br /> — Плашки и визуальные блоки создают иллюзию порядка, которая мешает увидеть реальные связи и ошибки.<br /> — Графики должны быть устойчивыми к редким или неравномерным данным; обобщения могут вводить в заблуждение.<br /> — Голосовые интерфейсы полезны в некоторых сценариях, но в долгосрочной перспективе — это временный этап на пути к более прямым формам взаимодействия.<br /> — Хорошие интерфейсы должны учитывать возможность ЛЛМ-команд, но оставлять контроль пользователю.<br /> — Исследование — это не цифра в отчёте, а способ понять, что происходит. Важен не результат, а вывод и действия, которые из него следуют.</p> <p>Этот выпуск будет интересен дизайнерам, продуктологам и исследователям, особенно тем, кто работает с интерфейсами, визуализацией данных и принятием решений на основе пользовательского опыта. А ещё тем, кто размышляет о будущем взаимодействия человека и компьютера.</p> </blockquote>