Создаем веб-галерею с бесконечной прокруткой. PHP и AJAX. Бесконечная прокрутка против разбивки на страницы

Если вы хоть раз заходили на Twitter или искали изображение в Google, вы, вероятно, видели бесконечную прокрутку (бесконечный скроллинг, infinite scrolling) в действии. Вы могли часами прокручивать страницу, конца которой не было.

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

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

Преимущества и недостатки бесконечной прокрутки

Одинаковый подход к работе может привести одну компанию к успеху, а другую — к провалу. Бесконечная прокрутка, вне всяких сомнений, является одним из самых перспективных способов подачи материала читателям. Однако это не значит, что вы сию же секунду должны перейти на infinite scrolling: прежде, вам стоит рассмотреть все «за» и «против».

Достоинства бесконечной прокрутки

1. Она удобна для мобильных пользователей

При использовании телефона с сенсорным экраном гораздо проще прокрутить страницу, чем щелкать по маленьким ссылкам.

2. Она позволяет удержать внимание читателя

3. С ее помощью удобнее выводить на экран большие объемы информации

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

4. Она идеальна для сайтов с обновлением информации в режиме реального времени

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

5. Бесконечная прокрутка не доставляет пользователям неудобств, связанных со скоростью загрузки

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

Недостатки бесконечной прокрутки

1. Она осложняет поиск нужной информации

Если читателю потребуется добраться до конкретного элемента содержания на сайте с бесконечным скроллингом, он будет вынужден потратить определенное время на прокрутку страницы. Именно поэтому Google не предлагает пользователям infinite scrolling для ознакомления с результатами поиска.

2. Она не позволяет использовать футер

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

3. Она не дает пользователю возможности в один клик пропустить неинтересный контент

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

4. Бесконечная прокрутка увеличивает нагрузку на серверы

При внедрении бесконечного скроллинга активно используется JavaScript, вследствие чего требования к производительности серверов постоянно растут.

Как понять, нужна ли вашему сайту бесконечная прокрутка?

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

1. Ваш бизнес предполагает, что пользователи должны искать товары или услуги на сайте?

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

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

Взять, к примеру, Etsy — крупную площадку для онлайн-торговли. Компания попробовала использовать на своем сайте бесконечный скроллинг, однако получить за счет этого какую-либо выгоду ей не удалось. Главный инженер Etsy Дэн Мак-Кинли (Dan McKinley) не может дать однозначного объяснения данному факту. Вот что он говорит о бесконечной прокрутке:

«Люди крайне чувствительны к любым изменениям интерфейса. Но если алгоритм поиска выводит 16 наиболее подходящих результатов в верхнюю часть списка, infinite scrolling позволяет пользователю, не затрачивая дополнительных усилий, получить «бесконечное» количество менее подходящих результатов (для получения которых в отсутствие системы бесконечной прокрутки ему пришлось бы нажать на соответствующую кнопку).

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

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

2. Ваш сайт главным образом предлагает контент?

Если так, вероятно, бесконечная прокрутка — это то, что вам нужно.

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

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

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

Как использование бесконечного скроллинга влияет на SEO?

Если вы собираетесь внедрять infinite scrolling, вам стоит узнать о том, как «относятся» к данной затее поисковые системы. Вот что говорит по этому поводу Скотт Лэнгдон (Scott Langdon) из HigherVisibility:

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

Впрочем, с это проблемой можно справиться. Сделать это вам помогут советы Джона Мюллера (John Muller), представляющего Google:

1. На сайте с бесконечной прокруткой должны присутствовать статические ссылки, разбивающие информацию на странице так, чтобы роботы могли правильно ее «понять».
2. Для проведения пагинации (то есть разбивки информации на несколько страниц) компания должна иметь в своем распоряжении систему управления контентом (content management system, CMS).
3. После разделения «бесконечного» содержания на отдельные страницы необходимо удостовериться в том, что каждая из этих страниц имеет полный URL.
4. Также необходимо убедиться в том, что ни один из элементов не попал в состав сразу нескольких страниц.
5. При разделении сайта на несколько частей необходимо вносить изменения в . Когда речь заходит об индексации, любые изменения, внесенные в , игнорируются роботами Google.

Представленная ниже схема показывает как нужно, и как не нужно проводить пагинацию (во втором случае некоторые из элементов контента будут проиндексированы дважды).

