Ответная дизайн революция действительно на нас (если он уже не произошло!), И, хотя электронной коммерции веб-сайты не взял реагировать design совсем так агрессивно, как в других отраслях промышленности, это становится все более популярным.
До сих пор большинство из отзывчивого дизайна мышления вращалась вокруг охватывающий диапазон опытом с мобильного телефона на рабочем столе.Тем не менее, мало внимания было уделено возможностей для расширения этого диапазона за рамки стандартного рабочего стола, чтобы создать опыт, оптимизированный для современных крупномасштабного displays.Рассмотрим это:
- Только 18% от 50 ведущих американских электронной коммерции websites 1 что мы тестируем в начале этого года оптимизировать их конструкцию для больших мониторов (еще 94% из тех веб-сайтов имеютдизайн оптимизирован для мобильных устройств) .
- Около три quarters из продажи электронной коммерции все еще может случиться на ПК, не мобильные устройства (см here 2 , here 3 и here 4 ) .
- О одним third тех пользователей посещают на экранах шире, чем 1350 пикселей (см here 5 , here 6 и here 7 ).(Примечание:. Существует, конечно, различие между экраном и браузера ширины — фактическое число пользователей с помощью браузера этот широкий будет ниже Мы рекомендуем Вам след браузер sizes 8 в статистику веб для наиболее точную картину того, как значительная этот сегмент находится на вашем сайте)
На основе этих статистических данных, разработке в оптимизированный опыт для пользователей с большим screens должно казаться стоит усилий.На самом деле, проектирование для больших экранах может оказаться следующий рубеж дизайна реагировать электронной коммерции .
В этой статье мы будемисследовать, как дизайнеры электронной коммерции может использовать отзывчивый upscaling выработать с учетом опыта для пользователей с большими экранами.Мы рассмотрим один основной принцип, наряду с 11 идей для масштабировании различные части опыта электронной коммерции, чтобы справиться с различными проблемами юзабилити наблюдаемых во время наших электронной коммерции юзабилити исследований.Эта статья была первоначально published 9 по Baymard института .
10 Обратите внимание, все белого пространства, окружающего, а забиты страницы результатов поиска ИКЕА.Во время нашего электронная коммерция list | __29 12 Исследование, стало ясно, что в эстетически приводом вертикалей продукции, таких, как домашнего декора, пользователи нуждаются в больших миниатюр точно оценить продукты.Используя дополнительное пространство экрана для обеспечения, что является одним из многих “реагировать совершенствования» идей для сайтов электронной коммерции, чтобы рассмотреть .
Дополнительный экран недвижимости предоставляемая больших экранах, как правило, осталось unused в огромных морей белый, в то время как фактическое содержание страницы забиты в тугой дизайн оптимизированной, чтобы соответствовать экран ноутбука.На самом минимуме, содержание может быть дано немного больше передышку, с некоторой дополнительной белого пространства между элементами на крупногабаритных мониторов .
Еще “реагировать совершенствования» могут быть приняты гораздо дальше, чтобы обеспечить превосходной experience для пользователей на больших мониторах, используя дополнительное пространство, чтобы обеспечить большие изображения, дополнительные колонки продукт, лучше контекст странице и легкий доступ к соответствующим действиям сайт(фильтрация и сортировка, “Добавить в корзину” кнопки, и т.д.). .
Ключевой принцип ответного UPSCALING: же содержимым, различных упаковочных Link
Есть принципиально двух ways использовать дополнительное пространство: вставкадополнительный контент на странице (т.е. содержания, что доступно только в крупных резолюций), и присутствует существующих содержимое страницы по-другому (т.е. изменить элементы, менять их расположение, масштабы и т.д.). .
Вы заметите, что все примеры в этой статье показано, как существующие страница содержание может быть представлено differently (иногда резко так).Это потому, что вставки совершенно новый контент страницы, которая доступна только в крупных резолюций generally является не очень хорошая идея.Есть исключения, конечно, но в целом, если содержимое не достаточно важным, чтобы показать в “ | regular__50 зрения рабочего стола, то, скорее всего, не настолько важно, чтобы быть показано на экранах больших либо .
13 Большой экран не mean 15 , что пользователь хочет вдруг тесный макет, который трудно сканировать, и не меньший экран mean 16 , что пользователь никогда не будет просить любую информацию, что they’ видел на сайте раньше.Таким образом, показывают то же самое содержание, но “пакет” это по-другому, так что он оптимизирован для экрана оно отображается на .
Не важно содержание никогда не должны быть добавлены к странице только потому, что есть место для него на странице.Точно так же, важное содержание никогда не следует оставлять только потому, что экран недвижимости ограничено (см наши тестовые выводы в “ Как Ваш настольных и мобильных сайтов должны отличаться 17 “, который документирует этот принцип).Единственный раз, когда содержание новая страница должна быть вставлена в крупномасштабных решений, когда-то, что содержание имеет смысл только на больших дисплеев, но не на регулярной экранов .
Так что, как правило, в предупреждения bell следует позвонить, когда новое содержание страницы добавляется в крупномасштабных решений.Несколько раз он будет оправдан, но наиболее часто содержание либо будет слишком важны, чтобы показать на регулярных размеров экранов и, следовательно, должны быть исключены из крупных версий слишком или будетна самом деле important и, следовательно, должны быть включены на странице, независимо от размера экрана.Очевидно, что важно содержание, возможно, потребуется быть представлены совершенно по-разному в зависимости от доступного пространства, но она должна быть доступна в той или иной форме во всех версиях дизайна .
Идеи для Отзывчивый UPSCALING На сайт электронной коммерции Link
Соответствии с этим принципом избежать нового контента, и вместо представления существующий контент-разному, давайте посмотрим на некоторые из многих способов отзывчивым upscaling может работать на сайт электронной коммерции .
Все следующих примерах проиллюстрированы отводками drawings на скриншоты Wayfair.com __16 | | 18__5 .Теперь, рабочий стол дизайн Wayfair в настоящее время не отвечает на все (то есть страница не масштабировать и расположение не переставить в зависимости от размера браузера), ни “до”, ни “вниз” — ширина страницы остается фиксированной, независимо отвидовой пользователя.Это, следовательно, хороший случай для иллюстрации того, как различные типы страниц на сайт электронной коммерции может быть оптимизирована для пользователей с большими экранами .
В реальной реализации этих примерах, другие элементы страницы, скорее всего, перестроить и, возможно, масштаб, слишком (особенно элементы страницы, такие как верхний и нижний колонтитулы), но для целей этих основных иллюстраций, элементы просто смещается вокруг немного,Примеры должны рассматриваться как | inspiration__9, а некоторые, очевидно, будет более уместно для вас, чем другие, в зависимости от вертикали продукции Вашего сайта и целей .
Встраивание Зарегистрировать Наложение Link
Зарегистрировать накладки могут быть сделаны менее навязчивой на больших экранах по канав накладку и вместо постоянно размещения диалог наряду с другими «над-Fold” содержания.Это сделает Зарегистрировать диалог менее intrusive потому что она не будет блокировать всю страницу, но он все равно будет держать диалог весьма заметны, потому что он все равно будет показано сразу после загрузки страницы (потому что она расположена в верхней части) .
19 Теперь пользователи заинтересованы в Вступительный очевидно найти этот диалог легче ignore потому, что они не должны будут активно уволить его больше.Тем не менее, во время наших юзабилити исследований, большинство испытуемых просто закрыты традиционные диалоги наложения никогда не читая их содержание, часто ссылаясь на этих накладок как “всплывающие окна” (см “ Избегайте этих 5 типов E-Commerce Graphics 21 “).Это своего рода наложения слепоты.Те пользователи, может на самом деле быть более вероятно, чтобы прочитать диалог Зарегистрировать когда он помещается рядный выше развороте, а, потому, что, увидев элемент, они не будут тратить все свое внимание, пытаясь найти способ, чтобы убрать его .
Верхний и нижний колонтитулы Ярлыки Link
Самые популярные ссылки из заголовка (например, счета и ссылки для заказа зарегистрированны пользователи) и подвал (обслуживание клиентов и FAQ ссылки) может быть отображается в окне на главной странице, когда есть место для них.Очевидно, что ссылки должны все еще быть доступны в их первоначальной positions в меню верхний и нижний колонтитулы разделов.На больших экранах, эти ярлыки просто also быть доступны непосредственно на домашней странице .
22 Это хороший пример остаточного содержания доступна на странице, но отображается по-разному.Это не новое содержание, а содержание существующих будучи отображается differently, для оптимизации работы пользователей на больших экранах.В данном конкретном случае, цвет коробки ярлыки ссылка, вероятно, следует слегка выцветшие, чтобы казалось, вторичной по отношению к другим содержанием .
ВстраиваниеКарусель Слайды Link
Главная карусели чреваты юзабилити и должна быть реализована очень тщательно, чтобы работать на всех (см восемь карусель requirements 24 | __9 наблюдается в наших тестовых исследований).На больших экранов, карусель может, конечно, просто масштабы, что делает представленный слайд все, что намного больше.Тем не менее, если слайды квадратной или даже просто достаточно высокий, то масштабирование до карусели слайд может на самом деле в конечном итоге толкает остальные содержимому __10 данной страницы | вне viewport на больших мониторах — уменьшения обзор домашней страницы, несмотря на увеличениевидовой!Решение это превращается в карусель слайд в поле зрения нескольких столбцов, с двумя или тремя горки показывается сразу .
25 Если общее количество слайдов соответствует число колонок, затем проблематично интерактивный features карусели может быть даже спрятаны в пользу статического макета нескольких столбцов слайдов.Если есть больше, чем слайды столбцов, то они, конечно, еще нужно скользить функции вращения или представление сетки с рядами .
Встраивание Заполненные Корзина Link
Поставщики Большинство электронной коммерции надеяться на одно из двух действий, чтобы следовать, когда пользователь добавляет элемент в их корзину: Пользователь отправляется на поиски более пунктов, чтобы добавить к их корзину, или они покупают товар в корзину их.Продолжая просматривать на другие продукты, очевидно, отлично подходит для доходов, но это также означает, что remorse, скорее всего, установить в — особенно если пользователь имеет трудно time 27 навигациисайт в поисках дополнительных продуктов .
28 По встраивание регулярное падение вниз Корзина (доступный из заголовка страницы), продавец дает пользователю обзор пунктов уже в своей корзину — напомнив им о великих продуктов, которые они уже нашли (что, конечно,они должны определенно купить перед отъездом!).Это дает пользователю легкий access в процессе оформления заказа и таким образом помогает, чтобы закрыть продажи .
Кроме того, во время нашего исследования домашней страницы и category __22 | 30 навигация, пользователи часто наблюдается в | reopen__17 их корзину, чтобы просто взглянуть на имена ранее добавленных элементов.Например, они могли бы открыть телегу, чтобы увидеть название модели камеры они только что добавили, чтобы найти дело соответствие камеры.Постоянно отображения телегу будет легче для пользователей, чтобы найти соответствующие пункты, потому что это позволяет прямое сравнение между списком продукции в настоящее время просматриваемой и товаров в корзине .
Дополнительная Колонны продукта Link
Один из самых очевидных способов использования дополнительного экрана недвижимости в списках продукции на основе сетки, чтобы переставить products так, что они появляются в дополнительных столбцах.Это может значительно увеличить количество продуктов, видимых на экране.В приведенном выше примере, пользователь переходит от того, чтобы увидеть шесть продуктов в их видовом видеть десять .
31 Этот подход может значительно оптимизировать перечень продукцииview на больших экранах, но делать это с осторожностью.Если число столбцов продукции является чрезмерной, то сетка будет в конечном итоге стать more трудно сканировать, потому что пользователи будут тонуть в информации, и их глаза будут проблемы путешествия с одной линии на следующий (есть текст Причина имеет Оптимальное length 33 ) .
Таким образом, ограничить свои продукты от пяти до восьми columns (в зависимости от размера элементов списка и продукта по вертикали), чтобы пользователи заблудиться в море информации .