{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Блоги: заметки с тегом замкнутость интерфейса", "_rss_description": "Автоматически собираемая лента заметок, написанных в блогах на Эгее", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": false, "_itunes_explicit": "no", "home_page_url": "https:\/\/blogengine.me\/blogs\/tags\/zamknutost-interfeysa\/", "feed_url": "https:\/\/blogengine.me\/blogs\/tags\/zamknutost-interfeysa\/json\/", "icon": false, "authors": [ { "name": "Илья Бирман", "url": "https:\/\/blogengine.me\/blogs\/", "avatar": false } ], "items": [ { "id": "136221", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-study-sponsorship\/", "title": "Интерфейсный этюд: распутываем спонсорство на сайте", "content_html": "

Разберём такую задачку.<\/p>\n

На некоем сайте рекламодатели могут купить размещение своего логотипа в профилях пользователей. Например, условная фирма «Спотифай» хочет как бы стать «спонсором» всех пользователей, которые любят музыку. Если пользователь бесплатный, то назначение такого спонсора — предмет договорённостей сайта и самих спонсоров. А вот платный пользователь может сам выбрать себе спонсора (вдруг ему кто-то напрямую заплатил за размещение своего логотипа) или запретить отображение спонсора вовсе.<\/p>\n

Нужно сделать интерфейс управления спонсорством в личном кабинете пользователя, заодно показав преимущества платной подписки.<\/p>\n

Исходный интерфейс работает так. Пока ты бесплатный, ты видишь «навязанного» спонсора и кнопку апгрейда рядом:<\/p>\n

\n $\"\"$ \n<\/div>\n

Если проапгрейдился, то интерфейс становится более развесистым. Можно назначить своего спонсора или удалить спонсора:<\/p>\n

\n $\"\"$ \n<\/div>\n

Типа назначили своего:<\/p>\n

\n $\"\"$ \n<\/div>\n

Чтобы убрать спонсора вообще, жмём Remove sponsor сверху. А круглая стрелочка — это вернуть как было, то есть поставить назначенного «сверху» спонсора, хоть ты и платник.<\/p>\n

Что здесь не так?<\/p>\n

Во-первых, интерфейс выглядит запутанно и неэлегантно. Зачем кнопка Remove sponsor, если я могу просто не заполнять спонсора? Или это чем-то отличается? Крутилка тоже непонятная без объяснения. Да и даже если всё понять, всё равно выходит каша из состояний, полный перечень которых неочевиден. Эти все состояния ведь надо ещё запрограммировать. Если я удалю спонсора, то видимо должна будет появиться какая-то кнопка «указать своего спонсора»? Или ремув просто очистит поля?<\/p>\n

Во-вторых, в интерфейсе очень легко случайно потерять данные. Нажал на крутилку или Remove из любопытства — и твой спонсор, которого ты внимательно заполнял, слетает. Никакого анду нет, а если бы было, то было бы ещё неэлегантнее: ещё больше каких-то полунамёков для переходов между вариантами.<\/p>\n

В-третьих, кажется, интерфейс не очень хорошо продаёт платную подписку. В исходном состоянии она ярко выделена, но внимание направлено просто на само приглашение к апгрейду, а не на пользе от него. Чтобы врубиться в пользу, нужно прочитать текст. При беглом взгляде вообще не ясно, какая связь между спотифаем и апгрейдом.<\/p>\n

А вот как можно было бы сделать. Впрямую обозначить доступные варианты спонсорства:<\/p>\n

\n $\"\"$ \n<\/div>\n

Теперь для всех пользователей и состояний конструкция одна и та же: переключатель из трёх вариантов. Вместо того, чтобы догадываться, что апгрейд тебе откроет новые возможности, ты их сразу видишь под замочком. Можно даже нажать, не жалко:<\/p>\n

\n $\"\"$ \n<\/div>\n

Ну а если проапгрейдился — все те же варианты доступны в тех же местах:<\/p>\n

\n $\"\"$ \n<\/div>\n

Можешь заполнить своего спонсора, переключиться в дефолтного или отключить, потом снова вернуться в своего — поля останутся заполненными безо всякого анду.<\/p>\n

Приходите на мой курс «Пользовательский интерфейс и представление информации<\/u>»<\/a>, что ли.<\/p>\n", "date_published": "2025-06-08T13:43:59+05:00", "date_modified": "2025-06-09T01:53:04+05:00", "tags": [ "замкнутость интерфейса", "пользовательский интерфейс", "сохранение данных", "студентам" ], "author": { "name": "Илья Бирман", "url": "https:\/\/ilyabirman.ru\/meanwhile\/", "avatar": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" }, "_date_published_rfc2822": "Sun, 08 Jun 2025 13:43:59 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "136221", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } }, { "id": "124944", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/classical-pizza-problem\/", "title": "Классическая проблема настройки пиццы", "content_html": "

В Школе бюро есть задание — нужно сделать интерфейс для заказа пиццы с определёнными условиями. В частности, пользователь может настраивать начинку. Половина студентов допускают одну и ту же логическую ошибку — делают настройку прямо в меню.<\/p>\n

Вот первая попавшаяся работа. Это главная страница, меню пицц:<\/p>\n

\n $\"\"$ \n<\/div>\n

Здесь сразу можно убрать мешающие ингредиенты, добавить собственные, выбрать размер и тесто. Видите ли вы проблему?<\/p>\n

Рассмотрим такой сценарий. Я беру пиццу с курицей, но потом вдруг замечаю, что в неё входят шампиньоны, а я их не хочу. Убираю шампиньоны, и иду оформлять заказ, ожидая пиццы без шампиньонов. Ко мне приезжает пицца с шампиньонами, ведь в заказ-то я добавил пиццу ещё с ними, а убрал я их уже потом из пиццы, которую в итоге даже не добавил в заказ. Итог — я недоволен.<\/p>\n

Когда я это объясняю, студенты иногда пытаются решить проблему: «мы будем учитывать изменение даже после добавления в заказ». Но так тоже нельзя. Я ведь мог убрать шампиньоны случайно или передумать их убирать, но рассчитывать, что пицца приедет с шампиньонами, ведь в заказ-то я добавил как раз с ними. Я мог как раз думать, что изменения, сделанные после добавления в заказ, ни на что не повлияют.<\/p>\n

То есть какую бы логику вы тут не реализовали, часть пользователей будет ожидать противоположной.<\/p>\n

\n $\"\"$ \n<\/div>\n

Иногда бывает, что в таком же контексте кнопку «Добавить в корзину» превращают в какую-то считалку типа − 1 + после добавления первой пиццы. Тут мозг окончательно взрывается. Если нажимать плюс несколько раз попеременно с изменением начинки, а потом нажать пару раз минус, невозможно даже предположить, что в итоге окажется в заказе. При этом сценарий «заказать две пиццы с курицей, но одну из них без шампиньонов» — достаточно нормальный, чтобы про него подумать.<\/p>\n

Эта проблема — пример незамкнутости интерфейса, то есть его логической дырявости.<\/p>\n

Проблема возникает из-за того, что настройка организована прямо в меню, то есть вы как бы настраиваете не вашу пиццу, а меню ресторана. Но вы не можете настраивать меню ресторана, вы же не шеф-повар! Из-за того, что эта пицца в меню не определилась, то ли она ресторана, то ли ваша, и возникают все последующие баги.<\/p>\n

Та же проблема встречается в недавнем интерфейсе с исчезновением при наведении<\/a><\/p>\n

Проблема решается, если убедиться, что вы даёте настраивать только ту пиццу, которая уже или находится в заказе пользователя, или хотя бы явно «на пути» туда. Первый вариант — пицца сразу добавляется в заказ, состав которого отображается в панели сбоку; там же можно нажать «Изменить начинку» у любой пиццы. Второй вариант — при выборе пиццы она не сразу добавляется в заказ, но сначала появляется промежуточный с настройкой начинки. Кстати, если этот промежуточный экран — попап, то с ним обычно другая проблема: ингредиентам тесно<\/a>.<\/p>\n", "date_published": "2023-12-15T12:05:31+05:00", "date_modified": "2023-12-15T12:09:23+05:00", "tags": [ "замкнутость интерфейса", "интерфейс заказа пиццы", "пользовательский интерфейс", "студентам", "Школа бюро" ], "author": { "name": "Илья Бирман", "url": "https:\/\/ilyabirman.ru\/meanwhile\/", "avatar": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" }, "_date_published_rfc2822": "Fri, 15 Dec 2023 12:05:31 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "124944", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } }, { "id": "120808", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/nezamknutost-interfeysa-polotencesushitelya\/", "title": "Незамкнутость интерфейса полотенцесушителя", "content_html": "

\n $\"\"$ \n<\/div>\n

На старом полотенцесушителе у меня был только выключатель, а на новом — целых три кнопки. Нижняя включает и выключает, средняя выбирает температуру, а верхняя — время работы. Температура последовательно выбирается из низкой, средней и высокой, а время — из ∞, 2, 4 и 6 часов. Внимание, вопрос: как работает выбор времени?<\/p>\n

Допустим я выбрал 4 часа. Захожу через три часа в ванную, а полотенце ещё мокрое. Думаю: «надо подольше посушить», и переключаю на 6 часов. В какой момент время пошло? Стали ли сейчас заново отсчитываться шесть часов или предыдущий таймер продлился на час? Если продлился, то что будет, если я долистаю до 2 часов?<\/p>\n

Незамкнутость откуда не ждали! Обычно такие интерфейсы придумывают начинающие дизайнеры, но их не берут в работу, потому что уж инженер-то понимает, что в интерфейсе нет внутренней логики.<\/p>\n

Кстати, нагородили целых три кнопки, но при этом режима «всегда работать на низкой температуре, но когда надо включать „буст“ на 2 или 4 часа» — нет.<\/p>\n", "date_published": "2023-06-21T14:21:02+05:00", "date_modified": "2023-06-21T14:19:57+05:00", "tags": [ "замкнутость интерфейса", "пользовательский интерфейс" ], "author": { "name": "Илья Бирман", "url": "https:\/\/ilyabirman.ru\/meanwhile\/", "avatar": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" }, "_date_published_rfc2822": "Wed, 21 Jun 2023 14:21:02 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "120808", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } }, { "id": "122363", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-75\/", "title": "На интерфейсном курсе: точно описываем поведение интерфейса для разработчиков", "content_html": "

Участник курса отвечает на мои вопросы об интерфейсе, и я пытаюсь подытожить, как себя в итоге всё ведёт. Точное, как спецификация, описание — это часть проектирования интерфейса. 3 минутки:<\/p>\n