Навигация для поставщиков «Вайлдберрис»
Рассказал об огромном проекте — навигации для поставщиков «Вайлдберрис»:
https://ilyabirman.ru/wb/suppliers/
Почитайте. Там главное — сам подход. Навигация — это не таблички нарисовать, а придумать весь сценарий, как человек что-то находит, и даже как он вообще понимает, что ему надо искать. В проект вошли и таблички, и схемы, и печатные инструкции, и мобильный сайт, и светодиодное табло, и банер. И это всё — системно для кучи разных складов.
Артём Горбунов поделился дебрями настройки Макоса. Тут в подписи сразу все грехи синтаксиса:
— невозможное повелительное наклонение (глагол должен быть в начальной форме: «отключить»; не «сохраните как...», а «сохранить как»);
— неуместный совершенный вид (это не однократная команда «отключить», а настройка образа действия, то есть надо «отключать»);
— усложняющая восприятие отрицательная формулировка (должно быть «включать только если нужно»);
— стоп-слова («Вам», «это»).
Но даже если синтаксис будет безупречным, смысл этой фигни всё равно непонятен. Как, кем и когда определяется нужность? Если это настройка приоритетов сетевых подключений, то она и так делается в другом окне, где ты просто расставляешь их в порядке предпочтительности использования.
За годы Эпл прошёл большой путь от «эти примеры мы используем для иллюстрации всего хорошего» до «на этих примерах можно показать всё говно».
Прямой эфир в 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
Чтобы помелить кий, не надо крутить мелок вокруг наклейки; надо просто поводить мелком по наклейке, как бы погладить так, чух-чух. Представьте, что вам маркером надо закрасить кружок на бумаге — вы ж не будете ввинчивать маркер в бумагу? Просто проведёте аккуратненько несколько раз, и всё. Вот так и тут надо.
Круглые дырки в мелках во всех бильярдных свидетельствуют о том, что этого никто не понимает.
Фоткай ровно
Гуляя по Питеру, снял специальное обучающее видео для тех, кто спрашивал, как и на что я так красиво фотографирую.
Секрет прост: я держу телефон прямо! Никто не хочет верить, что в этом всё дело, но на самом деле никто просто не пробует. Реально все остальные люди зачем-то наклоняют телефон как попало и ждут, что у них получатся не кривые кадры. Но с чего?.. Это уму не постижимо. Просто возьми телефон ровно! Этой нехитрой идее и посвящено видео.
В видео не раскрыта тема того, что 90% людей вообще снимают вертикально, потому что я не представляю, как снять такое видео, которое меняет ориентацию по ходу. Давайте исходить из того, что вертикальные кадры в принципе бессмысленны изначально.
В список кофейных мест добавились Колорс, Подписные издания, Кофе на кухне и Характер кофе в Санкт-Петербурге:
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/