Лидеры e-commerce в России не имеют широкоэкранного адаптива. Провели исследование и разобрались, почему

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

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

В 2022 году к нам, в Asanov Agency, обратилась компания Комус, чтобы получить экспертное мнение о целесообразности создания широкоэкранного адаптива.

Сайт Комуса существует с 1999 года, и почти каждый год меняет дизайн и сетку главной страницы. Но с 2008 года неизменным остаётся ширина основного контейнера десктопной версии — 985 px.

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

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

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

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

В первую очередь, мы обратились к статистике на сайте Statcounter, чтобы определить самые популярные разрешения десктопных экранов у пользователей российского сегмента интернета. Ожидаемо, на первом месте оказалось разрешение экранов с шириной 1920 px. В сентябре 2023 года на него приходилось 30,05% пользователей. Если смотреть на тенденцию по годам, этот показатель стабильно растёт. К примеру, в сентябре 2013 года доля пользователей рунета с экранами 1920 px была в районе 12%.

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

1366 × 768 px — 17,34%

1536 × 834 px — 7,59%

1280 × 1024 px — 5,07%

1600 × 900 px — 4,74 %

1440 × 900 px — 2,71%

Суммируя доли разрешений ноутбуков, получаем 37,44%, то есть на 7,39% больше, чем доля экранов 1920 px. Разница не настолько значительна, но всё же маленькие экраны по-прежнему более распространены среди пользователей рунета.

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

Получив представление о популярных разрешениях экранов, мы перешли к исследованию трендов адаптивности в российском e-commerce.

В качестве выборки для анализа мы взяли ТОП-100 сайтов из рейтинга интернет-магазинов и маркетплейсов по объёму онлайн-продаж за 2022 год, созданный аналитической компанией Data Insight. Мы проверили каждый из представленных проектов на наличие адаптивной версии под разрешения более 1600 px и более 1920 px.

Результаты проведенного анализа нас впечатлили: у 82% сайтов не оказалось адаптивных версий под 1600 px и более. В качестве основного десктопного разрешения в таких проектах используются размеры экранов ноутбуков, которые совпали со статистикой из сервиса Statcounter — это экраны от 1280 до 1600 px. Более того, адаптивных версий под большие дисплеи не оказалось ни у одного из магазинов первой десятки. Напомним, что в первую десятку входят маркетплейсы с самым большим показателем онлайн-продаж: Wildberries, Ozon, Яндекс.Маркет.

Полная таблица со списком магазинов и их разрешений доступна по ссылке.

Продолжая анализировать полученную статистику, мы выяснили, что адаптация под разрешения более 1600 px присутствует у 15% сайтов, а под разрешения более 1920 px – всего у 8%. Предполагаем, что разрешения близкие к 1600 px выбираются как более универсальные.

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

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

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

Больше пространства для контента

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

Улучшенная навигация

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

Лучшая читаемость текста

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

Удобство восприятия информации

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

Влияние на бренд

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

Экономический феномен избытка выбора

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

Увеличение времени загрузки страниц

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

Качество мультимедийного контента

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

Затраты на разработку

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

Затраты на поддержку

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

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

Первое и самое простое – анализ статистики сайта по проценту трафика, который идёт с устройств с широкоформатными экранами. Если процент достаточно мал, то тратить средства на создание адаптива нецелесообразно.

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

Качественные метрики

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

Количественные метрики

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

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

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