Триколор 

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

Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор...» (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).

Рис. 1. Вид поля для загрузки файла в Firefox

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

Синтаксис поля для отправки файла следующий.

Атрибуты перечислены в табл. 1.

Прежде, чем использовать данное поле, в форме необходимо сделать следующее:

  • задать метод отправки данных POST (method="post" );
  • установить у атрибута enctype значение multipart/form-data .

    • Форма для загрузки файла продемонстрирована в примере 1.

    Пример 1. Создание поля для отправки файла

    HTML5 IE Cr Op Sa Fx

    Отправка файла на сервер

    Хотя можно установить ширину поля через атрибут size , в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.

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

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

    В табл. 2 показаны некоторые допустимые значения атрибута accept .

    Использование дополнительных атрибутов показано в примере 2.

    HTML5 IE 10+ Cr Op Sa Fx

    Загрузите ваши фотографии на сервер

    Не все браузеры поддерживают новые атрибуты. IE полностью игнорирует multiple и accept , Safari не поддерживает accept , а Firefox не работает с MIME-типом, только с ключевыми словами. Поэтому в примере выше специально для Firefox установлено значение image/*,image/jpeg . Также учтите странную ошибку в Опере, она не допускает пробелы после запятой внутри accept .

    Результат примера показан на рис. 3. Обратите внимание, что из-за наличия multiple несколько изменился вид поля.

    Какой способ отображения товаров на сайте электронной коммерции лучше: разбивка на страницы, кнопка «Загрузить еще» или бесконечная прокрутка?
    В этой статье мы рассмотрим результаты исследований Baymard Institute юзабилити кнопок «Загрузить еще», бесконечной прокрутки и разбивки на страницы. А также рассмотрим лучшие примеры реализации.

    Результаты тестов

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


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

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



    На сайтах с бесконечной прокруткой пользователи часто просматривают сотню или даже несколько сотен товаров. Чего они никогда не делают на сайтах с пагинацией и с кнопками «Загрузить еще». Хотя это касается только первых 50-150 продуктов.

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

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



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



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

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

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

    Примечание. Эти данные применимы только к коммерческим ресурсам.

    «Загрузить еще» для категорий

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

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

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



    Crutchfield использует кнопку «Загрузить еще» в сочетании с отложенной загрузкой. Первые 20 товаров загружаются по умолчанию. После того, как пользователи перейдут к 10-ому товару, Crutchfield подгружает еще 20. После 40-го элемента пользователю выводится кнопка «Загрузить еще».

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

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

    «Загрузить еще» для результатов поиска

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

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

    В результаты поиска по умолчанию должны загружаться только 25 — 75 продуктов. При этом нельзя использовать бесконечную прокрутку. Пагинация или кнопка «Загрузить еще» более уместны для результатов поиска, а поскольку они не поощряют быстрое сканирование большого количества товаров, пользователь гораздо больше сосредоточится на изучении первого набора результатов. На самом деле, из-за меньшего количества результатов, отложенная загрузка не является обязательным требованием (но, если она реализована для навигации по категориям, ее можно использовать повторно).



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

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

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

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



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



    Бесконечная прокрутка для длинного списка товаров может сделать футер недоступным: постоянно загружающиеся новые результаты сдвинут его вниз.

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


    Кнопка «Загрузить больше результатов» предлагает множество преимуществ бесконечной прокрутки при сохранении доступа к футеру.

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

    • Меньше фактического пространства.

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

    • Ограничения прокрутки.

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

    • Медленная прокрутка.

    Из-за меньшего контроля над непрерывной прокруткой списка товаров.

    • События JavaScript.

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

    Поддержка кнопки «Назад» с помощью history.pushState

    Динамическая загрузка контента с помощью аккордеонов, фильтров фильтры и AJAX- часто не соответствует ожиданиям пользователей относительного того, как должна работать кнопка «Назад».
    Метод «Загрузить еще» требует внимательного рассмотрения действия кнопки «Назад». Важно, чтобы нажимая кнопку браузера «Назад» пользователь возвращался в то же место списка товаров.

    Мы выяснили, что на 90% сайтов электронной коммерции, где используется кнопка «Загрузить еще», это сделано неправильно. Это препятствует перемещению пользователя по разделам списка товаров на той же вкладке.



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



    Skechers



    Skechers

    History API HTML5 позволяет соответствовать ожиданиям пользователей. В частности, функция history.pushState() позволяет изменять URL-адрес без перезагрузки страницы. Это соответствует поведению браузерной кнопки «Назад», которое ожидает пользователь. Браузер запоминает пользовательскую позицию прокрутки. Но нужно обеспечить, чтобы при нажатии на кнопку «Загрузить еще» загружались элементы по умолчанию, когда пользователь возвращается.

    Кнопка «Загрузить еще» не должна быть основным приоритетом

    Метод загрузки товаров – это не главное, на что большинству интернет-магазинов стоит обращать внимание при разработке сайта.

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

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

    Кнопки download в количестве 27 для оформления вашего сайта. Формат – png и psd. Скачать с Яндекс Диска .

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

    Создайте новый документ в фотошопе с размерами 200 на 80 пикселей и прозрачным фоном.

    Возьмите инструмент «Прямоугольник с закругленными краями”. В настройках инструмента активируйте “стиль-заливку” и радиус = 10, цвет фигуры – любой.

    Зайдите в стили слоя фигуры и активируйте “Наложение градиента”. В редакторе градиента проставьте цвета: #2c0591, #6586e7, #6586e7 и #ffffff.

    Градиент – линейный, угол – “-90”, режим нормальный, непрозрачность – 100%.

    Теперь активируйте обводку в стилях слоя. Настройки обводки: размер – 6, положение – снаружи, режим – нормальный, непрозрачность – 100%, тип обводки – градиент, цвета градиента – #000000, #000000, #eeab35, #eeab35, #000000, #000000, стиль – разбивка фигуры, угол 90. Скриншоты ниже:

    Получили:

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

    Теперь переходим в стили слоя фигуры окружности и применяем следующие параметры:

    Результат:

    Теперь берем фигуру стрелки , ее вы найдете в стандартном наборе Стрелки:

    Нарисуйте фигуру так, чтобы она по размеру не выходила за пределы круга. Цвет фигуры – белый. Дублируйте слой со стрелкой (cTRL +J). Переместите одну из стрелок так, чтобы одна находилась под другой:

    Выделите 2 слоя со стрелками (кликните поочередно по кадждому из слоев с зажатой клавишей Ctrl). После чего – клик правой кнопкой мыши и выберите пункт “Образовать смарт-объект”.

    Зайдите в стили смарт объекта (двойной клик по слою смарт-объекта) и примените параметры наложения – тиснение и контур. Настройки тиснения:

    Настройки Контура оставьте без изменений.

    Нам остался последний штрих – надпись Download. Инструмент Текст, шрифт по жирнее (в примере – шрифт TR). Цвет вводимого текста – #f5e0ad. Стиль слоя – активируем Обводку и выставляем значения: размер – 4, положение – снаружи, режим – нормальный, непрозрачность – 100, тип – градиент (черный по краям, прозрачный в средней части), угол – 0.

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

    Предлагаю на суд сообщества свой велосипед. На написание данного текста вдохновил Способ №5 из материала Делаем красивый input для адаптивного сайта … И да - все работает в IE, начиная с 9 версии.

    Цель : создать свою кнопку/элемент управления по нажатию которой происходит загрузка файла на сервер (либо иные, предусмотренные разработчиком, файловые операции).
    Инструменты : CSS, PHP, JavaScript.
    Используемые технологии : Ajax, через скрытый iframe.

    ПреамбулаИз кода для упрощения сознательно выкинуты все процедуры проверки принятого файла и try-catch вызовов функций, так как эти моменты не являются темой данной статьи. Также не охватывается момент по предотвращению звукового сигнала в IE. В работе используем технологию Ajax, подразумевающую, что у нас есть основная страница, осуществляющая взаимодействие с пользователем(front-end) и скрипт на сервере, обрабатывающая наши запросы(back-end) Технология работы1. На главной странице создаем «form action» Делаем ей target на скрытый фрейм, который создаем статически (или динамически). Создаем два «input» с типом «file» и «submit», даем им «id», помещаем их в «div», который спрячем со страницы стилем. Все эти элементы не видимы для пользователя и не воспринимают каких-либо его действий.
    2. Начинаем «магию». Для «input» с типом «file» на событие по изменению вешаем вызов функции onchange=«LoadFile();».
    3. На главной странице создаем кнопку. Навешиваем ей на событие нажатия кнопки мыши вызов функции onclick=«FindFile();».
    4. В функции FindFile() имитируем клик на «input» с типом «file». То есть при нажатии на нашу кнопку вызывается стандартный диалог выбора файла. Как только пользователь выбрал файл, срабатывает событие onchange и вызывается функция LoadFile(). В функции LoadFile() имитируем клик на «input» с типом «submit».
    5. Форма формирует POST запрос с именем файла к нашему back-end скрипту, который осуществляет все проверки по безопасности и загрузку файла. После этого скрипт вызывает callback функцию главной страницы, которой сообщает о результате выполнения.

    Собственно все. Для примера приведены четыре основных файла, код которых приведён ниже:

    css/style.css – стили главной страницы
    view/upload.php – back-end скрипт загрузки файла
    index.php – главная страницы
    js/upload.js – front-end скрипты главной страницы

    Кроме того, необходим любой файл с картинкой для кнопки buttons/openfile.png

    Загружаемые файлы помещаем в директорию ../temp/

    Таблица стилей (css/style.css)

    Создаем стиль кнопки и скрытого «input».
    .navButtons{ border:1px gray solid; position:absolute; overflow: hidden; display:block; height:50px; width:50px; margin:10px; -moz-box-shadow:5px 5px 7px rgba(3,33,33,.7); -webkit-box-shadow: 5px 5px 7px rgba(3,33,33,.7); box-shadow: 5px 5px 7px rgba(3,33,33,.7); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } .navButtons:hover { border:2px solid black; background-color:#fff; } .hiddenInput{ position:absolute; overflow: hidden; display:block; height:0px; width:0px; } Input мы просто делаем нулевой ширины и высоты


    Скрипт обрабатывающий запрос на загрузку файла (view/upload.php)

    Здесь все согласно примерам в интернете, валидация файлов изъята:


    Главная страница (index.php)

    OpenFile test


    JavaScript в главной форме (js/upload.js)

    function FindFile() { document.getElementById("my_hidden_file").click(); } function LoadFile() { document.getElementById("my_hidden_load").click(); } function onResponse(d) // Функция обработки ответа от сервера { eval("var obj = " + d + ";"); if(obj.success!=1) { alert("Ошибка!\nФайл " + obj.filename + " не загружен - "+obj.myres); return; }; alert("Файл загружен"); }

    Baymard Institute исследует интерфейсы интернет-магазинов и публикует результаты своих наблюдений.

    Сооснователь института Кристиан Холст сравнил шаблоны представления списка товаров:

    • Автоматическая подгрузка («бесконечный скрол»);
    • Постраничная навигация («пагинация»);
    • Кнопка «Загрузить ещё».

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

    Результаты наблюдений

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

    По количеству страниц пользователи прикидывают общее количество товаров. Они редко переходят на конкретные страницы, обычно - на следующую или предыдущую.

    «Бесконечный скрол» создаёт гладкое непрерывное взаимодействие: пользователь просматривает товары, ни на что не отвлекаясь. Естественно, это решение даёт максимум просмотров, но товары в начале списка получают меньше внимания. Это хороший способ показать широту ассортимента в конкретной категории товаров.

    Внимание на полосу прокрутки: некоторые респонденты прокручивают список, уже не фокусируясь на конкретных товарах.

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

    Из 50 топовых американских интернет-магазинов только 8% использовали кнопку «Загрузить ещё».

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


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

    Какой шаблон использовать?

    • В категориях - «Загрузить ещё» с «ленивой» подгрузкой;
    • В поиске - «Загрузить ещё» в сочетании с количеством найденных объектов;
    • В мобильных - «Загрузить ещё», но загружать меньше объектов, чем на десктопах.
    В категориях

    Показывайте от 10 до 30 товаров при первичной загрузке, подгружайте ещё по 10–30 товаров, пока их не станет 50–100. После этого покажите кнопку «Загрузить ещё». При нажатии на неё покажите 10–30 товаров и так далее. «Ленивая» подгрузка снижает нагрузку на сервер и сокращает время отклика.

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

    Если пользователь воспользовался фильтрами, он может и не увидеть кнопку «Загрузить ещё». Если список длинный, эта кнопка даст передышку, доступ к подвалу и повод подумать над применением фильтров. И он легко продолжит просмотр.

    Проблема «Загрузить ещё» и «бесконечного скрола» - постоянное увеличение длины страницы. Если пользователь прокрутит страницу вниз, на мгновение, пока не загрузятся товары, он увидит подвал. В случае с «Загрузить ещё» эта реакция повторится лишь пару-тройку раз.

    Решение: установить такую высоту страницы, чтобы она соответствовала тому количеству товаров, которые будут показаны до появления кнопки «Загрузить ещё». Даже если сами товары ещё не подгрузились, с помощью полосы прокрутки пользователь получит доступ к подвалу и прикинет длину списка.

    В результатах поиска

    Результаты поиска упорядочиваются по релевантности. По умолчанию загружайте 25–75 товаров и никогда не используйте «бесконечный скрол», чтобы пользователь сфокусировался на первой пачке самых релевантных товаров. «Ленивая» подгрузка здесь не обязательна.

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

    В мобильных

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

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

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

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

    Загружайте 15–30 товаров и показывайте кнопку «Загрузить ещё». Без «ленивой» подгрузки.

    Кнопка «Назад»

    На динамически меняющихся страницах кнопка «Назад» может работать не так, как ожидает пользователь.

    Если пользователь перешёл на страницу товара, кнопка «Назад» должна вернуть его в то же место, с которого он пришёл.

    90% изученных институтом сайтов, на которых используется кнопка «Загрузить ещё», делают это неправильно.

    Магазин Skechers переписывает адрес страницы каждый раз, когда пользователь нажимает «Загрузить ещё».

    history.pushState() из History API в HTML5 позволяет изменить URL страницы без её перезагрузки, и тогда кнопка «Назад» будет работать так, как ожидает пользователь.

    Способ загрузки товаров важен, он сильно влияет на процесс изучения товаров, но это лишь вишенка на торте UX-улучшений. Сначала займитесь улучшениями в большим возвратом на инвестиции. Если у вас нет технических ресурсов для нормальной поддержки кнопки «Назад», вместо кнопки «Загрузить ещё» используйте постраничную навигацию.

    Вывод

    Исследование показало, что кнопка «Загрузить ещё» работает лучше постраничной навигации и «бесконечного скрола». Пользователи просматривают больше товаров, но не теряют концентрацию и получают доступ к подвалу.

    При реализации этого подхода не забывайте про контекст:

    • При просмотре категорий используйте «ленивую» подгрузку и показывайте «Загрузить ещё» после отображения 50–100 товаров;
    • В результатах поиска - после 25–75 результатов. В идеале количество должно зависеть от коэффициента релевантности;
    • На мобильных - после 15–30 товаров, так как экраны меньше и скрол медленнее. Из-за особенностей джаваскрипта, загружайте товары сразу, без «ленивой» подгрузки.