{
    "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\/zamknutost-interfeysa\/",
    "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/zamknutost-interfeysa\/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": "6695",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-196\/",
            "title": "На интерфейсном курсе: хорошее решение задачи со вводом адреса",
            "content_html": "<p>Участница курса сделала одно из самых удачных решений задачи на ввод адреса благодаря изобретению «сиреневого режима». Но его надо довести до ума: хорошо сформулировать все подписи, починить момент с потерей данных и «замкнуть». Как показать в выпадайке, что введённый вариант не найден, чтобы пользователя это не смутило? Как сделать, чтобы пользователь въехал в смысл «сиреневого режима» и смог из него выбраться? В итоге прямо в видео говорю, что надо будет его вырезать для потомков. 13 минут:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/VimbYcfrH44?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 196 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 28 июня 2024 года.<\/p>\n<p>Открыта запись на курс 25 апреля — 24 мая! Сейчас −30% из-за ранней записи.<\/p>\n<p><a href=\"https:\/\/bureau.ru\/courses\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "Участница курса сделала одно из самых удачных решений задачи на ввод адреса благодаря изобретению «сиреневого режима»",
            "date_published": "2026-03-24T18:58:25+03:00",
            "date_modified": "2026-03-24T18:57:59+03:00",
            "tags": [
                "видео",
                "замкнутость интерфейса",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-VimbYcfrH44-cover.jpg",
            "_date_published_rfc2822": "Tue, 24 Mar 2026 18:58:25 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6695",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-VimbYcfrH44-cover.jpg"
                ]
            }
        },
        {
            "id": "6488",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-study-sponsorship\/",
            "title": "Интерфейсный этюд: распутываем спонсорство на сайте",
            "content_html": "<p>Разберём такую задачку.<\/p>\n<p>На некоем сайте рекламодатели могут купить размещение своего логотипа в профилях пользователей. Например, условная фирма «Спотифай» хочет как бы стать «спонсором» всех пользователей, которые любят музыку. Если пользователь бесплатный, то назначение такого спонсора — предмет договорённостей сайта и самих спонсоров. А вот платный пользователь может сам выбрать себе спонсора (вдруг ему кто-то напрямую заплатил за размещение своего логотипа) или запретить отображение спонсора вовсе.<\/p>\n<p>Нужно сделать интерфейс управления спонсорством в личном кабинете пользователя, заодно показав преимущества платной подписки.<\/p>\n<p>Исходный интерфейс работает так. Пока ты бесплатный, ты видишь «навязанного» спонсора и кнопку апгрейда рядом:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-1a@2x.png\" width=\"820\" height=\"400\" alt=\"\" \/>\n<\/div>\n<p>Если проапгрейдился, то интерфейс становится более развесистым. Можно назначить своего спонсора или удалить спонсора:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-1b@2x.png\" width=\"820\" height=\"420\" alt=\"\" \/>\n<\/div>\n<p>Типа назначили своего:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-1c@2x.png\" width=\"820\" height=\"420\" alt=\"\" \/>\n<\/div>\n<p>Чтобы убрать спонсора вообще, жмём Remove sponsor сверху. А круглая стрелочка — это вернуть как было, то есть поставить назначенного «сверху» спонсора, хоть ты и платник.<\/p>\n<p>Что здесь не так?<\/p>\n<p>Во-первых, интерфейс выглядит запутанно и неэлегантно. Зачем кнопка Remove sponsor, если я могу просто не заполнять спонсора? Или это чем-то отличается? Крутилка тоже непонятная без объяснения. Да и даже если всё понять, всё равно выходит каша из состояний, полный перечень которых неочевиден. Эти все состояния ведь надо ещё запрограммировать. Если я удалю спонсора, то видимо должна будет появиться какая-то кнопка «указать своего спонсора»? Или ремув просто очистит поля?<\/p>\n<p>Во-вторых, в интерфейсе очень легко случайно потерять данные. Нажал на крутилку или Remove из любопытства — и твой спонсор, которого ты внимательно заполнял, слетает. Никакого анду нет, а если бы было, то было бы ещё неэлегантнее: ещё больше каких-то полунамёков для переходов между вариантами.<\/p>\n<p>В-третьих, кажется, интерфейс не очень хорошо продаёт платную подписку. В исходном состоянии она ярко выделена, но внимание направлено просто на само приглашение к апгрейду, а не на пользе от него. Чтобы врубиться в пользу, нужно прочитать текст. При беглом взгляде вообще не ясно, какая связь между спотифаем и апгрейдом.<\/p>\n<p>А вот как можно было бы сделать. Впрямую обозначить доступные варианты спонсорства:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-2a@2x.png\" width=\"820\" height=\"510\" alt=\"\" \/>\n<\/div>\n<p>Теперь для всех пользователей и состояний конструкция одна и та же: переключатель из трёх вариантов. Вместо того, чтобы догадываться, что апгрейд тебе откроет новые возможности, ты их сразу видишь под замочком. Можно даже нажать, не жалко:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-2b@2x.png\" width=\"820\" height=\"340\" alt=\"\" \/>\n<\/div>\n<p>Ну а если проапгрейдился — все те же варианты доступны в тех же местах:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-2c@2x.png\" width=\"820\" height=\"510\" alt=\"\" \/>\n<\/div>\n<p>Можешь заполнить своего спонсора, переключиться в дефолтного или отключить, потом снова вернуться в своего — поля останутся заполненными безо всякого анду.<\/p>\n<p>Приходите на мой курс <a href=\"http:\/\/bureau.ru\/courses\/ui-online\/\" class=\"nu\">«<u>Пользовательский интерфейс и представление информации<\/u>»<\/a>, что ли.<\/p>\n",
            "summary": "Разберём такую задачку",
            "date_published": "2025-06-08T11:43:59+03:00",
            "date_modified": "2025-06-08T23:53:04+03:00",
            "tags": [
                "замкнутость интерфейса",
                "пользовательский интерфейс",
                "сохранение данных",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-1a@2x.png",
            "_date_published_rfc2822": "Sun, 08 Jun 2025 11:43:59 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6488",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-1a@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-1b@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-1c@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-2a@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-2b@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/sponsorship-2c@2x.png"
                ]
            }
        },
        {
            "id": "6174",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/classical-pizza-problem\/",
            "title": "Классическая проблема настройки пиццы",
            "content_html": "<p>В Школе бюро есть задание — нужно сделать интерфейс для заказа пиццы с определёнными условиями. В частности, пользователь может настраивать начинку. Половина студентов допускают одну и ту же логическую ошибку — делают настройку прямо в меню.<\/p>\n<p>Вот первая попавшаяся работа. Это главная страница, меню пицц:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/classical-pizza-problem.jpg\" width=\"948\" height=\"678\" alt=\"\" \/>\n<\/div>\n<p>Здесь сразу можно убрать мешающие ингредиенты, добавить собственные, выбрать размер и тесто. Видите ли вы проблему?<\/p>\n<p>Рассмотрим такой сценарий. Я беру пиццу с курицей, но потом вдруг замечаю, что в неё входят шампиньоны, а я их не хочу. Убираю шампиньоны, и иду оформлять заказ, ожидая пиццы без шампиньонов. Ко мне приезжает пицца с шампиньонами, ведь в заказ-то я добавил пиццу ещё с ними, а убрал я их уже потом из пиццы, которую в итоге даже не добавил в заказ. Итог — я недоволен.<\/p>\n<p>Когда я это объясняю, студенты иногда пытаются решить проблему: «мы будем учитывать изменение даже после добавления в заказ». Но так тоже нельзя. Я ведь мог убрать шампиньоны случайно или передумать их убирать, но рассчитывать, что пицца приедет с шампиньонами, ведь в заказ-то я добавил как раз с ними. Я мог как раз думать, что изменения, сделанные после добавления в заказ, ни на что не повлияют.<\/p>\n<p>То есть какую бы логику вы тут не реализовали, часть пользователей будет ожидать противоположной.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/classical-pizza-problem-2.jpg\" width=\"800\" height=\"306\" alt=\"\" \/>\n<\/div>\n<p>Иногда бывает, что в таком же контексте кнопку «Добавить в корзину» превращают в какую-то считалку типа − 1 + после добавления первой пиццы. Тут мозг окончательно взрывается. Если нажимать плюс несколько раз попеременно с изменением начинки, а потом нажать пару раз минус, невозможно даже предположить, что в итоге окажется в заказе. При этом сценарий «заказать две пиццы с курицей, но одну из них без шампиньонов» — достаточно нормальный, чтобы про него подумать.<\/p>\n<p>Эта проблема — пример незамкнутости интерфейса, то есть его логической дырявости.<\/p>\n<p>Проблема возникает из-за того, что настройка организована прямо в меню, то есть вы как бы настраиваете не вашу пиццу, а меню ресторана. Но вы не можете настраивать меню ресторана, вы же не шеф-повар! Из-за того, что эта пицца в меню не определилась, то ли она ресторана, то ли ваша, и возникают все последующие баги.<\/p>\n<p>Та же проблема встречается в недавнем интерфейсе <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/dont-hide-on-hover\/\">с исчезновением при наведении<\/a><\/p>\n<p>Проблема решается, если убедиться, что вы даёте настраивать только ту пиццу, которая уже или находится в заказе пользователя, или хотя бы явно «на пути» туда. Первый вариант — пицца сразу добавляется в заказ, состав которого отображается в панели сбоку; там же можно нажать «Изменить начинку» у любой пиццы. Второй вариант — при выборе пиццы она не сразу добавляется в заказ, но сначала появляется промежуточный с настройкой начинки. Кстати, если этот промежуточный экран — попап, то с ним обычно другая проблема: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/tight-ui-pizza-ingredients\/\">ингредиентам тесно<\/a>.<\/p>\n",
            "summary": "В Школе бюро есть задание — нужно сделать интерфейс для заказа пиццы с определёнными условиями. В частности, пользователь может настраивать начинку",
            "date_published": "2023-12-15T10:05:31+03:00",
            "date_modified": "2023-12-15T10:09:23+03:00",
            "tags": [
                "замкнутость интерфейса",
                "интерфейс заказа пиццы",
                "пользовательский интерфейс",
                "студентам",
                "Школа бюро"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/classical-pizza-problem.jpg",
            "_date_published_rfc2822": "Fri, 15 Dec 2023 10:05:31 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6174",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/classical-pizza-problem.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/classical-pizza-problem-2.jpg"
                ]
            }
        },
        {
            "id": "6021",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/nezamknutost-interfeysa-polotencesushitelya\/",
            "title": "Незамкнутость интерфейса полотенцесушителя",
            "content_html": "<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/towel-dryer-IMG_6121.jpg\" width=\"1200\" height=\"800\" alt=\"\" \/>\n<\/div>\n<p>На старом полотенцесушителе у меня был только выключатель, а на новом — целых три кнопки. Нижняя включает и выключает, средняя выбирает температуру, а верхняя — время работы. Температура последовательно выбирается из низкой, средней и высокой, а время — из ∞, 2, 4 и 6 часов. Внимание, вопрос: как работает выбор времени?<\/p>\n<p>Допустим я выбрал 4 часа. Захожу через три часа в ванную, а полотенце ещё мокрое. Думаю: «надо подольше посушить», и переключаю на 6 часов. В какой момент время пошло? Стали ли сейчас заново отсчитываться шесть часов или предыдущий таймер продлился на час? Если продлился, то что будет, если я долистаю до 2 часов?<\/p>\n<p>Незамкнутость откуда не ждали! Обычно такие интерфейсы придумывают начинающие дизайнеры, но их не берут в работу, потому что уж инженер-то понимает, что в интерфейсе нет внутренней логики.<\/p>\n<p>Кстати, нагородили целых три кнопки, но при этом режима «всегда работать на низкой температуре, но когда надо включать „буст“ на 2 или 4 часа» — нет.<\/p>\n",
            "summary": "На старом полотенцесушителе у меня был только выключатель, а на новом — целых три кнопки. Нижняя включает и выключает, средняя выбирает температуру, а верхняя — время работы",
            "date_published": "2023-06-21T12:21:02+03:00",
            "date_modified": "2023-06-21T12:19:57+03:00",
            "tags": [
                "замкнутость интерфейса",
                "пользовательский интерфейс"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/towel-dryer-IMG_6121.jpg",
            "_date_published_rfc2822": "Wed, 21 Jun 2023 12:21:02 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6021",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/towel-dryer-IMG_6121.jpg"
                ]
            }
        },
        {
            "id": "5886",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-75\/",
            "title": "На интерфейсном курсе: точно описываем поведение интерфейса для разработчиков",
            "content_html": "<p>Участник курса отвечает на мои вопросы об интерфейсе, и я пытаюсь подытожить, как себя в итоге всё ведёт. Точное, как спецификация, описание — это часть проектирования интерфейса. 3 минутки:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/zngun6Kw1q4?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 75 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 11 февраля 2022 года.<\/p>\n<p>До 28 октября идёт запись на курс, который пройдёт с 29 октября по 27 ноября.<\/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": "2022-10-27T17:03:00+03:00",
            "date_modified": "2024-01-09T10:24:36+03:00",
            "tags": [
                "видео",
                "замкнутость интерфейса",
                "пользовательский интерфейс",
                "работа",
                "студентам",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-zngun6Kw1q4-cover.jpg",
            "_date_published_rfc2822": "Thu, 27 Oct 2022 17:03:00 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5886",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-zngun6Kw1q4-cover.jpg"
                ]
            }
        },
        {
            "id": "4700",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/completeness-questions\/",
            "title": "Замкнутость интерфейса: проверочные вопросы",
            "content_html": "<p>Я вчера написал <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-completeness-example\/\">про замкнутость<\/a>. Продолжаю в режиме черновиков.<\/p>\n<p>Вот вопросы, которые дизайнер должен задать себе, глядя на каждый макет интерфейса:<\/p>\n<ol start=\"1\">\n  <li>Для каждой нарисованной кнопки: что произойдёт, если нажать? Не обязательно должна быть прям картинка следующего состояния, но понадобится внятный ответ.<\/li>\n  <li>Для каждой кнопки «Закрыть», «Скрыть» и подобных: как снова открыть, показать?<\/li>\n  <li>Для каждой переменной величины: что, если значение будет отрицательным, нулём, единицей, в сто раз больше, в сто раз меньше, длиннее, короче? Что, если значение изменится в реальном времени?<\/li>\n  <li>Для каждого переменного числа элементов (список, матрица иконок и т. д.): что, если элементов будет ноль, один; в сто раз больше, чем нарисовано. Что, если число элементов изменится в реальном времени?<\/li>\n<\/ol>\n<p>Это довольно занудная фигня, непонятно, как её системно применять, но я ж говорю, это черновик. Дополняйте в комментариях, что ли.<\/p>\n",
            "summary": "Я вчера написал про замкнутость. Продолжаю в режиме черновиков",
            "date_published": "2018-02-09T15:59:20+03:00",
            "date_modified": "2018-02-26T11:20:36+03:00",
            "tags": [
                "дизайн",
                "замкнутость интерфейса",
                "пользовательский интерфейс",
                "студентам"
            ],
            "_date_published_rfc2822": "Fri, 09 Feb 2018 15:59:20 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4700",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "4699",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-completeness-example\/",
            "title": "Пример незамкнутости интерфейса",
            "content_html": "<p>Меня много лет волнует проблема, которая у меня в голове живёт под названием «замкнутость» интерфейса. Я всё время хочу написать про это что-то большое и сделать такую тему на курсе. Но это так же сложно, как спроектировать замкнутый интерфейс. Поэтому я попробую сделать первый подход, считайте это черновиком.<\/p>\n<p>Замкнутость — это что-то вроде математически полной продуманности интерфейса, когда все случаи рассмотрены и противоречия разрулены. Может, не очень удачное слово, но пока такое. Я имею в виду, все пути в интерфейсе ведут в какие-то имеющиеся состояния внутри интерфейса.<\/p>\n<p>Разумеется, когда интерфейс уже реализован, он неизбежно замкнутый — так уж работает компьютер, что всё к чему-то да приведёт. Но меня волнует именно процесс проектирования. У начинающих дизайнеров постоянно такая фигня, когда не продумываются даже самые очевидные случаи.<\/p>\n<p>Давайте вот разберём пример.<\/p>\n<p>Скажем, надо сделать поле с автодополнением. Дизайнер рисует поле и показывает, как работает автодополнение:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/completeness-1@2x.png\" width=\"360\" height=\"52\" alt=\"\" \/>\n<\/div>\n<p>А потом где-нибудь в описании пишет:<\/p>\n<blockquote>\n<p>В поле работает автодополнение. Оно помогает ввести значение, которое ранее уже вводили. Если подходящих значений несколько, подставляет в самом поле самое часто используемое, а снизу рисует выпадайку, в которой можно выбрать из них. Достаточно, чтобы совпало хотя бы одно слово, например если уже вводили «ремонт часов», предлагает этот вариант по «ча».<\/p>\n<\/blockquote>\n<p>Вообще, дизайнер, который напишет даже такое описание — это уже большая находка, таких надо беречь. Но вот интересно, многие ли из вас сразу заметили прокол?<\/p>\n<p>На самом деле их несколько, но разберём главный. Что конкретно будет в поле, когда я введу «ча»? Если автодополнение просто дописывает кусок в конце, то «ремонт часов» в поле никак не может появиться.<\/p>\n<p>Дизайнер уходит думать и возвращается с уточнением в описании:<\/p>\n<blockquote>\n<p>При этом если предлагаемый вариант не начинается с того, что уже ввёл пользователь, этот вариант показывается только в выпадайке, но не в самом поле.<\/p>\n<\/blockquote>\n<p>А сейчас видите дыру?<\/p>\n<p>Судя по первому описанию, выпадайка должна появляться, если подходит несколько вариантов. А раз в поле сразу что-то дописано, то какой-то из вариантов, выпавших в выпадайке, должен быть как бы сразу выбран:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/completeness-2@2x.png\" width=\"360\" height=\"211\" alt=\"\" \/>\n<\/div>\n<p>Судя по добавленной к описанию мысли, выпадайка может появиться, даже если подходящий вариант — один, «ремонт часов». Получается, в выпадайке может быть ничего не выбрано:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/completeness-3@2x.png\" width=\"360\" height=\"111\" 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\/completeness-4@2x.png\" width=\"360\" height=\"211\" alt=\"\" \/>\n<\/div>\n<p>Так ведь? А что тогда во втором случае, если нажать на стрелку вниз, будет?<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/completeness-5@2x.png\" width=\"360\" height=\"111\" alt=\"\" \/>\n<\/div>\n<p>Так что ли?<\/p>\n<p>Но это же странно. Он мне как бы с двух сторон дописал, но при этом с одной стороны предвыделил, а с другой нет. И сейчас если нажать бекспейс, уже не останется исходный текст. А могу ли я нажать стрелку вверх, и что при этом произойдёт, вернётся ли «ча» или останется «ремонт ча»? А если я стрелку влево нажму, выпадайка останется или пропадаёт?<\/p>\n<p>Тут дизайнер перестаёт писать описание и начинает латать дыры на лету. Говорит, «давай в этом случае сделаем, чтобы бекспейс стирал всё дописанное и возвращал исходное „ча“, и стрелка вверх тоже».<\/p>\n<p>Но такой патч ничего не замыкает, а только сильнее размыкает. Теперь у нас появляется какое-то особое состояние интерфейса, когда бекспейс работает не как обычно. И надолго ли это состояние сохраняется? Например, если я введу „с“, будет ведь вот так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/completeness-6@2x.png\" width=\"360\" height=\"52\" alt=\"\" \/>\n<\/div>\n<p>И это согласно исходному описанию, безо всяких поправок — ведь сейчас уже начало введённой строки совпадает с началом единственного подходящего варианта, и выпадайка не нужна. Но посмотрите ещё раз на предыдущую картинку. Какого хрена там делала выпадайка в точно такой же на вид ситуации? И почему выпадайка пропала при вводе буквы „с“? Уже совсем трудно предсказать, что сделает бекспейс. Помнит ли он ещё, что слово «ремонт» тут «ненастоящее»?<\/p>\n<p>Это не то, чтобы неразрешимые проблемы. Тут нет никакой проблемы всё аккуратно распутать. Но просто маловероятно, что дизайнер хотя бы увидел сам этот ворох вопросов, если ему показалось, что добавленная им к исходному описанию мысль всё объясняет.<\/p>\n<p>Действительно хороший дизайнер пошёл бы уже после первого вопроса изучать, как работают такие автодополнения с выпадайками в других местах, и увидел бы, что там куча вариантов. Даже в разных браузерах поля адреса умеют очень разное вспоминать и находить, и ведут себя очень по-разному.<\/p>\n<p>Я на этом возьму паузу, а вам всем домашка: замкнуть этот интерфейс.<\/p>\n<p>И ещё почитайте <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/autocomplete-style\/\">про автодополнение через выделение<\/a>.<\/p>\n",
            "summary": "Меня много лет волнует проблема, которая у меня в голове живёт под названием «замкнутость» интерфейса",
            "date_published": "2018-02-08T16:34:11+03:00",
            "date_modified": "2018-02-26T11:21:12+03:00",
            "tags": [
                "дизайн",
                "замкнутость интерфейса",
                "пользовательский интерфейс",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/completeness-1@2x.png",
            "_date_published_rfc2822": "Thu, 08 Feb 2018 16:34:11 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4699",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/completeness-1@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/completeness-2@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/completeness-3@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/completeness-4@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/completeness-5@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/completeness-6@2x.png"
                ]
            }
        },
        {
            "id": "3863",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/autocomplete-style\/",
            "title": "Автодополнение через выделение и без него",
            "content_html": "<p>Изобретатели автодополнения ловко использовали для своей задачи текстовое выделение. Когда машина предлагает вариант окончания, она просто вставляет его в текстовое поле, сразу же делая выделенным:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/autocomplete-1@2x.png\" width=\"180\" height=\"150\" 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\/autocomplete-2@2x.png\" width=\"180\" height=\"150\" alt=\"Автодополнение без выделения\" \/>\n<\/div>\n<p>Такой вариант выигрывает в эстетике, но теряет логическое изящество обычного. С ним непонятно: дописанный текст уже есть в поле, или его ещё нет?<\/p>\n<p>Сайт «Авито» постоянно обламывает меня своим поиском. Пишешь, например, «сно», он дописывает «уборд», ты жмёшь Энтер, а он ничего не находит по запросу «сно». Классическое автодополнение такой лажи себе бы не позволило.<\/p>\n<p>Контролам нужны годы, чтобы их поведение утряслось и стало стандартом. Пока реализации этого модного варианта отличаются. Нужно делать, чтобы такое автодополнение вело себя в точности как обычное. Подозреваю, что этого можно добиться, оставляя это выделение технически обычным, но своевременно изменяя стиль текстового выделения ЦССом.<\/p>\n<p>В недавнем обновлении <a href=\"http:\/\/ilyabirman.ru\/projects\/angstrom\/\">Ангстрема<\/a> мы перешли на такое автодополнение:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/autocomplete-angstrom@2x.png\" width=\"340\" height=\"80\" alt=\"Автодополнение в Ангстреме\" \/>\n<\/div>\n<p>Я бы, наверное, ещё год с этим тупил, если бы Шурик не предложил. Смысл не пострадал, а чище стало.<\/p>\n",
            "summary": "Изобретатели автодополнения ловко использовали для своей задачи текстовое выделение. Когда машина предлагает вариант окончания, она просто вставляет его в текстовое поле",
            "date_published": "2015-03-17T01:32:10+03:00",
            "date_modified": "2024-01-07T09:47:11+03:00",
            "tags": [
                "Ангстрем",
                "замкнутость интерфейса",
                "пользовательский интерфейс"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/autocomplete-1@2x.png",
            "_date_published_rfc2822": "Tue, 17 Mar 2015 01:32:10 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "3863",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/autocomplete-1@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/autocomplete-2@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/autocomplete-angstrom@2x.png"
                ]
            }
        }
    ],
    "_e2_version": 4259,
    "_e2_ua_string": "Aegea 12.0a (v4259e)"
}