{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Блог Ильи Бирмана: заметки с тегом обратная связь",
    "_rss_description": "Блог Ильи Бирмана о дизайне, городах, музыке и жизни.",
    "_rss_language": "ru",
    "_itunes_email": "ilyabirman@ilyabirman.ru",
    "_itunes_categories_xml": "<itunes:category text=\"Arts\"><itunes:category text=\"Design\" \/><\/itunes:category>\r\n<itunes:category text=\"Society &amp; Culture\"><itunes:category text=\"Personal Journals\" \/><\/itunes:category>\r\n<itunes:category text=\"Technology\" \/>\r\n",
    "_itunes_image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764",
    "_itunes_explicit": "no",
    "home_page_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/obratnaya-svyaz\/",
    "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/obratnaya-svyaz\/json\/",
    "icon": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764",
    "authors": [
        {
            "name": "Илья Бирман",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/",
            "avatar": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764"
        }
    ],
    "items": [
        {
            "id": "6703",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/skeleton-state\/",
            "title": "«Скелет» как состояние компонента и экрана",
            "content_html": "<p>Столкнулся с дизайн-системой, где у всех компонентов отрисованы состояния «скелет» — это типа как выглядит элемент, пока он не загрузился. Дизайнеры вообще говорили «скелетон», но скелетон — это такой бобслей для одиночек, а skeleton — это скелет. С этим состоянием есть проблема, сейчас объясню.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/skeleton@2x.png\" width=\"478\" height=\"156\" alt=\"\" \/>\n<\/div>\n<p>Пока экран приложения загружается, вместо индикаторов загрузки хорошо показывать скелет экрана. Тогда вместо того, чтобы привлекать внимание к тормозам, мы создаём у пользователя впечатление, что экран почти загрузился. Секундные задержки перестают ощущаться, человек успевает сориентироваться на экране.<\/p>\n<p>Так что же не так с состоянием компонента «скелет»? То, что скелет — это состояние экрана целиком, а не отдельного компонента. (Если уж на то пошло, у компонента может быть состояние «кость», а не «скелет».)<\/p>\n<p>Во-первых, рисование отдельных скелетных состояний компонентов провоцирует дизайнеров на рисование излишне детализированных скелетов экранов. Вот Вконтакте например:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/vk-skeleton-detailed@2x.png\" width=\"1024\" height=\"844\" alt=\"\" \/>\n<\/div>\n<p>Зачем столько мусора? Чтобы показать, что экран ещё грузится, достаточно такого:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/vk-skeleton-sane@2x.png\" width=\"1024\" height=\"844\" alt=\"\" \/>\n<\/div>\n<p>Да и ещё спокойнее можно.<\/p>\n<p>Во-вторых, во время загрузки экрана он обычно не знает, какие именно компоненты на нём будут, чем они будут наполнены, какого они будут размера. То есть даже непонятно, какие именно компоненты в этом состоянии «скелет» туда ставить, приходится выдумывать. В то же время, если какие-то элементы на экране нужны независимо от подгружаемых данных, скажем, кнопки навигации, то их стоит сразу показывать в нормальном виде, безо всяких скелетов.<\/p>\n<p>В-третьих, даже если представить, что сам набор элементов известен сразу, а подгружается только их наполнение, то получается довольно неприятный эффект, когда во время загрузки на экране в случайные моменты появляются разные блоки, постоянно что-то прыгает, отталкивает то, что ниже. То есть даже в этом случае лучше нарисовать весь экран в скелетном состоянии, а когда загрузилось достаточно данных для его стабильного построения — тогда показать всё на своих местах.<\/p>\n",
            "summary": "Столкнулся с дизайн-системой, где у всех компонентов отрисованы состояния «скелет» — это типа как выглядит элемент, пока он не загрузился",
            "date_published": "2026-03-31T12:38:47+05:00",
            "date_modified": "2026-04-01T00:35:20+05:00",
            "tags": [
                "обратная связь",
                "пользовательский интерфейс"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/skeleton@2x.png",
            "_date_published_rfc2822": "Tue, 31 Mar 2026 12:38:47 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6703",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/skeleton@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/vk-skeleton-detailed@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/vk-skeleton-sane@2x.png"
                ]
            }
        },
        {
            "id": "6596",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/krutilka-znachit-programma-dumaet\/",
            "title": "Крутилка значит «программа думает»",
            "content_html": "<p>Некоторые элементы интерфейсного языка кажутся универсальными и одинаково понимаемыми всеми, пока не встретишь случай, когда начинающий дизайнер вдруг понимает их не так. Поэтому напоминаю, что зацикленная абстрактная анимация означает, что программа думает, и пользователю тут пока ловить нечего:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/krutilka_12frames.gif\" width=\"32\" height=\"32\" alt=\"\" \/>\n<\/div>\n<p>Она ну никак не может означать, что программа, наоборот, ждёт чего-то от пользователя.<\/p>\n",
            "summary": "Некоторые элементы интерфейсного языка кажутся универсальными и одинаково понимаемыми всеми, пока не встретишь случай, когда начинающий дизайнер вдруг понимает их не так",
            "date_published": "2025-12-01T11:41:10+05:00",
            "date_modified": "2026-01-01T12:24:50+05:00",
            "tags": [
                "обратная связь",
                "пользовательский интерфейс",
                "прогрессбар",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/krutilka_12frames.gif",
            "_date_published_rfc2822": "Mon, 01 Dec 2025 11:41:10 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6596",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/krutilka_12frames.gif"
                ]
            }
        },
        {
            "id": "6468",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-168\/",
            "title": "На интерфейсном курсе: что делать, пока ЭВМ думает медленно?",
            "content_html": "<p>Смотрим на интерфейс добавления документа, где по легенде системе нужно время на его распознавание. Обсуждаем, как сделать, чтобы всё казалось быстрым. 7 минут:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/ax1BrxWlcOw?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 168 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 10 февраля 2024 года.<\/p>\n<p>Идёт запись на курс, который пройдёт 24 мая — 22 июня. Сейчас −30% из-за ранней записи. Недавно обновились несколько лекций и добавилась новая.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "Смотрим на интерфейс добавления документа, где по легенде системе нужно время на его распознавание. Обсуждаем, как сделать, чтобы всё казалось быстрым",
            "date_published": "2025-04-15T13:12:52+05:00",
            "date_modified": "2025-04-15T13:12:49+05:00",
            "tags": [
                "обратная связь",
                "студентам",
                "фрагменты курса ПИ",
                "человечность"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-ax1BrxWlcOw-cover.jpg",
            "_date_published_rfc2822": "Tue, 15 Apr 2025 13:12:52 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6468",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-ax1BrxWlcOw-cover.jpg"
                ]
            }
        },
        {
            "id": "6461",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/programma-zhdyot-polzovatelya-bez-krutilki\/",
            "title": "Программа ждёт пользователя без крутилки",
            "content_html": "<p>В студенческих работах изредка встречается такой дизайн, когда программа ожидает действия пользователя и показывает при этом крутилку:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/who-awaits-whom@2x.jpg\" width=\"214\" height=\"110\" alt=\"\" \/>\n<\/div>\n<p>Так не должно быть: крутилка означает, что пользователь ждёт программу, а не программа пользователя. Здесь возникает двусмысленность: с одной стороны, написано «наведите», а с другой — снизу крутится крутилка, как будто программа ещё не готова, и пока рано наводить. И кому верить — непонятно.<\/p>\n",
            "summary": "В студенческих работах изредка встречается такой дизайн, когда программа ожидает действия пользователя и показывает при этом крутилку",
            "date_published": "2025-03-31T11:28:53+05:00",
            "date_modified": "2026-01-01T12:24:38+05:00",
            "tags": [
                "обратная связь",
                "пользовательский интерфейс",
                "прогрессбар",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/who-awaits-whom@2x.jpg",
            "_date_published_rfc2822": "Mon, 31 Mar 2025 11:28:53 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6461",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/who-awaits-whom@2x.jpg"
                ]
            }
        },
        {
            "id": "6357",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-149\/",
            "title": "На интерфейсном курсе: двойная обратная связь",
            "content_html": "<p>Если в ответ на действие пользователя в интерфейсе что-то происходит, то не нужно дополнительно уведомлять, что это произошло — это ж и так видно! 2 минуты с семинара курса:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/UENZW1gNjpU?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Также есть <a href=\"https:\/\/vk.com\/video286049442_456239415\">на ВК-видео<\/a>.<\/p>\n<p>Это фрагмент № 149 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 27 октября 2023 года.<\/p>\n<p>Идёт запись на курс, который пройдёт с 12 октября по 10 ноября. Сейчас −10%.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "Если в ответ на действие пользователя в интерфейсе что-то происходит, то не нужно дополнительно уведомлять, что это произошло — это ж и так видно",
            "date_published": "2024-10-01T11:02:37+05:00",
            "date_modified": "2024-10-01T11:02:31+05:00",
            "tags": [
                "видео",
                "обратная связь",
                "студентам",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-UENZW1gNjpU-cover.jpg",
            "_date_published_rfc2822": "Tue, 01 Oct 2024 11:02:37 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6357",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-UENZW1gNjpU-cover.jpg"
                ]
            }
        },
        {
            "id": "6214",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/opyt-sirakyusy-s-prilozheniem-zhurnal\/",
            "title": "Опыт Сиракьюсы с приложением «Журнал»",
            "content_html": "<p>В продолжение темы того, что знания теряются. В 391-м выпуске «Ток-шоу» Джона Грубера Джон Сиракьюса <a href=\"https:\/\/daringfireball.net\/thetalkshow\/2023\/12\/23\/ep-391\">описывает свой опыт использования нового приложения «Журнал» на Айфоне<\/a> (с 1:27:44).<\/p>\n<p>Он говорит примерно такое: «Я запустил программу, нажал на „плюсик“, появилась панелька с приглашением разрешить ей автоматически предлагать мне идеи того, что добавлять в мой журнал. Я разрешил. Потом она спросила про уведомления. Я разрешил. И тут я оказался на той же панельке с приглашением разрешить предлагать идеи, но оно было задисейблено — видимо, потому что я их уже разрешил. И я такой: „Ок, и что мне теперь делать“? Я подёргал панельку туда-сюда, попытался её смахнуть, потом попробовал тапнуть что-то за её пределами — ничего не происходило. И тут вдруг панелька уехала, а за ней открылась куча тех самых идей. То есть она усердно формировала этот список. Такое не только в приложении „Журнал“ бывает. Это базовые понятия о взаимодействии человека и машины, которые каким-то образом покинули компанию Эпл. Когда компьютер что-то делает некоторое время, покажите что-то на экране, чтобы люди понимали, что компьютер думает!»<\/p>\n<p>Плачем вместе.<\/p>\n",
            "summary": "В продолжение темы того, что знания теряются. В 391-м выпуске «Ток-шоу» Джона Грубера Джон Сиракьюса описывает свой опыт использования нового приложения «Журнал» на Айфоне",
            "date_published": "2024-01-19T00:05:13+05:00",
            "date_modified": "2024-01-20T13:42:09+05:00",
            "tags": [
                "обратная связь",
                "подкасты",
                "пользовательский интерфейс",
                "цитаты",
                "Эпл"
            ],
            "_date_published_rfc2822": "Fri, 19 Jan 2024 00:05:13 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6214",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "6175",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/dont-hide-on-hover\/",
            "title": "Не надо скрывать элементы при наведении",
            "content_html": "<p>Это кажется очевидным, но в студенческих работах часто встречается, поэтому приходится писать. Не надо скрывать элементы при наведении мышки на них. В данном случае исчезла вся пицца, которую я хочу настроить:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/hover-hides.jpg\" width=\"1058\" height=\"1122\" alt=\"\" \/>\n<\/div>\n<p>Тут тоже почти исчезла:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/hover-hides-pizza.jpg\" width=\"1559\" height=\"1307\" alt=\"\" \/>\n<\/div>\n<p>А тут пропала цена и название:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/hover-hides-valenki.jpg\" width=\"1878\" height=\"758\" alt=\"\" \/>\n<\/div>\n<p>Видимо, дизайнерам кажется ловким, что они как бы переиспользовали место, но на самом деле это же ужасно раздражает. Люди водят мышкой по странице просто так, причём часто наводят как раз на тот элемент, которым заинтересовались. Очень тупо, что он в этот момент становится невидимым.<\/p>\n<p>В этих примерах при наведении появляются какие-то элементы управления. Бывает ещё такое, что в модненьких интернет-магазинах делают товар чёрно-белым при наведении — типа просто такой эффект для обратной связи. Обратная связь важна, но она не должна мешать смотреть на товар.<\/p>\n",
            "summary": "Это кажется очевидным, но в студенческих работах часто встречается, поэтому приходится писать. Не надо скрывать элементы при наведении мышки на них",
            "date_published": "2023-12-14T12:09:22+05:00",
            "date_modified": "2023-12-14T14:52:14+05:00",
            "tags": [
                "обратная связь",
                "пользовательский интерфейс",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/hover-hides.jpg",
            "_date_published_rfc2822": "Thu, 14 Dec 2023 12:09:22 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6175",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/hover-hides.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/hover-hides-pizza.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/hover-hides-valenki.jpg"
                ]
            }
        },
        {
            "id": "6025",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-107\/",
            "title": "На интерфейсном курсе: как делать, чтобы программа не тормозила",
            "content_html": "<p>Многие дизайнеры думают, что тормозной интерфейс — это из-за программистов. Но на самом деле ощущение быстроты в большей степени создаётся именно качественным дизайном. Если дизайнер нарисовал макет с шагом «Подождите...», то вся тормознутость будет сконцентрирована в нём. А работа дизайнера — придумать, как распределить ровно то же вычислительное время по другим шагам, чтобы пользователь тормозов не заметил. 4 минутки:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/GBj17b4l10s?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 107 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 17 марта 2023 года.<\/p>\n<p>До 30 июня идёт запись на курс, который пройдёт с 1 по 30 июля.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "Многие дизайнеры думают, что тормозной интерфейс — это из-за программистов. Но на самом деле ощущение быстроты в большей степени создаётся именно качественным дизайном",
            "date_published": "2023-06-26T18:19:26+05:00",
            "date_modified": "2023-07-22T21:44:35+05:00",
            "tags": [
                "видео",
                "обратная связь",
                "пользовательский интерфейс",
                "студентам",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-GBj17b4l10s-cover.jpg",
            "_date_published_rfc2822": "Mon, 26 Jun 2023 18:19:26 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6025",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-GBj17b4l10s-cover.jpg"
                ]
            }
        },
        {
            "id": "5988",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/bzhzh-bzhzh\/",
            "title": "Бжж-бжж",
            "content_html": "<p>Недавно купил новую электрическую зубную щётку. Когда чистишь зубы, она жужжит, но иногда на мгновение перестаёт жужжать. Я сначала подумал, что, может, я задеваю кнопку как-то случайно чуть-чуть, и она отключается. Или мне бракованная попалась, и там контакт какой-нибудь отходит в некоторых положениях.<\/p>\n<p>Но через несколько чисток я заметил, что слишком уж стабильно это повторяется. Оказалось, щётка так считает время: она раз в 30 секунд перестаёт жужжать на долю секудны, а через четыре таких цикла отключается вовсе. Это чтобы хорошо почистить все зубы: по 30 секунд чистишь нижние спереди, нижние сзади, верхние спереди, верхние сзади.<\/p>\n<p>Я считаю это решение блестящим. Такая мелочь, а мотивирует тщательно и внимательно чистить зубы, при этом не требует дополнительной индикации.<\/p>\n<p>Часто говорят, что интерфейс должен быть очевидным, но это не универсально. Для повседневных вещей эффективность куда важнее, чем понятность с первого использования.<\/p>\n",
            "summary": "Недавно купил новую электрическую зубную щётку. Когда чистишь зубы, она жужжит, но иногда на мгновение перестаёт жужжать",
            "date_published": "2023-05-04T11:43:01+05:00",
            "date_modified": "2023-05-04T11:53:09+05:00",
            "tags": [
                "индикация",
                "обратная связь",
                "пользовательский интерфейс"
            ],
            "_date_published_rfc2822": "Thu, 04 May 2023 11:43:01 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5988",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "5908",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/one-spinner-is-enough\/",
            "title": "Достаточно одной крутилки",
            "content_html": "<p>Крутилка — нормальный индикатор того, что программа думает. Но в современном вебе всё составляют из кубиков, и каждый может думать сам по себе. В результате получается уродство, когда крутится сразу куча крутилок:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/twitter-multi-spinners@2x.png\" width=\"570\" height=\"540\" alt=\"\" \/>\n<\/div>\n<p>При проектировании нужно сразу учитывать, что грузиться может несколько всего, и придумывать, где в таком случае будет крутилка. В случае с наобором однородных элементов достаточно крутилки в первом. С разнородными сложнее, но обычно её лучше поставить в самый верхний или крупный.<\/p>\n<p>В классическом Айфоне бывал индикатор загрузки в статусбаре:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/iphone-statusbar-spinner@2x.jpg\" width=\"320\" height=\"26\" alt=\"\" \/>\n<\/div>\n<p>И вроде было какое-то АПИ, чтобы сказать статусбару, мол, у меня в интерфейсе и так есть индикатор, так что не показывай в статусбаре.<\/p>\n<p>Но искусство подумать, чтобы на экране не было шлака, уже забыто даже в Эпле, так что чего ждать от Твиттера.<\/p>\n",
            "summary": "Крутилка — нормальный индикатор того, что программа думает. Но в современном вебе всё составляют из кубиков, и каждый может думать сам по себе",
            "date_published": "2022-11-12T12:37:31+05:00",
            "date_modified": "2022-11-12T12:54:06+05:00",
            "tags": [
                "Айфон",
                "обратная связь",
                "пользовательский интерфейс"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/twitter-multi-spinners@2x.png",
            "_date_published_rfc2822": "Sat, 12 Nov 2022 12:37:31 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5908",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/twitter-multi-spinners@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/iphone-statusbar-spinner@2x.jpg"
                ]
            }
        },
        {
            "id": "5141",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/new-york-feedback-2019-announcement\/",
            "title": "Лекция об обратной связи в Нью-Йорке",
            "content_html": "<p>В ближайший вторник, 22 октября, прочитаю в Нью-Йорке лекцию об обратной связи:<\/p>\n<blockquote>\n<p>This lecture is for both user interface designers and developers. I have done some talks on this topic, but poor understanding of the importance of feedback in interfaces remains one of the main problems with them. This lecture includes things like levels of feedback quality (immediate, continuous, physical); progress indication, skeletons, and optimistic feedback; perceived performance. Also: how to fix the iPhone X’s side button that takes a little bit of time to put your phone to sleep and make it behave like the old iPhones sleep\/wake button that put it to sleep instantly.<\/p>\n<\/blockquote>\n<p>Будет в 18:45 тут: Starta Ventures 220 E 23rd Street #401 (это 23-я стрит между 2 и 3-й авеню). Нужно зарегистрироваться <a href=\"https:\/\/www.meetup.com\/AngularNYC\/events\/265685941\/\">на Митапе<\/a>. Приходите и расскажите друзьям.<\/p>\n",
            "summary": "В ближайший вторник, 22 октября, прочитаю в Нью-Йорке лекцию об обратной связи",
            "date_published": "2019-10-17T13:14:52+05:00",
            "date_modified": "2025-03-14T18:34:38+05:00",
            "tags": [
                "лекции",
                "обратная связь"
            ],
            "_date_published_rfc2822": "Thu, 17 Oct 2019 13:14:52 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5141",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "5069",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/hover-matches-click\/",
            "title": "Ховер и клик должны совпадать",
            "content_html": "<p>Это кажется очевидным, но ошибки на эту тему встречаются так часто, что надо бы написать.<\/p>\n<p>Если у элемента интерфейса есть какой-то эффект при ховере (наведении мыши), этот элемент должен нажиматься. Если элемент нажимается, у него должен быть какой-то эффект при ховере. Зоны, в которых элемент нажимается и проявляет эффект при ховере должны совпадать с точностью до пикселя.<\/p>\n<p>Вот некоторые ошибки, которые мне встречались:<\/p>\n<ul>\n  <li>Меню на сайте состоит из ссылок, завёрнутых в некоторый контейнер. У контейнера в стилях прописана подсветка при наведении. Вокруг текста ссылки остаются некоторые поля до краёв контейнера, где контейнер подсвечивается, но ссылка не работает.<\/li>\n  <li>Подчёркивание ссылки реализовано как-то так, что клик в саму линию подчёркивания не вызывает перехода по ссылке, хотя ховер есть. Бывает наоборот: ховера нет, а клик срабатывает.<\/li>\n  <li>Модальный попап закрывается кликом за его пределами. Ховеры элементов вокруг попапа продолжают работать, хотя клик по ним не вызовет связанное с ними действие, а только лишь закроет попап.<\/li>\n  <li>Функция элемента заблокирована скриптом, а ховер остаётся. Например: главная кнопка на форме отключена из-за ошибки в заполнении, но продолжает подсвечиваться при наведении, как будто работает.<\/li>\n  <li>Большой контейнер с картинкой и подписью нажимается целиком и реагирует на наведение каким-то эффектом. В углу контейнера есть маленькая иконка, которая делает что-то другое, например, добавляет объект в «Избранное». При наведении на иконку эффект наведения на контейнер сохраняется, хотя клик в этом месте не вызовет действия, связанного с контейнером целиком.<\/li>\n<\/ul>\n<p>Эта мысль относится к теме «Обратная связь».<\/p>\n",
            "summary": "Это кажется очевидным, но ошибки на эту тему встречаются так часто, что надо бы написать",
            "date_published": "2019-07-03T17:02:55+05:00",
            "date_modified": "2019-07-03T17:02:50+05:00",
            "tags": [
                "обратная связь",
                "пользовательский интерфейс"
            ],
            "_date_published_rfc2822": "Wed, 03 Jul 2019 17:02:55 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5069",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "4990",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/obnovilas-lekciya-ob-obratnoy-svyazi-dlya-shkol-byuro\/",
            "title": "Обновилась лекция об обратной связи для школ бюро",
            "content_html": "<p>Это тизер обновлённой лекции об обратной связи для школ бюро:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/djlyAvqV4J0?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>В лекции речь о качествах хорошей обратной связи в интерфейсе: нежности, мгновенности, честности, непрерывности и физичности. В тизере некоторые мысли даже можно уловить целиком.<\/p>\n<p>Я начал переснимать лекции, чем очень доволен. Как-нибудь расскажу одну из заложенных в новых лекциях идей. Следующая запись в школу ещё не скоро, но уже можно <a href=\"https:\/\/bureau.ru\/school\/prep\/\">записаться на подготовительные курсы<\/a> зато (там есть моя мощная лекция про Фотошоп).<\/p>\n",
            "summary": "Это тизер обновлённой лекции об обратной связи для школ бюро",
            "date_published": "2019-03-10T01:06:26+05:00",
            "date_modified": "2025-03-14T18:34:25+05:00",
            "tags": [
                "видео",
                "обратная связь",
                "Школа бюро"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-djlyAvqV4J0-cover.jpg",
            "_date_published_rfc2822": "Sun, 10 Mar 2019 01:06:26 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4990",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-djlyAvqV4J0-cover.jpg"
                ]
            }
        },
        {
            "id": "4587",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/feedback-first-minsk\/",
            "title": "Доклад об обратной связи в интерфейсе",
            "content_html": "<p>В сентябре выступил на конференции «ФДКонф» в Минске. Рассказал об обратной связи в интерфейсе на английском языке. А вот уже и видео готово:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/zZ6XgD8xe1s?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n",
            "summary": "В сентябре выступил на конференции «ФДКонф» в Минске. Рассказал об обратной связи в интерфейсе на английском языке",
            "date_published": "2017-11-13T19:38:44+05:00",
            "date_modified": "2025-03-14T18:34:28+05:00",
            "tags": [
                "доклады",
                "из Тель-Авива",
                "обратная связь",
                "пользовательский интерфейс",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-zZ6XgD8xe1s-cover.jpg",
            "_date_published_rfc2822": "Mon, 13 Nov 2017 19:38:44 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4587",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-zZ6XgD8xe1s-cover.jpg"
                ]
            }
        },
        {
            "id": "3661",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/website-menu-item-states\/",
            "title": "Три состояния пункта меню сайта",
            "content_html": "<p>Пункт меню на сайте имеет три возможных состояния.<\/p>\n<p>Невыбранное:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/trimenu-normal.png\" width=\"349\" height=\"84\" alt=\"Три состояния пункта меню сайта\" \/>\n<\/div>\n<p>Мы находимся не в разделе «Дрожжи» и можем перейти в него по клику. Ссылка подчёркнута, при наведении подсвечивается, курсор превращается в пальчик, ведёт на главную страницу раздела.<\/p>\n<p>Текущее:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/trimenu-at.png\" width=\"349\" height=\"84\" alt=\"Три состояния пункта меню сайта\" \/>\n<\/div>\n<p>Мы находимся на главной странице раздела «Дрожжи». Текст выделен фоном, никак не реагирует на наведение и клики.<\/p>\n<p>Родительское:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/trimenu-inside.png\" width=\"349\" height=\"84\" alt=\"Три состояния пункта меню сайта\" \/>\n<\/div>\n<p>Мы находимся на одной из страниц раздела «Дрожжи», но не на главной его странице. Ссылка выделена фоном и подчёркнута, при наведении подсвечивается, курсор превращается в пальчик, ведёт на главную страницу раздела.<\/p>\n<p>Это понятный и логичный стандарт. Выделять текущий раздел подчёркиванием или перезагружать по клику страницу, <a href=\"http:\/\/ilyabirman.net\/meanwhile\/all\/linking-to-where-i-already-am\/\">на которой человек и так находится<\/a> — признак неряшливого, недодуманного дизайна.<\/p>\n",
            "summary": "Пункт меню на сайте имеет три возможных состояния",
            "date_published": "2014-07-19T03:01:53+05:00",
            "date_modified": "2019-07-03T18:51:18+05:00",
            "tags": [
                "веб-дизайн",
                "дизайн сайтов",
                "обратная связь",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/trimenu-normal.png",
            "_date_published_rfc2822": "Sat, 19 Jul 2014 03:01:53 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "3661",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/trimenu-normal.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/trimenu-at.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/trimenu-inside.png"
                ]
            }
        },
        {
            "id": "3472",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/hover-fade\/",
            "title": "Подкраска ссылок при наведении",
            "content_html": "<p>Ссылки и другие нажимаемые элементы хорошо подкрашивать при наведении курсора мыши (ховере). Мы в бюро и я в своих проектах обычно подкрашиваем красным, очень клёво работает. Так же хорошо подкрашивать рамки вокруг нажимаемых картинок и сложных элементов. С тех пор, как ЦСС научился легко делать всякие эффекты типа плавного изменения свойств, многие стали упражняться с плавным проявлением и затуханием подсветки.<\/p>\n<p>Важная штука тут в том, чтобы делать плавным <i>только затухание<\/i> — тогда эффект получится действительно приятным.<\/p>\n<p>Исходный смысл подсветки — обратная связь, ощущение, что всё работает, реагирует, не зависло и не заглючило. Если подсветка срабатывает не мгновенно, а лениво, это сразу воспринимается как тупняк, а не как приятный эффект. Точно так же бесит, когда некоторые светильники не сразу включаются, когда жмёшь кнопку, а плавно.<\/p>\n<p>См. также: <a href=\"http:\/\/ilyabirman.ru\/meanwhile\/2011\/08\/21\/1\/\">Ховер из овер<\/a>.<\/p>\n",
            "summary": "Ссылки и другие нажимаемые элементы хорошо подкрашивать при наведении курсора мыши (ховере). Мы в бюро и я в своих проектах обычно подкрашиваем красным",
            "date_published": "2013-12-26T02:28:58+05:00",
            "date_modified": "2019-07-03T18:51:30+05:00",
            "tags": [
                "обратная связь",
                "пользовательский интерфейс"
            ],
            "_date_published_rfc2822": "Thu, 26 Dec 2013 02:28:58 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "3472",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "2913",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2012\/03\/03\/2\/",
            "title": "Брет Виктор о мгновенной обратной связи",
            "content_html": "<p>Мгновенная обратная связь — один из важнейших принципов в проектировании интерфейсов. Это одна из многих вещей, о которых идёт речь на <a href=\"http:\/\/artgorbunov.ru\/educenter\/3day\/\">бюрошном курсе<\/a>.<\/p>\n<p>А вот суперважный спич — Брет Виктор показывает, как этот принцип можно использовать там, где ещё никто не догадался его использовать:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/player.vimeo.com\/video\/36579366\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Он почему-то говорит только о интерфейсах для творчества, хотя на самом деле принцип применим совершенно к любым интерфейсам.<\/p>\n<p>Ближе к концу он скатывается к рассуждениям о смысле жизни, что навевает тоску и уныние, да и с пафосом перебор. Но первая часть прекрасна.<\/p>\n",
            "summary": "Мгновенная обратная связь — один из важнейших принципов в проектировании интерфейсов. Это одна из многих вещей, о которых идёт речь на бюрошном курсе",
            "date_published": "2012-03-03T15:12:04+05:00",
            "date_modified": "2025-03-14T18:34:32+05:00",
            "tags": [
                "видео",
                "обратная связь",
                "пользовательский интерфейс"
            ],
            "_date_published_rfc2822": "Sat, 03 Mar 2012 15:12:04 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "2913",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "2288",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/2009\/03\/05\/1\/",
            "title": "Крутилки при загрузке картинок",
            "content_html": "<p>Крутилки при загрузке картинок — одно из самых ужасных изобретений Веба 2.0.<\/p>\n<p>Почему? Потому, что они ничему не помогают, зато всему остальному мешают.<\/p>\n<p>Классическая крутилка встречалась ещё в досовских приложениях и представляла собой быстро сменяющие друг друга символы ##| \/ <a href=\"html\">&minus;<\/a> \\## . Она просто показывала, что программа не зависла. Логика была в том, что если она зависнет, она уже не сможет ничего крутить.<\/p>\n<p>В современных прикладных программах, как правило, рисованием интерфейса занимается отдельный тред, поэтому крутилка может спокойно продолжать крутиться даже тогда, когда тот тред, про который она крутится, давно завис или вовсе аварийно завершился.<\/p>\n<p>Есть у крутилки и другой смысл.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/spotlight-krutilka.gif\" width=\"339\" height=\"31\" alt=\"Спотлайт показывает крутилку\" \/>\n<\/div>\n<p>Вот Спотлайт показывает крутилку, пока ищет. Поскольку результаты поиска появляются ещё до того, как он заканчивается, крутилка даёт понять, что они могут дополниться. Когда крутилка погасает, это значит, что перед нами — всё, что нашлось.<\/p>\n<p>Таким образом, крутилки работают тогда, когда оценить реальный прогресс с выполнением текущей задачи невозможно, либо это не имеет смысла потому, что процессу совершенно необязательно доходить до конца, чтобы принести пользу. В других случаях мы должны показывать прогрессбар (естественно, если есть способ оценить сделанную часть работы). Кроме собственно прогресса, он позволяет ещё и оценить равномерность выполнения процесса, прикинуть, сколько осталось ждать.<\/p>\n<p>Учитывая, что картинка имеет вполне определённый объём и скачивается с некоторой известной и, как правило, достаточно стабильной скоростью, ясно, что прогрессбар тут намного уместнее крутилки.<\/p>\n<p>Но ведь постепенно загружающаяся картинка — это и есть прогрессбар загрузки картинки! Больше ничего и не нужно.<\/p>\n",
            "summary": "Крутилки при загрузке картинок — одно из самых ужасных изобретений Веба 2.0",
            "date_published": "2009-03-05T02:26:42+05:00",
            "date_modified": "2021-06-28T21:54:05+05:00",
            "tags": [
                "веб-дизайн",
                "дизайн",
                "дизайн сайтов",
                "обратная связь",
                "пользовательский интерфейс"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/spotlight-krutilka.gif",
            "_date_published_rfc2822": "Thu, 05 Mar 2009 02:26:42 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "2288",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/spotlight-krutilka.gif"
                ]
            }
        }
    ],
    "_e2_version": 4269,
    "_e2_ua_string": "Aegea 12.0a (v4269e)"
}