big

Мы будем говорить о философии ровно настолько, насколько она помогает нам разбирать реальные формы и проектирпровать их правильно. Поэтому у нас будет несколько маленьких практик. Присутствие на занятие подтверждается оставленным вами следом работы.

Акторно-сетевая теория

big
Исходный размер 2304x1556

Бруно Латур (1947–2022)

Акторно-сетевая теория (ANT) Бруно Латура — это нечто вроде реалити-шоу, в котором участвуют не только люди, но и всё, что вас окружает: от вашего смартфона до кофеварки и даже самой маленькой молекулы серотонина в вашем теле. Все эти «актёры» (мы будем их называть «актантами» или «акторами») вместе составляют сложнейшую сеть, в которой каждый играет свою роль.

Актор — это актант, которому уже приписана некоторая фигурация: имя, намерение, контур, нарратив. Латур в Reassembling the Social (2005) подчёркивает: актор — не обязательно человек, но всегда тот, кого другие акторы «наделяют» действием, — через описание, обвинение, благодарность, атрибуцию. Актор, грубо говоря, — это актант, попавший в отчёт (account).

Разница — не иерархическая, а перспективная. Актант — аналитически нейтральный полюс: мы фиксируем, что «нечто» участвует в трансформации, но ещё не знаем (или сознательно не решаем), кто именно действует. Актор — тот же актант, но уже вписанный в сеть описаний, уже «оформленный» как источник действия. Латур иногда использует гибрид acteur-réseau (актор-сеть), чтобы напомнить: любой актор — не точка, а сам по себе сеть, свёрнутая в чёрный ящик.

Практическая развилка: когда мы проектируем UX и фиксируем, что «что-то» изменило результат — у нас актант. Когда коллеги начинают говорить «это РКН виноват» или «пользователь ошибся» — РКН и пользователь стали акторами. Разница в степени артикуляции, а не в онтологии.

Loading...

«…философия Латура может быть с успехом резюмирована в одном параграфе. Мир сделан из акторов всех типов и размеров. Человеческий субъект или Dasein — акторы, но акторами являются также свечи, звезды, газеты, экспрессы и боги. Все, что так или иначе существует, является актором. Это не просто изолированные сгустки вещества — они ведут переговоры между собой в сетях…

В этой философии нет различия между формой и материей, поскольку каждый актор может служить материалом для более крупных акторов или конечной формой для элементов, из которых он состоит. Ничто по своей сути не является редуцируемым или нередуцируемым к чему бы то ни было. Два объекта могут быть соединены в более масштабную машину, если проделана надлежащая работа по их сближению и найдены способы их соединения. Рассказы Кафки могут быть связаны с Фомой Аквинским или музыкой „Нирваны“, хотя может понадобиться изрядная изобретательность, чтобы удержать связь».

Грэм Харман

Исходный размер 2304x1556

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

ANT — это способ смотреть на мир как на сеть действующих сущностей. Не только люди действуют: действуют кнопки, поля, таймеры, автозаполнение, законы, провайдеры, метрики, очереди на сервере.

В ANT нет главного актёра по умолчанию. Мы не ставим человека на пьедестал — и это даёт нам трезвую картину: интерфейс реально управляет поведением через распределённую агентность».

Форма — это сцена, где акторы ведут переговоры: поле запрашивает правильно отформатированные данные, кнопка обещает результат, система решает, доверять вам или нет, сеть иногда молчит, а мы называем это «ошибкой пользователя».

Чекпойнт 1:

Форма, которая бесит

Почему?!

Исходный размер 2304x1556

Почему логин, пароль и подтверждение вынесены на разные экраны?

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

Теперь важный поворот. Мы обычно думаем, что «пользователь действует, а интерфейс обслуживает». В акторно-сетевой оптике это переворачивается: интерфейс тоже действует. Экран формы — это не нейтральная поверхность, а узел дисциплины. Он организует ваше поведение, задаёт допустимые ходы и распределяет ответственность.

Посмотрите, что именно этот первый экран от вас хочет. Он предлагает вам несколько «легальных» действий: введите телефон или email; если не помните — перейдите в восстановление; если это не ваш компьютер — включите гостевой режим; если аккаунта нет — создайте. Форма не просто информирует — она предписывает: «вот набор шагов, которыми вы можете продолжить существование внутри этой системы».

