Блоги: заметки с тегом замкнутость интерфейса

Интерфейсный этюд: распутываем спонсорство на сайте

Илья Бирман — Sun, 08 Jun 2025 13:43:59 +0500

Разберём такую задачку.

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

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

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

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

Типа назначили своего:

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

Что здесь не так?

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

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

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

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

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

Ну а если проапгрейдился — все те же варианты доступны в тех же местах:

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

Приходите на мой курс «Пользовательский интерфейс и представление информации», что ли.

Классическая проблема настройки пиццы

Илья Бирман — Fri, 15 Dec 2023 12:05:31 +0500

Илья Бирман:

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

Вот первая попавшаяся работа. Это главная страница, меню пицц:

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

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

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

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

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

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

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

Та же проблема встречается в недавнем интерфейсе с исчезновением при наведении

Проблема решается, если убедиться, что вы даёте настраивать только ту пиццу, которая уже или находится в заказе пользователя, или хотя бы явно «на пути» туда. Первый вариант — пицца сразу добавляется в заказ, состав которого отображается в панели сбоку; там же можно нажать «Изменить начинку» у любой пиццы. Второй вариант — при выборе пиццы она не сразу добавляется в заказ, но сначала появляется промежуточный с настройкой начинки. Кстати, если этот промежуточный экран — попап, то с ним обычно другая проблема: ингредиентам тесно.

Незамкнутость интерфейса полотенцесушителя

Илья Бирман — Wed, 21 Jun 2023 14:21:02 +0500

Илья Бирман:

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

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

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

Кстати, нагородили целых три кнопки, но при этом режима «всегда работать на низкой температуре, но когда надо включать „буст“ на 2 или 4 часа» — нет.

На интерфейсном курсе: точно описываем поведение интерфейса для разработчиков

Илья Бирман — Thu, 27 Oct 2022 19:03:00 +0500

Илья Бирман:

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

Это фрагмент № 75 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 11 февраля 2022 года.

До 28 октября идёт запись на курс, который пройдёт с 29 октября по 27 ноября.

Почитать о курсе

Программа, отзывы, запись

Автодополнение через выделение и без него

Илья Бирман — Tue, 17 Mar 2015 03:32:10 +0500

Илья Бирман:

Изобретатели автодополнения ловко использовали для своей задачи текстовое выделение. Когда машина предлагает вариант окончания, она просто вставляет его в текстовое поле, сразу же делая выделенным:

По мере ввода, окончание заменяется тем, что вводит человек, и тут же появляется новое. Если нажать Энтер, то введётся предложенный вариант. Если нажать стрелку вправо, вариант останется в поле, но можно будет дописать что-то ещё.

Это поведение не нужно было специально программировать — текстовое выделение само собой работает так. Сейчас это кажется очевидным решением, но не уверен, что оно сразу же пришло в голову. Думаю, первые попытки усложняли текстовые поля особым видом текста — предлагаемым окончанием, пока кто-то не увидел, что можно обойтись без этого.

Всё же, в последнее время стал популярен другой вид автодополнения, когда предлагаемое окончание пишут просто бледным цветом:

Такой вариант выигрывает в эстетике, но теряет логическое изящество обычного. С ним непонятно: дописанный текст уже есть в поле, или его ещё нет?

Сайт «Авито» постоянно обламывает меня своим поиском. Пишешь, например, «сно», он дописывает «уборд», ты жмёшь Энтер, а он ничего не находит по запросу «сно». Классическое автодополнение такой лажи себе бы не позволило.

Контролам нужны годы, чтобы их поведение утряслось и стало стандартом. Пока реализации этого модного варианта отличаются. Нужно делать, чтобы такое автодополнение вело себя в точности как обычное. Подозреваю, что этого можно добиться, оставляя это выделение технически обычным, но своевременно изменяя стиль текстового выделения ЦССом.

В недавнем обновлении Ангстрема мы перешли на такое автодополнение:

Я бы, наверное, ещё год с этим тупил, если бы Шурик не предложил. Смысл не пострадал, а чище стало.