Недавно делал мастер-класс про взгляд новичка, а вот вам ещё пример.
1. У Эпла в ПВУ Музыки есть галочка и многоточие. За многоточием какое-то меню, понятно, а что делает галочка? Хрен знает. Жму!
2. Мне предлагают всё удалить. В какой вселенной галочка означает «Удалить»?!
Если знать исходную задумку, то можно её понять. Типа на этом месте в других случаях находится кнопка «Скачать». А когда ты скачал, там появляется галочка, мол, всё скачано, можешь проследовать на посадку в самолёт. При нажатии на неё тебе предлагают обратное действие (а заодно и полное удаление, да).
Но экран сам по себе смысла не имеет.
Видео по вторникам: анимация против математики
Весело, а местами даже драматично, но понятно далеко не всё:
https://ilyabirman.ru/meanwhile/all/animation-vs-math-video/
Участница курса презентаций Ольга Богачёва презентует дизайн стенда для выставки Яндекс.Клауда. Это третья неделя курса, поэтому тут всякие подставы. В данном случае один из клиентов опаздывает, а второй — в полном восторге от всего. Как быть в таких ситуациях? Разбираем, что Ольга сделала классно, а что — рискованно. 23 минуты:
https://www.youtube.com/watch?v=3ldvcnhojj8
00:00 Интро и раздача ролей
00:37 Презентация
09:30 «Вопросы аудитории»
13:57 Разбор
Все детали про курс, включая подробную программу и кнопку «Запись»:
https://bureau.ru/courses/presentation-online/
Сегодня — последний день записи на июльский курс! Приходите обязательно.
Пересмотрел вдруг вчера любимый с детства художественный фильм «Беги, Лола, беги».
Во-первых, убедился, что мне не показалось: он правда классный. Если вы ещё не смотрели, посмотрите! И послушайте — саундтрек там тоже прекрасен.
Во-вторых, теперь, когда я представляю Берлин, не могу не замечать подставы: вот только что она бежала по мосту в сторону Варшауэрштрассе, как вдруг выбегает из-за угла в Митте! Чё за дела, не может так быть.
В процессе обсуждения одной внутренней задачки вспомнили вечный совет Ильи Бирмана о методе предложений. Вспомните и вы:
https://bureau.ru/soviet/20140408/
Написан в 2014 году и всё ещё божественно прекрасен. Покажите знакомым юиксерам.
В аудио по четвергам сегодня такой вот крепкий Увэлл (?), от которого срочно хочется в Бергхайн. На одном дыхании:
https://ilyabirman.ru/meanwhile/drafts/uvall-segment/
🔴 Запись мастер-класса Ильи Бирмана о «взгляде новичка» в интерфейсе
Запись в Ютубе:
https://youtu.be/k8hjctXC1Fk
https://bureau.ru/courses/ui-online/ — практический курс Ильи Бирмана «Пользовательский интерфейс и представление информации»
1. Вот такие вот утоньшения, возникающие из-за скругления элементов на всю ширину экрана, смотрятся фигово.
2. Реально-то там будет чёрная рамка телефона, а не зелёный фон, и получатся какие-то колючие обрезки, как будто ребёнок забыл выкинуть бумагу после вырезания.
3. Вот если бы скруглённая часть была светлой, а фон тёмной, смотрелось бы нормально.
(Случайная картинка из Пинтереса.)
В предыдущем сообщении — голосовой комментарий вот к такой картинке, которую прислал Хаотик Нютрал, когда я приглашал присылать работы для получения голосовых советов.
Хаотик Нютрал пишет, что это редизайн сервиса Варламова «Паствю», и утверждает, что будет признателен за фидбек.
Памяти скеоморфизма посвящается. Откопал у себя в бекапах-архивах папку скриншотов 4-го Айфона, когда впервыве появилась ретина.
Читать полностью…Многие дизайнеры думают, что тормозной интерфейс — это из-за программистов. Но на самом деле ощущение быстроты в большей степени создаётся именно качественным дизайном. Если дизайнер нарисовал макет с шагом «Подождите...», то вся тормознутость будет сконцентрирована в нём. А работа дизайнера — придумать, как распределить ровно то же вычислительное время по другим шагам, чтобы пользователь тормозов не заметил. 4 минутки:
https://www.youtube.com/watch?v=GBj17b4l10s
Я вам эти все фрагменты не просто так выкладываю, а чтобы вы приходили на курс о пользовательском интерфейсе. Он очень классный, и все уходят довольными. Кроме этих семинаров с разборами заданий там 20 часов лекций с фундаментом.
Ближайший курс пройдёт с 1 по 30 июля. Все подробности, отзывы, программа и отзывы:
https://bureau.ru/courses/ui-online/
Олег Андреев поделился фоточкой. Видите, под каждой иконкой про неё что-то написано? Ха-ха, а вот и не про неё! Это просто текст на пяти языках, а иконок тоже пять, но с текстом они никак не связаны.
Это стандартная проблема, когда соседние, не связанные по смыслу этажи кажутся связанными из-за одинаковой сетки. Рассказываю про это на курсе в теме «Близость»:
http://bureau.ru/courses/ui-online/
Но этот пример прям отличный, сохранил в соответствующую папочку! Тут ещё и расстояния между этажами никакого нет: кружочки с языками висят как раз между своим текстом и иконками выше.
В предыдущем сообщении — голосовой комментарий вот к такой картинке, которую прислал Лёве, когда я приглашал присылать работы для получения голосовых советов.
Лёве пишет: «Каждый год математическая школа заказывает у меня вариацию их логотипа для своего летнего лагеря. В этом году сделал пирамидки, но ощущение, что логотип разваливается. Что с этим сделать?».
Вчера вышел совет про калининградскую схему:
https://bureau.ru/soviet/20230620/
Его заметил Владимир Титов из Мостранспроекта, очень приятно:
/channel/Titovmos/625
И тут я вспомнил, что самые крутые схемы Калининграда — это вот эти из 1990 года, особенно троллейбусная. Скриншот — из моей книги о дизайне транспортных схем:
https://bureau.ru/books/metro/
СР 28 июня 20:00 мск — бесплатный мастер‑класс Ильи Бирмана о «взгляде новичка» в интерфейсе
В среду 28 июня в 20:00 мск Илья Бирман проведёт бесплатный мастер‑класс о «взгляде новичка» в интерфейсе, а участники смогут задать вопросы. Илья — арт‑директор бюро, автор книг и преподаватель дисциплины «Интерфейс и информация».
В конце мастер‑класса — сюрприз!
Илья расскажет в прямом эфире про «взгляд новичка» и принцип «Каждый экран имеет смысл», в том числе на примерах, которые собрал за последние пару лет у Эпла, Микрософта и Телеграма. А также расскажет о том, как проходит курс «Пользовательский интерфейс и представление информации».
Мастер‑класс будет полезен тем, кто проектирует, учится или подумывает научиться проектировать интерфейсы. Пройдёт в Зуме.
Записаться на мастер‑класс
Эта и другие новости на сайте бюро:
https://bureau.ru/news/2023/june-masterclasses-birman/
Прочитал в мае в Москве доклад о своём движке блога «Эгея»:
https://www.youtube.com/watch?v=vrcXLs_PhVA
Встречается мнение, что движок блога — это простейшая задача веб-разработки. Нужно вытащить из базы данных заметки и показать их в определённом порядке. Ну ещё дать интерфейс добавления и редактирования. «Эгею» называют «лёгким» движком. Рассказываю, сколько всего «Эгея» делает под капотом, чтобы быть такой приятной и при этом оставаться «лёгкой» в глазах пользователей.
00:00 Интро
03:32 Обработка текста и содержимое заметок
09:36 Внешний мир: шаринг, сео, урлы, комментарии
16:59 Навигация: поиск, теги, рекомендации, перебивки и меню
25:48 Качество жизни
Смотрите и обязательно покажите знакомым программистам, чтобы настроить их на нужный лад.
Сайт Эгеи:
http://blogengine.ru/
Спасибо организаторам HolyJS — конференции для JavaScript‑разработчиков — за приглашение и запись выступления! Ребята просили передать, что сейчас открыт приём заявок на осеннюю конференцию:
https://holyjs.ru/callforpapers/?utm_source=partner&utm_medium=birman&utm_campaign=cfp
Промо-страничка ивента
Классная тень!
Она как бы настоящая, не из мира компьютерной графики, а из физического. И она моментально создаёт настроение, включает какие-то летние ассоциации. Круто, что летний эффект достигается элегантно, без излишеств, одной только тенью.
И параллакс-эффект уместный, что редкость. И текст хорошо читается.
Удачно, понравилось.
Обнаружил, что минздравовский знак о запрете курения — это кривая перерисовка знака из набора пиктограмм американской ассоциации дизайнеров АИГА. Ухудшенная версия и без того посредственного дизайна.
Ссылки по теме:
• https://ilyabirman.ru/meanwhile/all/obraschenie-v-minzdrav-rossii/
• https://www.aiga.org/resources/symbol-signs
Последний день: 2 июля в 23:59 мск закрывается запись на практический курс Ильи Бирмана и Михаила Нозика «Презентация клиенту и публичные выступления».
Записаться на курс заранее до 2 июля
Презентация клиенту и публичные выступления 3—23 июля
Эта и другие новости на сайте бюро:
https://bureau.ru/news/2023/presentation-online-open-20230703/
Вышли очередные три главы книги Designing Transit Maps — английской версии «Дизайна транспортных схем»: Geometry, Orientation, Scope.
Новость на сайте бюро на английском:
https://bureau.ru/news/2023/book-metro-geometry-orientation-scope-en/
Покупайте и читайте! И там есть бесплатная демоглава про изгибы.
Английская книга выходит сразу с мобильной версией.
Скиньте англоговорящим коллегам.
1. Одна из детских ошибок в дизайне транспортных схем — зафигачить огромную полосу с заголовком. Это почти гарантированный признак того, что вся схема сделана без любви. Это вот Лос-Анжелес какой-то новый.
2. Как минимум можно было бы этот заголовок в свободный угол поставить просто.
В 20:00 мск (это через 40 минут) я проведу бесплатный мастер-класс на тему «Взгляд новичка». Это одна из тем моего курса. Расскажу, о чём речь, и покажу разные примеры того, как связанные с ним принципы используются в хороших интерфейсах. Ну и как плохие (как на рис. 2) сделать получше с их помощью.
Пройдёт всё в зуме:
https://us06web.zoom.us/j/84098173817?pwd=QWJ1QklaWG9hWjJWMVRvNHZYL0lIZz09&utm_source=tg-n-c-junemc-110523
Вроде как надо записаться в новости на сайте бюро:
https://bureau.ru/news/2023/june-masterclasses-birman/
Репостните куда-нибудь туда, где это может быть интересно.
Прокрутка клавиатурными стрелками в Вентуре
Я заметил, что в Макосе Вентуре прокрутка стрелками на клавиатуре стала работать очень плавно, чего нельзя было сказать о прошлых системах.
Речь о документах для чтения, где нет курсора. По идее однократное нажатие на стрелку вниз или вверх должно прокручивать документ на одну строку. Но что такое «одна строка», когда в документе, например, веб-странице, используются разные шрифты, иллюстрации и видео? Это некоторая условность, типа, один сантиметр. Не на пиксель же прокручивать!
Раньше если нажать на стрелку и удерживать её, документы прокручивались дёрганно, этими шагами однострочными. Это очень напрягало; я всё время задумывался о том, как можно было бы сделать плавно. Задача нетривиальная, ведь при однократном нажатии всё ещё надо решительно прокручивать на какой-то фиксированный шаг, на ту самую «одну строку».
Так вот, Вентура научилась прокручивать документы плавно при использовании стрелочек. Для этого предсказуемо пришлось пожертвовать мгновенностью реакции на однократное нажатие: при такой построчной прокрутке система как будто бы подтупливает. Но в целом на мой вкус стало приятнее.
Проверка на аудиофила
Ха-ха, попались! Или нет? «Если вы этого не слышите, вы не аудиофил»: https://www.youtube.com/watch?v=48PxwspDvrE
Посмотрите и послушайте, а потом читайте дальше, а то там спойлеры.
В общем, я считаю себя до какой-то степени аудиофилом; правда обычно аудиофилы покупают дорогущее оборудования, чтобы различать едва уловимые детали в звуке, и для них ценность почему-то представляют случайные детали, возникающие вследствие несовершенства физического мира, например звучание конкретного контрабаса в конкретном помещении в руках конкретного исполнителя, в то время как я наслаждаюсь теми деталями в звуке, которые являются содержательной частью произведения, которые целенаправленно и ювелирно созданы автором.
Тем не менее, мне было интересно понять, услышу ли я «проблему» с кусочком, который поставил автор. Не знаю, считать ли, что я её услышал, — я не смог бы её так точно сформулировать и изолировать, как сделано в видео. Но после первого прослушивания у меня сложилось ощущение «со стерео происходит какая-то противоестественная фигня», а после второго — «да, стерео какое-то искусственное». При этом я не был уверен, что в этом и состоит проблема, это просто то, что я заметил, пока слушал. Оказалось, что проблема в этом, а из видео вы можете узнать даже конкретнее, в чём именно.
При этом в моём мире сама эта «проблема» — никакая не проблема. Автор произведения вполне мог бы захотеть сделать такое стерео частью произведения. Просто для инструментального произведения такая свобода самовыражения, как работа с пространством и физикой звука, не очень принята. Есть такое искусственное ограничение жанра; правило, о котором нужно знать. Это примерно как сделать хаусовый трек и нарушить в нём размер 4:4 в одном из квадратов. Это «проблема» только с точки зрения хаусового диджея, но в мире музыки в целом в этом нет ничего такого. Единственная разница только в том, что слушатели инструментальной музыки намного чаще склонны считать себя представителями «музыки в целом».
Выложил рассказ о проекте, который сделал в 2019 году — дизайн интернет-магазина «Дом Тома»:
https://ilyabirman.ru/dom-toma/
Почитайте, там надо было исхитриться и разнообразие коллекции показать, и индивидуальность товаров. Репостните везде и приходите за хорошим дизайном!
Самый тупой шаблон для мемов
Самый тупой шаблон для мемов:
— X
— Ты хотел сказать Y?
— Нет.
Обычно в X содержится какой-то плохой каламбур. Плохой, потому что сам по себе он не очень считывается. Именно поэтому нужен Y, чтобы объяснить, про что каламбур из X. Например:
— Пригожая Россия будущего.
— Ты хотел сказать «прекрасная»?
— Нет.
Содержательно всё сказано в первой реплике, но автор шутки настолько в ней неуверен, что решает её объяснить во второй реплике. Типа,«пригожая — это примерно как хорошая, а хорошая — это почти прекрасная... ну, понимаете?..» Объяснение убивает даже хорошую шутку, а в случае с плохой результат совсем жалкий.
Придумал каламбур — публикуй без говна вокруг.
Может, не все видят красоту?
Я всё думал, зачем девушки так много красятся, делают причёски, придумывают увеличение губ — ведь они и так красивые. Я не про особый повод «нарядиться» — это понятно, а именно про мнение, что это обязательно нужно делать каждый день.
И тут недавно у меня вдруг сверкнула мысль: а может просто большинство людей слепые и не видят нихера? То есть мне просто раньше не приходило в голову, что, может, мужчины смотрят на красивых женщин и не видят красоты?..
Точно так же, как не видят двойных пробелов в тексте, или когда знак рубля не того шрифта, или цены не выровнены нормально, или наклейка криво налеплена. Просто их взгляд вообще не отмечает этого, и им нужны какие-то другие признаки бинарные, типа «губы накрашены → красиво».
Может, мне просто повезло, что я вижу и так?
Незамкнутость интерфейса полотенцесушителя
На старом полотенцесушителе у меня был только выключатель, а на новом — целых три кнопки. Нижняя включает и выключает, средняя выбирает температуру, а верхняя — время работы. Температура последовательно выбирается из низкой, средней и высокой, а время — из ∞, 2, 4 и 6 часов. Внимание, вопрос: как работает выбор времени?
Допустим я выбрал 4 часа. Захожу через три часа в ванную, а полотенце ещё мокрое. Думаю: «надо подольше посушить», и переключаю на 6 часов. В какой момент время пошло? Стали ли сейчас заново отсчитываться шесть часов или предыдущий таймер продлился на час? Если продлился, то что будет, если я долистаю до 2 часов?
Незамкнутость откуда не ждали! Обычно такие интерфейсы придумывают начинающие дизайнеры, но их не берут в работу, потому что уж инженер-то понимает, что в интерфейсе нет внутренней логики.
Кстати, нагородили целых три кнопки, но при этом режима «всегда работать на низкой температуре, но когда надо включать „буст“ на 2 или 4 часа» — нет.
Немного о качестве современного эпловского софта. На свежеустановленной системе запускаешь приложение «Часы», и оно открывается вот так, с прокруткой. Часы чуть-чуть не влезают в приложении «Часы».
Это пример косяка, который в бюро не то, что до релиза не должен доходить, такого даже дизайнер не должен видеть, потому что ну ни один разработчик не способен такое говно оставить. И это не какой-то эзотерический экран приложения Audio MIDI Setup, о существовании которого большинство пользователей не догадываются; нет, это главный экран, которым встречает одно из новых приложений системы!