И здесь появляется то, что я называю микроконтрактом. Любое действие в форме — это обещание, а не просто ввод данных. Когда форма просит email, она не только собирает строку; она говорит: «если вы сделаете это, я проведу вас дальше по сценарию». Например: «введите email — и я покажу вам поле пароля», или «нажмите ‘создать аккаунт’ — и я начну процедуру создания». Это предложение сотрудничества, в котором интерфейс выступает как сторона договора.

Заметьте, что в этом договоре распределено и доверие. Иногда система не показывает пароль сразу, потому что ещё не решила, доверяет ли вам: может понадобиться капча, может понадобиться 2fa, может быть включён другой способ входа. То есть этот «лишний шаг» — не лишний, а момент, когда сеть акторов принимает решение, какую реальность для вас развернуть дальше.

В нашем разборе мы не спрашиваем «нравится ли мне форма». Мы спрашиваем: какие акторы здесь действуют, что они требуют от пользователя, что обещают взамен, и где в этой сети исчезает агентность — где пользователь превращается в виноватого просто потому, что система молчит или прячет правила игры.

Назовите одно требование формы к вам и одно обещание формы вам (по вашему «бесячему» примеру). Формат: «требование — … / обещание — …».

Делегирование и медиация

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

Медиация: актор не просто передаёт действие дальше, он меняет его по дороге. Например, «отправить» превращается в «подтвердить», «подтвердить» превращается в «плати», «плати» превращается в «банк отказал»».

Чёрный ящик: сеть огромна и сложна, но интерфейс делает вид, что всё просто. Когда ящик «молчит», пользователь выглядит виноватым.

Хорошая форма не дожна виноватить пользователя. Поэтому мы не говорим «пользователь невнимателен». Мы спрашиваем: где сеть перестала говорить, где сломалась агентность, где акторы перестали согласовываться.

Исходный размер 2304x1557

Чекпойнт 2:

Перекличка акторов. Выпишите как можно больше акторов (минимум 2 нечеловеческих), выберите одного и допишите «что он заставляет вас делать». Например:

— «таймер заставляет торопиться» — «disabled-кнопка заставляет угадывать условия» — «капча заставляет доказывать легитимность» — «автозаполнение заставляет доверять устройству больше, чем себе»

Берлинский ключ и распределённая агентность

Исходный размер 2304x1556

«Врата смирения»

В лекции об аффордансах мы уже говорили о том, как архитектурный элемент может навязывать человеку сценарии поведения: например, западный вход в базилику Рождества Христова в Вифлееме заставляет каждого входящего пригнуться; это отверстие самим своим устройством определяет, что человек может и чего не может сделать, входя в здание.

«Аффорданс всегда связан с телом, он действует на вас помимо вашего разума, и потому есть базовая идея двусторонности делегирования: мы делегировали материальным объектам выполнение некоторой работы и таким образом их „дисциплинировали“, но точно так же материальные объекты теперь дисциплинируют нас».

Виктор Вахштайн

Исходный размер 2304x1556

Берлинский ключ

Вот ещё один пример. Берлинский ключ — двусторонний, с двумя бородками — не хочет покидать замочную скважину после того, как вы открыли дверь. Чтобы освободить его, нужно сначала протолкнуть ключ наружу, а затем закрыть дверь обратно. Этот момент, когда вы стоите с открытой дверью, задумываясь о том, как сие чудо инженерной мысли влияет на ваше поведение, и есть суть «берлинского ключа». Он не просто отпирает и запирает — он вводит правила игры, где вы не можете просто уйти и оставить дверь открытой. Он заставляет вас действовать определённым образом.

Такой ключ — это не просто кусок металла, но активный участник в системе домашнего управления, который диктует, как и когда вы можете перемещаться. Является ли ключ архитектурным объектом? Ответ, с точки зрения ANT, которая видит здание как сумму действующих элементов, включающую и ключ, и замок, и дверь, и человека — безусловно, да. Каждый элемент нашего окружения играет свою роль, определяя то, как мы взаимодействуем с миром.

Таким образом, здание — это сеть распределённой между отдельными элементами агентности, результат взаимодействия отдельных действующих объектов (актантов).

«Мы не всегда отдаём себе отчет, в какой степени наши повседневные практики и привычки являются результатом обратного делегирования — действиями, которые объекты, взаимодействующие друг с другом и с нашими телами, заставляют нас совершать».

Виктор Вахштайн (признан иностранным агентом)

Короткое резюме

