Как проектировать отображение контента при загрузке

Автор статьи:
,

Введение

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

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

Для структурированной и постепенной загрузки контента используют пагинацию, бесконечный скроллинг и кнопку «Загрузить еще».

Пагинация

Пагинация (англ. Pagination) разбивает большое количество контента на страницы.

Может быть представлена в различных видах:

  • Прямой — это номера страниц, где каждая цифра является ссылкой.
  • Список диапазонов, где каждая группа цифр отправляет пользователя на страницу, на которой расположены нужные материалы.
  • Обратный список — страницы идут в обратном порядке от новых к старым, поэтому номера выглядят так: 40-21, 20-1.
  • Точки.
  • Разбивка на страницы при помощи букв, где статьи, продукты и категории упорядочены по алфавиту.

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

Примеры: Wildberries, Amazon, Shutterstock, блог Xpeedstudio.

wildberries.ru
wooddi.com

Плюсы:

01
Упрощает навигацию, поскольку контент представлен блоками, что делает процесс восприятия информации более удобным.
02
Улучшает взаимодействие с пользователем через четкое позиционирование элемента. Люди быстрее могут добраться до необходимой страницы. Например, нужный ковер на странице 5.
03
Обеспечивает ощущение контроля у пользователей. Когда человек знает количество доступных результатов, он может принять более обдуманное решение, вместо того, чтобы теряться в бесконечно обновляемом списке.
04
Увеличивает скорость загрузки страниц. Разбивка контента на сегменты повышает производительность сайта путем уменьшения объема загружаемых данных, что позволяет страницам загружаться быстрее и обеспечивает более плавную навигацию по сайту.

Минусы:

01
Дополнительные действия. Чтобы увидеть контент, находящийся в начале или в конце списка, пользователям необходимо выполнять дополнительные действия. Например, нажимать кнопки «Далее» или «Предыдущая» чтобы перейти на следующую страницу.
02
Интерфейс неудобен для мобильных устройств. Пользователям легко ошибиться, касаясь не той страницы.
03
Возможно негативное влияние на SEO. Страницы, доступные несколькими кликами от главной, как правило занимают низшие позиции в поисковых системах.
04
Пользователи проводят больше времени, просматривая контент на первой странице. Человек скорее изучит информацию на страницах 3 и 5, чем дойдет до страниц 11 или 20.

Советы по проектированию пагинации

Кнопки «Следующая» и «Предыдущая»

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

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

Фильтры и сортировка

Фильтры позволяют пользователям улучшить точность результатов поиска и отобразить на странице меньше объектов.

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

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

Изменение вида с сетки на список

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

Бесконечный скроллинг

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

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

Бесконечный скролл  чаще всего используется на сайтах с развлекательным контентом и в социальных сетях.

Примеры: TikTok, ВКонтакте (лента новостей), YouTube, Pinterest.

pinterest.com

Плюсы:

01
Позволяет удерживать пользователей на вашем сайте длительное время, т. к. для перехода к следующему результату требуется минимальное количество действий, что уменьшает вероятность ухода со страницы.
02
Идеально подходит для смартфонов. Прокрутка на мобильных устройствах проще, чем нажатие на кнопки «Следующая» и «Предыдущая». К тому же пользователи управляют движением страницы пальцами, что обеспечивает чувство контроля и погружения.
03
Способствует длительному взаимодействию с пользователем.
04
Подходит для контента, где основная масса — это изображения и видео.

Минусы:

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

Советы по проектированию бесконечного скролла

Липкая панель навигации

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

Вы посмотрели все новости

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

Индикатор загрузки

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

Кнопка «Загрузить еще»

Кнопка «Загрузить еще» появляется в нижней части страницы и позволяет загружать больше контента при нажатии на нее. Этот процесс продолжается до тех пор, пока не будут выведены все результаты. Такой вид загрузки прост и интуитивно понятен. Он не мешает пользователю, а спрашивает о его желаниях «Хотите увидеть больше результатов?».

