Студия веб дизайна анализирует юзабилити крупнейших интернет магазинов.

Часть 2. Начало статьи тут.

 

 

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

 

Обратите внимание, что мы не случайно указали количество товаров для выгрузки в виде диапазона. Исследования показали, что идеальное количество товаров будет зависеть от контекста и отрасли вашего web сайта. Для более специфичной продукции (например, электроники, «железа», запчастей и расходников) берите меньшее значение. И наоборот, исследование показало, что пользователи могут справиться с большим числом предложений, когда список содержит более визуализированную продукцию (одежду, мебель, элементы декора и пр.)

 

(Для реализации «ленивой загрузки» доступна масса кодов и плагинов, например Lazy Load от Микка Туупола для jQuery и LazyLoadXT. Как студия веб дизайна можем вам порекомендовать именно их)
студия веб дизайна. Анализ юзабилити пример
Crutchfield применяет кнопку «Загрузить еще» в сочетании с «ленивой загрузкой». Сначала по умолчанию выгружаются 20 товаров, а когда пользователь прокручивает страницу до 10-го товара, сайт подгружает еще 20 товаров. После 40-го товара пользователь видит кнопку «Загрузить еще».

 

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

 

 

Заказать дизайн сайта прямо сейчас

 

 

Одной из слабых сторон «ленивой загрузки», и бесконечной прокрутки в частности, является то, что длина страницы постоянно увеличивается, это обязательно должна учитывать студия веб дизайна, ведущая ваш проект; если пользователь перетащит бегунок вниз страницы, он увидит футер лишь на 1-2 секунды, пока подгружаются остальные товары. Новые товары будут добавлены к списку, и футер снова уйдет вниз, а страницы станет длиннее. Тест показал, что это приводит к отрывочному восприятию списка. Эта проблема зачастую решается добавлением кнопки «Загрузить еще», так как у пользователя появляется перерыв после одной-двух непрерывных выгрузок товаров. Если вы хотите усовершенствовать такой шаблон выгрузки, вы можете «подделать» высоту страницы умножив высоту отображения элемента списка на количество рядов загружаемых до появления очередной кнопки «Загрузить еще» (даже если эти ряды еще не загрузились). Такая искусственная страница изначально даст полосе прокрутки достаточно места и, таким образом, более точно обозначит действительную высоту списка. Это также обеспечит пользователю удобный доступ к футеру. А «ленивая загрузка», как и раньше, продолжит загружать товары, только теперь они будут занимать пустое пространство вместо того, чтобы растягивать страницу.

 

 

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

 

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

 

Кроме того, при поиске результаты сортируются по релевантности. То есть, 50-ый результат обычно намного более релевантен, чем 100-ый. Это означает, что пользователи не должны изучать все продукты вплоть до 100-го, и больше внимания следует уделить первым результатам. Таким образом, по умолчанию результаты поиска должны выгружаться по 25-75 товаров, а бесконечная прокрутка не должна применяться вовсе. (Интересно, что знаменитое A/B сплит-тестирование Etsy также показало плохие результаты применения бесконечной прокрутки для работы с результатами поиска). Поэтому лучшим решением для выгрузки результатов поиска будут постраничная навигация или кнопка «Загрузить еще», так как они не поощряют беглый просмотр большого числа товаров, а, наоборот, побуждают пользователя сосредоточиться на изучении первого набора результатов. А при небольшом количестве результатов «ленивая загрузка» и вовсе необязательна (но если она применяется для навигации внутри категории, то может быть реализована и здесь).

 

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

 

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

 

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

 

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

 

06-mobile-toysrus-opt

 

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

 

студия веб дизайна. Бесконечный скролл на мобильном устройстве

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

 

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

 

студия веб дизайна. Бесконечный скролл на мобильном устройстве

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

studiya-veb-dizajna

 

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

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

 

10-skechers-2-opt

 

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

 

 

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

 

За последние 7 лет было задокументировано множество сложных пользовательских шаблонов в интернет-магазинах. Многие из них требуют значительно меньше технических ресурсов, чем внедрение кнопки «Загрузить еще».

 

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

 

 

 

«Загрузить еще» против бесконечной прокрутки против постраничной загрузки

 

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

 

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

 

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

 

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

 

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

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

 

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

Comments

comments

Text_2Бывают ли хорошие сайты по низкой цене
Text_2Создание сайта от планирования до запуска. Что скрывается за удобным сайтом?
Text_2Веб студия или фрилансер. Выбираем где заказать сайт.
Text_2Заказать лендинг Составляющие идеальной лендинг пейдж.