Почему хороший UX-дизайн выгоден для e-commerce

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

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

UX и UI дизайн (аббревиатуры от «User Experience» и «User Interface» — два тесно связанных, но всё же разных аспекта проектирования цифровых продуктов, таких как веб-сайты и мобильные приложения.

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

UI-дизайн (User Interface Design) сосредоточен на визуальных и интерактивных элементах интерфейса. UI-дизайнер занимается разработкой визуального стиля: палитры, шрифтов, иконок. Он проектирует экраны и интерфейсы, чтобы они были красивыми и функциональными, а также отражали визуальный стиль компании.

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

Если говорить именно об электронной коммерции — например, разработке интернет-магазина одежды — здесь UX/UI-дизайн создаёт позитивный пользовательский опыт на сайте или приложении магазина. Работа дизайнера включает в себя анализ поведения пользователей, их потребностей и предпочтений для создания интерфейсов, которые легко понять и использовать. Цель UX-дизайна в e-commerce — сделать процесс покупки максимально удобным и быстрым, увеличить конверсию и повысить уровень удовлетворенности клиентов.

Когда мы говорим про UX-дизайн в контексте любого сайта, будь то личный кабинет, продуктовый сайт или e-commerce платформа, то в первую очередь подразумеваем удобство использования: взаимодействовать с этим сайтом должно быть удобно. Часто в одном контексте можно встретить термины «продуктовый дизайн» и «UX-дизайн». Это не синонимы, они соотносятся как целое и часть. Продуктовым дизайном мы называем создание конкретного продукта или решения, со всеми его «фишками», ключевыми особенностями и функционалом. При этом он не про красоту, а про функции продукта. UX/UI-дизайн — часть продуктового дизайна, которая направлена на взаимодействие пользователя с решением, его удобство и комфорт. том числе. В продукте очень важен UX и UI, они должны быть на высоте.

Виктория Денис

арт-директор в Uplab

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

Успешный UX/UI-дизайн в e-commerce может существенно улучшить показатели интернет-магазина и сделать его более конкурентоспособным на рынке, ведь на привлекательных и удобных сайтах хочется покупать снова и снова: пользователь запомнит хороший online shop и обязательно в него вернётся.

Чем лучше UX-дизайн, тем проще пользователю будет взаимодействовать с сайтом, ведь улучшение UX дизайна — это всегда улучшение взаимодействия с сайтом. А для e-commerce хороший UX значит, что пользователю будет легче совершать покупку. Здесь прямая зависимость: чем легче и понятнее будет добавление товара в корзину, тем быстрее пользователь закроет чек. Чем понятнее мы, разработчики, ответим на ключевые вопросы пользователя, тем проще ему будет совершить покупку.

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

Виктория Денис

арт-директор в Uplab

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

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

Хороший UX дизайн также повышает лояльность клиентов, создавая доверительные отношения с брендом и превращая разовых покупателей в постоянных. Здесь важны забота о пользователях: безопасность и персонализация.

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

Перед улучшением UX всегда проводится аудит текущего сайта и только потом — бенчмаркинг (сбор лучших практик) и поиск решений по улучшению.

В работе над проектированием либо улучшением UX/UI дизайна сайта электронной коммерции, помимо «общих пунктов» — навигации и главной страницы, — есть четыре ключевые точки. Они обусловлены взаимодействием пользователя с сайтом при совершении покупки.

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

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

3. Корзина. Проектируется максимально понятной и функциональной, позволяя пользователю легко видеть список выбранных товаров, их количество, цену и общую сумму. Мастхэв для современных сайтов — возможность быстрого поменять количество товаров или удалить, не выходя из корзины. Если на сайте сеть промокоды или бонусы, поле для их ввода должно быть заметным. Также важно предложить дополнительные товары или услуги для увеличения среднего чека: в некоторых магазинах реализована «умная корзина» на основе ИИ-алгоритмов рекомендаций.

4. Оформление заказов. Важно, чтобы оно было простым и понятным; если специфика бизнеса такова, что оформление заказа многосоставное, то лучше разделить его на понятные шаги. Пошаговка упрощает восприятие и заполнение. Если у продавца есть какие-то приоритетные опции при оформлении заказа, например, желательна оплата по СБП, то это нужно выделить в интерфейсе.

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

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

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

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

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

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

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

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

Макеты в графическом редакторе превращаются в страницы сайта, сначала в тестовой версии (видимой только разработчикам). Дизайнер, аналитик и разработка проверяют, что всё сделано правильно: в соответствии с макетом и с пожеланиями и требованиями клиента. Далее это всё тестируется внутри и отправляется клиенту; потом происходит внедрение конечного веб-продукта — сайт получает веб-адрес и становится видимым в интернете.

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

Об опыте Uplab в области UX/UI дизайна и наших уникальных разработках мы расскажем на примерах двух необычных проектов для e-commerce. Спикер — Пётр Мострюков, арт-директор.

АО «МТТ" — дочерняя компания ПАО «МТС», провайдер интеллектуальных решений для бизнеса, работающий на рынке телекоммуникаций и IT. Это крупный федеральный провайдер; у компании сотни тысяч корпоративных клиентов и миллионы частных. АО «МТТ» позиционирует себя как поставщика услуг в низком ценовом сегменте.

Мы согласовали с клиентом бизнес-цель, которая выглядела как и «увеличить количество заявок на покупку услуг компании». Для её достижения мы поставили себе такие задачи:

• упростить процесс получения услуг;
• улучшить поведенческие факторы и юзабилити;
• повысить лояльность клиентов и партнёров.

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

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

Петр Мострюков

арт-директор

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

Наш дизайн для интернет-магазина АО «МТТ» довольно минималистичен: карточки решений и продуктов не перенасыщены информацией. Для сравнения можно обратиться к каталогу какого-нибудь крупного маркетплейса. Вот что мы увидим:

Мы унифицировали все карточки услуг и решений, которые у МТТ довольно разнообразны. Так как мы концептуально превратили этот сайт в интернет-магазин услуг, то карточки выглядят как в интернет-магазине: их можно добавить в корзину для этого есть «плюс» (понятная кнопка действия), можно кликнуть на описание и узнать об услуге подробнее. Также мы разработали стилистику изображений для этих услуг, которые включают разные типы графики: 3D, 2D и текстовую.
Чтобы администраторы могли легко создавать новые карточки, мы сделали мастер-страницу со всеми возможными опциями. Понимая, из каких компонентов состоит услуга, администратор может создавать и публиковать новые карточки на сайте, и они не будут отличаться по стилю. Все услуги выглядят единообразно, а сайт — современно, чисто, красиво и структурно.

Благодаря единообразным и сдержанным карточкам интерфейс выглядит чистым. Скруглённые объемные изображения — продукты — поддерживают идею дружелюбия, а свободная расстановка элементов (три карточки в ряд) добавляют дизайну «воздуха».

Чуть подробнее про «воздух». На этом сайте мы разрядили элементы по высоте и по ширине. Карточки довольно вытянутые; в большинстве случаев мы не ставим компоненты очень плотно друг к другу. Между самими блоками существуют также комфортные отступы. Нам было важно выдержать золотую середину: не сделать элементы слишком большими, ведь тогда страницу придётся долго скролить. И вместе с тем не прижимать элементы друг к другу слишком близко. Пример — на скриншоте ниже.

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

Навигацию для сайта АО «МТТ» мы сделали классической: есть меню, которое находится в верхней части экрана. Это понятный для пользователей паттерн, так устроена навигация на большинстве сайтов в сети — пункты меню наверху и выпадающий список. Поэтому мы не стали лишать пользователя привычной ему схемы.

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

Корзина — ещё один важный элемент сайта. Мы разработали умную корзину, которая на основе добавленных товаров формирует предложение.

Умная корзина на сайте МТТ предлагает пользователю дополнительные услуги, которые он может подключить с выгодой для себя. Допустим, пользователь уже добавили в корзину две услуги: городской номер и номер «8−800…». При этом у компании есть готовые пакеты услуг, которые включают в себя эти два номера и ещё какую-то дополнительную услугу, и в комплекте получится выгоднее, чем подключать их по отдельности. Эти предложения и показываются в корзине, и пользователь может их выбрать, не уходя на другие страницы. Так пользователь получает выгоду, а компания увеличивает средний чек.

Виктория Денис

арт-директор в Uplab

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

АСТ — компания, которая предоставляет сельскохозяйственную технику, сервис для нее и запчасти.

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

Петр Мострюков

арт-директор

Как мы воплотили пожелания клиента по дизайну:

1. Динамическая верстка:

• параллакс — элементы в одном экране, которые скроллятся с разной скоростью;
• красивые динамические сдвиги в типографике, которые делают её необычной;
• высокий контраст между заголовками и основным текстом;
• фактоиды (блоки «цифа + текст»). Это для подобных сайтов необычно и также придаёт динамики.

На видео — пример параллакса на сайте.

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

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

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

1. UX-дизайн (User Experience Design) фокусируется на опыте пользователя, то есть его взаимодействии с продуктом. Он тесно связан с понятием юзабилити. UI-дизайн (User Interface Design) сосредоточен на визуальных и интерактивных элементах интерфейса. В разработке цифровых продуктов оба понятия тесно связаны, а потому часто объединяются в термин «UX/UI-дизайн».

2. Успешный UX/UI-дизайн в e-commerce может существенно улучшить показатели магазина и сделать его более конкурентоспособным, за счёт снижения показателя отказов и повышения числа повторных покупок. Хорошие дизайны делают хорошую конверсию и лучше продают.

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

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

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

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