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

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

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

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

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

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

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

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

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

Плюсы:

Минусы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плюсы:

Минусы:

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

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

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

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

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

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

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

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

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

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

Плюсы:

Минусы:

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

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

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

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

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

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

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

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

• Пагинация

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

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

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

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

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

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), чтобы пользователи могли сконцентрироваться на наиболее значимых вариантах. Вместо бесконечного скролла следует предоставлять опцию загрузки дополнительных результатов.

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

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

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

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

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

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