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

Проблема оказалась вроде бы решена в мире велопроката, но она породила новую проблему в надсистеме: для горожан, ничего не знающих о проблемах мира велопроката, такое оформление станции означает «НЕ ПОДХОДИ УБЬЕТ ЭЛЕКТРИЧЕСТВОМ ОПАСНО ДЛЯ ЖИЗНИ ГОЛЫМИ РУКАМИ НЕ ПРИКАСАТЬСЯ».

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

(https://ru.wikipedia.org/wiki/Сети_проводного_радиовещания, раздел «Качественные показатели»)

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

Такое отношение противопоказано дизайнерам. Об этом еще Купер писал: пользователи не тупые, они просто заняты и у них нет времени разбираться. Ошибка человека при пользовании творением дизайнера — следствие недоработки дизайна. В авиационной безопасности происшествие с объявленной причиной «Человеческий фактор» запускает процедуру выяснения, какие недоработки в интерфейсе системы управления самолетом привели к ошибке пилота. Дизайнеру не нужно сто трупов, чтобы принять эти стандарты для себя.

Грязь — еще один пункт в список недостатков напольной навигации, которые я вскользь упомянал в январской заметке о перспективных искажениях (https://www.artlebedev.ru/backstage/perspektivlyalka/, копия на медиуме: https://medium.com/@kefiijrw/%D0%BF%D0%B5%D1%80%D1%81%D0%BF%D0%B5%D0%BA%D1%82%D0%B8%D0%B2%D0%BB%D1%8F%D0%BB%D0%BA%D0%B0-e2aaba31a8d).

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

Если бы подобные врезки не разрывали повествование, проблема бы не возникла. Видимо, «Медузу» подкупила возможность для нескольких задач использовать один блок.

Ребята так бились за то, чтобы вывеску заметили даже из мчащего по Кутузовскому с огромной скоростью геленвагена, что случайно создали супер-слово НЕМЕЦКИЙЦЕНТРИМПЛАНТАЦИИ. Про разрядку прописных и говорить нечего.

Тут смешно даже не то, что на сайте вылез html-код, а почему это случилось: кажется, типографическое регулярное выражение распознало в «Депутат Г. Д.» имя человека и заботливо решило тегом <nobr> не допустить отрыва инициалов господина Депутат от его фамилии.

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

(ладно, у меня на самом деле осталось только много кнопок со второй надписью)

Первые три тысячи раз я прочитал эту надпись как «Луэл Янг» и всё пытался вспомнить, в какой группе играл этот гитарист.

Текстовый инпут после неудачной валидации подсветился светло-красным цветом, чтобы на него обратили внимание, но на серой подложке эффект вышел обратный — вместо выделения инпут потерялся, слившись с фоном.

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

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

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

Я использую два простых правила:

1. Перекрывающий страницу попап можно показывать только ответной реакцией на действие посетителя (обычно — клик на кнопку или псеводссылку), то есть когда он явно прошенный.

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

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