Обратная связь скрола
Наличие у интерактивных элементов своевременной обратной связи на действия пользователя — важное требование «базовой гигиены» интерфейсов. Кнопки меняются под курсором, буква с нажатой клавиши появляется в поле ввода — всё это дизайнеры усваивают еще в начале профессионального пути. Но забывают, что скрол — такое же действие пользователя, которое требует мгновенной обратной связи. Отсюда все фрустрации, связанные со многими эффектами залипающего скрола.
Победила физиология: с появления на мышках колеса прокрутки скрол стал для человека проще прицеливания в интерактивные элементы, так как скрол работает по всей области, в него не надо «целиться». Поэтому мы живем в мире господствующего скрола, где потребление страниц свелось преимущественно к перемещению вьюпорта по простыне содержимого. Но дизайнерам такой ограниченной парадигмы подачи информации мало, и отсюда пошли приемчики, завязанные на скроле:
- Дольше держать в кадре фрагмент страницы и для этого «фиксировать» его во время скрола.
- Менять направление движения элементов по скролу с вертикального на горизонтальный, диагональный, спиральный и т.д.
- Устанавливать у элементов разную скорость прокрутки для параллакса и других эффектов.
- При делении материала на самостоятельные порции-слайды («этажи») самостоятельно подскраливать страницу и перебрасывать посетителя с одного «слайда» на другой, боясь показать пользователю «некрасивое» состояние междуслайдия.
Допустимость этих и других приемов со скролом проверяется наличием мгновенной обратной связи. Другими словами, проверочный вопрос таков:
«Осталось ли на экране что-то, мгновенно и пропорционально реагирующее на малейшую прокрутку?».
Даже солидные сайты, не обделенные дизайнерской заботой, заваливают проверку по этому критерию. Например:
Главная страница сайта состоит из четырех этажей, но перемещаться между ними довольно затруднительно. Сайт предъявляет определенные требования к поведению посетителя, чтобы он смог сдвинуться на следующий экран, но требования эти нигде не декларированы, остается их только угадывать методом проб и ошибок:
— Страница никак не реагирует на скрол пользователя, пока он не сделает его правильно.
— Требуемый правильный скрол — стремительный жест прокрутки.
— Если скрольнуть недостаточно резко, прокрутиться не получится.
— Скрол не «накапливается», нельзя при помощи неторопливого скрола всё же добраться до следующего экрана. Только стремительный бросок пантеры.
— В процессе выполнения жеста, даже если делаешь всё правильно, сайт никак не реагирует на попытку. Он как тот коварный учитель, который не показывает своим видом, правильно ли ты пересказываешь теорему или несешь полную чушь.
— Докрутив до конца страницы, догадаться об этом затруднительно, так как скролбара нет, а реакция на скрол не отличается от предыдущих случаев, поэтому уже дисциплинированный суровыми порядками пользователь берет всё вину на себя: «Наверное, я недостаточно стремительно скролю, чтобы пройти дальше. Мне не хватает веры и прилежания, я должен вернуться в додзё к сенсею оттачивать свой молниеносный скрол».
После этой страницы перемещение по соседней воспринимается как блаженство.
Другой пример — сайт relationdc.com. Похожая ситуация с «этажами», но есть и особенности, причем немного абсурдные. При попытке перейти к следующему «этажу» страница реагирует на скролящие усилия пропорциональным «упругим оттягиванием», то есть ведет себя ровно как стандартная страница, когда ее пытаешься скролить дальше ее пределов! При этом из-за особенностей дизайна страницы в приоткрывающейся «щели» нет ничего, что подсказывало бы о существовании следующего «этажа» — лишь белая пустота, опять же, как у стандартной страницы при попытке проскролить дальше ее пределов. И, конечно же, на этом сайте введены все возможные способы угнетения прав посетителей на управление страницей и невозможно открыть ссылку в новой вкладке.
Особые страдания приносят сайты, которые отключают стандартный браузерный скрол и внедряют вместо него js-аналог, естественно, со своими параметрами инерции и тягучести. Парочку примеров: akson.nl, draft.co.jp. У меня подобные сайты ассоциативно связаны с детскими кошмарами, когда убегаешь со всех ног от маньяка, но ничего не получается, ноги просто вязнут. Так же вязну и я в содержимом подобных сайтов при попытке их проскролить.
Такие сайты не редкость и не наследие веба десятилетней давности, наоборот, они в тренде, клепаются каждый день и получают почет на тематических сайтах от профессиональных экспертов (которым не придется пользоваться таким сайтом больше одного раза). Первая ссылка на стартовой странице site of the day — и сразу бинго. Эти призраки флэш-сайтов вместо общепринятых правил взаимодействия посетителя с содержимым объявляют себя исключением, забирают у посетителя контроль. Это хамство, которое не может спасти никакая бесшовность переходов с ванильными изингами анимаций.
Как не облажаться
Но это не означает, что пора отключить в браузере js и делать странички простынями из картинок и текста, которые могут только монотонно по-миссионерски скролиться туда-обратно. Помня о критерии мгновенной обратной связи, легко исправить и сделать страницу удобной, не потеряв в эффектности.
Какая заметка о дизайне может обойтись без упоминания Эпла. На странице последнего айфона много различных эффектов, завязанных на скроле: залипание текста и картинок, их смещение, изменение размеров и прозрачности. Но при этом изменение всех этих параметров остается непрерывно завязанным на скроле, без этого дурацкого ощущения из компьютерных игр, когда непонятно, еще продолжается игровой процесс или уже начал отыгрывать предопределенный сценарий.
Все самые изощренные переходы остаются напрямую привязаны ко скролу, и это дает то самое благодатное ощущение обратной связи, контроля над ситуацией. Медаль «Повелитель своего браузера» остается висеть на груди.
Другой пример. В анонсе навигации МЦК принцип расстановки указателей объясняется через поэтапное путешествие по большой схеме станции. Текст при этом не скролится, как в другом анонсе с поэтапным рассказом, а замирает расставленным на картинке. Ситуация похожа на те описанные выше плохие примеры, но западня элегантно обходится при помощи очень аккуратного «фонового» горизонтального смещения картинки, непрекращающегося во время остановок на очередном «этаже». Это смещение не участвует в «повествовании», оно еле заметное и даже не воспринимается явно, но именно оно позволяет не терять ощущение управления страницей, в любой момент реагируя на скрол.
Даже если ты супер-звезда карамельных интерфейсов из топа дриббла, не стоит забивать на «базовую гигиену». В любой момент интерфейс должен мгновенно реагировать на скрол так же, как на перемещение курсора, ховеры и другие действия посетителя.
