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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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