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

Раньше выключатели физически замыкали и размыкали электрическую цепь. С появлением электронного управления возникли промежуточные состояния. Например, у некоторых телевизоров есть «жёсткий» выключатель на корпусе, и они включаются с пульта только когда он включён. Если выключить такой телевизор только с пульта, он переходит в режим ожидания (standby) и светит красным огоньком. У многих посудомоечных машин или электронных термометров есть отдельная кнопка включения. Всё, что она делает — включает возможность нажать следом кнопку стирки или измерения температуры.

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

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

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

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

У меня очередной пример того, как можно сделать дикий интерфейс и не заметить этого.

Дизайнер работает над сложным внутренним продуктом, показывает интерфейс и говорит:
— Тут просят в уголке добавить индикатор связи с сервером, какой-то зелёный огонёк. Но в наших макетах место для такого индикатора не предусмотрено. Куда его тут приделать?

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

И вот здесь мне интересно, дорогие читатели: вам уже очевидно, что происходит какая-то хрень, или пока рассуждение кажется логичным?

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

Оказывается, если связь пропала, работник должен то ли временно перестать работать, то ли что-то перезагрузить, то ли позвать старшего, то ли ещё каким-нибудь способом разобраться с проблемой. Но в нарушение принципа «Без обучения» об этом нигде не сказано! Работник должен где-то заранее, из других источников, узнать, что отсутствие зелёного огонька означает необходимость каких-то действий, и не забыть об этом.

Допустим теперь, наш работник всё это знает и помнит. Представьте: работа кипит, экраны сменяют друг друга, работник жмёт кнопки. И вот в уголке пропадает зелёный огонёк. Но остальные-то 99,99% экрана продолжают выглядеть так, будто всё в порядке и можно работать дальше. Мы зачем-то показываем человеку рабочий интерфейс, хотя сами уже знаем, что пользоваться им сейчас не надо; надо звать старшего и вот это всё.

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

Не надо так.

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

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

Идея решения простая: каждый пункт меню должен всегда занимать столько места, сколько занимал бы, будь он жирным, даже когда на самом деле он не жирный. Но как это сделать?

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

Можно положить внутрь каждого пункта невидимую жирную копию текста, распорку. Это лишний элемент в разметке, тоже не идеально, но смириться можно. Я не нашёл решения совсем без изменения разметки, но зато нашёл, как обойтись атрибутом, без лишних элементов: слово, жирность которого нужно мерить, ставится в атрибут, а потом в ЦССе делается псевдоэлемент, контент которого берётся из этого атрибута. Так уже неплохо.

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

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

С адаптивом есть ещё и такой момент. Когда меню не влезает целиком, важно, чтобы ты хотя бы видел, что какие-то пункты ещё есть за пределами экрана. На сайте Бюро для этого давно работает фокус: если меню не влезает полностью, то расстояния между пунктами подкручиваются так, чтобы последний пункт гарантированно обрезался краем экрана, и тем намекал на продолжение. Это я тоже к запуску сделать не успел, но хотел.

В общем, теперь всё распутал: атрибут, используемый ЦССом для измерения жирного текста, стоит у обёртки, а сам текст пункта меню стоит у элемента внутри. Любой пункт можно делать и жирным, и обычным, и подчёркивание при наведении всегда остаётся ровно под буквами. Кликать можно в отступ между пунктами, и ничего никуда не прыгает при переключении. Жирность как бы переезжает с пункта на пункт при переключении, но каждый из них остаётся на своём месте. И расстояние между пунктами растягивается так, чтобы всегда было видно, что есть ещё пункты за краем. Красота!