{
    "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\/fitts\/",
    "feed_url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=tags%2Ffitts%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": "472",
            "url": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/small-icons\/",
            "title": "Маленькие иконки рядом на практике",
            "content_html": "<p>В веб-приложении есть список сущностей. Например, привычные для меня — таблицы и графики. Поэтому и иконки условных файлов такие.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/files@2x.png\" width=\"179\" height=\"156\" alt=\"\" \/>\n<\/div>\n<p>Иногда их удаляют и переименовывают. Это редкие сценарии, которые лучше делать прямо в списке пока объект перед глазами. Если у списка мало места, подойдут иконки.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/regular@2x.png\" width=\"179\" height=\"156\" alt=\"\" \/>\n<\/div>\n<p>Клик в корзину сразу переносит «файл» в список с удалёнными. А карандаш запускает редактирование имени. Поле ввода закрывает иконки, предохраняя от случайного попадания. Клик мышкой (или клавиша «Ввод») вне поля сохраняет изменения.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/regular-edit@2x.png\" width=\"179\" height=\"156\" alt=\"\" \/>\n<\/div>\n<p>Задача решена, но есть проблемы — иконки маленькие и стоят близко, поэтому легко попасть в соседнюю (<a href=\"http:\/\/raskin-interface.narod.ru\/interface\/chapter4.htm#s4.4\">подробнее о законе Фиттса<\/a> у Раскина). Да, и как закончить редактирование не очевидно. Место ограничено, поэтому площадь всплывающей области увеличить нельзя. Увеличить иконки тоже не получится. <\/p>\n<p>Убираю при наведении иконку типа «файла», и ставлю на её место карандаш. Радую Фиттса, выигрываю в длине текста.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/change-icon@2x.png\" width=\"179\" height=\"156\" alt=\"\" \/>\n<\/div>\n<p>Теперь области клика можно сделать сильно больше иконок:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/change-icon-click@2x.png\" width=\"179\" height=\"156\" alt=\"\" \/>\n<\/div>\n<p>И если оставлять карандаш при редактировании, то пусть он завершает редактирование (включение и выключение на одном элементе не редкость).<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/change-icon-edit@2x.png\" width=\"179\" height=\"156\" alt=\"\" \/>\n<\/div>\n",
            "date_published": "2016-10-31T12:36:30+03:00",
            "date_modified": "2016-11-03T18:52:03+03:00",
            "image": "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/files@2x.png",
            "_date_published_rfc2822": "Mon, 31 Oct 2016 12:36:30 +0300",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/kirillbelyaev.com\/ru\/blog\/?go=all\/small-icons\/",
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/files@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/regular@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/regular-edit@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/change-icon@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/change-icon-click@2x.png",
                    "https:\/\/kirillbelyaev.com\/ru\/blog\/pictures\/change-icon-edit@2x.png"
                ]
            }
        }
    ],
    "_e2_version": 3572,
    "_e2_ua_string": "E2 (v3572; Aegea)"
}