Когда идет речь об онлайн-маркетинге или веб-дизайне, чрезвычайно важно быть инициатором успешных идей и формировать в собственной сфере. Сегодня речь пойдет об одной из подобных тенденций — бесконечном скроллинге (прокрутке) страниц на сайте: какие возможности он представляет для бизнеса? как лучше реализовать и когда следует отказаться от этой функции? Материал написан на основе перевода статьи про Infinite Scrolling от SpeckyBoy.

Основные разделы статьи:

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

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

Что такое бесконечная прокрутка?

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

Возможности бесконечной прокрутки

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

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

Положительные характеристики метода:

• Удержание пользователей . Это одна из главных характерных черт бесконечной прокрутки, плюс она позволяет быстро вовлекать посетителей. Кроме того, также мотивирует юзеров остаться на странице, поскольку они могут бесконечно просматривать содержание, прокручивая вниз.
• Легкая навигация/удобство использования . Скроллинг – простой для понимания и универсальный метод, не требующий особых усилий для выполнения. Он сразу открывает посетителям доступ к основной информации сайта.
• Подходит для просмотра иллюстрированных материалов, а также для пользователей мобильных устройств . Бесконечный скролл – хороший способ обеспечить просмотр множества простых визуальных элементов. Также хорошо подходит для мобильных устройств, где лучшим способом навигации считается прокрутка одним пальцем.

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

Причины избегать бесконечную прокрутку

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

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

• Любые сайты, предусматривающие поиск специальных продуктов или услуг . Когда пользователи попадают в проект с бесконечной прокруткой, они сталкиваются со множеством опций. Это не всегда подходит для тех, кто преследует конкретные цели. Слишком большое количество вариантов, вероятнее всего, заставит посетителя покинуть веб-ресурс.
• Сайты с наполнением, ориентированным на долгий период времени . Журналы и веб-ресурсы, где статьи требуют углубленного изучения, не выиграют от применения бесконечной прокрутки. Непрерывно загружающийся контент может показаться чрезмерно подавляющим с точки зрения и приведет к тому, что пользователи скорее покинут сайт, нежели продолжат чтение.
• Сложность навигации при повторном поиске конкретной информации . Одна из главных причин не переходить на данную функцию – трудности повторного конкретной информации. Это может сказаться негативным образом в коммерческих нишах. Так, например, из-за бесконечной прокрутки практически невозможно сделать закладку. Многие пользователи Pinterest столкнулись с подобной проблемой, когда, возвратившись назад в новостную ленту, не смогли найти нужную запись, присутствующую на странице всего несколько секунд назад.
• Влияние на поисковую оптимизацию. Одна из наиболее обсуждаемых проблем в теме — негативное влияние на SEO оптимизацию. Страницы с бесконечной прокруткой, по сути, представляют собой одну единственную страницу, в связи с чем количество контента, доступного для поисковой выдачи, снижается. Более того, будет вводиться лишь одно мета-описание, и как следствие, исключается возможность задания релевантной информации о вашем детище. Похожая ситуация в но им не так важно SEO.
• Удобство пользовательского . Некоторые функции сайта просто несовместимы с бесконечной прокруткой. Например, если у вас есть сноски и колонтитулы. Люди будут прокручивать страницу в поисках сносок, однако им не удастся до них добраться. В итоге, вероятнее всего, они не останутся на вашем веб-ресурсе. Также им сложно будет добраться до футера и инфы в нем.
• Отсутствие возможности выбирать . В настоящее время подобная прокрутка не ориентирована на предпочтения посетителей, так как у них нет опции выбора контента. Даже, если пользователь захочет пропустить некоторые информационные блоки, он не сможет так сделать. Это расстраивает тех, кто предпочитает просматривать тексты в более ограниченном количестве.

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

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

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

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

Итого

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

Дополнения и мысли по теме пишите ниже.

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

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

И что самое занятное, у такого скроллинга существуют преимущества. С одной стороны, происходит практически 100% вовлеченность пользователя в изучение контента. Ему не приходится отвлекаться, изучать меню, разделы, ожидать загрузки очередных страниц, даже о навигации ему не приходится задумываться.

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

Но это одна сторона медали. Что же дизайнеры? Что находят они в бесконечной прокрутке? Зачем стараются применить её к разным по тематике и стилям проектам, даже если у них нет мобильного варианта? Все просто: бесконечность удобна для конверсии, для внимания, для художественных идей, например Apple Mac Pro , Boat , firewatch .

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

Поощрение