Берлинский ключ — это метафора предмета, который не просто «работает», а вводит правила игры и заставляет вас вести себя определённым образом.

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

Это не всегда зло. Иногда это забота (защита от ошибок), иногда надзор (контроль ради метрик/монетизации), иногда юридическая самооборона продукта.

Наша задача — уметь назвать «берлинский ключ» и решить: он оправдан? если да — как смягчить его цену для пользователя?

Чекпойнт 3: берлинский ключ

Один берлинский ключ в вашей «бесячей» форме из 1-го чекпойнта: механизм дисциплины, кого дисциплинирует, какую норму производит, и как смягчить минимальными средствами.

Ваш ключ — забота или надзор? Напишите «З» или «Н» и почему.

Как здорово, что все мы здесь сегодня собрались

Исходный размер 2304x1556

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

Исходный размер 2304x1556
  • Корпорация Meta признана экстремистской и запрещена на территории России

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

Пока я перевожу другу деньги, некий американский сервис, за который я плачу виртуальной картой, мне сообщает, что у меня закончился оплаченный период использования. Я снова вхожу в банковское приложение и вижу, что на приобретение новой виртуальной карты мне не хватает денег на счёту. Тогда я пишу другому человеку и прошу его дать мне взаймы. А почему мои российские карточки не срабатывают для оплаты этого сервиса? По понятным нам причинам — потому что мы под санкциями, и все мы знаем, за что, и так далее.

Исходный размер 2304x1556

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

Но я всё ещё буду включён в другие сборки: например, я, Школа дизайна, мои студенты и здание на Пантелеевской, 53. Вся наша реальность, вся наша Вселенная, вся наша жизнь представляют собою тотальный клокочущий суп, в котором разные сборки безостановочно варятся, кишат, пожирают друг друга, делятся, распадаются, пересобираются, растворяются и так далее. И, вероятно, этот суп не доварится никогда.

Весь мир — театр

Все актёры массовки равны

Акторно-сетевой подход к дизайну подразумевает, что в вашем проекте и человек, и кнопка «Отправить», и интернет-соединение — акторы одного уровня. Любой актор может влиять на ход событий. Человек может нажать кнопку, но если нет интернета или код кнопки содержит ошибку, ничего не получится.

Куда движутся наши отношения

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

Исходный размер 2304x1556

Надзирать и наказывать

Чтобы понять, как устроен ваш дизайн, следите за актёрами (акторами, актантами). Где возникают проблемы? Кто из актёров (акторов, актантов) действительно в них виноват? Если пользователь всё время нажимает не на ту кнопку, может, дело не в пользователе, а в том, что правильная кнопка плохо заметна?

Дизайн как нарратив

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

Кнопка питания

Исходный размер 2304x1556

Важно зафиксировать одну вещь: кнопка — это не «просто элемент управления». Кнопка — феномен материальной культуры, который переформатировал наше повседневное взаимодействие с техникой. Есть такая книга Рэйчел Плотник “Power Button: A History of Pleasure, Panic, and the Politics of Pushing». На русском её, к сожалению, я не видел. И сама формулировка подзаголовка очень точная: история наслаждения, паники и политики нажатия. Потому что кнопка — это всегда не только удобство, но и распределение силы и ответственности.

Если говорить в логике акторно-сетевой теории, кнопка — это актор сети. Она не «передаёт» действие нейтрально, она его медиирует: то есть меняет отношения между человеком и машиной, предоставляя или ограничивая доступ к функциям, и задавая сценарий того, как вы должны себя вести.

Исходный размер 2304x1556

Нажми на кнопку — получишь результат

Исходный размер 2304x1556

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

Самый чистый пример — история фотографии. В конце XIX века Kodak вводит в массовую культуру камеру, где акт съёмки сводится к нажатию кнопки. Знаменитый слоган «You press the button, we do the rest» — не просто реклама. Это новая парадигма: пользователь больше не обязан понимать всю сложность процесса, ему достаточно совершить один жест. Всё остальное — химия, проявка, печать, инфраструктура — уходит в сеть акторов, которую обслуживает компания.

Что именно kodak делегирует пользователю, и что пользователь делегирует kodak?

формат: я делегирую им … / они делегируют мне …

цепочка делегирования для кнопки «сделать фото»

нажатие → … → мир (5–7 шагов).

Где возникает паника или неопределённость?

Бог создал людей сильными и слабыми. Сэмюэл Кольт сделал их равными

Исходный размер 2304x1556

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

