Бесконечная прокрутка — полезна ли она вашему сайту?

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

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

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

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

Для списков со специализированными товарами используйте нижний предел.

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

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

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

Кнопка и прокрутка страницы вверх через HTML и CSS.

<body>в том месте до которого нужно прокрутить страницу, устанавливаем следующую конструкцию<div><a id=’top‘/></div>
id<div><a href=»#top» class=»idTop»>ВВЕРХ</a></div>
добавим CSSa.idTop {
 position: fixed; /*позиционирование кнопки фиксированное*/
 z-index: 9999; /*отображаем поверх всех элементов*/
 bottom: 0%; /*положение снизу*/
 right: 0%; /*положение справа*/
 background: #7db9e8; /*фон, можно указать любую картинку*/
 opacity: .6; /*прозрачность*/
 color: #fff; /*цвет текста*/
 padding: 10px; /*внутренние отступы*/
 margin: 5px 15px 15px 5px; /*внешние отступы*/
}
a.idTop:hover {
 opacity: 1;
}
<div><a href=»#top» class=»idTop»><img src=’…/myimage.png’/>
</a></div>

Элементы корзины

Спойлер. Корзина — это важная конверсионная страница. Здесь нельзя допускать ошибок. Обязательно выводите изображение товара с кратким описанием. Среди полезных опций — указание сроков доставки, напоминание о преимуществах и возможность сохранить корзину. А вот от дублирования кнопки оплаты/заказа можно отказаться.

Изображение и описание товара

20/0

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

Ограниченное пространство экрана не значит, что пользователям неважно, что лежит в их корзине

Сроки отправки и доставки

5/15

Если на этом этапе вы не можете гарантировать конкретные сроки доставки, укажите хотя бы, когда планируете отправить товар.

Напоминание о преимуществах

2/18

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

Сохранить корзину

3/17

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

Кнопка «Оплата/Далее»

2/18

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

Кого опрашивать

Рекомендации по выбору респондентов:

  • можно подбирать среди друзей;
  • можно обращаться к пользователям сайта (соцсети и email);
  • можно подобрать в AskUsers.ru (>15 параметров для отбора ЦА).

1. Оптимальное число респондентов — 15-20 человек, этого достаточно для выявления большинства основных проблем сайта.

Если взять меньше 5 человек, вы рискуете не выявить основные проблемы сайта. Больше 30 респондентов брать смысла особого нет — по практике новые проблемы не находятся, а лишь набираются статистические данные по количеству респондентов, указавших на проблемы.

2. От 70 до 100% респондентов надо подбирать под ЦА сайта.

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

3. Если сегментации нет, то при подборе можно ограничиться данными «Яндекс.Метрики» и Google Analytics.

Иногда имеет смысл привлекать к исследованию специалистов по разработке сайтов и интернет-маркетингу (дизайнеры, копирайтеры, ux-специалисты, разработчики, seo-шники, интернет маркетологи, smm-щики). Это позволит получить список дополнительных проблем сайта, которые обычные пользователи могут не заметить.

Что делать, если мышь продолжает прокручивать вверх или вниз

Проверьте, не проблема ли это в мыши

Первое, что вам следует сделать, это проверить, связана ли ваша проблема с мышью или системой. И вот что вам следует сделать:

  1. Отключите мышь и снова подключите ее через несколько минут. Вы можете подключить его к другому USB-порту.
  2. Убедитесь, что кабель мыши не поврежден.
  3. Если вы используете беспроводную мышь, замените батарейки.
  4. Убедитесь, что колесо прокрутки не забито грязью.

Если с вашей мышью все в порядке, но проблема с прокруткой в ​​Windows 10 по-прежнему возникает, продолжайте устранение неполадок.

Изменить настройки мыши

Это полезное решение для исправления ошибки прокрутки Windows 10. Просто выполните следующие действия:

Шаг 1: нажмите Win + I в то же время, чтобы открыть интерфейс настроек Windows.

Шаг 2: перейдите к Устройства> Мышь .

Шаг 3. Отключите опцию Прокрутка неактивных окон при наведении на них курсора .

Затем посмотрите, исправлена ​​ли проблема неконтролируемой прокрутки Windows 10. Если нет, попробуйте другой способ.

Что делать, если приложение настроек Windows 10 не открывается?

