Как разработать эффективный UX-дизайн интернет‑магазина

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

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

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

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

Основные компоненты UX в области электронной коммерции

‍

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

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

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

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

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

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

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

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

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

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

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

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

3. Навигация

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

• На какой странице в данный момент находится пользователь и как ему вернуться на предыдущую или главную страницу
• Где располагается главное меню
• Где находится поле поиска — иконка должна быть заметной и размещаться в верхней части страницы
• Где найти фильтры (обычно слева)
• Куда нажать, чтобы получить более подробную информацию о продукте
• Как выбрать ту или иную версию продукта
• Как добавить продукт в избранное (wishlist) или купить сразу

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

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

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

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

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

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

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

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

5. Фильтры

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

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

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

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

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

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

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

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

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

На каждой продуктовой странице должна быть расположена заметная, достаточно контрастная кнопка “Добавить в корзину” с анимированным индикатором, который покажет пользователю, что выбранный продукт действительно оказался в ней.

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

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

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

В идеале процесс оформления заказа занимает 1-2 страницы. В мобильном приложении это количество, вероятно, удвоится из-за разницы в размерах экранов.

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

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

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

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

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

8. Доступность

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

Если вы хотите тщательно изучить, каким образом сделать любой веб-сайт доступным, обратитесь к Руководству по обеспечению доступности веб-контента (WCAG), созданному Консорциумом Всемирной паутины (W3C). А пока рассмотрим несколько фундаментальных правил:

1. Сделайте коэффициент контрастности контента и фона на вашем сайте немного выше, чтобы пользователям с нарушениями зрения было проще воспринимать информацию. Рекомендуемый коэффициент для текста среднего размера 4,5:1. Прежде всего позаботьтесь о том, чтобы CTA-кнопки и ссылки были достаточно контрастными.
2. Откажитесь от чрезмерно яркой графики и убедитесь, что ваш сайт отлично работает в разных браузерах, а также совместим с программами чтения с экрана.
3. Не стоит забывать и о людях, страдающих дальтонизмом: используйте цвета, расположенные друг напротив друга на цветовом круге, которые им будет проще различать. Такого же эффекта можно достигнуть с помощью разных текстур или форм.
4. Добавьте субтитры и подписи к видео о продуктах.

UX-исследования в области электронной коммерции

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

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

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

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

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

Советы по разработке эффективного UX интернет-магазина

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

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

Вот некоторые модные решения, от которых следует отказаться:

• Слайд-шоу или карусели на главной странице. Проведенное в Великобритании исследование Nielsen Norman Group показало, что в этом случае пользователи редко видят что-либо, кроме первого слайда.
• Автовоспроизведение видео и аудио. Клиентам может показаться, что таким образом вы лишаете их возможности контролировать ситуацию, ведь они не давали согласия на это. Кроме того, подобное решение негативно скажется на времени загрузки страницы.
• Многочисленные всплывающие окна, особенно полноэкранные. Они будут вызывать у пользователей еще больше раздражения, если кнопка закрытия будет слишком оригинальной или еле заметной.
• Бесконечные раскрывающиеся списки. Если такой список требует длительной прокрутки, лучше заменить его на поле поиска или поле ввода с функцией автозаполнения.
• Параллакс отвлекает пользователей от изучения продукта и может замедлить работу сайта. Кроме того, он зачастую вызывает раздражение, если реализован неправильно.
• Слишком много анимационных эффектов. Проблемы аналогичны указанным в предыдущем пункте: отвлекают внимание пользователей и требуют дополнительной оптимизации.

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

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

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

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

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

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

Сайты электронной коммерции с самым эффективным UX

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

1. Build with Ferguson

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

2. Solo Stove

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

3. Home Depot

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

4. Hebe

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

Лучшие практики мобильного UX в сфере электронной коммерции

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

1. Nixon Watches

Nixon Watches — калифорнийский бренд часов и аксессуаров. Сайт компании является отзывчивым, а мобильная версия выглядит так же элегантно и ярко, как и десктопная.

2. Shutterfly

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

3. Etsy

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

4. Lush

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

Заключение

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

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