Блоги: заметки с тегом человечность

Честное анду документа и состояния

Илья Бирман — Fri, 01 Aug 2025 11:39:02 +0500

Как вы знаете, в программах должна быть функция анду, чтобы исправить ошибку. Но есть нюанс.

В Иллюстраторе если выделить часть точек объекта, подвинуть эти точки, а потом нажать анду, точки-то вернутся на место, но выделение изменится. Придётся заново выделять, чтобы подвинуть правильно.

В Эпл-ноутсах если выделить текст справа налево, вырезать его, а потом нажать анду, текст вернётся, и даже выделение будет такое же на вид, но программа забудет, что ты выделял справа налево — шифт+стрелки теперь буду двигать правый край выделения. Придётся заново выделять, если нужно подправить именно левый край.

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

На интерфейсном курсе: что делать, пока ЭВМ думает медленно?

Илья Бирман — Tue, 15 Apr 2025 13:12:52 +0500

Илья Бирман:

Смотрим на интерфейс добавления документа, где по легенде системе нужно время на его распознавание. Обсуждаем, как сделать, чтобы всё казалось быстрым. 7 минут:

Это фрагмент № 168 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 10 февраля 2024 года.

Идёт запись на курс, который пройдёт 24 мая — 22 июня. Сейчас −30% из-за ранней записи. Недавно обновились несколько лекций и добавилась новая.

Почитать о курсе

Программа, отзывы, запись

Без обучения

Илья Бирман — Tue, 25 Feb 2025 12:18:02 +0500

Илья Бирман:

Парижский Нотр-Дам сгорел из-за интерфейса. Датчик возгорания штатно и вовремя сработал, и сотрудник службы безопасности увидел на экране код: ZDA-110-3-15-1. Это идентификатор конкретного места, где сработал датчик — ценнейшее знание. Однако почти полчаса сотрудник искал, где же горит, потому что не знал, что значит код, а начальник не отвечал на телефон.

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

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

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

В случае с Нотр-Дамом цена такого мнения — миллиард долларов.

Я предлагаю принцип «Без обучения». Прям декларировать его как основу для всех принимаемых в дизайне решений. Я прямо отвечаю инженерам:
— Понимаю, но у нас в интерфейсах используется принцип «Без обучения». То есть мы делаем интерфейсы такими, чтобы как раз таки случайный человек мог подойти и выполнять работу. Да, без опыта он будет делать медленнее, но нужно добиться, чтобы он в итоге сделал всё правильно.

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

Очень важно настроить культуру разработки, чтобы сам этот довод «Сотрудники проходят обучение» не считался валидным. Считайте, что не проходят. Что тогда?

Ценовые категории в «Букинг.коме»

Илья Бирман — Mon, 06 Jan 2025 22:01:04 +0500

Илья Бирман:

На днях я рассказывал про проблему возрастных категорий. А вот другой пример — ценовые категории в «Букинг.коме»:

Слева нужно выбрать «бюджет за ночь», и для этого используется самый неадекватный интерфейс в мире: цены разделены на категории с шагом по 2000 рублей. Мало того, что их совершенно ни для чего не нужно в принципе делить на категории, так тут ещё и интерфейс позволяет настроить, например, что мне подходит от 4000 ₽ до 6000 ₽ и от 8000 ₽ до 10000 ₽, а вот 6031 ₽ или 7915 ₽ — не подходит. Не существует ни одного человека в мире с такими требованиями к цене.

Надо было сделать просто один ползунок максимальной цены, который бы занял одну строку вместо восьми.

Без возрастных категорий

Илья Бирман — Tue, 31 Dec 2024 16:59:09 +0500

Илья Бирман:

Когда бегаешь в Эпл-часах, они измеряют некий параметр VO₂ max, который характеризует твою кардиовыносливость. Я бегаю по чуть-чуть, и вот однажды прошлой весной этот VO₂ max у меня упал ниже среднего. Я расстроился и стал думать, как бы мне бегать получше, чтобы вырос обратно. Бегал-бегал, но всё лето он болтался вокруг того же значения, никак не становясь выше среднего.