Приложение настроек не открывается в Windows 10? Что делать, если у вас нет доступа к настройкам? В этом посте вы найдете несколько решений для устранения этой проблемы.

Читать больше

Запустите средство устранения неполадок Windows

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

Шаг 1. Также откройте настройки Windows, нажав Пуск> Настройки .

Шаг 2: выберите Обновление и безопасность а потом Устранение неполадок .

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

Удалите последнее обновление Windows

Если ваша мышь прокручивается сама по себе после установки определенных обновлений Windows, их удаление может помочь решить эту проблему.

Шаг 1. Откройте настройки Windows и нажмите Обновление и безопасность .

Шаг 2: в Центр обновления Windows страницу, щелкните Просмотреть историю обновлений> Удалить обновления .

Шаг 3. В интерфейсе панели управления щелкните правой кнопкой мыши последнее обновление и выберите Удалить .

Проблема бесконечной прокрутки

Бесконечная прокрутка нарушает восприятие сайта пользователем. В частности, страдают следующие привычные посетителю особенности работы с веб-ресурсами:

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

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

В чем измеряется

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

Уровень юзабилити — не абстрактная величина, он имеет единицу измерения, которая определена в международном стандарте ISO 9241-210. Характеризуется количеством физических и умственных усилий, которые тратят пользователи на достижение своей цели, и называется стоимостью взаимодействия.


Travel Web Picker by Ramotion

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

Дизайнеры стремятся снизить стоимость взаимодействия настолько, насколько это возможно.

  • Сокращают количество кликов до цели.
  • Увеличивают скорость загрузки страницы.
  • Убирают отвлекающие факторы.
  • Делают шаги до цели как можно проще.

Для сайтов и веб-приложений стоимость взаимодействия удобно оценивать в количестве кликов и времени, затрачиваемом пользователем на решение задач.

Конверсия — также хорошая мера стоимости взаимодействия. Легко измерить количество пользователей, купивших товар или зарегистрировавшихся на сайте.

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

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

3. Бесконечный скролл

Помните, как все (например, мой старый босс) говорили «скролл мертв», «пользователям не нравится скроллить», и, если расположить на сайте что-то «ниже сгиба», то никто никогда не увидит это? Что ж, приглашаю вас вместе посмеяться над ними.

Поехали дальше.

Бесконечный скролл – это квинтэссенция «поведения пользователя при просмотре» (извиняюсь за использование слова «квинтэссенция», я недавно смотрела фильм «Тайная жизнь Уолтера Митти», и теперь это мое любимое умное слово). Лучше всего подходит для развлекательных сайтов, вы просто скроллите, скроллите и скроллите, и, когда вы это делаете, время (и ваша жизнь) начинает исчезать. Однако, этот паттерн ужасен для электронной коммерции. Представьте, что вы пытаетесь найти то, что вы видели 30 скроллов назад? Следовательно, он в основном используется в сфере развлечений.

3.1. Справка

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

Плюсы:

  • Бесконечный скролл может вызвать привыкание.
  • Имеет быстрое время загрузки.
  • Это «модно».
  • Имеет длительные периоды взаимодействия с пользователем.
  • Прокрутка – это ожидаемое поведение, особенно на сенсорных экранах.
  • Это хорошо для изображений.

Минусы:

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

Интересно:

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

Примеры:

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

  • Instagram
  • Facebook
  • YouTube
  • Google play

* Дополнение после публикации статьи: напомнил мне, что некоторые мобильные версии (m.) сайтов электронной коммерции используют бесконечный скролл, например:

3.2. Компонент: Липкая панель навигации

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

Примеры липкой навигации на мобильном телефоне

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ БЕСКОНЕЧНОГО СКРОЛЛА? Да, он необходим.

3.3. Компонент Instagram «Вы посмотрели все новости»

Помните, как лежа на диване мы часами листали Instagram? И вот однажды мы увидели сообщение «Вы посмотрели все новости». Приложение буквально закричало: «Встань с дивана, ты тратишь свою жизнь!» Да, это был тяжелый день и для меня.

Пример компонента «Вы посмотрели все новости», вдохновленного Instagram

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ БЕСКОНЕЧНОГО СКРОЛЛА? В зависимости от вашей платформы.

3.4. Компонент: Индикатор загрузки

Пример индикатора загрузки