Исходный размер 2304x1556

Урри: «Где же у этого парня кнопка?»

Кнопка и ANT

Исходный размер 2304x1556

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

Кнопка — это всегда политика. Потому что она сокращает путь между намерением и результатом, а значит меняет то, как распределяются ответственность, вина и контроль. Кто виноват, если «всё случилось» от одного нажатия? Кто контролирует, что именно считается правильным нажатием? Кто решает, когда кнопка активна, а когда недоступна?

Астральная проекция

Исходный размер 2307x1556

Кнопки были физическими объектами, пока в 1984-м году Macintosh не объяснил, что кнопки могут быть виртуальными. Концепция была настолько инновационной, что компании Apple пришлось обучать людей тому, как этим пользоваться. Они выкупили 39 рекламных страниц еженедельника Newsweek, чтобы опубликовать инструкцию.

Исходный размер 2304x1556

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

Touch me babe

Исходный размер 2304x1556

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

Главный тезис, который нам нужен для сегодняшнего занятия про формы: кнопка — это микроконтракт. Когда вы видите кнопку, вам уже предложили договор. Кнопка обещает: «если вы нажмёте, события развернутся так-то». Одновременно кнопка требует: «нажмите в правильный момент, правильным способом, с правильными правами доступа, и подчинитесь правилам сети».

Кнопка хочет, чтобы ты делал её так

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

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

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

Как обычно выглядит кнопка сейчас и почему это тоже дисциплина

Исходный размер 2304x1556

Основные свойства кнопки

Если смотреть на современную кнопку в первой четверти XXI века, мы легко узнаем набор конвенций: прямоугольник со скруглением, внутренние отступы, часто иконка плюс текст, иногда обводка, иногда тень, иногда градиент, заметный контраст, понятная типографика. В Фигме это собирается за минуту, и именно в этом и суть дисциплины: сеть индустрии сделала форму кнопки настолько стандартной, что она стала почти автоматизмом.

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

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

Микро-эстетика как конвенция: радиусы, контейнеры, «концентричность»

Исходный размер 2304x1556

Расчёт радиусов скругления

Есть и чисто UI-эвристики вроде «концентрического эффекта», когда кнопка стоит в плашке со скруглением, и вы подбираете радиус контейнера так, чтобы визуально это выглядело гармонично.

Если у кнопки скруглены углы, а сама кнопка стоит на плашке-контейнере, то нужно, чтобы у контейнера, содержащего кнопку, радиус рассчитывался по формуле R = r + m, где r — радиус скругления углов кнопки, а m — ширина отступа от кнопки до краёв контейнера. Тогда скругления будут концентрическими, и всё это будет выглядеть гармонично.

Это важно проговаривать как эвристику, а не как правило: иногда такая геометрия действительно собирает композицию, иногда превращается в формализм. Но сама потребность «гармонизировать радиусы» — уже признак дисциплины дизайн-системы: вам предлагают ощущение правильности как эстетическую норму.

Доступность и контраст: не вкус, а физика восприятия и политика включения

Исходный размер 2304x1556

Дальше ещё жёстче: кнопку дисциплинируют не только конвенции UI, но и требования доступности. И это хороший пример того, как в сети действуют не люди напрямую, а нормы и стандарты. Существуют кодифицированные нормы Web Content Accessibility Guidelines (WCAG) — там есть формализованные требования к контрасту текста и фона. Базовая идея простая: если контраст слабый, интерфейс становится труднее читаемым, а для части людей — вообще недоступным.

В WCAG контраст выражают как отношение, например 4.5:1 для обычного текста и 3:1 для крупного текста (в зависимости от размера/начертания). Это не придирка, а способ гарантировать, что кнопку можно увидеть не только в идеальных условиях, но и при плохом зрении, в бликах, на улице, на глянцевом экране телефона. И это снова ANT: здесь акторы — солнце, экран, зрение, стандарты, плагины, юридические риски, репутация продукта — вместе принуждают вас принять конкретные решения по цвету.

Используйте Contrast — плагин для Figma для проверки контраста.

Состояние кнопки — это визуальный ответ системы как обязательство

Вспомним первую эвристику Нильсена: «Интерфейс должен всегда как можно более оперативно информировать пользователя о том, что происходит. Система должна немедленно давать обратную связь, чтобы пользователь понимал, что она в курсе его присутствия и действий».

