Что нужно знать для редизайна сайта электронной коммерции в 2019

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

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

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

Избегайте длинных видео на главной странице

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

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

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

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

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

Не заполняйте свою домашнюю страницу избыточным содержанием

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

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

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

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

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

Сделайте ваши фильтры легко доступными

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

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

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

Редизайн электронной коммерции - опции фильтра Мэйси
Сайт Macy приносит некоторые параметры фильтра на странице в виде кнопок. Burberry делает категории фильтров видимыми на странице.

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

Перепроектируйте свои списки для больших изображений

Большинство страниц списков электронной коммерции стараются показывать сразу несколько продуктов на экране. В результате продукт изображения имеют тенденцию быть довольно маленькими (именно поэтому они традиционно известны как миниатюрные изображения).

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

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

На Airbnb есть большие изображения, которые можно прокручивать (слева). У Zara (справа) есть полноэкранные изображения в своих списках.

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

Показать параметры продукта в виде кнопок

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

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

Редизайн электронной коммерции - варианты размера Nike
У Джона Льюиса (слева) цвета продукта в виде кнопок с визуальными индикаторами. Nike (справа) показывает все параметры размера и отключает размеры, которые недоступны.

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

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

Оставьте кнопки обмена

Facebook, Twitter, Pinterest, Instagram, LinkedIn, Snapchat. Ваши пользователи, вероятно, тусуются на одном или нескольких из этих социальные сети, Так стоит ли им давать кнопки «Поделиться» на страницах с информацией о вашем продукте?

Многие сайты электронной коммерции по-прежнему представляют эти маленькие значки в надежде, что это поможет людям продвигать свои товары в Интернете. К сожалению, они почти наверняка пустая трата времени.

Никто не щелкает их. На самом деле 0.2% людей делают, согласно одному исследованию, Кроме того, это может показаться фрагментом кода, но он содержит множество дополнительных вещей, которые замедляют скорость вашей страницы.

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

Интегрировать платежные кошельки

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

Редизайн электронной коммерции - интеграция Amazon с оплатой
Тамара Меллон (слева) может выбрать Apple Pay, PayPal и Amazon Pay в своей корзине и оформить заказ. Gucci предлагает возможность перейти на PayPal из уведомления «добавить в корзину».

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

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

В ходе пользовательских тестов, которые я проводил в потоках оформления заказов, я регулярно слышу комментарии типа «Я очень предпочитаю вариант использования PayPal» и «Я очень заботюсь о безопасности и буду платить только через PayPal». PayPal в настоящее время хорошо известен, но при решении, какой из них использовать, выбирайте наиболее популярные страны и устройства вашего сайта.

Разрешить пользователям собирать

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

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

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

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

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

Еще советы по электронной коммерции

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

Книга называется «Создание сайтов электронной коммерции», она доступно на Amazon в различных форматах, включая мягкую обложку и Kindle. Или вы можете получить цифровая версия PDF на моем сайте, который включает в себя все иллюстрации из печатной книги. Вы также можете получить 15% выкл цифровая версия в течение ограниченного времени с промо-кодом PLATFORMS.