big
Веб-форма как лиминальное пространство. Разговор с Пустотой
118

Все умрут, а я останусь

Loading...

Что если мир опустеет, то есть в нём не останется людей? Это очень интригующий вопрос, который занимает как философов (например, Иммануила Канта, Грэма Хармана, Квентина Мейясу или Юджина Такера), так и производителей продуктов массовой культуры, в частности, кинематографистов. Упомяну хотя бы документальный фильм «Земля: Жизнь без людей» (Кристофер Роули, 2008) и зомби-хоррор «28 дней спустя» (Дэнни Бойл, 2002).

Loading...

Проблема в том, что, когда когда мы пытаемся помыслить так называемый мир-без-нас (это термин Такера), мы попадаем в корреляционистскую ловушку. Корреляционизм — это любая антропоцентрическая философия, сводящая вселенную к отношению «человек — мир»: объективная реальность недоступна вне её корреляционной зависимости от форм субъективного доступа к ней (мышления, сознания, языка, восприятия, трансцендентной необходимости и так далее). Рэй Брассье описывает суть корреляционистской ловушки так: «Нельзя познать независимую от разума реальность, не познавая её. Следовательно, нельзя познать независимую от разума реальность».

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

Loading...

26 ноября 2019 года на ютуб-канале The Librarian вышло видео «That Creepy Feeling — What is it with Source games?» По состоянию на начало февраля 2024 года оно собрало уже 4,2 млн просмотров. Автор видео описывает переживания человека, оказавшегося на пустом сервере как жуткие (creepy). В комментариях многие пользователи соглашаются, что пустая игровая карта выглядит криповато, — так же, как любое привычное публичное пространство, которое, обезлюдев, предстаёт в ином, инаковом, необычном, и потому пугающем (unheimliche, как выразился бы Фрейд) качестве. Это пространство дисфункционально: на пустой карте невозможно играть, в пустом супермаркете ничего нельзя купить (только украсть), пустое метро никуда не везёт.

Original size 2304x1556

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

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

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

Пользовательский опыт лиминальности

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

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

Original size 2304x1557

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

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

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

Телеологическая авария

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

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

Original size 2304x1557

То же самое происходит даже в такой момент, когда мы совершили какое-то элементарное действие в интерфейсе, но не получили немедленной обратной связи.

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

Застрять в лифте, чтобы его понять

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

Здесь, конечно, вспоминается тот самый сломанный — и потому избыточно присутствующий — молоток Хайдеггера. Сломавшись, инструмент перестаёт быть прозрачным продолжением нашей воли и становится непреодолимым барьером, воплощением отчужденности.

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

Original size 2304x1556

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

Не в пустоте ли между «было» и «стало», между нажатием и результатом, кроется истинная суть Dasein im Internet (бытия-в-интернете)?

Алтарь анонимности

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

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

Original size 2304x1556

Вглядываясь в пустые поля

Чем больше информации мы оставляем о себе в веб-формах, тем более мы уязвимы. Таким образом, веб-форма — это не просто механизм взаимодействия с цифровым миром, но и инструмент, который формирует нас как социальных акторов, определяя границы нашей цифровой идентичности.

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

Дизайн и функция как предикаты лиминальности

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

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

Original size 2304x1556

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

Original size 2304x1556

Первая в жизни форма, которую заполняет большинство жителей РФ

Язык лиминальных переходов

Original size 2304x1556

Формы для заполнения появились задолго до интернета. Язык веб-форм — переосмысленный графический язык бумажных форм.

В бумажной форме, как правило, присутствуют графы, соответствующие по смыслу однострочным и многострочные полям ввода, радиокнопкам, чекбоксам, полям для подгрузки графики (я имею в виду место для печати или фотографии). Обратите внимание на то, что «радиокнопки» и «чекбоксы» выглядят одинаково — как 🔲.

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

Форма как разговор

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

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

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

Original size 2304x1556

Хорошая вёрстка не только вызывает доверие, но и делает процесс взаимодействия с формой простым и приятным.

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

После редизайна, выполненного Бюро Артёма Горбунова, очевидно, стало гораздо лучше.

Последовательность и расположение полей

Original size 2304x1556

Располагайте поля в порядке, логичном для пользователя, даже если это противоречит логике приложения или структуре базы данных. Это упрощает ввод данных и снижает вероятность ошибок. Ориентируйтесь на логику естественного разговора. Странно, когда у вас спрашивают адрес, не спросив имени.

Если существуют разные смысловые зоны в разговоре с пользователем, соответствующие поля следует объединять в группы.

Original size 2304x1556

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

Original size 2304x1556

Поля формы лучше всего выстраивать в один столбик. Исключение составляют лишь тесно связанные по смыслу поля, например, дата (ДД/ММ/ГГГГ), которые можно расположить горизонтально.

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

Одноколоночная компоновка устраняет эту проблему: у пользователя есть четкий маршрут от начала до конца — строго сверху вниз.

Original size 2304x1556

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

Поля и лейблы

Original size 2304x1556

Анатомия текстового поля

Original size 2304x1556

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

Не путайте названия полей с подсказками. Заголовки должны быть сжатыми и точными (одно-два слова), чтобы обеспечить быстрое восприятие формы. Например, ранняя версия формы регистрации на Amazon содержала избыточное количество слов, что снижало конверсию. В современной версии формы текст сокращён, что сделало её более эффективной.

Original size 2304x1556

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

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

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

Выбирая оптимальный способ расположения лейблов, ориентируйтесь на целевую аудиторию и контекст.

Original size 2304x1556

Расстояние от лейбла до поля должно быть заметно меньше, чем расстояние между полями.

Original size 2304x1556

Если вы избрали выравнивание лейблов по левому краю, позаботьтесь о том, чтобы все лейблы были примерно одной длины. Если это невозможно, разбивайте длинные лейблы на несколько строк. Но следите за тем, чтобы в таком случае базовые линии лейблов и введённых текстов совпадали.

Original size 2304x1556

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

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

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

Original size 2304x1556

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

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

Original size 2304x1556

Каждое поле в форме — это шаг, который пользователь должен сделать на пути к цели. Чтобы сделать этот путь короче, спрашивайте только самое необходимое.

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

Original size 2304x1556

Указание на ошибки, их предотвращение и исправление — суть прямое соблюдение третьей, пятой и девятой заповедей Иакова Нильсена.

Заполнение формы не должно быть испытанием с неприятным сюрпризом в конце. Валидация в реальном времени — это возможность немедленно скорректировать курс. Мгновенная обратная связь сбережёт время и нервы пользователя.

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

Текст ошибки должен объяснять, а не запутывать. Размещайте его так, чтобы он был виден сразу же. Лучше всего при вёрстке предусмотреть место для вывода сообщения об ошибке справа от поля.

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

Нарративные формы

Иногда форма после заполнения превращается в связный (то есть подчиняющийся синтаксическим правилам естественного языка) текст — такие формы называются «нарративными» или «повествовательными».

Original size 2304x1556

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

Original size 2304x1556

«…Я стоял, дрожа от волнения, ощущая бесконечный крик, пронзающий природу»

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

Веб-форма как лиминальное пространство. Разговор с Пустотой
118
We use cookies to improve the operation of the HSE website and to enhance its usability. More detailed information on the use of cookies can be fou...
Show more