Каждое состояние должно иметь отчётливые аффордансы, но не слишком радикально изменять внешний вид компонента — чтобы не повредить консистентности интерфейса.

Исходный размер 2304x1556

У кнопки шесть жизней

Normal сообщает, что компонент интерактивен и включен.

Focus возникает, когда пользователь выделил элемент, используя клавиатуру.

Hover свидетельствует, что пользователь навел курсор на интерактивный элемент.

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

Progress используется, когда действие не выполняется немедленно и сообщает, что компонент находится в процессе завершения действия.

Disabled уведомляет, что компонент в настоящее время не является интерактивным, но может быть включён в будущем.

Здесь важно не количество состояний, а честность обещания. Если пользователь нажал, а кнопка никак не изменилась, сеть молчит, и человек начинает нажимать ещё раз, дублировать запросы, ломать сценарий. То есть отсутствие progress — это не косметика, а место, где интерфейс производит панику и лишние действия.

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

Узнаваемость и риск «авторской кнопки»

Исходный размер 2304x1556

НеОК!

И да, кнопка дожна всегда выглядеть как кнопка. Кнопка в 2024 году — это цветной прямоугольник с контрастной надписью (либо с прозрачным фоном и обводкой того же цвета, что надпись — так называемая Ghost Button).

Если вы слишком сильно уходите в художественный жест, вы начинаете торговать не функцией, а вниманием пользователя. Иногда это оправдано (арт-проекты, игровые интерфейсы, экспериментальные сайты), но в большинстве продуктовых сценариев вы просто увеличиваете риск промаха: человек не распознает элемент как действие.

Поэтому я обычно формулирую так: нестандартная кнопка требует компенсации. Если вы делаете рискованный визуальный объект, компенсируйте ясностью контекста, подписью, поведением, состояниями, подсказками, чтобы сеть всё равно «говорила» пользователю, что это действие.

Синтаксис и семантика

Важно понимать (и об этом всё чаще забывают): кнопка и ссылка — это разные элементы управления с разной семантикой.

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

Кнопка в интерфейсе имеет другие функции.

1. Дать команду системе

Исходный размер 2304x1556

Константин Долженко (1984–2020). Из цикла Virus Poetry

В качестве надписи на кнопке, как правило, уместно использовать инфинитив совершенного вида. Хотя, возможно, правильнее было бы использовать повелительное наклонение, но такова уж конвенция. Мы отдаём команду, но смотрим поверх головы исполнителя, как бы не замечая его: «Взять!», «Сохранить», «Уничтожить».

Можно было бы ещё использовать характерную для современного российского узуса особую полицейскую конструкцию 1-го лица множественного числа: «Проходим, не задерживаемся», но это было бы чересчур иронично. Хотя можно попробовать.

Если после нажатия кнопки и перед выполнением распоряжения система что-то ещё спросит, после лейбла ставится многоточие: «Сохранить как…»

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

2. Навигация

Исходный размер 4299x2903

Константин Долженко (1984–2020). Из цикла Virus Poetry

В отличие от ссылки, нажатие на навигационную кнопку не приводит к перемещению в другую системную локацию, но подгружает в соответствующую область экрана другой контент, открывает окно, запускает приложение или процесс, например, «Управление подпиской» или «Выход».

В качестве лейбла используется дополнение — существительное или словосочетание в винительном падеже. Глагольная команда здесь подразумевается, но опускается, так всё как понятно и без глагола: на самом деле имеется в виду «[Совершить] управление подпиской», «[Найти] выход».

3. Изменение статуса или отношений пользователя с объектом

Исходный размер 2304x1556

Константин Долженко (1984–2020). Из цикла Virus Poetry

Тут в качестве лейбла используется ответ на вопросы типа «Что ты думаешь?», «Что это такое?», «Как?», «Куда движутся наши отношения?» ​ Например, «Это спам», «ОК», «Да», «Нет», «Не знаю», «Потом», «Отстань», «Bazinga!».

Исходный размер 2304x1556

— Bazinga!

Чекпойнт 4: кнопка и лейбл

Выберите пример из ТГ-канала Адовый UX с неудачным лейблом кноки и предложите улучшения. Цель: вернуть пользователю агентность, а системе — ясность.

Формат:

текущий лейбл: … что он обещает: … новый лейбл: … состояние progress: что показываем: …
 состояние error: что пишем: …

Мы используем файлы cookies для улучшения работы сайта НИУ ВШЭ и большего удобства его использования. Более подробную...
Показать больше