Михаил Капанага показывает классный пример — визуализацию того, в какой футболке жарче на солнышке:
/channel/thisisnotatable/134
«Это могло быть таблицей формата „цвет / температура“, но сравнивать фотки с тепловизора гораздо интереснее, чем текст».
Визуализация даёт почти физическое ощущение ада в чёрной и тёмно-зелёной футболках. Интересно, насколько близки по цвету жёлтая и светло-зелёная, но насколько разные в них ощущения. С таблицей ощущения были бы не те, конечно.
Все перепосчивают картинки из новой серии Гриффинов (1), где показывают типа Челябинск. Забавно тут то, что они нарисовали типичное американское одноэтажное захолустье (2+) — видимо, американскому автору даже в голову не пришло, что города в России в среднем куда более содержательны, чем в Штатах, он даже смотреть не стал, и просто перерисовал привычную картину более депрессивными цветами.
Читать полностью…Видео по вторникам: детальные предметы акварелью
Неверятно, как это вообще можно нарисовать:
https://www.youtube.com/watch?v=DGSqglrPadw
1. Я скачал песенку с Ютюба в Айтюнс. Если вы так не умеете, то программа 4K YouTube to MP3 вам в помощь.
Из-за того, что это клип, у него в начале секунда тишины, а в конце несколько секунд звуков не по делу. Можно отредактировать в аудиопрограмме, но это для неопытных пользователей.
2. А опытные пользователи знают, что Айтюнс всю жизнь позволял настроить произвольные временные отметки, между которыми нужно играть трек. Поэтому я просто пошёл и настроил себе тут.
Но Эпл не был бы Эплом, если бы не сломал это. К счастью, start он пока уважает, и поэтому трек начинает играть как только я жму плей. Но вот на stop он теперь плевать хотел и играет лишний мусор в конце как ни в чём не бывало.
3. Но при этом время в панельке сверху останавливается на 3:20! То есть какие-то ошмётки кода, который за это отвечают, всё-таки как-то пытаются работать. Современное айти эт итс бест.
Очень нравятся таблички Лего с перечнем деталей в наборе. В третьей колонке плоская 2 на 10 распирает всю колонку, но даже это не портит ощущение.
Читать полностью…Бжж-бжж
Недавно купил новую электрическую зубную щётку. Когда чистишь зубы, она жужжит, но иногда на мгновение перестаёт жужжать. Я сначала подумал, что, может, я задеваю кнопку как-то случайно чуть-чуть, и она отключается. Или мне бракованная попалась, и там контакт какой-нибудь отходит в некоторых положениях.
Но через несколько чисток я заметил, что слишком уж стабильно это повторяется. Оказалось, щётка так считает время: она раз в 30 секунд перестаёт жужжать на долю секудны, а через четыре таких цикла отключается вовсе. Это чтобы хорошо почистить все зубы: по 30 секунд чистишь нижние спереди, нижние сзади, верхние спереди, верхние сзади.
Я считаю это решение блестящим. Такая мелочь, а мотивирует тщательно и внимательно чистить зубы, при этом не требует дополнительной индикации.
Часто говорят, что интерфейс должен быть очевидным, но это не универсально. Для повседневных вещей эффективность куда важнее, чем понятность с первого использования.
Объясняю по элементам, что не так с вёрсткой, почему она выглядит не очень. А ещё есть путаница с ролью элементов: то ли там заголовок, то ли переключалка какая-то. Заодно касаемся темы различий между вкладками и переключалками. 4 минуты:
https://www.youtube.com/watch?v=yj5dFy9HQ-Y
Следующий курс пройдёт с 27 мая по 25 июня:
https://bureau.ru/courses/ui-online/
В образовательных продуктах бюро моя главная тема — интерфейс и информация. Есть очный и онлайн-курс, лекции, книга, предмет в школах и советы.
Если не видели, вот видос, где рассказываю, что у них общего, чем отличаются, как выбрать и как комбинировать:
https://www.youtube.com/watch?v=50ES3a5kuzw
Каждый раз, когда я пишу «Микрософт», кто-нибудь да удивляется в комментриях. А я, между прочим, ещё 15 лет назад всё объяснил:
https://ilyabirman.ru/meanwhile/all/microsoft-pioneer/
Я не знаю, что вам ответить
Иногда мне пишут письма в духе: «Мы такие-то такие-то, вот два абзаца про нас. Давно следим за вашей работой, читали книжку. В этом году мы планируем что-то там. Хотели бы с вами посотрудничать.»
И всё. Ни вопроса, ни предложения. И я не понимаю, что делать. Игнорировать письмо вроде невежливо, люди же написали, причём явно именно мне. Написать в ответ «А что вы хотите-то?» тоже звучит грубовато.
Чтобы ответить нормально, нужно прям сесть и придумать ответ. Из-за этого такие письма неделями лежат в инбоксе.
Урок такой: когда пишешь кому-то письмо представь, каково ему будет отвечать. Если, конечно, ты хочешь ответ получить в обозримом будущем.
Что делать в Берлине 11—16 мая?
Куда сходить, на что посмотреть, с кем встретиться, где попить кофе? В Берлине буду шестой, кажется, раз, так что всё очевидное знаю. Рассказывайте неочевидное!
В школе бюро есть задание — сделать интерфейс заказа пиццы. В частности, там можно выбрать ингредиенты. Почему-то у очень многих студентов одна и та же проблема: в настройке ингредиентов очень тесно безо всяких на то причин.
Пост в блоге:
https://ilyabirman.ru/meanwhile/all/tight-ui-pizza-ingredients/
Хорошая новость — наша с Алексеем Блиновым программа Эмси заработала в Вентуре. Если вы не знали, что такое Эмси, узнайте:
«Другие программы мешают работать яркими выезжающими плашками. При этом когда возникает вопрос, что играет, ответа на экране нет.
Эмси всегда на виду. Название песни не скроллится взад-вперёд, а стоит на месте.
В выпадающем меню — управление воспроизведением. Альт-клик по меню мгновенно перематывает трек в нужную точку.»
Купить за 99 рублей:
https://apps.apple.com/ru/app/emcee-for-music/id408774844?l=en&mt=12
Видео по вторникам: сравнение размеров во Вселенной
В Ютюбе миллион видосов со сравнением размеров планет, звёзд и галактик, но вот этот мне особенно понравился:
https://www.youtube.com/watch?v=02Kgf9dCgME
Понравился тем, что сравнивает объекты, которые обычно не сравнивают друг с другом. На 4:55 рядом с Марианской впадиной появляется ммарафон, а тут уже рядом пульсар Краба давно стоит. Или вот в 5:30 перед нами Седна и другие планета, а тут вдруг бац — Мадагаскар! Космические объекты редко сравниваются с земными, а это и даёт более полное представление, и немного удивляет. Когда вышли за размеры Солнца, казалось, что уже ничто земное тут не может оказаться рядом, но вдруг в 8:25 появляются «все люди, если их поставить на голову друг другу»!
Отложил себе в папочку «Сравнения»:
https://ilyabirman.ru/meanwhile/all/ui-course-comparisons-folder/
См. также трейлеры разных лекций, включая «Сравнения»:
https://bureau.ru/news/2021/lecture-ui-updates-december/
Метанавыки, которые помогают конкурировать
Реклама · Текст предоставлен клиентом
В настоящее время люди конкурируют не только с людьми, но и с искусственным интеллектом. Сильные метанавыки — наше конкурентное преимущество.
Что это?
Метанавыки — когнитивные стратегии, которые человек применяет к новым ситуациям, исходя из опыта предыдущих. На их основе развиваются hard и soft skills.
Правда в том, что их нельзя прокачать напрямую, как, например, лидерство или управление временем, они развиваются в деятельности.
Какие именно метанавыки помогают и как их развивать?
1. Эмпатия — фиксируйте и анализируйте свое состояние, эмоции, из этого навыка автоматически получится чувствовать других.
2. Креативность — пробуйте выходить за пределы шаблонов, больше экспериментировать.
3. Адаптивность — при любых изменениях будьте готовы пробовать разные подходы.
В HRеальности мы делимся инструментами для развития метанавыков, прогресса в карьере и просто хорошим настроением.
Юбилейный сотый выпуск рубрики!
О том, что программисту неплохо было бы не просто формально выполнять требования из ТЗ, но ещё и стараться понимать, откуда такие требования возникли и с какой бизнес-задачей связаны. Это может повлиять на решение. Заодно показываю, как очеловечить, упростить и переверстать форму. 8 минут:
https://www.youtube.com/watch?v=yTIrl1jnEHU
Приходите на курс, там кайф и польза. Следующий курс пройдёт с 27 мая по 25 июня. Все подробности, программа и отзывы:
https://bureau.ru/courses/ui-online/
Бирман вдруг решил рассказать про кнопку:
https://bureau.ru/soviet/20230509/?utm_source=tg-s-s-090523
Что если пропущенное обязательное поле — это не ошибка?
Такая вам мысль на ночь. Человек заполнил форму, нажал кнопку «Купить» или там «Пожаловаться». Но не заполнил какое-то обязательное поле. И мы ему говорим: «Ошибка! Заполни вот тут и вот тут».
Но ведь это противоречит принципу человечности. В чём ошибка-то вообще? Кто сказал, что человек что-то нам должен делать определённым образом? Он и так что-то нам сказал, постарался. Если нам надо знать больше, мы ж можем просто спокойно переспросить, не ругаясь и не крася ничего красным.
То есть самая идея, что есть какое-то поле, и оно может быть обязательным — совершенно не из мира людей. А в мире людей — «Нам бы ещё ваш номер, чтобы прислать уведомление, когда будет готово».
Двойной тупняк в интерфейсе кассы самообслуживания.
Сначала, когда жмёшь заплатить, тебе пишут «Следуйте инструкциям...» и тут же «Позвать продавца», что в этом контексте воспринимается как раз как инструкция и вообще единственный вариант продолжения (на самом деле нет). Большая стрелка в сторону терминала сделала бы сильно лучше.
Потом, как только прикладываешь карту к терминалу, на экране появляется «Попробуйте в следующий раз», как будто в этот раз что-то не сработало, но не надо отчаиваться, в другой раз получится, а пока шуруйте домой без еды. Большая зелёная галочка сделала бы сильно лучше.
Поучаствовал в подкасте «Фронтенд-уикенд». Наговорил полтора часа аж:
https://podcast.ru/e/3Nvl5B0bIea
Ютюб-версия:
https://www.youtube.com/watch?v=IxMjMljNDpM
В 15:35 начинается кусок про то, почему в Эгее нет Висивига и почему это очень сложно сделать. Теперь есть, куда посылать тех, кто говорит «просто возьми X». Послушайте, ну и если вы знаете, что именно я упускаю, расскажите.
А ещё в конце про проблемы современного айти. Если вы из айти, вероятно, вы часть проблемы!
Спасибо Андрею за приглашение.
Нашёл у себя какие-то древние .psw- и .pxl-файлы. Это Pocket Word и Pocket Excel — зачем-то Микрософт делал отдельные форматы файлов для своих программ на карманных компьютерах. Чем их сейчас открыть — не представляю.
Пошёл искать конвертер. Нашёл! Да вот только это сгенерированная промостраница, а реально такого продукта нет. Всё написано про PSW, но форме загрузки файлов даже не знает такого формата.
Очень удобно!
Видео по вторникам: микроанимации в Фигме
Небольшой видос про то, как сделать анимированное сердечко в Фигме:
https://www.youtube.com/watch?v=oOJ5StJr-pU
Сама анимация простенькая, но во второй части идёт полезный разбор того почему она была сделана именно таким образом. В частности, о разнице между ховером и маусэнтером и о том, как избежать ховер-эффекта сразу после клика (ведь курсор в этот момент по-прежнему над иконкой). Это всё полезно учитывать и при разработке.
Запилили с Константином Чухломиным инструмент для сравнения дистрибутивов Эгей.
Это полезно для тех, у кого своя тема оформления или другие кастомные штуки: при обновлении нужно понимать, что изменилось в системных файлах, чтобы сделать аналогичные изменения в своих. Выбираешь, какие версии хочешь сравнить, и смотришь на интерактивный дифф по файлам:
https://blogengine.ru/compare/
В основе — программа Константина, которая берёт гит-репозиторий и генерирует статические файлы для сравнения любого тега с любым:
https://github.com/chuhlomin/diff
Как-то такое явление, как бергштрих, прошло мимо меня. Обожаю суперэффективные графические приёмы. Представляю, как изобретателю сказали: «да это никто не поймёт!», а он забил на эти глупые слова.
Читать полностью…Ещё один спич про то, когда нужна, а когда не нужна визуализация. Например, визуализация иногда помогает выявить манипуляции с данными. 4 минуты:
https://www.youtube.com/watch?v=9pf94f8Mz7Q
Следующий курс пройдёт с 27 мая по 25 июня:
https://bureau.ru/courses/ui-online/
Пример нарушения логики прямого влияния и принципа «Дай нажать» из Эпл-напоминалок.
Пытаюсь поставить напоминалку на 29 мая, пишу «29», а он пишет поочерёдно «02», «09». Что за чёрт? Потом понял, что там следом «02.2023», а в феврале 2023-го не было 29-го числа, вот он и не даёт такое вписать, дурила.
Нарушение логики в следующем: более поздний по порядку чтения элемент влияет на более ранний элемент. Это всё равно, что чекбокс в конце формы влиял бы на наличие поля в начале. Так нельзя, влияние может быть только в прямом направлении.
Про принцип «Дай нажать», там тоже есть пример с календарём:
https://ilyabirman.ru/meanwhile/all/let-me-click/
Как рисовать карты и схемы для информирования о челябинском транспорте
Снял видеоурок для сотрудников челябинских транспортных ведомств, но полезно будет всем любопытным дизайнерам:
https://www.youtube.com/watch?v=KdSpM_JfDgw
Рассказываю основные принципы и приёмы, используемые при подготовке карт с информацией о челябинском транспорте. Показываю на примерах. Перерисовываю одну карту из внутреннего документа, чтобы показать, что это быстро. Заодно какие-то штуке в Фигме комментирую базовые.
Совет с участием фотки фрагмента моего книжного шкафа:
https://bureau.ru/soviet/20230425/
Неделю назад писал про свет в предбаннике «Вая», из-за отсутствия которого кажется, что ресторан закрыт, когда он открыт. И что вы думаете? Иду сегодня, а свет горит! Респект.
Читать полностью…18 мая пройдёт день открытых дверей в Школе дизайнеров бюро
18 мая, в четверг, в 19:30 мск Илья Бирман, преподаватель дисциплины «Интерфейс и информация», расскажет в прямом эфире, кому будет полезна Школа дизайнеров, к чему готовиться и как сделать хорошее вступительное задание. А также расскажет, как вообще придумать интерфейс.
В конце эфира — сюрприз!
Записаться бесплатно
Эта и другие новости на сайте бюро:
https://bureau.ru/news/2023/school-designers-dod-180523/