Одним из ключевых аспектов веб-дизайна и пользовательского опыта является способ представления контента на сайте. Существует несколько подходов к организации контента⁚ бесконечная прокрутка‚ разбивка на страницы и использование кнопок «Загрузить еще». Рассмотрим каждый из них более подробно.
- Бесконечная прокрутка
- Разбивка на страницы
- Кнопка «Загрузить еще»
- Выбор метода представления контента⁚ сравнительный анализ
- Результаты тестирования
- «Загрузить больше» для категории
- «Загрузить больше» для результатов поиска
- Дополнительные кнопки загрузки файлов для мобильных устройств
- Поддержка кнопки возврата из history.pushState
- Кнопка «Получить больше» не должна быть вашим главным приоритетом
- «Get More» vs. бесконечная прокрутка и разбивка на страницы
- Ajax подгрузка ресурсов в список с кнопкой "Показать еще"
Бесконечная прокрутка
Бесконечная прокрутка – это техника отображения контента‚ при которой следующие элементы появляются автоматически по мере прокрутки вниз страницы. Этот подход позволяет пользователям непрерывно погружаться в контент без необходимости перехода на новую страницу. Благодаря бесконечной прокрутке пользовательская навигация становится более удобной и уменьшается количество кликов для просмотра контента.
Разбивка на страницы
Разбивка на страницы – классический способ отображения контента‚ где содержимое странички разбивается на отдельные страницы. Этот подход позволяет структурировать информацию‚ делая ее более удобной для использования‚ особенно при больших объемах данных. Пользователи могут легко перемещаться между страницами‚ но при этом возникает необходимость в постоянном переходе на новую страницу для загрузки дополнительного контента.
Кнопка «Загрузить еще»
Использование кнопки «Загрузить еще» предполагает‚ что пользователь сам решает‚ когда загрузить дополнительный контент. После нажатия на кнопку‚ на страницу подгружается новый набор данных. Этот метод обеспечивает баланс между удобством просмотра больших объемов контента и контролем над загрузкой данных.
Выбор метода представления контента⁚ сравнительный анализ
Каждый из этих методов имеет свои преимущества и недостатки‚ которые следует учитывать при выборе для конкретного веб-сайта. Рассмотрим некоторые из них⁚
- Бесконечная прокрутка⁚ удобная навигация‚ уменьшение количества кликов‚ непрерывный пользовательский опыт; однако возможно падение производительности при большом объеме контента‚ а также более затруднен поиск конкретной информации.
- Разбивка на страницы⁚ хорошая структурированность контента‚ легкость в поиске информации; но переход между страницами может привести к ухудшению пользовательского опыта и увеличению времени загрузки.
- Кнопка «Загрузить еще»⁚ баланс между удобством и контролем загрузки контента‚ улучшенная производительность при больших объемах данных; однако требует дополнительного взаимодействия пользователя для загрузки нового контента.
Ориентирование на потребности пользователей и особенности контента поможет определить наиболее подходящий метод представления контента на веб-сайте. Независимо от выбранного варианта‚ важно обеспечить удобство навигации‚ быструю загрузку и организованность контента для повышения качества пользовательского опыта.
Какой способ отображения продуктов на сайте электронной торговли лучше: разбиение на страницы, кнопка загрузки или бесконечная прокрутка?
В этой статье мы рассмотрим результаты исследования Института Баймарда по удобству использования кнопки Get More, бесконечной прокрутки и нумерации страниц. Мы также рассмотрим некоторые из лучших примеров реализации.
Результаты тестирования
В большом исследовании удобства использования на сайтах электронной коммерции многие пользователи выразили отрицательные отзывы о разбиении на страницы. Они обнаружили, что метод реализации медленный, а многочисленные ссылки для разбивки на страницы часто мешали пользователям просматривать список продуктов. Кроме того, пользователи могли просматривать гораздо меньше продуктов в списке по сравнению со страницами, на которых использовались кнопки «Получить больше» или бесконечная прокрутка. .
В случае бесконечной прокрутки пользователи воспринимают страницу так, как если бы все продукты загружались одновременно. Пользователь может просто непрерывно прокручивать список продуктов. Поэтому неудивительно, что на страницах с бесконечной прокруткой посетители видят гораздо больше товаров, чем на страницах с разбивкой на страницы или кнопкой «получить больше».
Бесконечная прокрутка идеально подходит для быстрого отображения широкого спектра товаров. Однако это снижает внимание пользователей к отдельным продуктам.
На бесконечных страницах с прокруткой пользователи часто видят сотни или даже сотни товаров. Чего они никогда не делают на страницах с нумерацией страниц и кнопками «Еще». Однако это относится только к первым 50–150 товарам.
В некоторых случаях бесконечная прокрутка не позволяет пользователям добраться до нижней части страницы. Это приводит к постоянной загрузке результатов по мере приближения к нижней части списка. Это заставляет пользователя видеть нижний колонтитул в течение нескольких секунд.
Если у вас много элементов в списке, это фактически не позволяет пользователю добраться до нижнего колонтитула, где у вас есть ссылки на важные разделы страницы и контакты.
Когда вы использовали кнопку «Получить больше» на сайте, пользователи видят больше товаров, чем на ресурсах, использующих пагинацию.
Пользователи сайта с кнопкой» Получить больше «могут исследуйте, чем те, которые имеют разбивку на страницы.
Одним из преимуществ кнопки« Получить больше »и кнопки бесконечной прокрутки является то, что список продуктов увеличивается без замены другими.
« Получить » Кнопка «Подробнее» позволяет пользователю легко сравнивать продукты. Наличие совокупного списка продуктов значительно упрощает их выбор.
Какой метод загрузки файлов мне следует использовать? Исследования показали, что ни один из этих вариантов не идеален. В разных контекстах требовалось реализовать один из трех методов:
Для категорий используйте комбинацию кнопок «Получить больше» и «Отложенная загрузка». Для поиска используйте кнопку «Получить еще». На мобильных устройствах используйте кнопку «Получить больше», но по умолчанию загружать меньше продуктов.
Примечание. Эти данные предназначены только для коммерческих ресурсов.
«Загрузить больше» для категории
Мы нашли оптимальное решение для загрузки новых продуктов на основе категорий, чтобы отображать от 10 до 30 продуктов при загрузке первой страницы, а затем прекращать загрузку еще 10-30 продуктов, пока вы не дойдете до 50-100 продуктов. Затем отобразитеКнопка «Получить еще».
После нажатия этой кнопки отобразите еще 10–30 элементов, затем возобновите ожидающую загрузку, пока не получите еще 50 100 элементов, затем снова отобразите кнопку «Получить еще».
Порог 50 100 элементов кнопки «Get More» определяют, когда прерывать пользователя. Порог
отложенная загрузка это оптимизация производительности для уменьшения времени загрузки и нагрузки на сервер.
Помните, что количество загружаемых элементов ограничено определенным диапазоном. Тесты показывают, что оптимальное количество элементов зависит от контекста и ниши страницы. Для списков со специализированными элементами используйте нижний предел.
Crutchfield использует кнопку» Get More «вместе с отложенными загрузками. По умолчанию загружаются первые 20 элементов. Кратчфилд загружает еще 20 после 40-го элемента. После 40-го элемента пользователь получает кнопку «Получить еще».
Страницы загружаются быстро, потому что изначально отображается мало элементов. В категориях малого и среднего количества отложенная загрузка позволит пользователю просмотреть весь ассортимент.
В более длинных списках будет использоваться кнопка «Получить больше». Это упростит пользователю просмотр большего количества продуктов и предоставит пользователю легкий доступ к нижнему колонтитулу.
Одним из недостатков ленивой загрузки и бесконечной прокрутки является то, что высота страницы постоянно увеличивается. Если пользователь перемещает полосу прокрутки вниз и достигает нижнего колонтитула, он видит ее в течение секунды или двух, пока не будут загружены новые элементы. Новые элементы будут добавлены в список, и полоса прокрутки снова увеличится.
«Загрузить больше» для результатов поиска
Список неограниченных результатов поиска содержит намного больше элементов, чем категория список. На крупных торговых сайтах поисковые запросы часто возвращают тысячи результатов.
Кроме того, результаты поиска сортируются по релевантности. Значит, пятый результат важнее сотого. В результате пользователям не нужно просматривать сотни продуктов. Следовательно, вы должны мотивировать их смотреть первые элементы в списке.
Результаты поиска по умолчанию должны загружать только 25 75 продуктов. Вы не должны использовать бесконечную прокрутку. Кнопка «Разбивка на страницы» или «Получить больше» больше подходит для результатов поиска, и, поскольку она не побуждает вас быстро сканировать большое количество элементов, пользователь будет гораздо больше сосредоточен на изучении первого набора результатов. Фактически, из-за меньшего количества результатов отложенная загрузка не является обязательной (но может быть повторно использована, если реализована для навигации по категориям).
С помощью кнопки» Загрузить » больше », пользователи получают естественный перерыв, потому что релевантность результатов снижается (в отличие от бесконечной прокрутки). Но у них все еще есть возможность сравнивать первый набор результатов со вторым (в отличие от разбивки на страницы).
Чтобы перейти на следующий уровень, количество первоначально загруженных элементов может быть динамически корректируется с учетом релевантности результатов поиска. Большинство поисковых систем ранжируют каждый элемент на основе его оценки релевантности и возвращают наиболее релевантные результаты. Эти результаты можно использовать для определения динамического порога, который увеличивает или уменьшает количество загружаемых элементов в зависимости от того, следует ли мотивировать пользователя просматривать только первые несколько результатов или просматривать более широкий диапазон элементов. Например,если баллы релевантности резко падают после первых 28 баллов, уменьшите количество извлекаемых элементов, чтобы сосредоточить свое внимание на первых элементах. Но если первые 100 результатов имеют высокую оценку релевантности, количество загружаемых элементов может быть увеличено, чтобы стимулировать дальнейший поиск.
Дополнительные кнопки загрузки файлов для мобильных устройств
Пагинация ссылок затруднена
щелкните, потому что они расположены близко друг к другу. Более того, мобильные пользователи не хотят ждать перезагрузки страницы.
Бесконечная прокрутка длинного списка товаров может сделать нижний колонтитул недоступным: постоянная загрузка новых результатов будет подталкивать его вниз.
Ссылки на страницы могут быть неудобными для точного щелчка и вызвать перезагрузку страницы. Бесконечная прокрутка оказалась эффективным способом привлечь внимание пользователей к большему количеству товаров. Однако этот метод может сделать нижний колонтитул недоступным.
Кнопка« Загрузить больше результатов »предлагает множество преимуществ бесконечной прокрутки при сохранении доступа к нижнему колонтитулу.
Итак, лучшее решение — иметь одну большую кнопку «Получить больше» в конце списка продуктов. Однако у мобильных устройств есть некоторые ограничения:
Меньше места на экране. Поскольку мобильные устройства имеют гораздо меньший экран, элементы списка занимают большую часть экрана, а в таблице списка будет отображаться только два-три элемента. Таким образом, 50 элементов займут намного больше места на мобильном устройстве, чем на настольном компьютере. Таким образом, мобильному пользователю придется прокручивать страницу намного чаще.
На сенсорных устройствах пользователь может прокручивать страницу, только перетаскивая палец. У пользователя больше возможностей прокрутки на компьютере.
Медленная прокрутка.
С меньшим контролем над плавностью прокрутки списка продуктов.
События Java.
Для запуска событий JavaScript большинство сенсорных устройств не можете использовать метод динамической отложенной загрузки. Событие срабатывает только тогда, когда пользователь прекращает прокрутку. По этой причине невозможно загрузить продукты во время прокрутки.
Мы рекомендуем загружать на мобильное устройство только 15–30 продуктов, прежде чем показывать кнопку «Получить больше». Затем загрузите остальную часть своего инвентаря.
Поддержка кнопки возврата из history.pushState
Динамическая загрузка содержимого с использованием аккордеона, фильтров и AJAX часто не соответствует ожиданиям пользователей в отношении кнопки возврата .
Метод «Загрузить больше» требует тщательного обдумывания того, как работает кнопка «Назад». Важно, чтобы пользователь возвращался в то же место в списке продуктов после нажатия кнопки «Назад» в браузере.
Мы обнаружили, что на 90% сайтов электронной коммерции, которые используют кнопку «Получить больше», это сделано не правильно. В результате пользователь не сможет перемещаться вперед и назад по списку продуктов на одной вкладке.
Skechers перезаписывает URL-адрес каждый раз, когда пользователь нажимает Кнопка «Получить еще». Когда пользователь нажимает на него, чтобы вернуться, он перемещает его в нужное место в списке продуктов.
Skechers
Skechers
History API HTML5 позволяет оправдать ожидания пользователей. В частности, функция history.pushState () позволяет изменять URL без перезагрузки страницы. Это соответствует поведению кнопки «Назад» в браузере, ожидаемой пользователем. Браузер запоминает позицию прокрутки пользователя. Однако мы должны убедиться, что нажав кнопку Получить больше будет загружать продукты по умолчанию, когда пользователь вернется.
Кнопка «Получить больше» не должна быть вашим главным приоритетом
Способ загрузки продуктов — это не то, на чем большинство интернет-маркетологов должны сосредоточиться при разработке веб-сайта.
Мы задокументировали множество серьезных проблем за последние семь лет
UX на подавляющем большинстве сайтов электронной коммерции. Это включает поиск в интернет-магазине, навигацию по категориям, фильтрацию, оформление заказа и мобильные возможности. Решение этих проблем требует меньше дизайна и технических ресурсов, чем создание надежной функции «Получить больше».
Это не означает, что метод загрузки не важен. Это может существенно повлиять на то, как пользователи видят ваши продукты. Это просто не должно быть в верхней части списка необходимых изменений для большинства веб-сайтов, на которых все еще есть много проблем. Использование кнопки «Get More» больше подходит для тех сайтов, которые стремятся к совершенству UX.
«Get More» vs. бесконечная прокрутка и разбивка на страницы
На основании нашего тестирования мы обнаружили, что кнопка «Получить больше» решает проблемы удобства использования, связанные с разбивкой на страницы. Также были исправлены серьезные проблемы с бесконечной прокруткой (из-за которых пользователи поверхностно просматривали продукты и часто не могли дотянуться до нижнего колонтитула).
Кнопка «Получить больше» работает лучше, если проблема с кнопкой возврата в браузере решена должным образом. Например, через history.pushState () . В идеале реализация должна быть адаптирована к контексту пользователя. В частности, были определены следующие три контекстные корректировки:
При навигации по категориям используйте комбинацию кнопки «Получить больше» и отложенной загрузки. Установите пороговое значение для кнопки Get More на 50–100 элементов. Для результатов поиска используйте кнопку Get More, но установите пороговое значение на 25 75 результатов. Вам необходимо динамически корректировать порог для каждого списка результатов поиска в зависимости от любого снижения рейтинга релевантности. На мобильных устройствах используйте кнопку «Получить больше». Но установите порог в 15–30 элементов, чтобы избежать проблем с прокруткой и размером экрана. Кроме того, из-за способа запуска событий JavaScript и более низкого порогового значения, пожалуйста, отправляйте все элементы сразу, без использования отложенной загрузки.