Прокручивать страницу дальше и дальше пользователи будут только тогда, когда им это интересно. Особенно в момент завершения загрузки начальной страницы. Поэтому, если они видят нужные им фотографии, заголовки, текст, то можно уже не сомневаться в их действиях. Дизайнеры как раз и воплотили это в, например, Cheetos , Photobazaar , Komarnicki подборки на Pinterest, Deviantart стараются сначала заинтересовать контентом, а затем позволяют посетителям искать и изучать имеющееся.

Ненавязчивость

Многие веб-дизайнеры стремятся не навязывать длинную прокрутку зрителям. И это верно, ибо не всегда и не всем пользователям хочется бесконечно прокручивать и прокручивать контент в поисках интересного или нужного. Более того, всегда хочется иметь перед глазами какие-то ориентиры: где находимся, в каком разделе, что еще есть на сайте. Именно поэтому частенько мы видим в верхней части страницы плавающую панель навигации. И это удобно, поскольку бесконечная прокрутка попросту скрывает строчку меню с глаз, и совершить переход в иной раздел не всегда удобно. Это Uplug , Voux , Geranandpartners , Company.airbus (навигация бела перемещена вправо).

Все имеет начало

Бесконечный или даже длинный скроллинг способствует тому, что пользователи теряются на странице. Им сложнее сориентироваться: вначале они еще или уже в середине. Более того, даже при наличии кнопки «вверх» или «назад» (обычно она в виде стрелочки) посетители возвращаются в начало станицы, а не туда, где остановились. В ленте новостей ВКонтакте «Назад» реализована именно для удобства. То есть, она возвращает наш взор туда, где мы били ранее. Аналогично реализована работа и на flickr . Если выбрать изображение, открыть его в этом же окне, а затем нажать кнопку «назад», то вернёмся мы именно к моменту, где были раньше, а не в началао страницы. Аналогично работает и интернет-магазины etsy , amazon .

Но, наоборот, проект Fomo не позволяет такого. Всегда будет загружаться начало страницы с плитками и материалами. И даже Boomandthearty тоже нет, несмотря на, казалось бы, не такую уж и простую навигацию при большом объеме контента.

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

Активность перед глазами

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

Например, это использование кнопок «загрузить больше» или почти мгновенная анимация подзагрузки Time , Vogue , Яндекс Дзен , Voux , Ria .

Влияние на бесконечность

Даже если страница имеет бесконечную прокрутку, пользователям хочется пролистать её быстрее. Подсознательно. Особенно это заметно, если прокрутка не бесконечная, а просто длинная и рано или поздно, но кончается. Желание веб-дизайнеров иное - задержать посетителей на сайте, поэтому чаще всего прокрутка странниц всегда имеет одну и ту же скорость. Иными словами, как бы быстро мы не крутили колёсико мышки, скорость появления нового материала не увеличится и появится контент только тогда, когда задумали разработчики. Это отлично реализовано на Apple Mac Pro . Можно даже в настройках мышки задать скорость прокрутки в количестве строк, но контент на сайте будет меняться со своей заданной скоростью. Аналогично работает и Амурский тигр , company.airbus .

Сложно говорить, хорошо это или плохо. Зависит, разумеется, от контента, от его особенностей, требований на усвоение.

Удобство просмотра

В первую очередь, касается это интернет-магазинов и карточек товаров. Например, веб-мастера добавляют иконки «Нравится» к каждому товару или «Добавить в закладки». Это упрощает изучение контента, если его много. Более того, во время поиска отображается и количество найденного. То есть, даже если станица с выбранными товарами бывает неимоверно длинной, пользователь ориентировочно знает уже, сколько он просмотрел и сколько ему еще впереди осталось. Это удобно, хотя дизайнеры частенько и игнорируют такой подход. Куда проще создать карточки с товарами и загрузить их на единый холст. Так и сделали на Ericbeauduin , Vagabond , Skechers даже фотобанк Photobazaar не предлагает отбирать на будущее фотографии.

Но иные проекты, наоборот, позволяют сортировать информацию. Это и Wildberries , Ozon , Lamoda .

Эффекты, больше эффектов

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

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

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

Новаторство

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

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

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

Foodisforeating с секретом. Навигация настолько миниатюрна, что её легко пропустить и не заметить, но обладает одной большой страницей с прокруткой, которая влияет на… отображение контента и инфографику. Да, и такое бывает. Иными словами, вы не просто листаете её вниз. С помощью колесика мышки можно увидеть загрузку изображений, постепенное появление текста, графиков и прочее. Трудно описать, и лучше посмотрите своими глазами. Эффектов много, но в целом все выглядит просто и функционально.

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

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

Twinpinejourney также предлагает пройти историю и узнать подробности казино и отелей Twin Pine в Калифорнии. С одной стороны, предлагается просто просмотреть станицу сверху вниз, с другой, пролистать отдельные секции слева-направо с тем, чтобы узнать некоторые подробности. Даже дорожная карта и то обладает анимацией, что зависит от прокрутки колесика мышки. И даже от вашей скорости прокрутки зависит. Интересно и красиво все в целом.

Завершение

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

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

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

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

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

В данной статье мы погрузимся в исследование отдельного метода потребления контента – бесконечной прокрутки и посмотрим на некоторые интересные примеры.

Что такое бесконечный скроллинг?

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

Где использовать бесконечную прокрутку?

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

Для социальных сетей

В социальных сетях и блогах все записи относительно равны. Ну, некоторые из них могут быть более или менее интересными, но слишком субъективно разделять их на подкатегории. Такие платформы, как Facebook или Twitter , обновляются в реальном времени и оставляют предыдущую историю сообщений. Это делает их по-настоящему бездонными.

Для не менее важного контента

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

Для мобильных интерфейсов

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

Для повествования

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

Ник Бабич разработчик, теч энтузиаст и просто влюбленный в UX/UI специалист написал заметку в блоге UX Planet про бесконечную прокрутку, мы сделали адаптивный перевод материала специально для читателей Хабрахабр.

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

Бесконечная прокрутка

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

Плюс №1: Вовлечение пользователя и раскрытие контента.

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

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

Океан заметок Pinterest

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

Новостная лента Facebook позволяет просматривать огромное количество обновляемого контента

Плюс №2: Прокрутка лучше щелканья.

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

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

Плюс №3: Прокрутка хороша для мобильных устройств.

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

Минус №1: Производительность страницы и ресурсы устройства.

Скорость загрузки страниц – это самое главное для пользователей. Многочисленные исследования показали, что низкая скорость загрузки приводит к тому, что люди покидают ваш сайт, или удаляют приложения. И это плохая новость для тех, кто использует бесконечную прокрутку. Чем больше пользователи прокрутят страницу вниз, тем больше контента будет загружаться на одной странице. В результате скорость обновления контента будет падать все сильнее.

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

Минус №2: Поиск и локация объектов.

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

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

Интерфейс поиска у Etsy с полосой прокрутки. Текущая версия содержит разбивку на страницы

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

Минус №3: Несоответствие полосы прокрутки.

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

Полоса прокрутки должна отражать реальный размер страницы

Минус №4: Отсутствие нижнего колонтитула.

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

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

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

Facebook переместил все ссылки с нижнего колонтитула на правую боковую панель

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

В Instagram есть кнопка «загрузить еще», которая позволяет пользователям получить доступ к нижнему колонтитулу

Разбивка на страницы

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

Плюс №1: Хорошая конверсия.

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

Вы можете оценить преимущества разбивки на страницы на примере поиска в Google Search. В зависимости от вашего запроса, выбор наилучшего результата поиска может занять секунды или часы. Но когда вы решите прекратить поиск в текущем формате Google, вы будете знать точное количество результатов поиска. Вы сможете принять решение о том, где вам пора остановиться, или сколько результатов вам нужно просмотреть.

Результаты поиска в Google

Плюс №2: Ощущение контроля.

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

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

Плюс №3: Расположение элементов.

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

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

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

Сайт MR Porter использует разбивку на страницы

Минус: Дополнительные действия.

Чтобы перейти к следующей части контента при его разбивке на страницы, пользователь должен найти целевую ссылку (например, «далее»), навести на нее указатель мыши, нажать и ждать загрузки новой страницы.

Нужно кликнуть для загрузки контента

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

Когда использовать бесконечную прокрутку/разбивку на страницы?

Существует всего несколько ситуаций, когда бесконечная прокрутка будет эффективной. Она идеально подходит для сайтов и приложений, которые представляют пользовательский контент (Twitter, Facebook) или визуальный контент (Pinterest, Instagram). С другой стороны, разбивка на страницы – это безопасный вариант и хорошее решение для сайтов и приложений, которые предназначены для целенаправленной деятельности пользователей.

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

Заключение

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

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