UX для веба: 5 обязательных элементов ecommerce

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

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

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

Главная страница

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

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

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

Что еще должно быть на главной странице?

• Тема сайта (основной товар).
• Направленность сайта (в нашем случае — интернет-магазин).
• Брендированные элементы, с которыми идентифицируется магазин.
• Доступ к поиску.
• Контактная информация.
• Ссылки на социальные сети.
• Отзывы.

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

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

Поиск

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

Несколько идей, как улучшить поиск:

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

Визуал

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

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

Качественные фото

Сделайте несколько фотографий ваших товаров в высоком разрешении, с разных ракурсов и с разным освещением.

Демонстрационное видео

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

Видео-обзоры и инструкции

Обзоры и видео-инструкции чрезвычайно популярны на YouTube. Согласно опросуAnimoto, 73% респондентов сделают покупку после просмотра видео, которое рассказывает о продукте.

Формат 360 градусов

А вы знали, что если люди потрогают ваш продукт, то скорее всего захотят его купить?

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

Пользовательский контент

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

Дополненная и виртуальная реальность

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

Платежи

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

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

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

Пользовательский опыт (UX)

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

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

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

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

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

Поэтому когда будете работать над мобильным UX, следуйте этим советам.

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

Продуманный и удобный сайт — отличный способ повысить продажи и способствовать росту бизнеса. Не злите ваши пользователей.