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

Вот первая попавшаяся работа. Это главная страница, меню пицц:

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

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

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

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

Иногда бывает, что в таком же контексте кнопку «Добавить в корзину» превращают в какую-то считалку типа − 1 + после добавления первой пиццы. Тут мозг окончательно взрывается. Если нажимать плюс несколько раз попеременно с изменением начинки, а потом нажать пару раз минус, невозможно даже предположить, что в итоге окажется в заказе. При этом сценарий «заказать две пиццы с курицей, но одну из них без шампиньонов» — достаточно нормальный, чтобы про него подумать.

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

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

Та же проблема встречается в недавнем интерфейсе с исчезновением при наведении

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

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

Тут тоже почти исчезла:

А тут пропала цена и название:

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

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

Очевидно, что столица России — Москва, столица Франции — Париж, а столица Китая — Пекин.

Ещё есть страны, где самый известный город — это не столица. Столица Турции — не Стамбул, а Анкара. Столица Канады — не Торонто, а Оттава. Столица Бразилии — не Рио-де-Жанейро, а Бразилиа. Это неочевидные столицы, но вы всё равно в курсе.

Но есть вдвойне неочевидные столицы.

Скажем, все знают, что столица Нидерландов не Амстердам, а Гаага. Да вот только столица Нидерландов — как раз Амстердам, несмотря на то, что все органы государственной власти находятся в Гааге. Что же делает Амстердам столицей? А вот просто такая традиция, делать вид, что Амстердам — столица.

Или вот есть столица Израиля — Иерусалим. Точнее, так считает сам Израиль. А вот по мнению ООН, столица Израиля — Тель-Авив! Взрывает мозг тот факт, что у кого-то за пределами страны может быть мнение о том, где у страны столица. Понятно, что в Иерусалиме неспокойно, и многие страны держат свои посольства в Тель-Авиве, но делать вид, что он столица, довольно странно.

Кстати, ещё забавность. Столица США — не Нью-Йорк, а Вашингтон, это понятно. Но даже столица штата Нью-Йорк — не Нью-Йорк, а Олбани!

А какие вдвойне неочевидные столицы вы знаете?

Бесит, что всё больше подкастов монтируют и оформляют всякими джинглами, перебивками и эффектами. Такое ощущение, что туда понаприходили люди с радио и телевидения, которые не понимают, как устроен интернет, и притащили с собой весь эфирный мусор. Причём многие слушатели, кто открывают для себя подкасты только в последнее время, думают, что так и надо, и не видят в этом абсурда — другого-то они не слышали!

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

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

Отдельный прикол — реклама. Как работает реклама в нормальных подкастах? Ведущий читает её прямо по ходу записи: тем же голосом в том же помещении. Она звучит органично, не бесит, при этом ты её слушаешь и запоминаешь. А в большинстве современных подкастов что? Либо реклама — это вообще отдельная аудиодорожка, выданная рекламодателем, либо тот же ведущий записывает её в другое время и с каким-нибудь там эффектом эха или фоновой музычкой. Тут надо сказать, что в этом есть своя польза: такую рекламу очень легко промотать прыжками по 15 секунд вперёд, потому что по доле секунды ты слышишь, когда всё ещё реклама, а когда уже нет. То есть эффект достигается обратный необходимому: реклама вызывает раздражение, хотя я её даже не слушаю!

Кстати, фоновая музычка — это вообще идиотизм. Если авторы не понимают, что люди слушают подкасты ускоренными, то чё они вообще взялись их записывать? Ну хоть чуть-чуть бы разобрались в среде.

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

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

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

До 22 декабря идёт запись на курс, который пройдёт с 23 декабря по 21 января.

Дед Мороз принесёт вам мешок новых знаний!

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

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

Тема кернинга меня волновала с детства (как я вдруг понял). Каждый раз видя электронные часы я не мог понять, нафига единица, когда она стоит справа, отваливается на километр?

Что мешает поставить её на таком же расстоянии, как когда она стоит слева?

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

Тот же вопрос к светофорам.

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

К недавней новости про усиление практики на курсе я нарисовал нехитрую обложку:

Обложка нужна просто чтобы была хоть какая-то картинка для соцсетей, но при этом нет смысла тратить силы на дизайн кастомной графики. Надо сделать чё-то нормальное по-быстрому.

Кажется, что у меня просто написано слово «практика» с переносом.

На самом деле, если просто написать слово, получится так:

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

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

Получилось так:

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

Сверху, справа и снизу тоже хочется упереть:

Теперь напрягает, что крыша буквы Т почти, но не совсем совпадает по ширине с П, а вертикальный штрих от И проходит мимо Р, хотя мог бы и попадать:

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

Теперь замечаю, что левый штрих от К почти, но не совсем проходит через середину А:

Двигаю К чуток левее, чтобы попадало чётко:

Получается так:

Замечаю, что картинка получилась размера 439×241. Как минимум надо сделать 440×240, чтобы совесть была чиста, но я решаю сделать 480×240 — тогда получится прямоугольник пропорций 2:1. Мелочь, а приятно. Для этого нужно увеличить разрядку в обеих строках, но это и так неплохая идея. Аккуратно делаю, следя за тем, чтобы все выстроенные вертикали сохранились:

Перетекание И в А немного нарушилось — ну, значит не судьба. Отступ между строками пришлось на 1 пиксель уменьшить, сломав исходную затею с тем, чтобы это был ровно размер горизонтального штриха. Но кто ж это заметит?

Теперь буквы стоят нормально, но всё вместе выглядит дырявенько, да и непонятно, что практика-то? Добавляю надписи «×2» и «и сертификаты с отличием», а заодно ставлю сердечко из обложки курса на фон. Выравниваю надписи на глазок по среднему штриху К:

Готово:

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

А на курс «Пользовательский интерфейс и представление информации» с усиленной практикой и сертификатами с отличием не забудьте прийти!

Участники в конце курса рассказывают, как им понравилось. 3 минутки:

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

До 10 ноября идёт запись на курс, который пройдёт с 11 ноября по 10 декабря.

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

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

Иногда на семинарах интерфейсного курса у меня случаются философские речи.

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

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

Предыдущая попытка этого же обсуждения.

До 10 ноября идёт запись на курс, который пройдёт с 11 ноября по 10 декабря.

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

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

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

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

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

А о смерти я вспоминаю только когда в жизни происходит что-то очень плохое. Я страдаю, а потом такой: «Стоп, а чё я страдаю? Это ж абсурд. Всё равно я умру, да и все умрут. Какая вообще разница, чё я вообще переживаю?» И жизнь мгновенно становится легче.