Ещё кусочек интерфейсного курса вам. Подробно разбираем работу участницы.
Много неоднозначных, но интересных ходов. Классный приём линеаризации вариантов, который сильно упрощает подачу, но есть и минусы. Заголовки, объединённые со значениями полей, тоже и упрощают, и создают проблемы. Обсуждаем, что можно сделать с иконочками.
А потом говорим про кнопку, которая «думает», пока считает, и я рассуждаю о том, какими должны быть отношениях дизайнера и разработчика, чтобы кнопка считала мгновенно. Например говорю о том, что негодно делать дизайн для сообщения ошибки, не вникая с разработчиками в то, какие там вообще могут быть ошибки:
https://www.youtube.com/watch?v=CSvgFqJ8p1Q
Идёт запись на июльавгустовский курс (20 июля — 18 августа). Всё про курс, отзывы и кнопка записи:
https://bureau.ru/courses/ui-online/
Илья Бирман навалил базы про интерфейсные контролы: https://www.youtube.com/watch?v=KWSaJJsDvtw
Очень рекомендую. Я три раза пытался остановить это видео, потому что некогда смотреть, но не смог, слишком залипательно. Ну и ещё я форварднул примеры своим ребятам и попросил так же сделать. То есть прям пользу извлёк.
Ужасно стыдно было за всех, кто в зале. Они же разработчики. Там ещё так красиво всё снято, постоянно зрительный зал показывают, и люди такие сидят немножечко смущённые. А Илья им говорит «КАК БЛИН МОЖНО БЫЛО ТАК СДЕЛАТЬ 😑», а они такие «но мы же не виноваты 😔, это же не мы», а Илья такой «ДА ЗНАЮ Я ВАС, ВЫ ТАМ У СЕБЯ НЕБОСЬ ТАКОЕ ЖЕ ДЕЛАЕТЕ 😑», и они такие «вообще если честно, то да 😔, но это потому что...», а он им «ЗАПРЕЩАЮ 😑», и они грустные сидят.
Наверное, ещё и поэтому пришлось полностью смотреть.
Всё забываю спросить, как у вас дела в офисе! (Вроде начало получаться заезжать на волну и съезжать с неё иногда)
Читать полностью…Кстати о Тиндере! У меня тут вдруг назрела необходимость переустановить Виндоус.
Мне досталась ЭВМ ИБМ Цинкпад с ОС Виндоус Экс-Пи, владелец которой забыл пароль от неё, потому что не пользовался ей лет пятнадцать (привет, пап). А у меня как раз нашлось применение для старого компьютера.
Мне надо всё снести и поставить какую-нибудь ОС, которая будет работать на уровне «подключаться к вайфаю и открывать сайты в интернете».
Как это сделать? Где прочитать мануал? Или надо вызывать компьютерного мастера из объявлений у подъезда? Или и вызывать бесполезно и такой компьютер в принципе не откроет сегодняшний интернет с его протоколами шифрования? Или он к современному вайфаю не подключится? А если эзернет в него воткнуть? Научите.
Приходите на курс!
А вот вам и публичное выступление, кстати: Яндекс выложил мой доклад с июньской фронтенд-конференции:
https://www.youtube.com/watch?v=KWSaJJsDvtw
Вижу в студенческой работе такое, пишу комментарий:
В диапазонах с минусом вместо тире лучше ставить многоточие, не дублировать единицу измерения и писать значения в порядке возрастания: −45...−25 °C.
Объявление для челябинских ↑
Приходите в главный попсово-танцевальный дворик города сегодня вечером, буду ставить разные хорошие песенки. Начать рассчитываю прям с Ace of Base: All That She Wants, но это как пойдёт.
Эй, Сири, когда прилетает моя мама?
У Эпла на презентации их Яблочного интеллекта был пример, где девушка спрашивает у Сири, когда прилетает её мама, а телефон сам понимает, кто её мама, и находит номер рейса в переписке, и выводит время прибытия. В «Ток-шоу» Джона Грубера обсуждали этот пример, и там предполагалось, что где-то переписке с мамой таки был этот номер рейса.
И вот с одной стороны да, было бы круто, если бы Сири смогла это распутать: понять, где мама; что я переписываюсь с мамой в Телеграме, а не Аймесседже; вычленить релевантный номер рейса; найти информацию по нему; рассказать мне.
А с другой — ну жизнь-то ещё в сто раз многообразнее. Начнём с того, что я легко могу себе представить, что номер маминого рейса мне пришлёт папа. Или но́мера рейса в переписке может вовсе не быть, но зато может быть примерное время прилёта. И тогда Сири должна догадаться не просто это время вывести, а найти рейс, который в это время прилетает, и отследить, не задерживается ли он. Или вместо номер рейса мама может прислать PNR и попросить зарегистрировать.
Стоп, а откуда мама прилетает? Это я из другой переписки или даже личного общения знаю, что мама прилетает, допустим, из Питера, и поэтому примерного времени прилёта (или даже понятия типа «вечерним рейсом») мне достаточно, чтобы найти рейс. А Сири-то откуда это поймёт? А что, если в переписке ни разу и не упоминалось, что мама рейс из Питера, но у мамы в инсте фотки оттуда в последние дни? И мама знает, что я знаю, что она в Питере, потому что я там лайки ставил и каменты писал?
А недавно мне нужно было встречать мамину подругу, и она прислала мне номер рейса в виде мыльного мобильного скриншота маршрутной квитанции в А4. Если зазумиться, можно было примерно разглядеть номер рейса, и выбрать нужный, сверившись с реальным табло прилёта на сайте аэропорта.
А откуда прилетает мамина подруга? Из общего контекста общения я знал, что из Лондона, но я даже примерно не представляю, из какой именно чьей реплики и в какой момент я это узнал. Рейсов Лондон — Челябинск не было даже в хорошие времена, но зато сейчас если знать, что она летит с одной пересадкой, можно выбрать между Антальей и Баку. Ладно, в том скриншоте можно было увидеть, правильный ответ, но если бы скриншота не было, а было бы только время прилёта, а рейс бы задержали? Я бы легко это распутал, а вот в случае с Сири, мягко говоря, как-то верится с трудом.
Можно подумать, что я требуют от Сири детективных способностей. Но живой человек решает такие «детективные» задачи, соединяя пять разрозненных фактов, по сто раз в день, даже не задумываясь. И общаясь, мы ожидаем друг от друга элементарного умения «сложить два и два», мы говорим: «ну и так ведь ясно», не разжёвываем очевидное. По идее компьютеру в будущем такое будет в сто раз проще и мы будем удивляться: как он вообще вычислил что-то совершенно неизвестное?! А оно известное, но соединить надо будет не пять, а двести разрозненных фактов. Но такое будущее пока кажется очень далёким.
И ещё одна важна вещь. Пример с выбором между Антальей и Баку уже кажется натянутым — с таким наборов вводных я бы, скорее всего, сам пошёл переспрашивать, а не просто поехал бы в аэропорт. Но Сири-то никого переспрашивать не пойдёт! Если ей не хватит данных в её «семантическом индексе», она просто скажет, что ничем не может помочь, и ты даже не узнаешь, какого кусочка информации ей не хватило. Или, ещё хуже, с уверенностью выдаст неправильный ответ. Если знакомый попросит встретить его в четверг в час ночи, то живой человек на всякий случай переспросит, со среды на четверг или с четвергам на пятницу. А компьютер самонадеянно выдаст неправильный ответ. В этом беда со всеми этими ЧатамиГПТ, что они не умеют задать встречный вопрос, если сомневаются в чём-то. Размер окна контекста не влияет на тот факт, что всегда получается обмен репликами одна на одну.
Умный дом: от любопытства до нового качества жизни
Реклама · Текст клиента
Наверняка, об умном доме уже очень многие не только слышали, но и даже успели попробовать. Например, поставить умную лампочку и управлять ее яркостью через мобильное приложение или включить робот-пылесос с помощью голосового помощника.
В действительности, возможности умного дома намного больше: это и забота о здоровье, и безопасность дома, и освобождение от ненужных рутинных процессов, и тонкая настройка освещения по разным зонам. И всё это с учетом привычек и пожеланий пользователя.
Например, все мы знаем, как трудно просыпаться по утрам. Чтобы облегчить этот процесс, можно настроить биодинамическое освещение. Например, по звонку будильника включается холодный свет для правильного пробуждения и создания настроя на рабочий день. А вечером, когда человек приходит домой, шторы автоматически закрываются и включается теплый свет средней температуры, чтобы можно было расслабиться и плавно подготовить организм к ночному отдыху.
Создать индивидуальную систему умного дома помогут инженеры diHouse PRO. Концепцией diHouse PRO является то, что современные беспроводные системы – это удобно, современно, мобильно и доступно по цене. Слово «система» только звучит масштабно и дорого, но на деле она реализуема даже за вменяемый бюджет. Все решения можно оценить в шоуруме на Artplay или получить удаленную консультацию, если вы не в Москве
О римских цифрах
С веками имеет место жопа: 1736 год приходится на 18-й век и 2-е тысячелетие. Достаточно было додуматься считать с нуля, чтобы этой кривости не было — но на то нужен программист.
Однако этого людям мало, они ещё и пишут века римскими цифрами: «Моцарт жил в XVIII веке». Любой грамотный человек понимает числа в римской записи, но чтение отнимает больше сил, чем надо. Зачем усложнять жизнь читателю и отвлекать его от сути сказанного?
Традиционно римские цифры используют, чтобы избежать наращения падежного окончания порядковых числительных (ср. «XXII съезд» и «22-й съезд»). Но в падежном окончании нет ничего страшного, оно только помогает чтению. Опустить его можно, когда оно очевидно из контекста, например 1736 год в начале вряд ли кого-то смутил. Подозреваю, что если начать последовательно писать века арабскими цифрами, необходимость в наращении окончания отпадёт и здесь: 18 век.
Римские цифры — дебильная традиция, которой пора на свалку.
(Посту 10 лет)
Видео по вторникам: Осло — это вообще город?
https://www.youtube.com/watch?v=8vhD59ac7nw
Написал большой пост про новую Фигму:
https://ilyabirman.ru/meanwhile/all/figma-2024/
Не только про отлипшие панели, но и про саму презентацию, про работу интерфейсных дизайнеров, про эй-ай и про слайды.
Максимальный ретвит!
Есть такой мультяшный 3Д-редактор на веб-технологиях, Сплайн. У него панели отступают от краёв экрана и за ними просвечивает твоя сцена. Такая же хрень в Миро — всякие тулбары висят над контентом, и я давно говорил им, что это они зря.
А вот и Фигма анонсировала аналогичное ухудшение. Это подаётся под соусом «ваш контент занимает весь экран», но реально контент занимает даже меньше, чем раньше, потому что тулбары сдвинулись в его сторону. А то, что между тулбарами и краями теперь просвечивает 10-пиксельная полоса — это не контент, а мусор, который ещё и шевелится там зачем-то, когда ты скролишь и зумишь холст.
Надеюсь, эти отступы хотя бы можно будет отключить и вернуться к классическому, взрослому, эталонному дизайну панелей Фигмы.
Пример интерфейса, понять который невозможно, если не знать, что имел в виду программист. Такого надо избегать. Проверьте, что делаете вы.
В чём тут идея. Приложение может поменять свою иконку, это полезная фича. Но злоумышленное приложение так может выдать себя за другое и таким образом склонить пользователя к чему-нибудь там. Поэтому ОС не даёт программе поменять собственную иконку по-тихому, а показывает пользователю. Задача этого окна — убедиться, используя глаза пользователя, что приложение осталось собой на вид.
Что получилось. Окно показывает две одинаковые иконки, одна указывает на другую, и предлагает удалить приложение. Пользователь не понимает, что от него хотят, жмёт что попало. Проверки не происходит.
Как надо было. Перевести на язык пользователя то, что хочет от него программа, а не заставлять гадать. Например:
Замена иконки „Вконтакте“
Иконка подходит приложению?
A → B
[ Не подходит ]
[ Подходит ]
А уже если пользователь нажал «не подходит», объяснять про опасности и предлагать удалить.
Почувствуйте важность согласования замечаний
В бюро есть важная идея о работе с замечаниями клиента, что замечания нужно согласовать, то есть отсортировать на три категории: 1) взять в работу в конкретном виде; 2) снять; 3) взять таймаут, а уже потом поместить в одну из первых двух категорий. 11-летний-назад совет Артёма Горбунова:
https://bureau.ru/soviet/20130624/
Это подробно разбирается в лекциях и книге Коли Товеровского об управлении проектами.
Есть ещё и видео, где Артём это объясняет:
https://www.youtube.com/watch?v=WIFG_yQMCz8
И всё же начинающим дизайнерам и студентам наших школ трудно это даётся (про другие школы я и подумать боюсь). Они пытаются исправлять замечания в каком-то одним им понятном порядке и не понимают, почему в проекте наступает ад. Арт-директор требует согласовать замечания, а студенты продолжают их исправлять! Все страдают, не спят ночами, дедлайн сдвигается непонятно куда.
При этом требование согласовать замечания кажется каким-то ненужным формализмом. Типа, клиент или арт-директор просто хотят, чтобы студенты сделали всё «по процедуре», вместо того, чтобы посмотреть на суть работы.
Недавно записывал своим студентам объяснительный войс на эту тему. Он эмоциональный, потому что я пытался донести до них, насколько усложняется жизнь клиента без согласованных замечаний. Согласование — это не просто формализм; это радикальная разница между дизайнером, которому можно доверять, и дизайнером, которому доверять нельзя. Ну и разница в зарплате на порядок между такими дизайнерами тоже легко объясняется ощущениями клиента от работы с ними.
Послушайте, если вы вдруг тоже не понимаете
↓
Запилили блиц-редизайн сайта «Уникорн»:
https://ilyabirman.ru/unicorn/
Приходите тоже за блиц-редизайном.
Ночь — это Тиндер
С вами рубрика «Как работает мой мозг».
Проснулся я сегодня с мыслью, что была такая приятная песня у Алёны Свиридовой, «Ночь нежна». Нахожу — выясняется, что это была не Свиридова, а Валерия — включаю, слушаю:
https://www.youtube.com/watch?v=UwIUna-CPG0
Откуда-то вспоминаю, что по-английски роман назывался Tender is the Night. Естественно, преобразую это в Tinder is the Night. Наверняка, это и до меня придумали? Да. Но что ж теперь?
Последний день: 7 июля в 23:59 мск закрывается запись на практический курс Ильи Бирмана и Михаила Нозика «Презентация клиенту и публичные выступления».
Записаться на курс заранее до 7 июля
Презентация клиенту и публичные выступления 8—28 июля
Эта и другие новости на сайте бюро:
https://bureau.ru/news/2024/presentation-online-open-20240708/
Выпустили суперглаву Labels книги Designing Transit Maps — английской версии «Дизайна транспортных схем». Новость на сайте бюро на английском:
https://bureau.ru/news/2024/book-metro-labels-en/
Покупайте и читайте! Книга просто нереально крутая для всех дизайнеров и вообще любопытных ребят.
И там есть бесплатная демоглава про изгибы.
Английская книга выходит сразу с мобильной версией.
Скиньте англоговорящим коллегам.
В аудио по четвергам Mario De Los Santos: Let Me Go —
https://ilyabirman.ru/meanwhile/all/mario-de-los-santos-let-me-go/
Эта музычка мне очень понравилась, потому что она отсылает к цикличным мелодиям из заставок Муз-ТВ. Прямо представляю себе, что под какую-нибудь заставку перед рекламой крутится крутилка под эту музычку.
Когда я вижу запись даты с днём в кавычках, в моей голове сразу рисуется человек, показывающий воздушные кавычки. Типа, «третье», хе-хе.
Читать полностью…Бирман учит изобретать велосипед. Точнее, велотренажёр:
https://bureau.ru/soviet/20240702/?utm_source=tg-s-s-s240702-020724
Открыл какую-то статью о дизайне по ссылке с Оди, а там: «когнитивная лёгкость — дизайн неудачный». А я думал наоборот, если лёгкость, то удачный!
В данном случае нужно было использовать курсив, а не жирность.
Жирность нужна, чтобы выделить что-то в тексте заранее, чтобы человек это выхватил, не читая текст целиком, а курсив нужен для интонационного выделения, чтобы человек обратил особое внимание на эти слова, когда будет читать по порядку.
Рассказывал об этом на курсе, кстати:
https://ilyabirman.ru/meanwhile/all/ui-course-frag-96/
Думаем дальше № 21 — «У двери есть полезное действие продаться» с Мишей Нозиком
С Мишей Нозиком, который купил микрофон, обсуждаем, как нежно добиваться своего и что идея «естественной задачи» тесно связана с полезным действием.
0:00 — Быть хорошим партнёром или настаивать на своих правилах? Ложная развилка
6:01 — Забота о себе с заботой о других
10:27 — Взять задачу — не одолжение
12:03 — Если переоценил свои силы, передоговориться или не спать ночь, но сделать?
16:38 — Илья и договоры
21:07 — Если клиенту надо вчера, то отказаться — норм
26:19 — Выход 13а в Домодедове и предпроектные процедуры в бюро
32:02 — Как отказывать на Кинки-пати
34:00 — Комфорт выступающего докладчика
39:22 — Естественная задача. Как оценивать дизайн, не зная интересов бизнеса
45:00 — Пример неочевидной задачи Гисметео → https://bureau.ru/projects/gismeteo/
50:22 — Дизайн Фейсбукинга: не говори, что у тебя хороший дизайн, прекрываясь тем, что ты успешен
54:11 — Хороший дизайн и полезное действие
1:00:41 — Уведомления о днях рождения в Телеграме и почему дизайнеры портят продукт
1:09:05 — Работающие логотипы с плохим графдизайном
Эпл · Ютюб · Я.Музыка · Гугль-подкасты · Мейв
Но лучше подписаться по РСС в подкастном приложении:
https://cloud.mave.digital/51724
У меня любимый пример тупняка в интерфейсе — когда при регистрации тебе красным цветом говорят: «Ошибка! Эта почта уже занята! Введите другую!»
Идиот, так это моя почта! Значит у меня уже есть акаунт, но я просто забыл об этом. Никакой ошибки нет, просто предложи мне напомнить пароль и пусти.
А вот Илья Синельников ещё принёс пример подобного. Аутлук ставит красный крест говорит: «Не могу заблокировать этого отправителя! Он уже заблокирован!»
Просто уму не постижимо, в насколько оторванном от реальности состоянии работает программист, что он выводит такое сообщение. Нужно же хоть иногда приходить в сознание и понимать, что за текст ты выводишь пользователю.
Знаки чистоты и порядка в Нью-Йорке:
https://ilyabirman.ru/meanwhile/all/new-york-cleanliness/
Бюро анонсировало курс ретуши:
https://bureau.ru/courses/retouching/
А я заметил, что панель Фотошопа слева на обложке курса в таком контексте играет совершенно по-новому, как надпись из иероглифов японской картине.