{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Кирилл Беляев: заметки с тегом ползунок",
    "_rss_description": "о подаче информации, айдентике, интерфейсах и жизненной среде",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags\/polzunok\/",
    "feed_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags%2Fpolzunok%2Fjson%2F",
    "icon": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101",
    "author": {
        "name": "Кирилл Беляев",
        "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/",
        "avatar": "https:\/\/kirillbelyaev.com\/ru\/blog\/user\/userpic@2x.jpg?1662385101"
    },
    "items": [
        {
            "id": "402",
            "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/finish-timeline-update\/",
            "title": "Обновление графика финишей",
            "content_html": "<p>Организаторы Московского марафона <a href=\"http:\/\/moscowmarathon.org\/ru\/seriya-zabegov\/moskovskij-polumarafon\/infographics\">опубликовали<\/a> визуализацию результатов Московского полумарафона 2015 года, над которой я работал <a href=\"http:\/\/datalaboratory.ru\">в лаборатории<\/a>.<\/p>\n<p>Особенно интересно было пересобрать финиши. Было:<\/p>\n<div class=\"e2-text-picture\" style=\"margin: 12px 0 42px 0;\"><p><img src=\"http:\/\/kirillbelyaev.com\/pictures\/mm14-finish@2x.png\" width=\"768\" alt=\"\"><\/p>\n<\/div><p>Первая проблема прошлой версии —две временные шкалы. Один ползунок и две шкалы сбивают с толку. Шкалы равнозначные, поэтому догадаться, что верхняя — относительна ко времени суток, а нижняя — абсолютная, сложно. Усугубляет порядок: сверху стоит второстепенная информация, а снизу — главная. Отсчёт от старта важнее, отсчёта от девяти утра. Плюс шкалы стоят далеко друг от друга и взгляд перепрыгивает с верхних индикаторов времени на нижние и обратно. (см. <a href=\"http:\/\/raskin-interface.narod.ru\/interface\/chapter2.htm#s2.3\">о локусе<\/a> у Расскина.)<\/p>\n<p>Склеиваю шкалы в одну и выделяю главное:<\/p>\n<div class=\"e2-text-picture\" style=\"margin:  12px 0 42px 0;\"><p><img src=\"http:\/\/kirillbelyaev.com\/pictures\/mm15-finish-1@2x.png\" width=\"768\" alt=\"\"><\/p>\n<\/div><p>Чтобы схватить ползунок, целятся имено в ручку. А она и индикатор времени стоят далеко друг от друга. Взгляд опять скачет туда-сюда. Тут перескоки особенно неприятны: взгляд следит за временем, а рука незаметно уводит мышку в сторону от активной зоны ползунка, и ползунок останавливается. Теперь нужно снова взять ползунок и постараться не потерять.<\/p>\n<p>Чтобы исправить проблему поставлю время над ручкой ползунка:<\/p>\n<div class=\"e2-text-picture\" style=\"margin:  12px 0 42px 0;\"><p><img src=\"http:\/\/kirillbelyaev.com\/pictures\/mm15-finish-2@2x.png\" width=\"768\" alt=\"\"><\/p>\n<\/div><p>Лучше, но теперь цифры над ручкой пересекаются с цифрами на шкале. Увеличиваю ручку и ставлю текущее время на неё. Дополнительный плюс — большую ручку удобнее хватать (см. <a href=\"http:\/\/raskin-interface.narod.ru\/interface\/chapter4.htm#s4.4\">закон Фитса<\/a> у Раскина):<\/p>\n<div class=\"e2-text-picture\" style=\"margin:  14px 0 42px 0;\"><p><img src=\"http:\/\/kirillbelyaev.com\/pictures\/mm15-finish-3@2x.png\" width=\"768\" alt=\"\"><\/p>\n<\/div><p>Конструкцию починил. Теперь детали. Пройденный путь слабо контрастирует с линейкой шкалы. Убираю линейку и делаю рисочки заметнее — теперь они «держат» шкалу. Путь выравниваю по высоте с рисочками.<\/p>\n<p>От ползунка идёт линейка. Внутри ручки она розовая, а снаружи — чёрная, неконтрастная к графику. Два цвета для одного элемента — перебор. Объединил в один и покрасил в него же время на ползунке (см. естественное соответствие  <a href=\"https:\/\/www.labirint.ru\/books\/371156\/\">в книге<\/a> Нормана):<\/p>\n<div class=\"e2-text-picture\" style=\"margin:  14px 0 42px 0;\"><p><img src=\"http:\/\/kirillbelyaev.com\/pictures\/mm15-finish-4@2x.png\" width=\"768\" alt=\"\"><\/p>\n<\/div><p>Нижняя линейка с рисочками теперь не нужна. Убираю:<\/p>\n<div class=\"e2-text-picture\" style=\"margin:  14px 0 42px 0;\"><p><img src=\"http:\/\/kirillbelyaev.com\/pictures\/mm15-finish-5@2x.png\" width=\"768\" alt=\"\"><\/p>\n<\/div><p>Теперь нижнюю границу создаёт график. Но в начале графика нет, ничто не задаёт горизонталь, поэтому заголовок болтается в воздухе. Опускаю заголовок, так чтобы базовая линия нижней строки стояла на нижней границе. Теперь заголовок сам крепко стоит и держит формат:<\/p>\n<div class=\"e2-text-picture\" style=\"margin:  14px 0 42px 0;\"><p><img src=\"http:\/\/kirillbelyaev.com\/pictures\/mm15-finish-6@2x.png\" width=\"768\" alt=\"\"><\/p>\n<\/div>",
            "date_published": "2015-07-03T12:55:13+03:00",
            "date_modified": "2017-10-26T10:21:20+03:00",
            "_date_published_rfc2822": "Fri, 03 Jul 2015 12:55:13 +0300",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/finish-timeline-update\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        }
    ],
    "_e2_version": 3572,
    "_e2_ua_string": "E2 (v3572; Aegea)"
}