Синтаксис и автономность подписи элемента интерфейса

На вчерашнем семинаре интерфейсного курса разбирали элемент настройки окна.

1. Здесь нарушен синтаксис. Синтаксически радиокнопки — это набор однородных членов предложения, остальные члены которого даны в общей подписи. Здесь подпись «не открывается» не сочетается с общей подписью «Открывается». Формально мы как бы выбираем между вариантами: открывается влево, открывается вправо, открывается не открывается.

Чтобы исправить синтаксис, нужно все радиокнопки сделать обстоятельствами, то есть чтобы они отвечали на вопрос «как?».

2. Стало правильно синтаксически, но возникла другая проблема: неавтономность.

Автономность — это когда для понимания смысла элемента не нужно знать, что находится вокруг. Например, компьютер спрашивает, хотите ли вы удалить файл. Если подтверждающая кнопка называется «Да», то она неавтономна, потому что приходится читать, что спрашивают перед ней. А если кнопка называется «Удалить», то она понятна сама по себе, автономна.

Во втором варианте последняя радиокнопка потеряла автономность. Чтобы понять, что именно «никак», приходится читать общую подпись. А вариант «не открывается» был самодостаточным.

Что же в итоге лучше? Кажется, что удобство важнее формализма, и первый вариант побеждает. Но это ловушка! Нет причин выбирать между плохими вариантами, когда можно найти хороший. Вчера, например, сразу же придумали, что вместо слов можно использовать графику: понятные стрелки в две стороны; крестик между ними.

О курсе:
https://bureau.ru/courses/ui-online/

Читать полностью…

Радикальные либертарианцы против

В связи с новым президентом Аргентины слышу: «Либертарианцы рассматривают государство как преступную группировку». И через пару предложений: «Радикальные либертарианцы против существования государства в принципе».

Есть простая идея: насилие неприемлемо. Люди могут вступать в отношения только по обоюдному согласию. Человек не должен быть хозяином другим людям. Может, идея утопическая; может, она не сработает. Но, кажется, что заблудиться в ней негде.

Тем не менее, большинству даже самых свободомыслящих людей эта идея кажется «радикальной». В чём же радикальность? Это просто моральная последовательность. Очевидно, что нормальный человек против преступности. Как было бы «не радикально»? Преступность нужна, но иногда лучше без неё?

Представьте такой тейк: «Феминистки считают, что женщины поражены в правах. Радикальные феминистки в принципе против перекоса в правах в пользу мужчин». Да нет, это не радикальные феминистки, а просто нормальные люди. В идее равноправия нет ничего радикального. Радикально — это, например, ненавидеть всех мужчин, потому что они угнетатели и насильники. Так что радикальными были бы либертарианцы, которые бы всех, кто хоть раз платил налоги, хотели бы наказать как сообщников ОПГ. Это я понимаю, радикально.

Вообще, с либертарианством большая путаница. Мысль «воровать нехорошо», попадая в голову людей, искажается и приобретает странные формы. Большинство быстро съезжают по линии, что вообще нехорошо, но для хорошего дела можно. А с другой стороны Айн Рэнд зачем-то до кучи считает, что не только воровать, но ещё и помогать другим нехорошо, и дарить тоже нехорошо. Дурдом, короче, хоть свои лекции записывай.

Читать полностью…

А что там по другую сторону Ла-Манша? Маршрутоуказатель и автобусные остановки Парижа:
https://ilyabirman.ru/meanwhile/all/paris-bus-stops/

Читать полностью…

В посиделках в конце семинара, когда уже все работы разобрали, участница спрашивает про плакат о синтаксисе, где его купить. Я нахожу новость и заодно ещё рассказываю про бумагу, которая горит. 5 минуток:
https://www.youtube.com/watch?v=o2DjvI6nVts

Последние дни идёт новогодняя акция, где в том числе продаётся и этот плакат:
https://bureau.ru/

И идёт запись на февральский интерфейсный курс, и сейчас скидка из-за ранней записи максимальная — 20%. Всё про курс, отзывы и кнока записи:
https://bureau.ru/courses/ui-online/

Читать полностью…

Думаем дальше № 4 — «Квота на пять истерик в год» c Сергеем Стеблиной

Обсуждаем с Серёжей Стеблиной секреты Иллюстратора, мудрости из его поста на день рождения и кто такой арт-директор.

0:00 — Фолоу-ап: Серёжа дорисовал схему метро Амстердама → https://steblina.myportfolio.com/amsterdam-metro-map
7:28 — Мощный секрет рисования пучков (попытайтесь понять на слух)
13:20 — Как не бояться экспериментировать и «ломать» хрупкие макеты
16:22 — Фолоу-ап: Адоби и неуважение к пользователю
24:12 — Скилл распознавать мудаков
35:19 — Срочность отпадает естественным путём
37:31 — У Ильи ощущение шаббата от 1 января
46:50 — Если чужой дизайн — говно
54:44 — Суперспособность Артёма Горбунова
57:45 — Кто такой арт-директор

