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

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

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

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

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

Вот два производителя наушников использовали на своих сайтах разные приемы:

Audeze же, как и полагается более дорогому бренду, оформил каталог на премиальном черном фоне, позволив и наушникам оставаться солидно-черными.

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

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

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

Когда я ее увидел впервые, я немного вздрогнул. Для калибровки впечатления показал фото жене — она произнесла «фууу» и отвернулась. Значит, это не глюк, фотка всё же фонит каким-то сигналом. Каким же?

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

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

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

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

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

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

— на нижнем ряду маркировка теперь центробежная, она прижимается к дальнему от пробела краю клавишей

— убрали «fn» у клавиши в углу, теперь там только глобус

— зачем-то придвинули ближе друг к другу стрелочки на клавишах «вверх» и «вниз»

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

— подписи F-клавиш чуть опустились и так стали более второстепенным по сравнению с маркировкой иконками

— сильно уменьшили двоеточие и точку с запятой.

Не всегда удается выловить мудрость, но всё равно залипательно

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

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

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

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

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

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

Примерно такая разница

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

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

Здесь столько слоев абсурда, что даже слова подобрать тяжело.

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

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

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

И модальное окно. Внутри другого модального окна. Конечно же, его нельзя подвинуть, чтобы прочитать пояснительный текст у настройки, которая вызвала такое предупреждение. А само модальное окно ничего не знает о том, что за настройка была изменена, и поэтому содержит только около-бесполезную информацию. Сотрудник инспекции, пришедший взять подпись, потому что так велено, а зачем нужна подпись, какие последствия несет и почему нельзя без нее, это вопросы не к нему, он человек маленький, все вопросы к начальству (где начальство не знает).

Еще один вестник апокалипсиса.

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

Ранее в рамках этой рубрики я уже редизайнил:

— графическое оформление крутилок икеевской газовой плиты: https://t.me/meow_design/966

— графическое оформление крутилки выбора программы стиральной машины: https://t.me/meow_design/1226

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

— Простыми «CSS-изменениями» уже можно сделать сильно лучше, чем есть сейчас.

— Канонический «вот так надо»-вариант — это, конечно, хорошо, но когда речь идет о носителе, наполняемом данными произвольного объема, динамическая верстка — еще лучше. Потому что разработанный под самые экстремальные возможные условия макет будет пустым и малоинформативным на другом, более распространенном наборе данных. Я когда-то уже писал про эту коварную ловушку правила Константина Константинопольского https://t.me/meow_design/571.

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

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

Всё это можно будет допилить, если вдруг дело дойдет от фантазий на коленке у телеграма до реального проекта редизайна городских автобусных табло.

На этом всё, сорян за ночную простыню.

(Оптимистично оценил возможности табло в 10 fps)

Получается какая-то система вариантов макета, распределенных по количеству и объему информации:

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

Если маршрутов 10‒15, появляется третья колонка, при этом в первой колонке мы по-прежнему пытаемся дать полную информацию о двух ближайших автобусах пяти первых маршрутов. Но при длинных названиях маршрутов вынуждены оставить отсчет только в минутах. Заголовки колонок в этом случае уже и не нужны:

Если маршрутов 5‒10, появляется вторая колонка. Если позволяет длина подписей, в ней показывается информация о втором автобусе, то есть две колонки равноценны, иначе вторая колонка демонстрируется в укороченном варианте без инфы о втором автобусе маршрута. Количество строчек тоже подстраивается под количеством маршрутов:

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

Скажем, если маршрутов не больше четырех, можно не стесняться увеличить кегль еще больше (на самом деле в городе есть и укороченные по высоте версии табло для малонагруженных остановок, но мы их в рамках упражнения оставили за скобками):

найс. Мы удвоили количество отображаемых маршрутов. На 25% увеличили кегль. Перераспределили палитру, чтобы менее заметные цвета отвечали за отображение менее приоритетной информации. Подписи маршрутов теперь самые заметные, а не самые малозаметные элементы табло.

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

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

Так что давайте, во-первых, оценим достигнутый прогресс, сравнив было и стало:

Оба варианта справляются. Попробуем еще увеличить:

Следующее испытание: подумаем о доступности экрана и немного увеличим кегль подписей, буквально на один пиксель:

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

Например, посмотрим, как они справятся с испытанием АДОМ!!! Ну то есть с местной альтернативной Константину Константинопольскому — длинными названиями сезонных маршрутов «Ада1», «Ада2» и т.д. В обеих вариантах пришлось откатиться к неравнозначным колонкам:

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

Появляется соблазн отнестись к табло как к экрану электронной очереди, то есть крупно «пуш-уведомлениями» показывать подъезжающие автобусы, а остальные показывать сильно мельче.

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

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

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

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

Так как информация о ближайшем автобусе маршрута всё же имеет наивысшую ценность среди пассажиров, оставим выделенными жирным только их, а вторые и последующие уже будем подписывать тоньше:

Можно сделать концептуальный финт и объявить, что на табло идет перечень не маршрутов, а автобусов! То есть допускаем в перечне дублирование номеров, так как показываем в очереди все автобусы в хронологическом порядке, не только ближайшие автобусы данного номера. Тогда уже уместятся три колонки:

Можно заметить, что с равными колонками у вторых автобусов маршрутов умещается только отсчет в минутах, но уже без обратного отсчета в остановках.

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

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

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

Чтош, мы увеличили количество отображаемых одновременно маршрутов до 6, но это по-прежнему мало, надо хотя бы 8‒10. Конечно, очень кстати было бы просто перевернуть табло и вывести всё в один длинный столбик:

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

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

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

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

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

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

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

Для начала — простейшие «CSS-изменения» без перекройки макета:

1. Маршруты белым цветом, чтобы были видны в любую погоду.

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

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

Получаем:

Продолжим:

4. Чтобы маршруты всё же как-то выделялись среди этого буйства цифр, накидываем на них «болд». 

5. Убираем синюю мини-нумерацию 1-2-3 автобусов маршрутов. Кажется, что это избыточная самоочевидная штука.

6. Убираем вертикальные линии сетки, вместо этого делим информацию на группы отступами.

7. Отдаем голубой цвет обратному отсчету остановок, так они складываются в свой информационный слой, а количество минут — в свой.

Получаем:

Штош, начнем. Вот крупнее то, что имеем на входе:

На автобусных остановках установили табло онлайн отслеживания транспорта. Устройство простое: слева столбик красных маршрутов, справа время в минутах и количество остановок (!) до ближайших трех автобусов этого маршрута. Верхняя строка зарезервирована для заголовка колонки и бегущей строки, на которой гоняют описания маршрутов (формат «конечная 1 — конечная 2»), текущее время, температуру воздуха и вроде еще какую-то служебную инфу. 

Я много месяцев смотрел на эти табло и прикидывал, что с ними не так и как бы я их передизайнил. Так что пришло время традиционной длииинной простыни пошагового редизайна «ход мысли вслух».

У нынешнего дизайна есть два фундаментальных минуса. Во-первых, на табло одновременно умещаются только пять маршрутов, а многие остановки обслуживают больше маршрутов, на главных магистралях бывают и 9‒10 маршрутов на остановку, замеченный мной максимум — аж 16. 

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

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