Обновление графика финишей

Кирилл Беляев — Fri, 03 Jul 2015 12:55:13 +0300

Организаторы Московского марафона опубликовали визуализацию результатов Московского полумарафона 2015 года, над которой я работал в лаборатории.

Особенно интересно было пересобрать финиши. Было:

Первая проблема прошлой версии —две временные шкалы. Один ползунок и две шкалы сбивают с толку. Шкалы равнозначные, поэтому догадаться, что верхняя — относительна ко времени суток, а нижняя — абсолютная, сложно. Усугубляет порядок: сверху стоит второстепенная информация, а снизу — главная. Отсчёт от старта важнее, отсчёта от девяти утра. Плюс шкалы стоят далеко друг от друга и взгляд перепрыгивает с верхних индикаторов времени на нижние и обратно. (см. о локусе у Расскина.)

Склеиваю шкалы в одну и выделяю главное:

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

Чтобы исправить проблему поставлю время над ручкой ползунка:

Лучше, но теперь цифры над ручкой пересекаются с цифрами на шкале. Увеличиваю ручку и ставлю текущее время на неё. Дополнительный плюс — большую ручку удобнее хватать (см. закон Фитса у Раскина):

Конструкцию починил. Теперь детали. Пройденный путь слабо контрастирует с линейкой шкалы. Убираю линейку и делаю рисочки заметнее — теперь они «держат» шкалу. Путь выравниваю по высоте с рисочками.

От ползунка идёт линейка. Внутри ручки она розовая, а снаружи — чёрная, неконтрастная к графику. Два цвета для одного элемента — перебор. Объединил в один и покрасил в него же время на ползунке (см. естественное соответствие в книге Нормана):

Нижняя линейка с рисочками теперь не нужна. Убираю:

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

Кирилл Беляев: заметки с тегом ползунок

Обновление графика финишей