Прежде чем мы углубимся в плюсы и минусы «бесконечной прокрутки», я думаю, что мы должны прийти к консенсусу относительно его определения. Я говорю это потому, что когда мне впервые было поручено написать эту статью, я начал писать о своей идее бесконечной прокрутки, которая была «одностраничным сайтом», где весь контент сайта находится на домашней странице, а навигационные ссылки указывают на закладки на странице.
Это не было определением, которое имел мой коллега. Это вероятный кандидат на множественные понятия о том, что это значит.
Для целей этой статьи определение бесконечной прокрутки будет:
Шаблон проектирования, в котором контент извлекается асинхронно из базы данных или основного файла и вставляется на страницу пользователя по мере того, как он потребляет информацию. Это приводит к бесконечной странице, которая продолжает загружать контент, когда пользователь прокручивает страницу вниз.
Вот несколько примеров
- Белые мужчины в Google Glass (все в этом роде)
- SocialThing
- Live.com Image Search (начал использовать его 17 сентября 2006 года!)
- Суповые кувшины
Как и почти любой важный шаблон дизайна, он сам по себе не является ни хорошим, ни плохим.
Мы, дизайнеры и разработчики, должны применять нашу логику, опыт и дальновидность, чтобы включать или исключать ее из наших проектов в каждом конкретном случае.
Не ошибись; Infinite Scroll, безусловно, является основным шаблоном дизайна — сайт, носящий свое имя ( Infinite-Scroll.com ), существует с 2008 года, согласно Netcraft:
Теперь, когда мы установили общее определение и убрали преамбулу; Давайте углубимся и посмотрим на хорошее и плохое.
Хорошо
- У вас больше шансов сохранить пользователя, потому что ему остается только прокрутить. Это почти как подсознательный призыв к действию.
- Там нет необходимости инструктировать пользователя. Если они находятся на странице, мы можем с уверенностью предположить, что они хотя бы знают, как прокручивать.
- Стиль чтения / привычка пользователя, скорее всего, будут совместимы с Infinite Scroll.
- Infinite-scroll.com утверждает, что при правильном использовании (как и в случае с их плагином WordPress) навигация улучшается, SEO не пострадает, поддерживается доступность, а также постепенная деградация в привередливых браузерах и / или при отключении JavaScript.
- Не используете плагин WordPress? Вот хорошая статья о SEO Infinite Scroll: http://www.sitepoint.com/seo-friendly-infinite-scroll/
- Это относительно легко реализовать в большинстве проектов с помощью простого плагина jQuery.
- Вы можете уменьшить размер загрузки страницы, но обычно экономия сравнивается со страницей, которую вы бы не сделали, если бы не было решения, подобного Infinite Scroll, чтобы приручить его…
Пример: Facebook.com
Давайте посмотрим на бесконечный свиток, который я считаю хорошо выполненным.
Мы можем предположить, что Facebook может позволить себе, чтобы несколько человек думали только о своем интерфейсе. Они используют Infinite Scroll для нескольких типов контента, и они делают это не просто потому, что это круто. К их чести, многие из негативов, перечисленных в следующем разделе, не учитывают использование ими этой техники. Например, каждая «история» в новостной ленте — это, по сути, реклама или тизер, предназначенный для того, чтобы пользователь мог просмотреть ее, понравиться, прокомментировать или поделиться ею с собственной временной шкалой.
Кажется очевидным, что пользователи были обучены, хотя и неосознанно; если они не хотят потеряться в хлопотах Бесконечного свитка, возвращаясь к сегменту страницы, им лучше взаимодействовать с контентом, как только он его увидит. Таким образом, кажется, что Facebook использовал один из недостатков Infinite Scroll для улучшения взаимодействия с пользователем.
По личному опыту я знаю, что, если я увижу что-то в своем новостном канале, и, возможно, захочу посетить его позже, я поделюсь им, чтобы я мог легко найти его в своем новостном канале.
Плохо
- Ваше приложение должно постоянно слушать события прокрутки, которые могут вызвать проблемы с производительностью, если это не сделано правильно. События прокрутки запускаются очень часто, поэтому неэффективная подпрограмма может сильно загружать процессор. Надлежащим способом решения этой проблемы является использование регулирования или «подавления», которое дает больший контроль над циклами выполнения.
- Переход по ссылке на бесконечной странице прокрутки, а затем попытка вернуться к той же точке на исходной странице очень часто приводит к разочарованию, поскольку положение прокрутки обычно не записывается как «состояние». Это означает, что использование кнопки «Назад» браузера обычно сбрасывает позицию прокрутки вверх страницы.
- Если вы используете бесконечную прокрутку на очень длинной странице, вы постоянно загружаете все больше и больше контента в память. В зависимости от того, как построена ваша страница, это может оказать очень негативное влияние на производительность страницы, так как браузер должен выполнить гораздо больше работы для отображения страницы.
Люди понимают концепцию нижнего колонтитула и знают, что нижний колонтитул — это место, где они могут ожидать найти ссылки на важную информацию сайта. Тем не менее, бесконечная прокрутка означает, что нижний колонтитул продолжает выталкивать только что недосягаемый только что загруженный контент. Это как осел, пытающийся добраться до морковки на палочке — морковь всегда разочаровывает, просто вне досягаемости. Конечно, вы могли бы использовать липкий нижний колонтитул, но это поглощает пространство на экране без веской причины. - В настоящее время не существует установленного способа отменить или отказаться от поведения.
- Пользователи не могут легко сделать закладку или использовать кнопку «Назад» для возврата к определенному сегменту страницы. (это ущерб, который, похоже, использует Facebook)
- Аналитика будет гораздо сложнее реализовать. Просто добавив код Google Analytics на страницу, вы не поймете, что вам нужно реализовать собственное решение.
Пример: Photopin.com
http://photopin.com/search/treasure-chest
Давайте посмотрим на бесконечный свиток, который, возможно, менее успешен.
Photopin — это творческая поисковая система, которая позволяет пользователям искать изображение или набор изображений в Flickr. Поскольку бесконечная прокрутка эффективно ломает кнопку «назад», и этот сайт не предоставляет очевидного способа «пометить» изображение, длительные поиски / прокрутки могут быть очень неприятными.
Единственный способ вернуться к ранее найденному изображению — повторить поиск и начать прокрутку.
Проблемы юзабилити можно было бы решить способом, аналогичным подходу Facebook, но, к сожалению, если вы изучите сайт, вы увидите, что модал с миниатюрами предлагает два варианта при наведении, и ни один из них не является «закладочным».
Возможно, теория, лежащая в основе этого, похожа на Facebook, но в этом случае вынуждает пользователя загружать изображения, которые попадают ему на глаза, нужны ли они им или просто хотят сравнить их с группой других локально, так как в Пользовательский интерфейс.
Возможно
Итак, вы должны использовать шаблон дизайна бесконечной прокрутки в вашем проекте?
Надеемся, что содержание этой статьи приведет вас к большой вероятности определенного, может быть. Проанализируйте ваши потребности в сайте, вероятный пользовательский архетип, предполагаемое использование и так далее.
При правильной реализации вы улучшите взаимодействие с пользователем и, возможно, даже улучшите взаимодействие с пользователем, как мы видели на примере Facebook.
Плохо реализованный — или даже просто примененный к неправильной ситуации — вы расстроите своих пользователей и, скорее всего, прогоните их.