Если у вас плохое подключение к интернету или сервер работает медленно, вам придется смотреть на индикатор загрузки. Это будет казаться вечностью. Индикатор загрузки позволяет понять, что платформа обрабатывает запрос. Это своего рода пульс – он дает вам знать, что тело живо, даже, если вы чувствуете себя мёртвым после миллионного скролла в Instagram.

ВАМ НУЖЕН ЭТОТ КОМПОНЕНТ ДЛЯ БЕСКОНЕЧНОГО СКРОЛЛА? Да, обязательно.

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

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

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

  1. Меньший размер экрана Поскольку экран мобильного телефона намного меньше, чем экран компьютера, элементы списка будут занимать большую часть экрана. А в таблице отображается 2-3 элемента максимум. Таким образом, 50 элементов занимают гораздо больше места на мобильном устройстве, чем на настольном компьютере. Другими словами, пользователю на мобильном телефоне придется взаимодействовать с сайтом гораздо больше, чем на компьютере.
  2. Ограничение прокрутки На сенсорном устройстве пользователь обычно может прокручивать страницу с помощью пальца или путем перетаскивания бегунка вниз. Сравните это с обычным компьютером, где пользователь для этого же использует мышь, клавиатуру или трекпад.
  3. Скорость прокрутки В большинстве случаев скорость прокрутки на мобильных устройствах очень сложно контролировать. Она будет или замедленная — в этом случае пользователь быстро покидает страницу. Либо быстрая — список товаров прокручивается с высокой скоростью, поэтому пользователь может пропустить необходимый ему товар.
  4. JavaScript Наконец, запуск JavaScript на большинстве сенсорных устройств означает, что метод динамической ленивой загрузки реализуется не всегда успешно. Сценарий JavaScript срабатывает только после завершения прокрутки, поэтому товары не могут подгружаться во время прокрутки. По этим причинам лучше всего загружать 15-30 товаров, кнопку «Показать еще», а затем загружать оставшиеся результаты.

Использование кнопки «Показать еще» требует тщательного подхода к кнопке «Назад»

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

А как сделать удобным «перелистывание» страниц рабочих столов на смартфоне Huawei (honor)?

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

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

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

Далее мы опишем порядок включения функции перелистывания «экранов» по кругу на примере редакционного смартфона Huawei P smart под ОС Android 9 Pie EMUI 9.1.0.

Инструкция по включению непрерывной прокрутки рабочих экранов на телефоне Huawei (honor)

1. Находясь на любом рабочем столе нужно активировать режим Настройки экрана. Для этого нужно сделать свайп двумя пальцами сведя их вместе.

2. Находясь в основной странице Настроек нужно нажать на значок «Настройки рабочего экрана».

3. Далее в Настройках рабочего экрана нужно включить переключатель пункта «Непрерывная прокрутка рабочих экранов».

Теперь служба «Непрерывная прокрутка рабочих экранов» активирована.

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

4. Пример: раньше с первого левого рабочего стола при перелистывании экрана свайпом вправо следующая страничка не открывалась.

Но включив эту службу, вы с первой «левой» странички сможете перейти сразу на последнюю «правую» страничку.

Источник

Client:

Теперь перейдём клиентской части сайта, для начала сделаем не большой HTML блок с классом , куда будем выводить данные.

XHTML

1
2
3
4

<div class=data></div>

<script src=»https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js»></script>

<script src=»./script/script.js»></script>

Также мы подключаем через CDN библиотеку axios.js, ещё JavaScript файл в котором будет основной код.

Теперь перейдём во файл где весь основной код, в нём первый делом объявляем нужные переменные.

JavaScript

1
2
3
4
5
6

// Получаем элемент для вывода данных

let data=document.querySelector(«.data»);

// Номер страницы

let numPage=1;

// Есть ли ещё страницы

let bePages=true;

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

JavaScript

1
2
3
4
5
6
7
8
9
10
11

// Делаем GET запрос

axios.get(‘http://testphp/pagination.php?pageno=’+numPage).then(res=>{

// Строим цикл for

for(leti=;i<10;++i){

// Добавляем элемент в дата

data.innerHTML+=`<div class=»card-body»>

<h5 class=»card-title»>${res.data.postsi.title}<h5>

<pclass=»card-text»>${res.data.postsi.text}<p>

<div>`

}

});

Тут мы отправляем GET запрос получаем ответ, делаем цикл и добавляем блоки в наш элемент.

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Событие скролл

