Использование выезжающих панелей

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





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

Hic sunt dracones

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

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

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

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

Ранние исследователи

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

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

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

Нанесение на карту новых территорий

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

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

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

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

Синдром плоской Земли

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

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

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

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

Берегитесь сладких песней сирен

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

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

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

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

Примеры использования выезжающих панелей

Итак, для чего же хороши выезжающие панели?

Корзины для покупок

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

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

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

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

Фильтры

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

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

История действий

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

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

Комментирование

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

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

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

Последний рубеж

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

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

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

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

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

Всё в руках дизайнеров!





Автор: Константин Войцеховский

Забавное видео

В 2 года родители подарили малышу баскетбольное кольцо и мяч, посмотрите, что умеет этот малыш сейчас!


Нужны деньги до зарплаты?

более 30 сервисов

Кредиты онлайн на карту за 15 минут

от 0,01%

ставка

до 180 дней

макс срок

до 20 000 грн.

макс сумма