И вот после очередной тренировки VO₂ max чуть-чуть упал, но Эпл показал, что он стал выше среднего! А благодаря теореме Коши, Вейерштрасса или кого-то из этих ребят мы понимаем, что если значение непрерывной функции было ниже некоторого значения, а потом упало, то оно ну никак не может стать выше этого значения. Я пошёл разбираться, что там произошло.

Оказалось, что с прошлой тренировки мне успело исполниться сорок лет, и я перешёл из категории 30—39 лет в категорию 40—49 лет, и среднее для меня резко уменьшилось — с 43 мл/кг/мин до 38 мл/кг/мин. То есть в логике Эпла между людьми 30 и 39 лет нет никакой разницы, но конкретно в день, когда тебе исполняется сорок, нормативы для тебя резко снижаются.

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

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

На интерфейсном курсе: кнопка «Сохранить» — плохой знак

Илья Бирман — Fri, 22 Nov 2024 20:57:06 +0500

Илья Бирман:

Рассказываю, почему само наличие кнопки «Сохранить» в интерфейсе — это уже признак того, что в нём, возможно, что-то не так. 1 минута:

Также есть на ВК-видео.

Это фрагмент № 155 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 17 ноября 2023 года.

Идёт запись на курс, который пройдёт 7 декабря — 5 января. Сейчас −10% из-за ранней записи.

Почитать о курсе

Программа, отзывы, запись

Про солидность и человечность

Илья Бирман — Sat, 02 Nov 2024 12:54:02 +0500

Илья Бирман:

Из моего комментария к работе студентки:

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

А то вдруг вы всё ещё солидный сайт хотите.

Умное анду и реду в Фигме

Илья Бирман — Sun, 21 Apr 2024 19:59:55 +0500

Илья Бирман:

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

В Фотошопе иначе: можно в несколько шагов настроить выделение, используя объединения, пересечения, Transform Selection и прочий Quick Mask, и тогда анду последовательно пройдёт эти шаги в обратном порядке. Ну и если случайно потеряешь тщательно настроенное, тоже можно сделать анду, и выделение вернётся. Это умно.

Но представьте ситуацию: вы делаете анду десять раз, чтобы посмотреть, как было несколько шагов назад, и при этом планируете сразу же сделать столько же раз реду, чтобы вернуться в «настоящее». И вот, находясь в «прошлом» вы что-то выделяете... Ауч! Теперь ваши последующие шаги потеряны безвозвратно. Пространственно-временной континуум — штука хрупкая. Надо было делать скриншот! (Ну или включать в Фотошопе нелинейную историю.)

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

От таких решений душа дизайнера интерфейса поёт.

Онбординг

Илья Бирман — Tue, 22 Aug 2023 15:33:54 +0500

Илья Бирман:

Часто при запуске приложения нас встречает экран, призванный рассказать о приложении в целом или о недавно добавленных фичах. Экран может состоять из нескольких страниц, которые нужно просмотреть по очереди. Как правило, есть кнопка, чтобы пропустить это всё и перейти к основному интерфейсу приложения. Обычно это называют «онбординг».

Делать так — плохая практика.

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

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

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

Рассказ о приложении в целом

Сначала рассмотрим онбординг с рассказом о приложении в целом.

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

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

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

Тут стоит внимательно проанализировать основной интерфейс. Как сделать его понятнее без обучения? А если без обучения не обойтись, то как его организовать, чтобы оно не мешало пользоваться приложением? Может, где-то нужно добавить текстовые подсказки. Может, в сложных местах нужна кнопочка-вопросик, за которой прячется более подробное пояснение. А может, вообще нужен собственный обучающий канал на Ютюбе, на который ведут всякие ссылки из интерфейса.

Рассказ об обновлении

Теперь рассмотрим онбординг с рассказом об обновлении.

