Лого vc.ru

11 идей для адаптации ecommerce-сайта к большому экрану

11 идей для адаптации ecommerce-сайта к большому экрану

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

Поделиться

Революция адаптивного дизайна в самом разгаре, и хотя в ecommerce его применяют не так агрессивно, как в других отраслях, популярность метода стремительно растёт.

До сих пор адаптивный дизайн затрагивал в основном пользователей настольных компьютеров и мобильных устройств. Мало кто уделял внимание возможностям его применения для современных крупноформатных мониторов. Только представьте:

  1. Всего 18% из 50 лучших протестированных нами американских ecommerce-сайтов оптимизировали свой дизайн под большие мониторы (зато 94% из них сделали это для мобильных устройств).
  2. Почти три четверти продаж в ecommerce всё ещё совершаются на персональных компьютерах, а не на мобильных устройствах (1, 2, 3).
  3. Около трети этих пользователей имеют экраны шириной более 1350 пикселей (1, 2, 3). (Есть ещё разница между шириной экрана и шириной окна браузера — реальное число пользователей, у которых эти параметры совпадают, будет меньше. Мы рекомендуем вам отследить размеры браузеров с помощью веб-статистики, чтобы получить более точное представление о том, насколько это значимо для вашего сайта.)

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

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

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

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

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

Ключевой принцип адаптивного масштабирования: тот же контент, другая упаковка

Существует два альтернативных способа использования пространства экрана:
  1. Вставить на страницу дополнительный контент, который будет доступен только для экранов с высоким разрешением.
  2. Представить уже имеющийся контент по-другому (переставить элементы местами, увеличить их).
Все приведённые в статье примеры иллюстрируют вторую стратегию — мы считаем, что размещать на сайте контент, который будет доступен только для владельцев больших экранов, — вообще плохая идея. Конечно, бывают исключения, но в целом, если контент не настолько важен, чтобы показывать его на обычных экранах, скорее всего, он не слишком нужен и тем, кто смотрит его в высоком разрешении.

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

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

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

11 идей для адаптируемого масштабирования на ecommerce-сайтах

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

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

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

1. Форма подписки

Форма регистрации, прикреплённая в верхней части страницы.

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

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

2. Быстрый доступ к хедеру и футеру

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

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

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

3. Карусельные слайды

Карусельные слайды, расположенные в несколько колонок.

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

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

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

4. Заполненная корзина

Корзина появляется на экране, когда пользователь добавит в неё один или два товара

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

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

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

5. Дополнительные колонки продуктов

На больших экранах товары можно разместить не только в основных, но и в дополнительных колонках.

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

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

Чтобы не перегрузить пользователя информацией, не располагайте на экране больше, чем 5-8 колонок (в зависимости от размера изображений и количества товаров в колонке).

6. Более крупные изображения товаров

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

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

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

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

7. Масштабирование и перестановка списков товаров

Товары в списке масштабированы и переставлены в дополнительную колонку.

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

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

8. «Липкие» фильтры

Фильтры можно поместить сбоку, «прилепив» их к краю экрана.

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

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

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

9. Недавно просмотренные товары

Для упрощения навигации по товарам на боковой панели можно расположить товарные предложения или список недавно просмотренных товаров

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

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

10. «Липкие» карточки товаров

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

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

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

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

11. Данные по заказу и координаты службы поддержки

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

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

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

Резюме

Просто поразительно, как мало e-commerce сайтов оптимизируют свои страницы для больших экранов. Даже те 18% лидеров, которые имеют какой-то опыт в оптимизации, в действительности сделали лишь первые робкие шаги в этом направлении. Между тем, учитывая большой сегмент пользователей с большими экранами, адаптивное масштабирование имеет огромный потенциал для развития.

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

Все 11 идей, приведённые в этой статье, основываются на принципе «Тот же контент, другая упаковка»: берём существующий контент, масштабируем или перемещаем его, иногда совсем чуть-чуть, а временами довольно существенно:

  1. Форма подписки.
  2. Быстрый доступ к хедеру и футеру.
  3. Карусельные слайды.
  4. Заполненная корзина.
  5. Дополнительные колонки продуктов.
  6. Более крупные изображения товаров.
  7. Масштабирование и перестановка списков товаров.
  8. «Липкие» фильтры.
  9. Недавно просмотренные товары.
  10. «Липкие» карточки товаров.
  11. Данные по заказу и координаты службы поддержки.

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

6,7 пункты - да, остальное излишнее и не фокусирует на самой покупке, ИМХО.

+
Ну, может, еще корзина.
Пункты 1-3 особенно сомнительны, залипание фильтров вообще к широким экранам отношения не имеет (много ли найдется хороших магазинов, где фильтры уезжают вверх при скролле?)

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

0

Я бы сказал - тривиально, но это субъективно, а вот то, что воды слишком много - факт

0

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

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

Сейчас обсуждают
Τамара Ρодионова

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

Креативный директор «Афиши» сообщил о закрытии журнала
0
Artem Prokopenko

Хорошая история, только почему bankir, с доменом com должно быть banker) однако не понятно, в чем ценность для работников. Проф сообществ полно, но они микроскопические

Основатель «Банки.ру» Филипп Ильин-Адаев объявил о запуске социальной сети для банкиров — Bankir.com
0
Михаил Коренев

И что? А в офис к работодателю можно ходить, когда настроение хорошее?) и уходить, когда вдруг захотелось?

Штаб-квартира: Гамбургский офис сервиса для отзывов Yelp
0
Georgy Bukov

P.s. Не только военных, ведь там завязаны и химическая промышленность, машиностроение и т.д. И частенько компании с государством не разлей вода.

«Через 50 лет стран не будет — останутся только города»: основные тезисы лекции Кьелла Нордстрема о будущем
0
Рашид Галиулин

Ну натырились квартирами в 2014 на панике, с тех пор они упали в цене на 10%. А можно было купить акции и получить доходность выше 50% годовых в течение двух лет или в банке за два года примерно 30%. Ну выростит цена на квартиру в течение пару лет на 20%, доход от возможной аренды за два года 10%, в итоге возможный доход 31—32% в течение пару лет. Так пока пройдут эти два года на депозите с учетом сложных процентов свыше 45% и при этом не надо париться. А вдруг квартиросъемщики зальют соседей?

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