1. Ох уж этот современный интернет. Скинули ссылку, открываю. Как видите, на десктопе. Видимо, автор считает, что 1024 — это не десктоп?
2. Уменьшаю масштаб на один шаг ⌘-минуса (обычно помогает на таких сайтах). О, слова про «бест юзер-экспириенс». Да куда уже бесте́е! ⌘W
Доллар в регвыражениях не всегда означает конец строки
Долго боролся сейчас с одним багом, поэтому пишу себе, чтобы не забыть.
Есть регулярное выражение (для примера):
/(some|any)thing$/i
/(some|any)thing$/iD
Во втором выпуске подкаста обсуждали шизоидное использование интерфейсных элементов на Ютюбе, как будто ребята ваще не в теме того, зачем они, как их комбинировать. Возможно, кстати, этот дизайн делала нейросеть, все признаки налицо: просто взято чё попало, чтобы внешне было похоже на интерфейс.
1. Вот один из шагов загрузки видео. «Есть ли в вашем видео или его метаданных следующие материалы?» Тут идёт набор выпадаек, из которых, видимо, надо что-то выбрать. Типа вместо ненормативной лексики выбрать нормативную или околонормативную? А вместо контента для взрослых — контент для детей. Других идей у меня нет. Справа написано «Вы дали следующую оценку: Поставить оценку». Кнопка недоступна. Ладно.
2. Если эту дичь прокрутить вниз, там будет чекбокс (!) «Ничего из указанного выше». В смысле?! Выше же выпадайки, а не чекбоксы, вы чё, больные? Мало того, он ещё и сформулирован задом наперёд. Ладно, относимся к этому просто как к тексту, игнорируя бессмысленность оформления. Ставлю галочку!
3. В этот момент все выпадайки вдруг дисейблятся! Что? Это вообще как, почему? Зато кнопка «Поставить оценку» просыпается. Ладно, жму...
4. Всё дисейблится, а на линии сверху вдруг загорается галочка через два шага после этого. Взрыв мозга. О, зато снизу проснулась кнопка «Далее». Жму! Кажется, этот уровень я прошёл, давайте следующий.
Думаем дальше № 3 — «Ощущается как ненастоящие ёлочные игрушки» с Никитой Прокоповым
Выпуск про то, что в Эпле теряются даже те знания о дизайне, которые они же сами и принесли в мир. Успеваете?
0:00 — Приветствия, разогрев и поздравления с Новым годом
0:05 — Фолоу-ап: красная батареечка, когда компьютер трудится
7:53 — Фолоу-ап: развыбор всех радиокнопок
12:37 — Как сократить вопросы про безопасность у Эпла
27:27 — Знания не передаются
40:17 — В Доке сломали закон Фиттса
45:37 — Нативные элементы интерфейса: поведение и внешний вид
58:55 — Никита рассказывает про свою библиотеку интерфейсных элементов Хамбл-юай → https://github.com/HumbleUI/HumbleUI/
1:11:26 — Сложный элемент: текстовое поле
Все выпуски:
https://thinkon.mave.digital
РСС, чтобы подписаться в подкастном приложении:
https://cloud.mave.digital/51724
С участником курса обсуждаем представление данных в виде круговой диаграммы или таблицы. Я жалуюсь, что сложно понять, как данные взаимосвязаны, а участник говорит, что ему наоборот легко понять. В итоге получается дискуссия о задачах инфографики, и я рассказываю о том, чему мы в этом смысле учим на курсе. 10 минут:
https://www.youtube.com/watch?v=Urn9TDalPg4
Идёт запись на февральский курс, сейчас скидка из-за ранней записи максимальная — 30%. Всё про курс, отзывы и кнока записи:
https://bureau.ru/courses/ui-online/
Сайт «Альфа-Медикал»
Зацените сайт для медтуроператора «Альфа-Медикал». Это большая содержательная работа. Задача — помочь людям, оказавшимся в беде, разобраться в услугах компании и доверить ей своё здоровье.
Посмотрите и почитайте:
https://ilyabirman.ru/alfa-medical/
Проект про глубокое погружение в тему, работу с сомнениями и опасениями, заботу и внимательность к человеку.
Мэтт Райф и культура отмены
Вот на днях было: юмориста Мэтта Райфа начали отменять в США за то, что он со сцены во время экспромта пошутил про домашнее насилие. Юморист пошутил про острые темы на собственном концерте!
В ответ Мэтт выложил ссылку на защитные шлемы для домов престарелых. Мол, «если вас оскорбляет мой юмор, вот вам средства защиты, сахарные вы мои». И пошел на интервью к Джордану Питерсону, а там — вдарил еще сильнее:
https://www.youtube.com/watch?v=N2lLPBiD_d0
И они с Питерсоном прямо в унисон: нельзя преклонять колено перед активистами, если ты не считаешь, что сделал что-то неправильно. Нужно сказать: «Да, всё так, а еще...» — и например выпустить сувенирку. Тебя намного сложнее отменить, если ты не хочешь отменяться. Когда ты сам гордо шлешь их на хер, найдутся те, кто тебя поддержит.
Думаем дальше № 2 — «Самоутвердился за счёт целого Вольфа Олинса» с Сергеем Стеблиной
Записали ещё один выпуск экспериментального подкаста, теперь вот с Сергеем Стеблиной.
0:00 — Кринжовое интро про радиокнопки
4:20 — Когда пару радиокнопок можно заменить чекбоксом и как вообще обойтись без подобных элементов
8:50 — Илья читает неожиданную лекцию про радиокнопки
13:41 — Дебильные комбинации элементов в интерфейсах Гугля
16:17 — Элементы формы мгновенного и немгновенного действия
19:08 — Илья и Серёжа о будущем своих учеников
23:27 — Серёжа начал делать схему амстердамского метро, а оно не нужно → /channel/ne_znal_ai/1750
28:00 — Нужно ли объездить все трамваи, чтобы нарисовать их схему?
31:22 — Дизайнеров бесят другие дизайнеры и их работы
39:06 — Сломанные кривые в логотипе Вольфа Олинса и плохой дизайн как вызов
44:28 — Илья не воспринимает бленду всерьёз
46:29 — Адоби покупал-покупал Фигму, да так и не купил
57:43 — Проекты, за которые мы бы не взялись по личным соображениям
Продолжаю не знать, что будет дальше, но уже сделал Мейв безо всякого оформления. Там вроде бы можно подписаться на РСС, в остальное пока не вникал. Там оба выпуска:
https://thinkon.mave.digital
Сегодня ещё поразгребал фрагменты интерфейсного курса, дошёл до 50-го:
https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-50/
От № 26 до № 50 — свежедобавленное, посмотрите.
В целом кайф, столько интересного я наболтал. Ощущение, что потенциал у этого больше, чем я пока придумал.
Если всё смотреть лень, особенно рекомендую № 30 про метод «Например», № 33 про физические контролы, № 34 про смысл визуализации, № 42 про эстетику и прямоугольность, № 46 про триаду Мейксенара.
Раздел «Инструмент» также дополнился штуками про Фигму и Фотошоп. Материализовался раздел «Бизнесовое и продуктовое».
Считайте, что это вам вместо сериальчиков на новогодние каникулы.
Начал наводить порядок в ранее выложенных фрагментах интерфейсного курса:
https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-25/
За те три года, что курс идёт в онлайне, я выложил уже больше сотни фрагментов с наших семинаров. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Буду потихоньку структурировать. Начал с первых 25 фрагментов. Считайте, что это вам вместо сериальчиков на новогодние каникулы.
Думаем дальше № 1 — «Тексту положено быть быстрым» с Никитой Прокоповым
Так, ну вот вам первый экспериментальный выпуск подкаста. В этот раз беседуем с Никитой Прокоповым. Что будет дальше — пока не знаю, но хочу ещё. Обложек, чаптеров и платформ пока нет; пока просто файлик в телеграме. Я решил, что если будет хотя бы несколько выпусков, тогда уже буду всем этим заморачиваться. Название тоже может поменяться.
0:00:00 — История про табло
0:05:56 — Пост Никиты про сложное и простое → /channel/nikitonsky_pub/577
0:10:15 — Как мы с разных сторон познакомились с переусложнением
0:15:36 — Не верь в сложность, когда говорят «просто поверь»
0:20:13 — Оценивать чужую работу плохо, но...
0:22:16 — Причина как критерий хорошего дизайна
0:27:51 — Интуиция, факты и законы природы
0:34:05 — Элон (Илон?) Маск и ПХП
0:36:00 — Эгея быстрая, хотя Илья даже не старался
0:37:55 — Нисден 3.0 стал в сто раз быстрее
0:46:38 — Современный компьютер предательски тормозит незаметно
0:51:18 — Парсинг ХТМЛ
0:58:46 — Ускорение ТОМЛ-парсера
1:02:54 — Формальные грамматики
1:08:11 — Апач против Нгинкса
1:11:26 — Как файлы с точкой в начале стали скрытыми
Чё, как вам? Какие темы раскрыть в следующих выпусках?
Презентуйте простыми и точными словами
На нашем с Мишей курсе презентаций и выступлений замечаю такую штуку. Мы призываем участников говорить более простыми словами, не грузить терминологией без необходимости. У участников это иногда вызывает сопротивление, мол, это вы просто не в курсе, а топы в нашей компании, которым я буду презентовать, всё это знают. Зачем, говорят, я буду им объяснять очевидные для них вещи, это только раздражение вызовет.
Объяснять-то может и не надо, но просто старайтесь выбирать точные и простые слова. Вот человек презентует дизайн и говорит: «Мы спроектировали новый флоу, чтобы улучшить пользовательский опыт». Допустим, у вас в компании все так говорят. Но кому станет хуже, если вы скажете по-русски: «Мы уменьшили число шагов, чтобы было проще купить цветы»? Не бывает, чтобы после такого слушатели испытали раздражение от того, что им слишком понятно объяснили. Тут речь не о том, что вы объясняете топам, что такое «флоу» (а они и так знают), а о том, что вы вообще не используете подобных слов.
Обратите внимание, что проблема не в том, что я как-то субъективно не люблю слова «флоу» и «пользовательский опыт». Я их, конечно, не люблю, и сам в жизни так не скажу, но дело тут в том, что эти слова размывают суть. Бывает много профессиональных терминов, без которых непонятно, о чём именно вы говорите, и в подготовленной аудитории резонно их и использовать, а не упрощать. Но тут простыми словами получается не просто проще, но точнее и однозначнее, чем с заумными.
Спроектировали вы «новый флоу», а начальство вам такое: «Так а почему вы говорите, что это новый флоу? Тут ведь то же самое: выбираешь букет, указываешь адрес, оплачиваешь». Что вы на это ответите? «Да, но мы уменьшили число шагов»? Ну так а фигли сразу так и не сказали, зачем этот обмен репликами вам?
О курсе:
http://bureau.ru/courses/presentation-online/
Дважды двусмысленная навигация на Павелецкой
Иду на днях по переходу в Москве, вижу такое. Читаю на бегу, сам продолжаю идти прямо. Уже пройдя, думаю: что я сейчас увидел? Во-первых, на красном фоне написано, что вход закрыт, но меня зачем-то всё равно в него ведут стрелкой вперёд. Во-вторых, меня ведут туда ещё и стрелкой вправо. Куда в итоге идти, прямо или направо? И зачем мне вообще туда идти, если вход закрыт, открытый-то где?
Возвращаюсь обратно, чтобы сфоткать пример дебилизма в коллекцию. Замечаю, что сверху под загибом мелко написано, что вход закрыт не всегда, а только с 8 до 9 по будням. Окей, с первым противоречием разобразились, просто дизайн тупой.
Но две стрелки по-прежнему противоречат друг другу. Я это называю итальянской навигацией. В Италии на дорогах я не раз встречал рядом знаки типа «Римини прямо» и «Римини направо» — можно ведь и так и так доехать! Это взрывает мозг.
Если человек сомневается в дороге и смотрит на знак, нужно направить его чётко, сделать выбор за человека. В пешеходной навигации этим можно пользоваться этим для разруливания потоков, например из двух равнозначных дорог из А в Б рекомендовать первую, а из Б в А — вторую.
Каждый раз, когда такое происходит, я удивляюсь. Вот кому-то поручили придумать, из какого материала должна делаться эта закрывающая заклейка. Как этот сотрудник понял задачу? Какими свойствами должен обладать материал? Когда он сделал, как он сам себе объяснил, почему его решение — удачное?
Читать полностью…Как срывать сроки
Когда срываешь сроки, хочется это замять: «я немного не успеваю», «у меня почти готово», «я сделал, но там пока не всё, мне надо ещё доделать», «к завтрашнему дню уже точно будет».
Если по мнению клиента срок — чистая формальность, а реально это очередная текущая задачка, то всё это звучит нормально: ну не успел сделать одно, но зато сделал много другого, в целом работа идёт, всё хорошо. Можно сказать, что дедлайна и не было вовсе.
Но если от вас реально ждали результат к конкретной дате, то попытки сгладить углы звучат очень фигово и разрушают доверие. В каком смысле «немного не успеваю», мы же договорились, что сегодня будет готово?!
Если вы сорвали настоящий дедлайн, надо сначала сказать: «Мы договаривались, что сегодня я покажу то-то и то-то в таком-то объёме, в том числе... (перечислить всё, что вы обещали). К сожалению, я сделал не всё: не успел сделать то-то и то-то». Все извинения, уточнения и, главное, предложения должны звучать уже после этого. Доверие начинается с того, что клиент хотя бы видит, что вы понимаете, что создали проблему.
Сравните с «почти готово»: выглядит, как будто вы то ли не понимаете, что подвели, то ли надеетесь, что клиент этого не заметит. Клиенту нужно не просто искать решение, а ещё и, возможно, другого исполнителя.
Оправдания не имеют значения, и по идее надо сразу переходить к предложениям: что теперь делать-то? Но все мы живые люди, и иногда очень хочется объяснить, почему что-то не получилось. Если вы просто начнёте оправдываться, клиент будет думать, что решать созданную вами проблему вы не собираетесь. Поэтому нужно хотя бы сказать: «Я хочу объяснить, почему не получилось, и потом, если позволите, расскажу, как предлагаю исправить ситуацию».
Каким бы ни было ваше предложение, нужно убедиться, что клиенту оно подходит. «К завтрашнему дню уже точно будет» — это предложение, но оно звучит, как будто вы сами назначили себе новый дедлайн, не спросив мнение клиента. Мало кому такое понравится. Более нормальный вариант: «Чтобы доделать оставшееся, я бы хотел договориться взять ещё два дня». Тут клиент может либо согласиться, либо возразить, и тогда вы сможете думать дальше.
Почему «ещё два дня», если завтра уже точно будет? Да чтобы завтра опять не пришлось этот разговор проходить. Так-то никто не расстроится, если вы завтра принесёте.
Лайкли 3.2
Лайкли — клёвые социокнопки. В версии 3.2 добавилась поддержка соцсети «Икс» — это так переименовался твиттер (<div class="xcom">).
Мы долго думали, что делать, ведь «Икс» — тупейшее название, и все говорят «Твиттер»! Решили просто: мы поддерживаем «обе соцсети». То есть вы можете на свой вкус выбрать, ставить ли себе твиттеровскую птичку или иксовый икс. Можно даже и то, и другое. Работает в любом варианте.
О проекте и зип-архив:
http://ilyabirman.ru/projects/likely/
Гитхаб:
https://github.com/NikolayRys/Likely/releases/tag/v3.2.0
Лайкли ведёт Николай Рысь:
http://linkedin.com/in/nikolay-rys
Совершенно бесчеловечный интерфейс — фильтрация гостиницы по цене на Букинге. Если я хочу, чтобы было в пределах 10 тысяч, я должен сделать четыре точных клика, после каждого из которых страница ещё и потупит. Как можно было до такого додуматься? Напоминает шуточные интерфейсы ввода телефонного номера, где каждую цифру нужно выбрать из отдельной выпадайки.
Читать полностью…Бирман говорит, что когда заказчик спрашивает, за что он платит, отвечать не надо. Даже даёт инструктаж, как отвечать вопросом на вопрос:
https://bureau.ru/soviet/20240102/?utm_source=tg-s-s-s240102-020124
В рамках первоянварского расслабона вот вам несколько просто красивых картинок из коллекции.
1. Расписание. Всё кайф, но и шрифт тоже кайф.
2. Набор игрушечек для воспитания хорошего вкуса у детей.
3. Аппарат ИВЛ с подписями и объяснениями на корпусе. Вроде показывал уже когда-то вам.
4. Дракон.
5. Тарелка (это одна тарелка).
Миша Нозик показал логотип какой-то типографии в Тель-Авиве. Кайфово подружены иврит и латиница (хотя можно и докрутить бы).
Читать полностью…Обратимость элемента интерфейса
Обратимость — свойство элемента интерфейса, при котором пользователь может в любой момент вернуть его в начальное состояние, а в общем случае — свободно переключать между всеми доступными состояниями. Необратимость, соответственно, когда у элемента есть состояния, в которые после некоторых действий его вернуть нельзя. Хорошо спроектированные элементы обратимы.
Пример необратимого элемента — группа радиокнопок, из которых изначально не выбрана ни одна. После выбора одного из вариантов, его уже невозможно «развыбрать», нет никакого способа вернуть группу в пустое состояние, что создаёт дискомфорт и фрустрацию. В правильной радиогруппе всегда выбран ровно один элемент, в том числе, в начальном состоянии, поэтому она обратима.
Даже если для перехода к следующему шагу обязательно необходимо выбрать какой-то вариант, это не отменяет требования обратимости. Это чисто механический момент, не связанный с ролью элемента. Обратимость работает на уровне элемента, а не внешнего по отношению к нему интерфейса; она влияет на ощущение управляемости. Поле ввода не сопротивляется тому, чтобы из него стёрли все символы, даже если оно обязательное. Любой другой элемент, если он в принципе предполагает «пустое» состояние, должен давать к нему вернуться.
Другой пример необратимости — обозначение незаполненных обязательных полей красной рамкой после расфокуса. Изначально поле выглядит просто пустым; пользователь заходит в него, а потом выходит, так и не заполнив (или заполняет, но потом стирает то, что ввёл). Система обводит поле красной рамкой, подсказывая, что оставить его пустым нельзя. После этого невозможно вернуть поле в начальное «чистое» состояние. Решением могло бы быть плавное затухание красной рамки, чтобы поле вернулось в начальное состояние через секунду.
В Челябинске продолжает распространяться наша красота в самых разных форматах. На троллейбус, правда, всё наклеили очень криво. Однажды у меня дойдут руки написать вторую часть рассказа про всякие объявления, потому что мы их сделали дофига кроме тех, что были в первой части. Но пока можете первую часть почитать:
https://ilyabirman.ru/chelyabinsk/reform/
Любопытный ход из студенческой работы. Обычно кнопка «Переотправить СМС» становится доступной только через какое-то время, чтобы экономить на сообщениях. А тут она доступна всегда.
Работает так: если человек не получил сообщение за пару секунд и жмёт кнопку, мы принимаем команду и говорим: «Ок, переотправим через столько-то секунд». Но если за это время ему доходит первое сообщение и он успевает им воспользоваться, то второе всё-таки не отправляется.
Получается, что мы и не мешаем человеку нажать кнопку, когда он хочет; не бесим задисейбленностью — но и не тратимся на сто сообщений, если человек нервный и жмёт кнопку много раз. Я не уверен, что такое будет хорошо работать, но ход мысли мне нравится всё равно.
См. также «Дай нажать»:
https://ilyabirman.ru/meanwhile/all/let-me-click/
Армент: используйте стандартные компоненты, чтобы уделать конкурентов
В недавнем выпуске Under the Radar ребята говорят то, что я говорю всем дизайнерам сто лет: используйте блин стандартные элементы, и ваш дизайн будет почти гарантированно красивее, чем если вы будете рисовать отсебятину! Нужный кусочек — после отметки 19 минут:
https://www.relay.fm/radar/282
Марко жалуется на бесконечные программы, где всё кастомное:
Everything just feels so weirdly needlessly custom and nothing works right, nothing feels right, and nothing looks right.
So first of all, I think, this gives indies like us a huge opportunity. We can look better than 90% of what’s out there by actually doing less work. It’s actually easier to use the system default stylings of things, especially with SwiftUI, it makes it even easier. Because in many cases SwiftUI is doing a lot of standard styling stuff for you behind the scenes even more than UIKit did. If we just do less custom styling work and follow Apple’s either default behaviours or standard styles much more often, our apps will look better, and they will work better, and they will have better accessibility support, and they will respond better to different preferences. Way better than most of what’s up there in the App Store which is all these weird web view garbage apps.
А Дэвид отвечает, что раньше делал всё «своё», потому что не хотел, чтобы программа выглядела «скучной», пытался так придать программе характер. Но, говорит, понял, что над системными элементами много лет работали крутейшие дизайнеры, отлаживали там тончайшие детали типографики и прочего, и что когда он делает «своё», он просто выкидывает в мусор всю эту работу. Фокус в том, говорит, чтобы поменять в стандартном лишь пару поверхностных нюансов, и уже появится своё настроение, но зато останутся стандартные размеры и поведение. Если посмотреть на очень яркие эпловские приложения типа того же Фитнесса, то будет видно, что там тоже всё стандартное — форма кнопок, отступы — просто покрашенное другими цветами. А если, говорит, я хочу более амбициозный дизайн запилить, то надо и дизайнерские скиллы прокачать куда сильнее!
Купил билеты тут на одно мероприятие (нет, не Кинки-пати на этот раз) и снова запнулся о тупость маковского диалога печати.
1. Я хотел просто сохранить ПДФку. Ну и вижу, что у меня в выпадайке выбрана ПДФка как раз. Жду «Печатать», и ничего не происходит. Где ПДФка-то? Потом понимаю, что оно реально отправило печатать на бумаге куда-то во вселенную (принтера у меня нет, разумеется).
2. А на самом деле это не выбрано ПДФ в выпадайке, это название выпадайки! И если туда нажать, там какие-то пункты, включая «Сохранить ПДФ...» (ума не приложу, зачем все остальные). Тупизм.
Пытаюсь закрыть вкладку в Сафари, а оно такое: «у вас выбрано две вкладки». Первый раз такое вижу и вообще не представляю, как можно выбрать вкладки, чтобы сделать с ними какое-то групповое действие, какие именно вкладки у меня щас выбраны, а главное — как блин закрыть ту вкладку, на которую я смотрю!
Читать полностью…Представлять и представлять собой
С вами Институт ран русского языка, и на этот раз озабоченность наших учёных вызывает путаница между «представлять» и «представлять собой».
Люди говорят: «гололёд представляет собой опасность» или «эта книга представляет собой ценность». Но как язык поворачивается так говорить? Гололёд представляет собой скользкий слой замёрзших атмосферных осадков, а книга представляет собой пачку печатных листов в переплёте. Опасность или ценность можно представлять, но не представлять собой.
А вот представлять из себя в принципе ничего нельзя.
Рассказываю на курсе, что моноширинные цифры нужны в таблицах и в случае динамических данных, показываю примеры. 3 минутки:
https://www.youtube.com/watch?v=2PC5L3tv6fA
Запись на уютный новогодне-рождественский декабрьско-январский курс вот-вот закроется. Приходите, теперь много практики.
Всё про курс, отзывы и кнока записи:
https://bureau.ru/courses/ui-online/
Бирман принципиально заадаптивил скелет страницы:
https://bureau.ru/soviet/20231219/?utm_source=tg-s-s-s231219-191223