Здесь те же проблемы стоят ещё острее. Если при первом запуске у человека часто нет ожиданий, то вот давно установленное приложение человек запускает с конкретной целью: проверить трекинг доставки или оплатить коммуналку. Скорее всего, у него есть «план»: он помнит, в какой угол сейчас нажмёт, что там появится, куда именно он перейдёт дальше. И вдруг вместо привычного интерфейса он видит рассказ о новых фичах, который прямо сейчас ему совершенно не нужны!

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

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

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

Даже если у вас не мессенджер, можно найти какое-то постоянное место для рассказа о новых штуках. А чтобы люди не забывали туда зайти, можно зажигать красный кружочек, когда появляется непрочитанное. Самое главное, чтобы остальные функции приложения были доступны даже пока человек всё не прочитал.

Хороший интерфейс и хороший бизнес

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

Однако как и окна подтверждения и несмотря на похожие проблемы, такие экраны-онбординги очень распространены. Дело в том, что в продуктовой разработке редко стоит задача «сделать пользователя довольным». Как правило, ответственные за продукт смотрят на другие метрики. Допустим, онбординг смотрят 10% людей и в результате продажи растут на 1%. Кого тогда волнует, что онбординг бесит и мешает остальным? Выигрыш оказался больше, чем проигрыш, ну и отлично.

Как-то мне написал Егор, аналитик из Яндекса:

Считаешь ли ты, что а/б-тест может точно ответить на этот вопрос? Половине новых пользователей мы показываем онбординг, половине не показываем, после этого смотрим на две метрики: конверсия первой сессии в заказ и время от запуска приложения до заказа. Если конверсия с онбордингом выше, а время до заказа не вырастает (то есть время, которое пользователь тратит на чтение онбординга, он отыгрывает потом), то согласился бы ты с тем, что онбординги имеют право на жизнь? И как ты вообще относишься к валидации продуктовых гипотез при помощи а/б-тестов?

Я и без теста соглашусь. Но этот тест в лучшем случае докажет, что лучше рассказать о приложении онбордингом, чем никак. А я говорю, что можно рассказать лучше, чем онбордингом.

Валидация продуктовых гипотез — это не совсем про хороший интерфейс. Иногда можно ухудшить интерфейс, но поднять метрики: снизив информативность для принятия невыгодного человеку решения; запутав в вариантах; усложнив отписку. Хороший интерфейс иногда важен для успеха продукта, а иногда — нет, достаточно посмотреть на Фейсбук или Букинг.ком. Я бы не хотел иметь ничего общего с созданием этих очень успешных продуктов.

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

Но не все бизнесы работают на выжимание метрик любой ценой. У некоторых другая система ценностей, где-то качество и удовольствие пользователей имеют значение. Иногда получается подумать, а не просто сделать как все.

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

Да, сделать хорошо обычно сложнее, чем сделать как придётся, но и эффект может оказаться больше.

А можно ещё вопрос

— Илья, всё логично, но у нас появилась действительно крутая фича, над которой мы работали два года. Мы даже сняли видеоролик про неё! Мы хотим поставить его в онбординг, потому что нам важно, что его посмотрели все-все-все!

Здорово, что вы сделали действительно крутую фичу, гордитесь ею и хотите всем рассказать! Если вы поставите её в онбординг, вы просрёте эту возможность. Как рассказать о фиче так, чтобы все были в восторге? Уделите этому вопросу хотя бы долю того внимания, которое вы уделили самой фиче.

Что если пропущенное обязательное поле — это не ошибка?

Илья Бирман — Tue, 09 May 2023 01:07:37 +0500

Илья Бирман:

Такая вам мысль на ночь. Человек заполнил форму, нажал кнопку «Купить» или там «Пожаловаться». Но не заполнил какое-то обязательное поле. И мы ему говорим: «Ошибка! Заполни вот тут и вот тут».

Но ведь это противоречит принципу человечности. В чём ошибка-то вообще? Кто сказал, что человек что-то нам должен делать определённым образом? Он и так что-то нам сказал, постарался. Если нам надо знать больше, мы ж можем просто спокойно переспросить, не ругаясь и не крася ничего красным.

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

На интерфейсном курсе: не надо ничего активировать

Илья Бирман — Mon, 09 Jan 2023 22:58:56 +0500