Все выпуски:
https://thinkon.mave.digital

РСС, чтобы подписаться в подкастном приложении:
https://cloud.mave.digital/51724

Читать полностью…

Сегодня ещё поразгребал фрагменты интерфейсного курса, дошёл до 75-го:
https://ilyabirman.ru/meanwhile/all/ui-course-frags-1-75/

От № 51 до № 75 — свежедобавленное, посмотрите.

Если всё смотреть лень, особенно рекомендую № 54 про маковскую скриншотилку, № 55 про соответствие между логикой и внешним видом, № 62 про клиента, который хочет фигню, № 66 про исследование Эпла и № 71, где я запрещаю выравнивание по центру.

Ещё раздел «Бизнесовое и продуктовое» пополнился полезными видосами.

Читать полностью…

В прошлом году сделали с Ромой Мочаловым обновленьице схемы челябинских трамваев, и она уже висит в трамваях и на остановках повсюду:
https://ilyabirman.ru/chelyabinsk/trams/2023/

В галерее — эволюция за четыре года. Клёво, что пучки худеют: дублирование маршрутов постепенно устраняется. Сами трамваи тоже всё приятнее, а пути — всё обособлённее.

Читать полностью…

Как срывать сроки

Когда срываешь сроки, хочется это замять: «я немного не успеваю», «у меня почти готово», «я сделал, но там пока не всё, мне надо ещё доделать», «к завтрашнему дню уже точно будет».

Если по мнению клиента срок — чистая формальность, а реально это очередная текущая задачка, то всё это звучит нормально: ну не успел сделать одно, но зато сделал много другого, в целом работа идёт, всё хорошо. Можно сказать, что дедлайна и не было вовсе.

Но если от вас реально ждали результат к конкретной дате, то попытки сгладить углы звучат очень фигово и разрушают доверие. В каком смысле «немного не успеваю», мы же договорились, что сегодня будет готово?!

Если вы сорвали настоящий дедлайн, надо сначала сказать: «Мы договаривались, что сегодня я покажу то-то и то-то в таком-то объёме, в том числе... (перечислить всё, что вы обещали). К сожалению, я сделал не всё: не успел сделать то-то и то-то». Все извинения, уточнения и, главное, предложения должны звучать уже после этого. Доверие начинается с того, что клиент хотя бы видит, что вы понимаете, что создали проблему.

Сравните с «почти готово»: выглядит, как будто вы то ли не понимаете, что подвели, то ли надеетесь, что клиент этого не заметит. Клиенту нужно не просто искать решение, а ещё и, возможно, другого исполнителя.

Оправдания не имеют значения, и по идее надо сразу переходить к предложениям: что теперь делать-то? Но все мы живые люди, и иногда очень хочется объяснить, почему что-то не получилось. Если вы просто начнёте оправдываться, клиент будет думать, что решать созданную вами проблему вы не собираетесь. Поэтому нужно хотя бы сказать: «Я хочу объяснить, почему не получилось, и потом, если позволите, расскажу, как предлагаю исправить ситуацию».

Каким бы ни было ваше предложение, нужно убедиться, что клиенту оно подходит. «К завтрашнему дню уже точно будет» — это предложение, но оно звучит, как будто вы сами назначили себе новый дедлайн, не спросив мнение клиента. Мало кому такое понравится. Более нормальный вариант: «Чтобы доделать оставшееся, я бы хотел договориться взять ещё два дня». Тут клиент может либо согласиться, либо возразить, и тогда вы сможете думать дальше.

Почему «ещё два дня», если завтра уже точно будет? Да чтобы завтра опять не пришлось этот разговор проходить. Так-то никто не расстроится, если вы завтра принесёте.

Читать полностью…

Лайкли 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/

Читать полностью…

Думаем дальше № 5 — «Ты явно хочешь гуй» с Никитой Прокоповым

Обсудили ещё деталей интерфейса текстового ввода, зачем люди пользуются терминалом и анимацию.

0:00 — Кросс-платформенность против качества нативных приложений
12:35 — Поведение текстового поля: направление выделения
19:07 — Поведение текстового поля: курсор с памятью стиля
22:05 — Терминал против графического интерфейса. Никита толкает речь против терминала
28:41 — Илья неожиданно толкает речь за
35:10 — Но Никита имел в виду немножко другое, но Илья и про это тоже что-то там думает
40:35 — Находим способ и тут вырулить на тему того, что софт тормозит без дела
47:43 — Сложные клавиатурные действия с текстом в Виме и ВС Коде
52:02 — Чатботы, дизайн взаимодействия через текстовые команды и тотальное скриптование всего
1:02:57 — Делл анонсировал новый 40-дюймовый монитор, а у Ильи Хуавей
1:10:35 — Никита спрашивает, зачем на сайте Ильи анимируется меню
1:14:04 — Управляемая загрузка веб-страниц и Эмёрдж → https://ilyabirman.ru/emerge/