document.addEventListener(‘scroll’,(e)=>{

// Проверяем условия

if(document.body.scrollHeight-document.body.scrollTop===document.body.clientHeight&&bePages==true){

// Увеличиваем номер страницы

numPage++;

// Отправляем GET запрос

axios.get(‘http://testphp/pagination.php?pageno=’+numPage).then(res=>{

// Проверяем есть ли следующая страница

if(res.data.next===false){// Если нет то

// В переменную кладём false

bePages=false;

}

// Создаём цикл

for(leti=;i<10;++i){

// Кладём новый элемент в наш блок

data.innerHTML+=`<div class=»card-body»>

<h5 class=»card-title»>${res.data.postsi.title}<h5>

<pclass=»card-text»>${res.data.postsi.text}<p>

<div>`

}

});

}

})

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

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

Эта вся программа была, таким образом  в js делается подгрузка контента при прокрутке.

jQuery плагин прокрутки веб-страницы вверх

плавно прокручивает страницу вверх;кнопка прокрутки не видна вверху страницы, а появляется когда часть уже прокручена и исчезает после возврата к верху; имеет маленький размер и работает во всех браузерах.HTML код<a href=»#» id=»toTop«></a>
CSS#toTop {
 position:fixed;
 z-index:9999;
 bottom:10px;
 right:10px;
 background: #F4FFBF;
 border: 1px solid #ccc;
 padding: 5px;
 cursor: pointer;
 color: #666;
 text-decoration: none;
 width:100px;
}
#toTop {
 position:fixed;
 z-index:9999;
 bottom:10px;
 right:10px;
 background: url(‘…/yuor_image_64x64.png’) no-repeat;
 width: 64px;
 height: 64px;
 border: none;
 padding: 5px;
 cursor: pointer;
 color: transparent;
 text-decoration: none;
}
</head>$(function(){
  $.fn.scrollToTop=function(){
    $(this).hide().removeAttr(«href»);
    if($(window).scrollTop()!=»0″){
        $(this).fadeIn(«slow»)
  }
  var scrollDiv=$(this);
  $(window).scroll(function(){
    if($(window).scrollTop()==»0″){
    $(scrollDiv).fadeOut(«slow»)
    }else{
    $(scrollDiv).fadeIn(«slow»)
  }
  });
    $(this).click(function(){
      $(«html, body»).animate({scrollTop:0},»slow»)
    })
  }
});
$(function() {$(«#toTop»).scrollToTop();});
http://magentawave.com

Узкие места при реализации

Тестирование показало, что для представления многообразия продукции сайта нужно разместить на главной хотя бы 30-40% структуры верхнего уровня (картинками или текстом). Однако, чем ближе вы подходите к этому лимиту, тем важнее, чтобы эти 30-40% категорий были максимально разнообразными. Например, на сайте REI вместо размещения двух категорий, связанных с туризмом, было бы лучше показать один туристический товар и какой-нибудь другой тип товара (скажем, велосипед, коврик для йоги и т.д.), чтобы продемонстрировать, что на этом сайте торгуют не только туристическим снаряжением.

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

Например, выводить высокомаржинальные товары или товары с минимальной наценкой, выполняющие функцию ай-стопперов.

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

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

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

Переход по одному из блоков на главной странице Walmart приведет вас не на страницу категории, а на распродажу товаров данной категории. Заголовок «Большая экономия в каждом отделе» («Save big in every department») намекает нам об этом, но, как было замечено в ходе тестирования, пользователи игнорируют заголовок и ожидают при клике по изображению попасть именно к полному списку товаров.

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

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

Подгрузка записей при нажатии на кнопку — Показать еще

Шаг 1

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

//вместо этого
<div id="load_more_gs">
<div class="cssload-container"><div class="cssload-whirlpool"></div></div>
</div>

//вставить это
<div id="loadmore_gs">Показать еще</div>

Показать еще — это текст кнопки, если хотите, можно поменять.

Шаг 2

Теперь добавим новые стили для кнопки. Если вы добавляли стили для первого метода, можете их удалить.

#loadmore_gs{
	background:#63a63e;
	color:#fff;
	padding:5px 0;
	text-align:center;
	-moz-border-radius:4px; 
	-webkit-border-radius:4px;
	border-radius: 4px;
	width:150px;
	margin:0 auto;
	cursor:pointer;
}

Шаг 3

Точно такой же как и в прошлом методе, если уже делали его, пропускайте, если нет, то делайте аналогично первому методу.

Шаг 4

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

jQuery(function($){
	$('#loadmore_gs').click(function(){
		$(this).text('Загрузка...');
		var data = {
			'action': 'loadmore',
			'query': true_posts,
			'page' : current_page
		};
		$.ajax({
			url:ajaxurl,
			data:data,
			type:'POST',
			success:function(data){
				if( data ) { 
					$('#loadmore_gs').text('Показать еще').before(data);
					current_page++;
					if (current_page == max_pages) $("#loadmore_gs").remove();
				} else {
					$('#loadmore_gs').remove();
				}
			}
		});
	});
});

Тут можно настраивать текст кнопки или поменять имя айди, если Вы решили его сменить везде. В 3 строке есть слово — Загрузка…. Это выведется, когда Вы нажмете на кнопку и обработчик AJAX начнет свою работу.

В 15 строке текст — Показать еще, этот текст появится после подгрузки. Если Вы изменили текст из первого шага, то измените и здесь.

Шаг 5

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

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

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

На этом все, спасибо за внимание

А как обстоят дела у российских e-commerce сайтов?

Попробуем применить принципы оценки главной страницы, описанные в статье Baymard, к российскому рынку. Рассмотрим примеры 10-ти мобильных главных страниц из топа российских e-commerce сайтов по версии RUWARD.

  1. Exist.ru
    Главная страница мобильной версии Exist.ru по сути представляет собой длинный текстовый список всех категорий товаров, покрывая практически весь каталог сайта.
    Пользователь может оценить ассортимент по главной? — Да
  2. Ulmart.ru
    Список категорий выводится только в самом низу страницы, и то в слайдере. Блоки с конкретными товарами («Хиты продаж», «Специальные предложения» и т.д.) хоть и дают представления об ассортименте, но покрывают его не полностью.
    Пользователь может оценить ассортимент по главной? — Не полностью
  3. Wildberries.ru
    Список категорий на главной странице достаточно исчерпывающий. С удивлением для себе узнала, что Wildberries.ru продают даже книги и электронику!
    Пользователь может оценить ассортимент по главной? — Да
  1. Citilink.ru
    Мобильная главная страница Citilink.ru очень усеченная и не содержит ничего, кроме акций.
    Пользователь может оценить ассортимент по главной? — Нет
  2. Lamoda.ru
    Главная страница Lamoda.ru — просто образец для подражания. И информация об акциях, и список всех товарных категорий, и информация о доставке — всё, что нужно клиентам, когда они впервые попадают на сайт.
    Пользователь может оценить ассортимент по главной? — Да
  3. Mvideo.ru
    Здесь представлены пусть не все, но хотя бы «Популярные категории» (покрывающие почти всё множество категорий сайта), причем в верхней части страницы.
    Пользователь может оценить ассортимент по главной? — Да

Итого, из рассмотренных 10 сайтов только на 5-ти реализован полноценный вывод категорий на главной. Однако, как было сказано выше, размещение всего каталога товаров на главной странице помогает посетителю определить ассортимент сайта, но не гарантирует покупку. Поэтому пробуйте, тестируйте и делитесь результатами!

Подводим итог

Если применить стратегические выводы из этих 19 статистических данных по электронной коммерции, то они способны значительно повысить эффективность вашего онлайн-бизнеса.

Вот краткое резюме этих стратегических выводов:

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

Оптимизируйте удобство для покупателей — один из способов сделать это — создать магазин на Facebook.

Рекламируйте свои товары в Google Shopping, чтобы покупатели, ищущие сравнения цен, видели их.

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

Используйте силу социального доказательства для укрепления доверия и увеличения продаж.

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

Установите прочные отношения с клиентами и сделайте приоритетом практическое обслуживание клиентов.

Постоянно стремитесь повысить коэффициент конверсии вашего сайта.

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

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

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

Стремитесь создать бесшовный, персонализированный многоканальный опыт для клиентов.

Оптимизируйте свой сайт, чтобы быстро вызвать доверие у посетителей.

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

Обеспечьте отличный опыт работы с мобильными устройствами, чтобы повысить уровень удержания клиентов.

Измените размер изображений, чтобы повысить скорость загрузки сайта.

Определите четкий целевой рынок, на который следует ориентироваться.

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

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: