В блоге Института Бэймарда исследователь Джейми Оплсид опубликовано материал о потенциале больших экранов для сайтов электронной коммерции.
По его словам, большинство интернет-магазинов не пользуются преимуществами широких мониторов, через которые покупатели по-прежнему продолжают заказывать товары.
Революция адаптивного дизайна находится в самом разгаре, и хотя в электронной коммерции она используется не так активно, как в других отраслях, популярность метода быстро растёт. До сих пор адаптивный дизайн в первую очередь затрагивал пользователей настольных компьютеров и мобильных устройств.
Мало кто обратил внимание на возможности его использования для современных широкоформатных мониторов.
Представь:
- Общий 18% от Топ 50 Американские сайты электронной коммерции, которые мы тестировали, оптимизировали свой дизайн для больших мониторов (но 94% из них сделали это для мобильных устройств).
- Почти три четверти Продажи электронной коммерции по-прежнему осуществляются на персональных компьютерах, а не на мобильных устройствах ( 1 , 2 , 3 ).
- Около трети у этих пользователей экраны шире 1350 пикселей ( 1 , 2 , 3 ).
(Также существует разница между шириной экрана и шириной окна браузера — реальное количество пользователей, у которых эти параметры совпадают, будет меньше.
Рекомендуем вам отслеживать размеров браузера с использованием веб-статистики, чтобы получить более точное представление о том, насколько это важно для вашего сайта.
)
Возможно, такая оптимизация может стать вашим следующим шагом на пути к адаптивному дизайну электронной коммерции.
Обратите внимание на пробел на странице результатов поиска IKEA. Наше изучать Списки товаров на сайтах электронной коммерции показали, что более крупные изображения лучше подходят для эстетического восприятия товаров, что позволяет более точно оценить товары.
Размещение их на дополнительном экране — это лишь одна из многих идей адаптивного обновления, которые вы можете придумать для сайтов электронной коммерции.
Неиспользуемое пространство экрана напоминает огромные белые моря, а контент втиснут в небольшую область, оптимизированную для ноутбука.
Гораздо логичнее было бы свободно разместить контент на большом экране, оставив больше места между элементами.
Но адаптивное масштабирование может пойти дальше, используя дополнительное пространство больших мониторов для размещения более крупных изображений, вставки дополнительных столбцов продуктов, улучшения контекста страницы и быстрого доступа к соответствующим действиям (включая фильтрацию и сортировку, кнопку «Добавить в корзину»).
) и так далее).
В этой статье мы поговорим об адаптивном масштабировании на сайтах электронной коммерции для пользователей экранов большого формата.
Мы рассмотрим основной принцип адаптивного масштабирования, а также 11 идей для решения различных проблем юзабилити.
Ключевой принцип адаптивного масштабирования: тот же контент, разная упаковка.
Есть два альтернативных способа использования экранного пространства:
- Вставьте на страницу дополнительный контент, который будет доступен только на экранах с высоким разрешением.
- Представьте существующий контент по-другому (переставьте элементы, увеличьте их).
Конечно, есть исключения, но в целом, если контент недостаточно важен для показа на обычных экранах, он, вероятно, не так уж и важен для тех, кто смотрит его в высоком разрешении.
Не факт, что владелец большого экрана будет рад дополнительному контенту сомнительного качества.
Аналогично, пользователь с меньшим экраном вряд ли захочет отказаться от важной информации на сайте.
Так что покажите всем один и тот же контент, просто упакуйте его по-разному, оптимизируйте для экрана, на котором он отображается.
Не размещайте на странице дополнительный контент только потому, что на экране есть свободное место.
При этом не стоит выбрасывать важный контент, поскольку возможности экрана ограничены (в статье с результатами нашего тестирования этот принцип описал в деталях).
Единственная причина вставлять дополнительный контент — если этот контент имеет смысл показывать только на больших мониторах.
Бейте тревогу каждый раз, когда вам приходит в голову крамольная мысль о добавлении нового контента для экранов с высоким разрешением.
Иногда это действительно имеет смысл сделать.
Но если контент недостаточно важен для показа на обычных экранах, то размещать его куда-либо не стоит. И наоборот, значимый контент должен присутствовать в той или иной форме во всех версиях дизайна.
11 идей по адаптивному масштабированию на сайтах электронной коммерции
Итак, мы решили следовать общему принципу: избегать вставки нового контента и вместо этого оптимизировать существующий контент для разных размеров экрана.Давайте рассмотрим некоторые адаптируемые идеи масштабирования, подходящие для сайтов электронной коммерции.
Все последующие иллюстрации — это рисунки, сделанные поверх скриншотов с сайта.
На данный момент дизайн Wayfair вообще не адаптивный (он даже не подстраивает страницы под браузер), размер страниц остается неизменным независимо от того, как их просматривает пользователь.
Это отличный пример, иллюстрирующий оптимизацию различных типов страниц на сайтах электронной коммерции.
Реальное использование этих примеров, скорее всего, потребует от вас выровнять или изменить размеры других элементов страницы (таких как верхний и нижний колонтитулы), но для ясности эти элементы на наших иллюстрациях просто передвинуты.
Примеры следует воспринимать как вдохновение, и некоторые из них могут быть более подходящими, чем другие, в зависимости от ваших целей и характера вашего сайта.
1. Форма подписки 
Форма регистрации прикреплена вверху страницы.
На больших экранах форму подписки можно сделать менее навязчивой, закрепив ее в верхней части страницы.
В этом случае он не будет блокировать контент и в то же время будет хорошо виден при прокрутке страницы (так как накладывается сверху).
Пользователям, которые не заинтересованы в регистрации, будет проще игнорировать форму подписки, и им не придется предпринимать никаких действий, чтобы избавиться от нее.
Наш исследование юзабилити показало, что пользователи часто закрывают всплывающие окна (в том числе форму регистрации), даже не читая их.
Это особый вид «слепоты».
Думаю, они с большей вероятностью прочитают содержимое этой формы, если она будет размещена сбоку, тогда им не придется искать способ быстро от нее избавиться.
2. Быстрый доступ к верхнему и нижнему колонтитулу 
Самые популярные кнопки из шапки и подвала страницы вынесены в специальный блок.
Если места на экране много, можно разместить на главной странице специальный блок с наиболее популярными кнопками в шапке (создать аккаунт или заказ для зарегистрированных пользователей) и подвале (контакты службы поддержки и FAQ).
Разумеется, эти кнопки также должны быть доступны на своих прежних местах в верхнем и нижнем меню.
Это пример того, как существующий контент на странице по-разному отображается на разных экранах.
Это не новый контент, он уже присутствует на странице, но для владельцев больших экранов он представлен иначе, оптимизируя их пользовательский опыт. В данном конкретном случае лучше окрасить этот блок немного светлее, чтобы он воспринимался как второстепенный по отношению к остальному контенту на странице.
3. Слайды-карусели 
Слайды-карусели расположены в несколько столбцов.
Карусели на главной странице часто создают проблемы с удобством использования, поэтому их нужно использовать осторожно (см.
ниже).
8 требований к каруселям , которые мы получили в результате нашего исследования).
Конечно, на больших экранах карусель можно просто растянуть, увеличив размер слайдов.
Однако, если эти слайды квадратные или достаточно высокие, они могут вытеснить остальную часть содержимого страницы из поля зрения и, таким образом, уменьшить общий объем контента даже на большом экране.
Решением проблемы может быть прокрутка карусели так, чтобы одновременно отображались только два или три слайда.
Если общее количество слайдов соответствует количеству столбцов, вы можете заменить карусель статическим макетом из нескольких слайдов.
Если слайдов больше, чем столбцов, лучше прокрутить их или расположить в несколько строк.
4. Заполненная корзина 
Корзина появляется на экране, когда пользователь добавляет в нее один или два товара.
Большинство владельцев сайтов электронной коммерции надеются, что после того, как посетитель добавит товар в корзину, он предпримет одно из двух действий: либо продолжит просмотр товаров и добавит их в корзину, либо купит товары, уже находящиеся в корзине.
Для увеличения объема заказа хорошо, если посетитель продолжит просматривать товары, но он может никогда не оформить заказ, особенно если он не хватает времени перемещаться по сайту в поисках дополнительных товаров.
Размещая обычную корзину из верхнего меню на боковой панели, вы показываете посетителю общую картину (все, что он уже положил в свою корзину) и напоминаете ему, что эти замечательные товары лучше покупать перед уходом со страницы.
Это помогает ему контролировать свои действия и не забывать закрывать сделку.
Изучение навигации пользователей по домашней странице и категории продуктов, мы обнаружили, что люди часто открывают свою корзину снова и снова, просто чтобы увидеть, что они уже положили в нее.
Примером может служить повторное посещение модели камеры, которую вы только что выбрали, чтобы купить для нее футляр.
Если корзина всегда будет на экране, пользователь сможет видеть содержимое своей корзины при просмотре страниц сайта, и ему будет легче находить другие товары.
5. Дополнительные столбцы товаров 
На больших экранах товары можно размещать не только в основных столбцах, но и в дополнительных.
Один из самых очевидных способов использовать лишнее пространство больших экранов — перестроить список товаров так, чтобы они заняли дополнительные колонки.
Это позволяет значительно увеличить количество товаров, предлагаемых на экране.
В примере выше пользователь может просмотреть не 6, а 10 товаров.
Этот подход позволяет существенно оптимизировать просмотр каталога товаров на больших экранах, но использовать его нужно с некоторой осторожностью.
Если на экране отображается слишком много столбцов товаров, пользователю станет сложнее сканировать страницу глазами.
Он может просто утонуть в информации, и его глаза устанут бегать от одной строчки к другой (по этой же причине есть оптимальная длина текстовая строка).
Чтобы не перегружать пользователя информацией, не размещайте на экране более 5-8 столбцов (в зависимости от размера изображений и количества товаров в столбце).
6. Большие изображения продуктов 
Элементы списка продуктов масштабируются, чтобы обеспечить изображения хорошего разрешения и, таким образом, увеличить объем предоставляемой визуальной информации.
Еще один очевидный способ воспользоваться дополнительным пространством — масштабировать каждый элемент списка продуктов, который появляется на большом экране.
Если размер изображений увеличится, пользователь сможет рассмотреть каждый товар более детально.
Это создает ощутимые преимущества при продаже визуально воспринимаемых товаров, поскольку пользователю легче их идентифицировать и выбрать.
Однако вам следует быть осторожным, поскольку простое масштабирование изображений часто приводит к увеличению их высоты (при условии сохранения пропорций) и может привести к значительному уменьшению общего количества продуктов на экране.
На иллюстрации выше второй ряд товаров практически полностью исчез из поля зрения.
В этом случае нужно искать компромисс между уровнем детализации изображений и количеством доступных для обзора товаров.
7. Масштабирование и реорганизация списков продуктов 
Товары в списке масштабируются и переносятся в дополнительный столбец.
Объединив два предыдущих подхода — добавление дополнительных столбцов и увеличение размера каждого изображения — мы убиваем двух зайцев одним выстрелом.
По каждому товару стало больше визуальной информации, но и общая картина тоже хорошо видна, ведь список был реорганизован, включён дополнительный столбец, а его элементы теперь отображаются на максимальной высоте.
Этот метод позволяет показывать дополнительную визуальную информацию по каждому товару, не уменьшая при этом общее количество товаров, отображаемых на экране.
Благодаря дополнительным столбцам увеличивается количество товаров, которые может просмотреть пользователь.
Таким образом, мы достигли сразу двух целей: увеличили общее количество отображаемых товаров и улучшили разрешение каждого из них.
8. Липкие фильтры 
Фильтры можно разместить сбоку, «приклеив» их к краю экрана.
Еще один способ использования экранного пространства — размещение инструментов фильтрации и сортировки в поле зрения пользователя с помощью липкого элемента.
Это даст пользователю дополнительную информацию о товарах, которые он сейчас просматривает на своем экране, и поможет ему легко менять критерии их выбора.
Если некоторый контент на вашей странице дублируется, это снижает способность экрана отображать соответствующий контент. Поэтому всякий раз, когда вы закрепляете контент в поле зрения пользователя, важно делать это только в тех местах, где он не будет занимать слишком много места.
Например, не прикрепляйте контент к нижней или верхней части экрана без учета видимой высоты (которую можно найти с помощью медиа-запроса).
Однако после проведения соответствующих проверок такие прикрепленные фильтры могут занимать даже несколько столбцов товаров, и их лучше разделить на два-три столбца.
Если у вас много места в верхней части экрана, используйте его для фильтров.
горизонтальное меню , а если есть лишнее горизонтальное пространство, разместите их на боковой панели.
Аналогичным образом можно динамически выравнивать пределы усечения фильтрация результатов при изменении высоты браузера.
9. Недавно просмотренные товары 
Чтобы упростить навигацию по товарам, вы можете отображать товарные предложения или список недавно просмотренных товаров на боковой панели.
Если пользователь заходит на страницу товара и решает, что товар ему не подходит, он либо продолжит поиск, либо покинет сайт. Вы заинтересованы в том, чтобы пользователю было проще выбрать первый вариант. Если вы поставите предложения с альтернативные или дополнительные продукты на боковой панели (см.
иллюстрацию выше) вы сообщите пользователю, на какие страницы он может перейти, если просмотренный товар покажется ему неподходящим.
Также неплохой идеей будет опубликовать список недавно просмотренных товаров.
Такое упрощение навигации от одного продукта к другому помогает улучшить поиск пользователей.
Таким образом, вы можете продвигать весь Категории продукта , но лучше следить за пользователем, предлагая ему следующий шаг для продвижения дальше на каждой странице.
Однако иногда первая стратегия работает лучше, поскольку позволяет пользователю более последовательно просматривать предложения сайта, в то время как переходы туда и обратно менее предсказуемы.
Убедитесь, что предлагаемые вами маршруты поддерживаются определенный баланс между категориями и назначением товаров.
10. «Липкие» карточки товаров 
Карточки товаров и кнопку «В корзину» можно прикрепить в самый верх экрана, тогда пользователь будет видеть их при просмотре длинных страниц товаров.
Страницы с подробными сведениями о продукте могут быть очень длинными, поскольку они включают в себя изображения продуктов , их описания, характеристики, отзывы покупателей, предложения альтернативные или дополнительные продукты , список часто задаваемых вопросов и т. д. Наши исследования юзабилити показывают, что чем больше информации о продукте, тем лучше (если, конечно, это качественный контент: полезный, подробный и достоверный).
И тем не менее, зачастую пользователь заканчивает такой обзор очень далеко от ключевых характеристик товара (название, цена, модификации и кнопка «Купить»).
Чтобы самый важный контент товара всегда был под рукой, можно закрепить его на боковой панели, тогда пользователь будет видеть его постоянно, прокручивая страницу.
Прилагаемое резюме может представлять собой слегка измененную версию значка продукта в списке или выглядеть немного более эстетично.
Но можно просто предоставить пользователю самый важный контент: название товара, его цену и модификации и, конечно же, кнопку «В корзину».
Пусть он будет рядом, когда пользователь прочтет очередной отзыв от счастливого обладателя этого товара.
11. Данные заказа и контакты службы поддержки 
Если на экране достаточно места, вы можете разместить информацию о заказе и контактные данные службы поддержки на боковой панели.
Исследования показывают, что экраны часто оставляют много неиспользуемого горизонтального пространства.
Это происходит потому, что, во-первых, страницы сайта обычно фокусируются на чем-то одном, а во-вторых, формы с несколькими столбцами может вызвать проблемы с удобством использования.
На больших экранах это море белого пространства может быть занято сводной информацией о заказе и контактами службы поддержки.
В этом случае информация о заказе будет постоянно находиться в поле зрения пользователя, напоминая ему о тех товарах, которые он может приобрести буквально сию минуту.
Контакты техподдержки также можно переместить вверх с привычного места в футере.
Это сделает их более доступными для пользователя, если у него возникнут проблемы при просмотре страниц.
Если ваша служба поддержки уже занята, вы можете публиковать сообщения более выборочно, исходя из информации из карточки заказа или исходя из того, насколько далеко пользователь находится в поиске и не допустил ли он каких-либо ошибок.
Краткое содержание
Удивительно, как мало сайтов электронной коммерции оптимизируют свои страницы для больших экранов.Даже те 18% руководителей, которые имеют некоторый опыт оптимизации, на самом деле сделали лишь первые робкие шаги в этом направлении.
Между тем, учитывая большой сегмент пользователей с большими экранами, адаптивное масштабирование имеет огромный потенциал для развития.
При применении адаптивного масштабирования важно придерживаться ключевого принципа: «Один контент, разная упаковка».
Тот факт, что у пользователя больше места на экране, не означает, что он может быть засыпан некачественным контентом.
Изучите всевозможные способы представления существующего контента и создайте лучший пользовательский интерфейс для больших экранов.
Все 11 идей в этой статье основаны на принципе «Один контент, разная упаковка»: брать существующий контент, масштабировать или перемещать его, иногда совсем немного, иногда весьма значительно:
- Форма подписки.
- Быстрый доступ к верхнему и нижнему колонтитулу.
- Карусельные слайды.
- Заполненная корзина.
- Дополнительные столбцы товаров.
- Большие изображения продуктов.
- Масштабирование и реорганизация списков товаров.
- «Липкие» фильтры.
- Недавно Рассмотренные пункты.
- «Липкие» карточки товаров.
- Информация о заказе и контакты службы поддержки.
-
Яндекс.почта С Человеческим Лицом
19 Oct, 24 -
Hp Ipaq Hx4700: Современность За Пять Минут
19 Oct, 24 -
Last.fm Отложил Платную Подписку
19 Oct, 24 -
Mozilla Europe Говорила По-Русски
19 Oct, 24
