Прямой эфир в 19:30 мск
Через час начнётся день открытых дверей в Школе дизайнеров бюро.
Илья Бирман, преподаватель дисциплины «Интерфейс и информация», расскажет в прямом эфире, кому будет полезна Школа дизайнеров, к чему готовиться и как сделать хорошее вступительное задание. А также расскажет, какие навыки нужны дизайнеру, чтобы быть востребованным специалистом.
В конце эфира — сюрприз!
Трансляция в ВК
Эта и другие новости на сайте бюро:
https://bureau.ru/news/2024/school-designers-dod-231024/
У нас тут в бюро такая затея с 7 по 31 октября: делаешь или покупаешь что-то — получаешь бонус. Называется «бюропропуск». Сначала надо просто почту оставить на странице этого пропуска:
https://bureau.ru/news/2024/bureaupass/
За это уже дадут 10% скидку на любую книгу или полку, а также +1 к вашему КПД. Если собирались покупать книгу, есть смысл это сделать через пропуск. Дальше надо подарить кому-то любую нашу книгу, тогда вы сами получите год подписки на мою книгу «Пользовательский интерфейс» и ещё +2 к КПД. Ну и там дальше так же нанизываются ещё всякие штуки, плоть до розыгрыша бесплатного обучения в школе, поглядите.
Заодно: нейросети́, которая генерирует подкаст на любую тему, подсунули в качестве исходного материала текст, состоящий из кучи слов poop и fart. И она сделала почти 10-минутый выпуск подкаста на эту тему.
Восхититесь тем, что умеют делать нейросети, а также осознайте, что качество контента большинства «настоящих» подкастов не намного выше. Точно также люди изображают заинтересованность в полной туфте и «с выражением» по сценарию обсуждают её в течение положенного времени.
Один из клиентов любит проводить встречи через Яндекс-телемост. Это удивительная программа, где нет горячих клавиш для включения и выключения звука и видео (или они засекречены), но самое волшебное — программа не в состоянии запомнить, как меня зовут. Каждый раз она предлагает мне назваться Guest, а я должен ввести имя заново. Хотя возможность сохранить в файл то, что указал пользователь, доступна на компьютерах дольше, чем я живу. Где-то с третьей встречи я уже остался Гестом навсегда, потому что ну нельзя же так.
Читать полностью…Макет в размер
В мире полиграфии кроме Корела есть ещё одна дикость — это так называемые «макеты в размер». Делаешь ты, например, макет листовки A4, соответственно, задаёшь размер холста 210×297. Рисуешь, сохраняешь, отдаёшь. Тебе говорят: «Пришлите макет в размер».
Дело в том, что у тебя размер, например, был указан в пикселях, а при сохранении в миллиметры они перевелись по неведомой формуле, и поэтому в файле где-то в метаданных указано, что он, допустим, 74,1×104,7 мм. И кому-то по необъяснимой причине до этого есть дело!
Я, честно говоря, даже не знаю, где печатники это смотрят, и почему им не наплевать, что там написано. Какая разница, что там за цифры? Макет векторный, пропорция правильная, чё вам ещё надо? О размере договаривались, когда вы счёт выставляли. Можно подумать, если я в файле пропишу 297×420 миллиметров, вы за те же деньги напечатаете мне на А3! Нет ведь.
Понятно, что если бы я делал в Иллюстраторе, я бы мог выбрать там миллиметры, но, например, в Фигме вообще такого нет. Так что мне теперь, использовать неудобный инструмент из позапрошлой жизни просто чтобы в метаданных вы увидели цифры, которые вы и так знаете?
Код региона
Одна из вещей, которые взрывают мне мозг — это код региона на российских номерах.
На советских номерах были буквы: в Челябинске было ЧБ, потом ЧВ и вроде даже ЧГ, но это я могу уже выдумывать. Так или иначе эти буквы имели какое-то отношение к названию.
Потом придумали новый формат номеров — видимо ёмкости старых номеров перестало хватать. Вместо букв придумали бессмысленные коды регионов. Зачем, почему? Причём регионы как-то расположили примерно по алфавиту, но не совсем, а Москву и Санкт-Петербург поставили примерно в конец списка, но не совсем, с кодами 77 и 78. Код 99 отдали Байконуру.
Ну и придумали эту систему так, что уже через несколько лет номеров для Москвы перестало хватать, и Москва захватила коды 97 и 99 (пофиг на Байконур), а потом и 197, и 199, а сейчас этих кодов в Москве столько, что никто их полного перечня не знает.
Челябинской области 74-го региона хватило, может, лет на десять, потом появился 174, а щас и 774. Почему после 1XX вводят 7XX? Потому что 7 влезает легче, чем другие цифры! Реально, код региона выбирают исходя из того, какая цифра занимает меньше места, поэтому в Москве бывает и 799, и 797, и 977.
Это классический пример ситуации, которая в интернете называется you had one job. Людям надо было придумать новый стандарт номеров, которого бы хватило на дольше, а его хватило на меньше, и при этом в его частях нет никакого смысла.
Если код региона в принципе хоть для чего-то нужен, то у каждого региона он должен быть ровно один, а нужная номерная ёмкость должна обеспечиваться другими средствами.
Есть 2 км за сеанс
Сегодня у меня большое достижение — наконец-то я проплыл 2 км меньше, чем за 45 минут!
45 минут — важная для меня отсечка, потому что это классическая длина сеанса в бассейне. Пока я плавал в университетском бассейне, задача всегда ставилась как «проплыть как можно больше за эти 45 минут». Сейчас я плаваю в бассейне без сеансов, поэтому я просто плыву 2 км как успею. И вот сегодня успел за 44:18.
Оказалось, что это даже классифицируется как третий юношеский разряд. Там 1500 м за 35:40 надо проплыть, а я, получается, за 33:14 проплыл где-то; а за 31:40 уже будет второй — есть к чему стремиться.
Буль-буль.
Студенты сделали курс про Фигму для редакторов
Скоро очередная защита дипломов в школах бюро. Одна из моих команд (где я арт-директор) сделала онлайн-курс «Фигма для редакторов». В команде — Лидия Ульянова, Александр Линченко, Илья Поликарпов, Дена Скульская. Как полагается, это прям продукт: кроме самих уроков курса ребята задизайнили и собрали промостраницу, придумали как всё упаковать и продавать.
Как артдиректор я следил не только за промостраницей курса, но и за самими макетами, на которых ребята показывают разные функции Фигмы. Например там есть урок, где учат собирать другую промостраницу на всяких автолейаутах и стилях — я вот смотрел, чтобы сама эта учебная промостраница тоже была нормальной.
Я ещё выступил в роли методиста — повлиял на саму структуру учебной программы, чтобы она не слишком уж загрузной была и как-то дозированно вводила новые идеи. В первом уроке там вообще вёрстка объявления, которое можно было бы и в Ворде написать — это чисто знакомство с базовыми инструментами Фигмы.
Там ещё мне нравится, что вместе с уроками Фигмы ребята ненавязчиво дают уроки того, как аккуратно дизайнить — упоминаются правила внутреннего и внешнего, закон Фиттса и всякое такое. Мне кажется это уместным, учитывая, что курс позиционируется для редакторов. Это они сами придумали.
Зацените:
https://proeditor-figma.ru/
Кстати, если вас что-то смущает в программе курса, расскажите, а я передам команде.
Наконец-то опубликовал февральский доклад с симпозиума транспортных картографов в Абу-Даби. Рассказывал про свои транспортные схемы, конечно.
Ютюб:
https://www.youtube.com/watch?v=BJ7kbxDaGHo
ВК:
https://vk.com/video286049442_456239422
Наверное многие из вас посмотрели вчера видосы чудо-приземления сверхракеты. Мне, как ни странно, больше всего понравились всякие видосы обычных зевак, снятые издалека. Летит какая-то спичка в небе, а потом бац — вспыхивает и потом втыкается в держалку. На один из видосов кто-то наложил саундтрек из «Интерстеллара», вообще красота.
Читать полностью…Приятно, что нашу схему метро Ташкента люди печатают и вешают себе. Она правда очень красивая, а ещё — инновационная из-за небывалого совмещения геометричных линий и географичного фона.
Подробно тут:
https://ilyabirman.ru/tashkent-metro/
Несколько примеров контекстных интерфейсов, которые как бы вклинились в основной сценарий.
Лет десять назад Людвиг Быстроновский объяснял, что на любом сайте нужно делать раздел новостей, даже если клиент об этом не просит, просто чтобы когда клиенту захочется что-то написать на сайте, у него было для этого место, а не приходилось влезать непойми куда.
В сложных сервисах дизайнерам приходится предусматривать много мест, куда можно влезать с отсебятиной. Должна быть возможность аккуратно добавить сообщение, оговорку, примечание, без необходимости затевать дизайн и разработку.
Думаем дальше № 26 «Отборные фотоны попадают в твою камеру» с Димой Бирманом
С Димой Бирманом говорим про чудеса цифровой фотографии.
0:00 — Кто такой Димочка
2:28 — Победят ли Айфоны полноценные камеры
3:59 — Есть ли хоть какой-то смысл в цифровом зуме на Айфоне
12:12 — В чём смысл 48-мегапиксельной камеры Айфона, которая как бы и 12-мегапиксельная тоже
15:55 — Оптики Айфона хватит на 100 мегапикселей, а потом дифракция всё испортит
19:11 — Фотки на фотоаппарат выглядят круче. В чём дело? Обсуждаем разрешение, резкость, контраст, блуминг, портретный режим и идею обучить нейросеть приводить айфонные фотки к «взрослому» виду
31:12 — Что, если взять взрослую оптику и Эпл-математику
34:58 — Функция «Никогда не пересвечивать» и почему нельзя нормально её назвать в меню
37:04 — Физические крутилки и электронный затвор. Настоящий затвор «защищает тебя от фотонов на 100%»
40:54 — Глобал-шаттер и роллинг-шаттер
43:54 — Почему в Айфоне нет роллинг-шаттера: он читает матрицу очень быстро, а ещё видит, что свет меняется по синусоиде
46:20 — Фоткание мигающего света и светодиодов
49:31 — Фокусировка, компромиссность режимов AFS и AFC, переворот смысла при бёрсте и как должно быть
59:16 — Почему терминология такая запутанная и почему в плёнке 36 кадров
63:31 — Если назвать всё понятно, люди пойдут на баррикады. Обсуждаем альтернативный мир понятной терминологии
70:24 — Нейровыдумывание фотографий: плюсы и минусы. Самсунг дорисовывает Луну
75:26 — Как отслеживать фейки. Криптосертификация истинности фотографий в метаданных
Эпл · Ютюб · Я.Музыка · Мейв
Но лучше подписаться по РСС в подкастном приложении:
https://cloud.mave.digital/51724
Научился менять обои на Айфоне
Вы будете смеяться, но я научился менять обои на Айфоне.
В далёком прошлом это было легко: выбрал фотку да сделал обоями — или наоборот, зашёл в настройку обоев и выбрал фотку. Но потом Эплы придумали, что у тебя не просто обои, а как бы отдельные параллельные миры, внутри которых настраиваются виджеты, шрифт часов, обои локскрина, обои хоумскрина, а теперь ещё и нижние две кнопки.
С тех пор я перестал менять обои, потому что это воспринималось примерно как настройка нового Айфона с нуля: виджеты же надо все расставить, ещё что-то — проще плюнуть. Там ещё какая-то дурь, что если ты всё-таки пересилил себя и выбрал новые обои, он тебе ещё предлагает сохранить их как «пару» для локскрина и хоумскрина, и отказаться нельзя! Но он почему именно предлагает, а не просто делает! (Но отказаться нельзя.)
А, и жопа же ещё в чём. Вот ты, например, заставил себя сделать себе новые обои: прошёл все круги ада и всё настроил. Потом через два месяца ты подумал, что вместо виджета будильника тебе нужен виджет погоды, поменял. А потом ещё через месяц ты решил переключиться в те первые обои, по которым ты заскучил. Что произойдёт? Правильно, погода заменится обратно на будильник. Почему, какая связь? Это надо спросить у Эпла.
И вот на днях я, наконец, нашёл способ поменять обои без трахотени с виджетами и «парами». Возможно он всегда был, но я его просто не видел, а возможно он появился в одном из обновлений, я не знаю. Но когда всё эта канитель с переключаемыми мирами появилась, я очень-очень искал, и не нашёл. В общем, вдруг вы тоже не умели.
Записывайте:
1. Нажать и подержать на обоях на локскрине, чтобы включился режим листания вариантов обоев.
2. Нажать Customize.
3. Нажать Lock Screen.
4. Дальше лотерея. Если слева есть иконка фотогалереи, то вам повезло. Если её нет, то всё, вы проиграли лотерею и поменять обои не сможете. Как я понял, она есть только если вы изначально делали обои со своей фотографией. А если вы выбрали какую-то из картинок предложенных Эплом, то они это уже классифицируют как не просто картинку, а что-то такое особенное, что поменять нельзя. В общем, если вы выиграли лотерею и кнопка фотогалереи есть, то на неё надо нажать.
5. Найти как-то нужную картинку в фотогалерее. Открывшийся экран показывает фотогалерею, но вся навигация и логика в ней никак не соотносятся с тем, как устроено приложение Фотос, то есть там надо просто долго блуждать и изучать всё, и в итоге что-то найти и выбрать.
6. В этот момент на фотке появится синий кружок с галочкой, как будто вы выделяете несколько фоток. Тут вы испытаете растярянность, типа «чё, я могу несколько фоток выбрать?..», но Айфон через полсекунды вдруг сообразит, что нет, применит вашу фотку и покажет, как она смотрится на экране.
7. Очень важно: нажать Done! На всём пути очень важно не сбиться, но на этом шаге это критично. Когда ты уже видишь, как обои встали, хочется сделать движение пальцем снизу вверх — ну, типа, выйти из всего. Но если так сделать, то всё сбросится, и придётся начинать с начала. Важно именно нажать Done.
Доволен сегодняшним советом, где снова придумываю интерфейс, на этот раз для тренерского видеоредактора:
https://bureau.ru/soviet/20241008/
В прошлый раз тоже придумывал интерфейс, для израильских избирателей:
https://bureau.ru/soviet/20240924/
Приходите на консультацию, придумаю вам интерфейс для какой-нибудь задачи, которую вы давно не можете ловко решить.
В список кофейных мест добавились Колорс, Подписные издания, Кофе на кухне и Характер кофе в Санкт-Петербурге:
https://ilyabirman.ru/meanwhile/all/coffee-places/
На этих фоточках — Колорс.
Пример высокой информативности интерфейса из Фигмы.
Когда у инстанса компонента заходишь в пункт меню Reset, там можно сбросить разные аспекты отдельно: название, размер, цвета, отдельные свойства. Кайф в том, что Фигма показывает только те пункты, сбор которых что-то изменит, то есть те аспекты, которые действительно изменены по сравнению с мастер-компонентом. Таким образом меню вдобавок к функции сброса «бесплатно» приобретает функцию индикатора того, что отличает этот инстанс от идеального компонента.
Дизайнер интерфейса всегда должен стремиться к тому, чтобы выжимать максимум полезной функциональности из имеющихся элементов интерфейса, а не городить новые на каждый чих.
Большой выпуск про слова и гигантский выпуск про Нейролинк, демография России, 40 часов Джейсона Фрида и нейросеть, которая генерирует подкасты. Что послушать:
https://ilyabirman.ru/meanwhile/all/listening-76/
Хочу предупредить
Заказываю в кофейне некий сендвич. Бариста дослушивает, как я произношу его название, и говорит:
— Только хочу предупредить, что он закончился.
Я завис на пару секунд. Почему «предупредить» тогда?.. Бариста при этом выглядит так, что русский язык для него скорее всего родной.
Пока Дуолинго не испортилось совсем и я им пользовался, помню, больше всего меня бесило бесконечное геймификационное говно, которым меня заваливали после каждого урока. Я научился нажимать все кнопки мгновенно, но всё равно нужно было около 20 секунд (!!!) преодолевать препятствия, отделявшие меня от возможности пройти ещё один урок. Брр.
Но я уверен, что именно это всё и приносит компании успех, и что на большинство людей вся это хреномуть работает. Пользователи даже каким-то чудом замечают, что там есть персонажи с какими-то характерами, испытывают какие-то чувства к сове и кому-то ещё, собирают экспи и гемы (я не представляю, что это и зачем).
Сегодня мне как дизайнеру интересно понимать, как работают эти механизмы, но как пользователю совершенно не хочется иметь с ними дела.
Такое сообщение иногда показывает Фигма, когда не может открыть какую-то ссылку из-за каких-то неправильных настроек прав.
Тут написано, что надо обратиться к оунеру или админу, но в большой организации я понятия не имею, кто оунер, а кто админ. А даже в случаях, когда я знаю, если я показываю сообщение заведующему Фигмой, он говорит: «Хм, странно...».
Когда вы в своём интерфейсе предлагаете обратиться к админу, не забывайте, что пользователь, как правило, не представляет кто это, а админ не представляет, как это исправить. То есть суть сообщения пользователю сводится к «иди в жопу, программа не работает».
Но Фигму я всё равно люблю.
Бахилы
Везде, где нужно надевать бахилы, я вместо этого просто снимаю обувь, потому что носить бахилы в сто раз противнее, чем просто пройти в носках по полу.
И заодно вот пост из 2018 года:
Фак зонту
Никогда не беру с собой зонтик, потому что неудобство от таскания зонтика в сто раз выше, чем от попадания под дождь.
Эта картинка лежит у меня под названием google-urod.PNG. Каким-то чудом Гугль уже много лет показывает номер версии Макоса через подчёркивание вместо точки, и всем окей. Ну потому что наверное на метрики это не влияет же.
Читать полностью…Глагол понятнее
Недавно в связи с появлением Game Mode мы обсуждали проблемы режимов.
Есть общеинтерфейсное знание, что модальность (то есть «режимность») — зло. Суть режима в том, что он изменяет поведение привычных элементов управления. Из-за этого страдает предсказуемость и надёжность: ты вроде делаешь всё как обычно, а система работает иначе. Оказывается, там другой режим. Про это подробно написано у меня в книге:
bureau.ru/projects/book-ui/
Но помимо этой проблемы есть ещё чисто лингвистическая: режимы часто называются существительными. Например, отключение экрана у часов называется «режимом кино». А в обсуждении фототерминологии мы выяснили, что функция «Никогда не пересвечивать» может вдруг называться Highlight exposure mode. Функция «если блин я нажал кнопку фоткать, то надо фоткать!» называется Release priority. В машинах тоже дурдом: функция «соблюдать дистанцию автоматически» называется Adaptive cruise control.
Когда человек хочет, чтобы что-то как-то работало, он думает об этом глаголами: выключить экран, не пересвечивать, фотографировать по команде несмотря ни на что, притормаживать за другой машиной. Чтобы понять, что определённый паттерн действия называется существительным, в голове приходится проделывать некую работу.
Глагол — понятнее. Многие модальные интерфейсы выиграли бы от простого переименования режимов с использованием глаголов. Название Do not disturb — хорошее, а Silent mode — хуже. Кстати, это два разных независимых режима, что совершенно не укладывается у меня в голове.
Наша схема метро Ташкента обновилась и стала официальной:
https://ilyabirman.ru/tashkent-metro/map-2/
Над схемой изначально работали я и Тимур Репин, а в новой версии поучаствовали ещё Юля Череватая и Алибек Мусабеков.
Приходите за дизайном схем.
Прокрутка бумаги под пальцем
1. В 2007 году в бюро делали интерфейс для устройства «Эмгизмо»:
https://bureau.ru/projects/mgizmo/
2. Тогда Айфон мало кто видел, а тем более мало, кто понимал, как реализовать нормальную прокрутку. Для разработчиков «Эмгизмо» я снял (на Нокию) специальное объясняющее видео с чеком. Исторический документ!
3. Оказалось, что внутри Эпла дизайнеры объясняли разработчикам задачу на таком же примере. Инженер Эпла рассказывал в подкасте у Грубера.
Вот что заставляет людей так делать? Город всегда Челябинск, зачем его вообще писать? Мне нужно записаться в центр на Свердловском, но их, оказывается, два, поэтому нужно в соседней вкладке ещё открыть карту, чтобы выбрать правильный. Казалось бы, добавь рядом «Напротив „Мегаполиса“» и всё. А самый прикол, что когда уже выбрал правильный центр, под ним появляется ссылка «показать на карте». Спасибо, теперь-то уже я сам сходил посмотрел.
Иногда в работе мне начинает казаться, что делать нормальный интерфейс — это само собой и не требует специальных навыков. Ну просто делаешь нормально, чё тут специально уметь? Но потом я смотрю на окружающий мир и вижу, что для большинства людей делать нормально — это что-то недосягаемое.
Дальше разгребаю фрагменты интерфейсного курса, дошёл до 150-го:
https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-150/
От № 126 до № 150 — свежедобавленное, посмотрите.
Если всё смотреть лень, особенно рекомендую № 126 про решение, № 136 про отключение кнопки, № 139 про линейную подачу макетов (это ещё и про презентацию отчасти), № 144 про серенький текст в поле и № 148 про толщины линий.
Идёт запись на октябрьско-ноябрьский курс:
https://bureau.ru/educenter/ui-online/
Вещь, которая больше всего меня убивает в замедлении Ютюба — на картинке. Иногда ты включаешь видео, а в нём появляется крутилка, но при этом не исчезает кнопка плей! Я не знаю, как Гугль умудрился так напрограммировать, но такого не должно происходить ни при каком замедлении, это же просто невозможное состояние интерфейса. Кнопка плей при этом как бы нажимается всё ещё (но ничего не делает), то есть видео не считает, что оно играет. Поэтому, например, на паузу поставить (в надежде, что крутилка перестанет крутиться) тоже нельзя. Просто интерфейс ломается и всё. Нельзя так плохо писать код.
Читать полностью…Три парадигмы проектирования, определение формы барабана на слух, заработок диджея, расист ли Мэтт Уолш и из чего сделан английский язык. Что послушать:
https://ilyabirman.ru/meanwhile/all/listening-75/