о подаче информации, айдентике, интерфейсах и жизненной среде.
Посмотреть работы · Поддержать · Подписаться

Позднее Ctrl + ↑

Сумки в машине

Храню икеевские и других хозяйственные сумки в машине. Так они всегда под рукой. Если пора вынести тяжёлое из дома, а сумки дома закончились, то сбегать в машину несложно — она под окном. Но если в магазине неожиданно распродавали бытовую химию и накупил 15-20 кг на год вперёд, то домой за сумкой уже не сбегать. Или если пару вязанок дров для бани прикупил.

Позапрошлым летом мы увезли из Петербурга кучу Полиных детских книг. Наперёд о таре никто не подумал. Сработал правило — сумки ждали в багажнике.

 57   2017   автомобиль   быт   сумка

Экспресс-разбор визуализации о пробках

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

Работа «Время в пути» Виллема Тулпа показывает автотрафик в Нидерландах за 1 ноября 2016-го:

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

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

Давайте разбираться. Тут показаны только дороги и подписаны города.
Главный минус — формат. Видео сложнее анализировать. Для навигации есть только пауза и перемотка — попадай в нужный момент, как хочешь. При этом если просто смотреть ролик, то заметишь всплески около 9 и 17 часов и это суперочевидные выводы, для которых не нужна визуализация.

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

Автор пишет, что участки без данных — серые, а с маленьким отклонением — синие (голубые). По-русски назвал бы «сизым». Эти цвета почти неразличимы на видео. Среднее отклонение красное, сильное — белое. Почему такой набор? Может, в честь Нидерландского флага, но зачем? Светофорный градиент сработает лучше.

Цвет и толщина линии — это плюс-минус понятно, а как работает смещение может быть не очевидно. Предполагаю, что так. Ровная дорога с датчиками:

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

А дальше хитрое алгоритмическое сглаживание, чтобы дороги не разрывались:

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

Автор ссылается на модель «Дорожных волн», которая объясняет поведение визуализированного типа пробок. И вот тут, мне кажется, главная ловушка. Классно же прям волнами показать эти «дорожные волны»:

Because of the displacement based on the deviation from the assumed normal travel time, the visualization shows clearly that traffic jams can move in waves. These waves move backwards, opposite of the driving direction of the cars.

Но визуализация получается сложная и не наглядная.

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

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

Осень, хандра и поглощение солнечного света

Когда осенью дни становятся короче, яркие краски уходят, начинается хандра. Если у вас так, то дальше — идея, как облегчить страдания.
 
Когда день короткий, тело получает мало «полезных излучений» солнца. Витамин D вырабатывается меньше, что ли, не знаю. С короткими днями ещё и температура на улицах падает. Чтобы не замерзать одеваемся, закрывая большую часть тела от тех самых полезных излучений. С поздней осени до середины весны выходить из дома совсем неохота.
 
Идея в том, чтобы вопреки нежеланию гулять. В те куцые 7-5 часов, когда на улице светло. И подолгу, чтобы за час под хмурым небом набрать 15 минут лета. Даже через затянутое небо что-то проходит, в обед же светлее становится. На прогулке меньше преград от солнца к коже — только облака. Дома ещё глухие стены, да и окна что-то задерживают. Кажется, поэтому скандинавы делают окна как можно больше — они лучше пропускают, чем стены.
 
Гулять осенью — то ещё удовольствие. Для этого времени нужна подходящая одежда: непромокающие ботинки, длинная куртка или пальто. Ещё классно брать с собой термос с чаем или с заваренными корочками апельсина, лимона, брусникой и имбирём. Бонус — греться после прогулки у камина. В Риге немало кафе, где их топят.
 
Заметил эффект на себе. Когда появилась привычка и перестал всё время фокусироваться на прохладе и сырости, гулял с сыном часам. А тут малыш приболел и вся семья сидит дома пятый день. Хочется не сменить помещение или прокатиться, а просто на улицу.

Масштабирование карты и квазирежимы

Стоит такая интерфейсная задача — изменение масштаба на картах, которые занимают часть экрана.

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

Тому виной модальность — режимы, которые не осознаются, но меняют интерпретацию действий. В примере с картой режим не переключается явно, а переключён по умолчанию — одни элементы реагирует на прокрутку так, другой — иначе. Даже сталкиваясь с этим раз в день, я не запоминаю, что карта в другом режиме.

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

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

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

Минус решения в том, что подсказка появляется при прокрутке карты. Привычку менять масштаб прокруткой уже сформировали. А теперь прокрутка не масштабирует карту, а показывает подсказку. Сначала остановлюсь, читаю и спешу тренировать новую привычку.

Паттерн «Минералы»

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

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

Ещё у «Минералов» нет фона, это расширяет области применения, а при наложении нескольких слоёв расширяет области применения ещё раз:

Стоит 2 500 ₽. В эту цену входят 6 цветовых схемы. Если хотите своё сочетание, напишите на [email protected]. Без нашего согласия паттерн изменять нельзя.

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

Все условия смотрите в короткой лицензии.

 407   2017   мы сделали   паттерн
Ранее Ctrl + ↓