Электронная коммерция Sep 13, 2021

UX-дизайн. Советы и лучшие практики

Евгения Вишнёва

CEO

Автор

Юлия Цымбал

Бизнес-аналитик

Эксперт

Время на чтение: 15 минут

Content

  1. Основные компоненты UX
  2. Исследование UX
  3. Советы по UX
  4. Примеры веб-сайтов с лучшим UX
  5. Примеры лучших практик мобильного UX
  6. Заключение
Content

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

Но как спроектировать интернет-магазин, чтобы покупатели были рады что-то купить и обязательно вернулись? Наша команда Dinarys составила исчерпывающий список основных компонентов превосходного UX, а также подготовила несколько советов, которые помогут вам сделать ваш магазин более привлекательным для покупателей. Начнем с основных компонентов, необходимых для создания опыта взаимодействия как с мобильными приложениями, так и с веб-сайтами.

Основные компоненты UX

Essential E-commerce UX Components

Источник: qubstudio.com

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

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

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

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

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

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

effective user interface e-commerce design

Источник: lollypop.design

Домашняя страница

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

Homepage

Источник: coredna.com

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

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

Навигация

e-commerce navigation UX

Источник: dynamicyield.com

Как мы упоминали ранее, UX-навигация должна прежде всего быть последовательной, чтобы пользователи понимали:

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

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

Поиск и каталоги

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

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

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

designing search UX strategies for e-commerce success

Источник: dribbble.com

Фильтры

Бесполезные или неверно настроенные фильтры товаров могут навсегда увести посетителей из вашего магазина. Уделите особое значение размещению фильтров, чтобы сделать их более приятными и удобными.

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

Независимо от того, применяете ли вы горизонтальные UX-фильтры или более предсказуемую боковую панель, тип фильтра также играет важную роль. В зависимости от вашего товара фильтры могут быть:

Чтобы повысить удобство UX-дизайна фильтров, закрепите примененные фильтры вверху с возможностью дальнейшей настройки. Если ваши списки фильтров слишком обширны, чтобы вместить их все на странице, добавьте кнопку «просмотреть больше» и сделайте ее достаточно заметной.

Страница продукта

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

product page UX design

Источник: baymard.com

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

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

Регистрация и оформление заказа

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

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

payment options

Источник: factorypattern.co.uk

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

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

Доступность

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

Чтобы более подробно изучить, как сделать любой веб-сайт более доступным, перейдите по ссылке на сборник подробных рекомендаций, составленных Web Accessibility Initiative. Но пока позвольте нам предложить вам несколько фундаментальных советов:

  1. Увеличьте средний коэффициент контрастности цветовой палитры вашего магазина и текста на ступеньку выше, чтобы лучше адаптировать его к пользователям с нарушениями зрения. Рекомендуемое соотношение составляет 4,5:1 для текстов нормального размера. Начните с кнопок и ссылок с призывом к действию и сделайте их контрастирующими с цветом фона.

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

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

  4. Добавляйте субтитры и подписи к видео о товарах.

Accessibility

Источник: martech.org

Исследование UX

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

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

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

Оценочное исследование помогает оценить готовые варианты дизайна посредством тестирования. Исходя из целей и требований, этот процесс исследования пользовательского опыта состоит из A/B-тестирования, качественного и количественного исследования, партизанского исследования, тестирования удобства использования и различных опросов.

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

Советы по UX

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

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

UX E-commerce Tips

Источник: awwwards.com

Вот некоторые из тенденций, которых следует избегать:

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

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

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

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

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

В этом видео вы найдете больше практических советов о том, как улучшить свои навыки в UI/UX-дизайне.

Примеры веб-сайтов с лучшим UX

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

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

Best User Experience E-commerce Websites

Источник: build.com

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

UX best practices for e-commerce

Источник: solostove.com

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

Источник: homedepot.com

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

Hebe

Источник: hebeboutique.com

Примеры лучших практик мобильного UX

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

mobile e-commerce UX best practices

Источник: groovecommerce.com

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

Shutterfly

Источник: hubspot.com

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

Etsy

Источник: hubspot.com

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

Lush

Источник: groovecommerce.com

Заключение

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

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

Доверьте поиск решения профессионалам

Наши сертифицированные специалисты знают, как воплотить вашу идею в реальность.

Введите имя
Введите E-mail
Пожалуйста, введите корректный телефон
Сообщение слишком короткое

Ваше сообщение было успешно отправлено. Мы скоро свяжемся! Success icon