Анализ юзабилити крупнейших интернет-магазинов, часть 2

Анализ юзабилити интернет-магазинов

В ходе исследования web-дизайна домашних страниц и навигации по категориям интернет-магазинов обнаружилось, что оптимальным решением для загрузки новых товаров в категориях является сочетание кнопки “Загрузить ещё” и бесконечной прокрутки в формате “ленивой загрузки”.

“Загрузить ещё” и “ленивая загрузка” для категорий

Это работает так: сначала происходит выгрузка 10-30 товаров, далее постепенно подгружаются по 10-30 товаров до достижения общего количества в 50-100 товаров. После появляется кнопка «Загрузить ещё». Нажатие на неё выгружает ещё 10-30 товаров и «ленивая загрузка» продолжается до достижения очередных 50-100 товаров.  Кнопка «Загрузить ещё» появляется снова. таким образом, порог в 50-100 товаров определяет, когда можно прервать просмотр, а «ленивая загрузка» просто оптимизирует работу, снижая время выгрузки и нагрузку на сервер.

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

Для реализации «ленивой загрузки» доступна масса кодов и плагинов, например Lazy Load от Микка Туупола для jQuery и LazyLoadXT. Как студия веб-дизайна, можем вам порекомендовать именно их.

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

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

В результате для определённых категорий (например, при применении фильтров) она будет работать аналогично кнопке “Показать всё”. Для более длинных списков кнопка “Загрузить ещё” упростит просмотр большого количества товаров (если пользователь пожелает продолжить просмотр), а также предоставит доступ к футеру и даст возможность отдохнуть и применить дополнительные фильтры, чтобы сократить список.

Студия веб-дизайна: у “ленивой загрузки” есть слабые стороны

У “ленивой загрузки” есть и свои недостатки. Например, такой способ выдачи товаров, особенно при бесконечной прокрутке, способствует постоянному увеличению длины страницы. Студия веб-дизайна, ведущая ваш проект, обязательно должна это учитывать. Когда пользователь перетаскивает бегунок вниз, то он увидит футер на какие-то 1-2 секунды, пока на странице будут подгружаться остальные товары. Новые позиции будут добавлены к списку, и футер снова уйдёт вниз. Таким образом, страница становится длиннее.

Тест показал, что это приводит к отрывочному восприятию списка. Эта проблема зачастую решается добавлением кнопки “Загрузить ещё”, так как у пользователя появляется возможность “отдохнуть” после одной-двух непрерывных выгрузок товаров. Если вы хотите усовершенствовать такой шаблон выгрузки, то придётся “подделать” высоту страницы. Для этого необходимо высоту отображения элемента списка умножить на количество рядов, загружаемых до появления очередной кнопки «Загрузить ещё» (даже если эти ряды еще не загрузились).

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

“Загрузить ещё” для результатов поиска

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

Кроме того, при поиске результаты сортируются по релевантности. То есть, 50-ый результат обычно намного более релевантен, чем 100-ый. Это означает, что пользователи не должны изучать все продукты вплоть до 100-го, и больше внимания следует уделить первым результатам. Таким образом, по умолчанию результаты поиска должны выгружаться по 25-75 товаров, а бесконечная прокрутка не должна применяться вовсе.

Интересно, что знаменитое A/B сплит-тестирование Etsy также показало плохие результаты применения бесконечной прокрутки для работы с результатами поиска.

Лучшим решением для выгрузки результатов поиска будут постраничная навигация или кнопка “Загрузить ещё”, так как они не поощряют беглый просмотр большого числа товаров, а, наоборот, побуждают пользователя сосредоточиться на изучении первого набора результатов. А при небольшом количестве результатов “ленивая загрузка” и вовсе не требуется (разве что для навигации внутри категории).

При падении релевантности результатов поиска кнопка “Загрузить ещё” (Show the next 48 Results) на сайте L.L.Bean даёт пользователю естественный перерыв (в отличие от бесконечной прокрутки), но всё ещё сохраняет возможность сравнить первый набор результатов со вторым (в отличие от постраничной навигации)

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

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

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

“Загрузить больше” для мобильных устройств

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

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

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

Бесконечная прокрутка побуждала пользователя просмотреть множество товаров (фактически, респонденты просмотрели вдвое больше товаров на тестируемых сайтах с бесконечной прокруткой, чем с пагинацией). Однако, как говорилось ранее, она может сделать футер недоступным. Исследование показало, что в результате важные ссылки в футере (такие как “Главная”, “FAQ”, “Доставка”, общая кросс-навигация и похожие элементы) оказались недоступными для пользователей, которые рассчитывали их там найти.

Поэтому наилучшим решением станет применение одной большой кнопки “Загрузить ещё” в конце списка товаров.

Кнопка “Загрузить ещё”, как на сайте Lowe, предлагает множество преимуществ бесконечной прокрутки, в тоже время, делает футер доступным

Ограничения для мобильных телефонов

• Неизбежно маленький экран