Кнопка «Загрузить еще» — распространенный тип загрузки для интернет-магазинов.

Примеры: Skechers, Спортмастер, Яндекс маркет (десктопная версия).

skechers.com
market.yandex.ru

Плюсы:

01
Удобно для использования на смартфонах и других устройствах с небольшими экранами.
02
Легкий доступ к футеру, где пользователи могут найти ссылки на основные разделы сайта.
03
Кнопка «Загрузить еще» добавляет результаты, не заменяя их. Пользователь может легко вернуться к предыдущим элементам, свернув страницу вверх. В онлайн-магазинах это позволяет пользователям просматривать больше товаров для сравнения.

Минусы:

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

Советы по проектированию кнопки «Загрузить еще»

Акцент на кнопку

Кнопка «Загрузить еще» — это неотъемлемый элемент данного шаблона, поэтому она должна стать сигналом о загрузке дополнительного контента. Это основное действие на странице, поэтому важно, чтобы кнопка была заметной.

Теги для поиска

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

Кнопка «Вернуться к началу страницы»

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

Чем они отличаются?

Вовлечение пользователей

  • Пагинация

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

  • Бесконечный скролл

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

  • Кнопка «Загрузить еще»

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

SEO

  • Пагинация

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

  • Бесконечный скролл

При бесконечном скролле Google рассматривает каждый блок загруженного контента как отдельную страницу с уникальными URL-адресами и метатегами. Для пользователей страница прокручивается бесконечно, но Google видит это как комбинацию нескольких страниц. Убедитесь, что при прокрутке меняется URL-адрес. Например: сайт.com/блог/?page-5, сайт.com/блог/?page-6, сайт.com/блог/?page-7.

  • Кнопка «Загрузить еще»

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

Смешанный тип

Исследование, проведенное Baymard Institute, выявило, что наиболее удобными для пользования считаются смешанные варианты с кнопкой «Загрузить еще». Выбор варианта зависит от контекста (на что направлен ваш интерфейс, для чего он необходим пользователю).

Для категорий

Для загрузки новых товаров в категориях рекомендуется использовать кнопку «Загрузить еще» в сочетании с бесконечным скроллингом.

На первоначальной загрузке страницы отображается от 10 до 30 товаров, затем постепенно подгружается еще от 10 до 30 товаров, пока не будет достигнуто количество от 50 до 100 товаров, после чего появляется кнопка «Загрузить еще». При нажатии на эту кнопку дополнительно загружается 10-30 продуктов, и процесс отложенной загрузки продолжается до достижения следующей порции от 50 до 100 товаров, после чего снова отображается кнопка «Загрузить еще».

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

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

Яндекс маркет (версия для мобильных устройств) использует сочетание кнопки «Показать еще» и бесконечного скролла

Для поиска

Сочетание пагинации и кнопки «Загрузить еще» удобнее использовать при проектировании результатов поиска, так как они предлагают пользователям более внимательно изучать первоначальный набор результатов, не перегружая их большим количеством товаров. Результаты поиска по умолчанию лучше показывать от 25 до 75 продуктов, отсортированные по релевантности (людям важнее 3, чем 83), чтобы пользователи могли сконцентрироваться на наиболее значимых вариантах. Вместо бесконечного скролла следует предоставлять опцию загрузки дополнительных результатов.

Интернет-магазин Спортмастер (десктопная версия) использует сочетание пагинации и кнопки «Загрузить еще»

Мобильные устройства

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

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

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

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

Учитывая эти ограничения, на экраны мобильных устройств рекомендуется загружать 15–30 товаров перед появлением кнопки «Загрузить еще», затем загружать их все сразу, без использования бесконечного скролла.

Заключение

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

Выбирайте и проектируйте!

Бесплатный учебник по UX/UI‑дизайну
Все лонгриды