Все выпуски:
https://thinkon.mave.digital

РСС, чтобы подписаться в подкастном приложении:
https://cloud.mave.digital/51724

Читать полностью…

Если у тебя таймер, а ты зашёл настроить локскрин, то растянутая дырка (извините) налезает на кнопки по бокам. Эпл чуть-чуть недоучёл все сочетания ситуаций.

Читать полностью…

Коллеги, прошу прощения, что отрываю в рабочее время по рабочему вопросу.

Как называется технология, когда вот такую делают сверхтонкую наклейку на кирпичи, бетон или что-то ещё? Чтобы сохранялась текстура поверхности, но содержимое можно было напечатать, а не рисовать краской по трафарету. Фотографии из Лондона, но нужно такое сделать в России.

Спасибочки-чмоки!

Читать полностью…

Мигающие гирлянды

Гирлянда не должна мигать. Она должна просто гореть постоянным приятным светом. Или, в крайнем случае, очень плавно переливаться между приятными цветами.

Обычно у гирлянд есть разные режимы, между которыми можно переключаться кнопочкой. Это ради бога, но изначальным режимом должен быть не мигающий. Кому нравится мигание — пусть настраивает режим, а я хочу просто включить в розетку и наслаждаться праздником.

Читать полностью…

Прикол, в Ярославле стырили нашу трамвайную экипировку. При этом передний квартет наклеили криво, «вынос» сделали какой-то свой по мотивам оригинала, а наклейку «Открыть двери» зачем-то испортили, выровняв текст по правому краю. Интересно, как к ним макеты просочились. Не надо так.

Читать полностью…

Мало кто помнит, но на первом Айфоне домашний экран ещё не листался, и иконки в нём нельзя было расставить по-своему. Иконка «Айтюнса» была стрелкой вниз и указывала на иконку «Айпода» — приложения с музыкой. Типа там скачиваются песенки и попадают в Айпод.

Читать полностью…

1. Ох уж этот современный интернет. Скинули ссылку, открываю. Как видите, на десктопе. Видимо, автор считает, что 1024 — это не десктоп?

2. Уменьшаю масштаб на один шаг ⌘-минуса (обычно помогает на таких сайтах). О, слова про «бест юзер-экспириенс». Да куда уже бесте́е! ⌘W

Читать полностью…

Доллар в регвыражениях не всегда означает конец строки

Долго боролся сейчас с одним багом, поэтому пишу себе, чтобы не забыть.

Есть регулярное выражение (для примера):

/(some|any)thing$/i

Доллар, уверен я, означает «конец строки». Выражение должно проверять, что строка заканчивается на слово something или anything в любом регистре. Но вот оно иногда срабатывает, даже если строка не заканчивается на него! Я в отчаянии уже проверяю впрямую, что строка заканчивается на g или G, и точно вижу, что она не заканчивается. А выражение срабатывает!

Замечаю, что это происходит, если в конце выражения стоит возврат каретки. Думаю: какого хрена? У меня же написан доллар сразу после g, никаких возвратов каретки там! Модификатора m, который разделяет текст на отдельные строки, нет. Может, он как-то там по умолчанию включился, и надо его, наоборот, отключить?

От безысходности иду читать документацию:
https://www.php.net/manual/en/reference.pcre.pattern.modifiers.php

Никакого антонима модификатору m не нахожу. Читаю про сам m:

m (PCRE_MULTILINE)
By default, PCRE treats the subject string as consisting of a single «line» of characters (even if it actually contains several newlines). The «start of line» metacharacter (^) matches only at the start of the string, while the «end of line» metacharacter ($) matches only at the end of the string, or before a terminating newline (unless D modifier is set).

Что? Что ещё за нахрен D?

D (PCRE_DOLLAR_ENDONLY)
If this modifier is set, a dollar metacharacter in the pattern matches only at the end of the subject string. Without this modifier, a dollar also matches immediately before the final character if it is a newline (but not before any other newlines).

Как же можно было такую дичь придумать? Исправляю регулярное выражение:

/(some|any)thing$/iD

А также запоминаю, что надо теперь вообще всегда использовать модификатор D, потому что если блин мне надо возврат каретки мэтчить, я это в состоянии впрямую сформулировать внутри регвыражения, а не полагаться на это хитрожопое исключение.

Читать полностью…

Во втором выпуске подкаста обсуждали шизоидное использование интерфейсных элементов на Ютюбе, как будто ребята ваще не в теме того, зачем они, как их комбинировать. Возможно, кстати, этот дизайн делала нейросеть, все признаки налицо: просто взято чё попало, чтобы внешне было похоже на интерфейс.

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 про триаду Мейксенара.

Раздел «Инструмент» также дополнился штуками про Фигму и Фотошоп. Материализовался раздел «Бизнесовое и продуктовое».

Считайте, что это вам вместо сериальчиков на новогодние каникулы.

Читать полностью…