Экран мобильного телефона гораздо меньше экрана компьютера. Это значит, что списку товаров потребуется больше места, так как на одну длину экрана поместится всего 2 или 3 товара. Поэтому 50 позиций сделают список на экране мобильного телефона в разы длиннее, чем на компьютере. Другими словами, пользователю придётся прокручивать экран на мобильном телефоне во много раз больше, чем на компьютере. Разработчики и студия веб-дизайна не должны забывать об этом!

• Ограничения прокрутки
На сенсорных устройствах пользователь обычно прокручивает список, перетаскивая бегунок или нажимая пальцем на полосу прокрутки. В компьютере же есть несколько вариантов для прокрутки: колесико мыши, перетаскивание бегунка прокрутки и различные варианты ввода с клавиатуры (стрелки вверх и вниз, клавиши page up и page down keys, пробел и пр.).

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

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

• События JavaScript
То, как работают события JavaScript на большинстве сенсорных устройств, делает реализацию “ленивой загрузки” невозможной. События JavaScript включаются только тогда, когда пользователь прекращает прокрутку. Следовательно, товары не могут быть добавлены в ходе прокрутки: они появятся только тогда, когда прокрутка прекратится.

По этим причинам, для мобильных устройств наша студия веб-дизайна рекомендует загружать только 15-30 товаров (до появления кнопки “Загрузить ещё”). Затем просто потребуется загрузить следующий набор из 15-30 позиций (не “ленивая загрузка”).

Ключевая деталь: кнопка “Назад” поддерживается через history.pushState

За 7 лет юзабилити-тестов постоянно приходится наблюдать, как техническая реализация загрузки новой страницы не совпадает с ожиданиями пользователей интернет-магазинов, особенно при наличии динамически загружаемого контента, такого как оверлей, аккордеоны, фильтры и AJAX-подгружаемые товары.

Использование кнопки “Загрузить ещё” требует чёткого понимания работы кнопки “Назад”. Важно, чтобы при нажатии на неё на странице определенного товара из списка, пользователь возвращался в ту его точку , откуда он перешёл на страницу товара. Из всех интернет-магазинов, которые использовали кнопку “Загрузить ещё”, более 90% работали не так. Это приводило к тому, что пользователь скакал туда-сюда по списку товаров и нерационально использовал навигацию по сайту.

На сайте Skechers система переписывает URL каждый раз, когда пользователь использует кнопку “Загрузить ещё”. Следовательно, когда пользователь нажимает на кнопку возврата со страницы товара, он возвращается на правильное место в списке продуктов.
HTML5 History API позволяет настроить работу правильно. Функция history.pushState() даёт возможность переписывать URL без перезагрузки страницы, и таким образом, кнопка “Назад” будет функционировать корректно.

Браузер запомнит позицию бегунка на полосе прокрутки, но нужно убедиться в том, что когда пользователь будет возвращаться к списку товаров, все клики на кнопку “Загрузить ещё” загрузятся по умолчанию.

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

Кнопка “Загрузить ещё” не должна быть приоритетом

Несмотря на то, что споры вокруг преимуществ использования кнопки “Загрузить ещё”/бесконечной прокрутки/пагинации продолжаются годами, метод загрузки товаров не должен быть абсолютным приоритетом использования ресурсов сайта.

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

Нельзя сказать, что метод загрузки не важен. Он важен, и в ходе исследования стало понятно, что он может значительно изменить эффективность работы со списком товаров. Если сайту необходим ряд изменений и доработок, то изменение метода выгрузки товаров не должно являться абсолютным приоритетом. Таким образом, кнопка “Загрузить ещё” необходима тем сайтам, которые только совершенствуют пользовательский интерфейс используя собственные ресурсы или веб-студии.

Так что же всё-таки выбрать?

Подведём итог. Исследования показали, что кнопка “Загрузить ещё” решала проблемы юзабилити, наблюдаемые при пагинации (когда пользователи просматривали меньший список товаров, а сравнение товаров на разных страницах было сложным) и бесконечной прокрутке (когда пользователи бегло просматривали товары и, зачастую, не могли добраться до футера сайта).

Однако кнопка работает эффективно, только если правильно реализована работа кнопки “Назад” (например, посредством history.pushState()), и когда решение согласуется с контекстом применения. Мы, как студия веб-дизайна, выделили три ключевые контекстные настройки компонента:

• Для навигации по категориям используйте комбинацию кнопки “Загрузить ещё” и “ленивой загрузки”. Установите порог для кнопки “Загрузить ещё” на уровне 50-100 позиций.

• Для результатов поиска используйте кнопку “Загрузить ещё”, но установите порог 25-75 позиций. В идеале следует динамически настроить порог для каждого уникального списка результатов поиска на основании релевантности результатов.

• Для мобильного телефона используйте кнопку “Загрузить ещё”, но установите порог в 15-30 товаров, из-за сложности прокрутки и размеров экрана. К тому же из-за требований к работе JavaScript и заниженного порога выгрузки, следует выгружать все продукты одновременно, а не использовать “ленивую загрузку”.

Понравилась наша статья, поделитесь с друзьями!

Удачи в бизнесе, ваш mindrepublic.ru