Илья Бирман:

Высказываю на курсе мысль, что не надо ничего активировать, а надо просто дать мне доступ, за которым я пришёл. 2 минутки:

Это фрагмент № 86 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 10 июня 2022 года.

До 27 января идёт запись на курс, который пройдёт с 28 января по 26 февраля.

Почитать о курсе

Программа, отзывы, запись

Как нормально обрезать текст

Илья Бирман — Sun, 23 Oct 2022 00:38:11 +0500

Илья Бирман:

На днях я рассказывал, как хреново работает Фейсбук с длинными постами: обрезает в случайном месте, теряет место чтения при разворачивании. А как надо? Давайте сначала разберёмся с обрезанием.

Обрезать в случайном месте — это неуважение к автору и тексту и лишнее подтверждение тому, что Фейсбуку плевать, что вы там пишете. И это пример лютой технозависимости: машине проще всего резать по определённому числу символов, вот она и режет. За этим даже нет эстетического резона вроде «вместиться в определённый элемент дизайна» (что тоже было бы неуважением к автору и тексту, но хотя бы имело бы гуманистические корни), потому что физический размер строк одинаковой длины в символах в общем случае может отличаться в разы (iii — ЮЮЮ). Даже в моём примере из Фейсбука до конца строки влезло бы ещё несколько слов:

Иногда при обрезании в случайном месте текст не просто ломается, а искажается или даже приобретает совсем нежелательный смысл. Конечно же, я собираю коллекцию примеров на эту тему, Лиз Трасс добавилась туда буквально на днях:

Почему-то анал в этом случае — главный чемпион:

Больше примеров — у меня в телеграме.

Соответственно, если без обрезания не обойтись, то обрезать надо аккуратно. Как делает Эгея?

Число символов, в которое нужно уложиться, считается примерным ориентиром, а не точным значением. Если нужно уложиться в 140 символов, а текст имеет длину 143, то Эгея просто не будет его трогать. Если текст заметно длинее предела, то Эгея разделит его на предложения и постарается взять столько полных предложений, сколько влезет. Вот, например, сниппет этой заметки:

Но если в результате получилось слишком мало (или не влезло вообще ни одного предложения целиком), она будет искать другие признаки безопасных мест: точки с запятой, тире, запятые, скобки. Только если ничего из этого нет, то она будет ориентироваться на пробелы. И только если и пробелов нет, она обрежет по числу символов. Отсутствие пробелов — верный признак, что самому автору было плевать на смысл, так что не страшно, если Эгее будет немножко тоже.

В общем Эгея будет стараться сделать как можно ближе к нужной длине, но так, чтобы смысл не пострадал.

Казалось бы, если я могу такое напрограммировать, то что мешает Фейсбуку? Да то, что никому даже в голову не приходила идея, что есть хоть какой-то смысл стараться сделать хорошо, просто нет такого понятия в мире Фейсбука даже.

Но что же делать, если у вас дизайн, и вам ну вот прям надо уложиться в определённый прямоугольник, плюс-минус слово никак нельзя?

Тогда вместо многоточия можно прятать не влезающие штуки под градиент. Например, наложить его на последнюю строчку текста, как сделано в бюролекциях:

Важно, чтобы градиент был достаточно длинным, чтобы не было разрыва на конкретной букве.

На интерфейсном курсе: оставляйте введённый запрос в поле поиска и рисуйте клавиатуру

Илья Бирман — Mon, 26 Apr 2021 23:41:45 +0500

Илья Бирман:

Участник курса сделал такой интерфейс: когда пользователь выбирает адрес из выпадайки поиска, он применяется, а поле поиска — очищается. Я сразу почувствовал неладное:

00:00 Я почувствовал неладное
01:08 Что не так: в интерфейсе нет анду и сохранения данных!
02:47 Смотрим дальше. Наде не забыть рисовать клавиатуру

Это фрагмент № 36 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 3 декабря 2020 года.

До 2 мая идёт запись на курс, который пройдёт с 8 мая по 6 июня.

Почитать о курсе

Программа, отзывы, запись