Каталог с кнопкой «Показать ещё» или номерами страниц: что удобнее покупателю

Как покупатель продолжит выбор после карточки?

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

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

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

Проба на одном наборе товаров

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

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

Номера страниц дают ориентир и отдельное место

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

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

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

Что происходит с фильтром

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

В справке браузерного History режим scrollRestoration со значением auto связан с автоматическим возвратом прокрутки, а manual отключает его. Это ориентир исполнителю при диагностике потерянного места. Для заказчика критерий проще: возврат работает в фактическом каталоге с загруженными товарами. Одной настройки недостаточно, если нужных карточек ещё нет на странице.

Кнопка добавляет товары, сохраняя просмотренное

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

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

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

Ожидание, отказ и конец подборки

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

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

Бесконечная прокрутка требует дополнительных договорённостей

Автоматическое продолжение меняет управление списком. В описании ленты WAI отдельно рассматриваются загрузка при прокрутке и взаимодействие со средствами чтения экрана, поэтому перенос этого приёма в каталог нельзя свести к удалению кнопки.

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

Технический признак aria-busy помогает средствам доступности понять, что блок обновляется. Согласно справке MDN, значение true обозначает обновление, а после его завершения устанавливают false. Заказчику не нужно самостоятельно добавлять атрибут. В задании требуется понятное объявление результата подгрузки, которое исполнитель демонстрирует с выбранным средством чтения.

Когда автоматическое продолжение оправдано

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

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

Задание на список включает возврат и неудачную загрузку

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

Ниже — образец критериев для сравнительной пробы. Количество товаров в порции выбирают отдельно по содержанию карточек и скорости страницы. Универсальное число здесь не требуется. Важнее сравнить варианты на одинаковом наборе. Для длинных карточек телефона и компактных карточек компьютера одинаковая порция может давать разное впечатление. Это повод испытать оба экрана.

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

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