Почему одни интернет-магазины продают, а другие нет? Разбираем UX/UI28 просмотров

Введение

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

Что такое пользовательский интерфейс (UI)?

Что такое UI дизайн? UI-дизайн (User Interface дизайн) или UI это процесс визуализации, который позволяет реализовать прототип сайта, приложения или другого цифрового продукта. В первую очередь, UI включает активную работу над графической составляющей интерфейса. Создаются анимации, иллюстрации, кнопки и другие элементы сайта, включая шрифты, цвета и формы.

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

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

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

Ключевые компоненты UI интернет-магазина

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

Навигационные элементы

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

Информационные компоненты

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

Элементы управления вводом

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

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

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

Влияние UI на продажи интернет-магазина

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

Привлечение посетителей

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

Ускорение трансформации посетителя в клиента

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

Адаптация под различные устройства

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

Снятие возражений

Правильный интерфейс интернет-магазина моментально снимает возражения среднестатистического посетителя. А ведь именно возражения и сомнения становятся главным врагом конверсии.

Повышение уровня доверия

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

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

Этапы разработки качественного UI для интернет-магазина

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

Разработка концепции

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

Создание мокапа

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

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

User Flow Diagram

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

Согласование структуры

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

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

Выбор и согласование стиля UI

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

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

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

Интерактивный прототип

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

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

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

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

UX-дизайн (User Experience, пользовательский опыт) — создание архитектуры сайта, который будет удобен для пользователя. Элементы расположены интуитивно понятно, пользователь совершает целевое действие за минимум времени и усилий.

Уникальный потребительский опыт (User Experience, UX) можно получить, если четко обозначить, зачем покупателю нужен именно этот продукт (тактики макро UX). Также пользователя подкупают приятные детали юзабилити и элементы интерфейса (микро UX). В большинстве своем деятели Ecommerce концентрируются на подходах макро UX — нюансах разработки проекта, выведения на рынок новых товаров и т. д. Подходы микро UX обеспечивают то, что входит в понятие удачный дизайн сайта — эмоциональную привязку к проекту с помощью фишек веб-дизайна. В последние годы они становятся все более популярными. Детальнее о разнице между микро и макро UX рассказали авторы книги «How to Design Experiences: Macro UX versus Micro UX Approach».

Что беспокоит владельцев интернет-магазинов

Если поговорить с руководством интернет-магазинов, где дела обстоят не так, как хотелось бы, обнаружится следующее:

1. Постоянные тревоги по поводу работоспособности веб-ресурса и отдельных его частей (например, «сломанная» козина сводит на нет все усилия по работе над сайтом). А вот умная корзина сама решает все вопросы, связанные с клиентскими заказами.
2. Низкая или даже нулевая конверсия: на сайте есть аудитория, но никто не доходит до стадии покупки или даже оставления своих контактных данных.
3. Высокая стоимость затрат в расчете на клиента, который единожды сделал покупку и больше не возвращался.
4. Несмотря на то что обслуживающий персонал знает, какой контент и какие функции выполняет на сайте, пользователи сообщают, что не могут найти нужную информацию и банально купить товар (не понимают, как найти, выбрать нужные параметры и даже необходимое количество товара).
5. Общение с потенциальными покупателями и их вывод на покупку занимает неадекватно много времени.

Зачем UX на сайте интернет-магазина

В общем можно выделить две больших причины.

Плохой UX – сигнал для пользователей покинуть сайт…

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

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

Да, есть пользователи, которые могут потратить 30-40 минут (!) только на процесс покупки. Но если прямые конкуренты интернет-магазина предлагают более удобные способы покупки, он выберет их, даже если у тех товары будут дороже.

Мы рассказали лишь об одном негативном аспекте. Есть более серьезные моменты:

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

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

… а хороший UX – причина хорошей конверсии и лояльности покупателей

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

UX – не просто «сделать хорошо пользователю». Здесь и всестороннее исследование, составление CJM (карты путешествий пользователя), юзабилити и сплит-тестирование. Да, это дорого, но многократно окупается в перспективе.

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

Что дает интернет-магазину хорошо проработанный UX

Подсказывает пользователю, куда он попал

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

Прежде всего нужно дать человеку информацию, которую он может и должен видеть конкретно на этой странице (на ее первом экране).

Хороший пример – главная страница «Ламоды». Сразу понятно, что это за интернет-магазин, каким сегментам ЦА адресованы его товары 

Значок сайта (favicon) должен быть уникальным, да и в принципе быть: представьте, что у пользователя открыто 10-20 вкладок в браузере. Как он быстро найдет ваш сайт? Правильно, по «фавиконке»!

Отдельно стоит сказать про всплывающие окна (pop-up). Если к вам приходит человек и за 10 секунд получает подряд два или три всплывающих окна, такой сайт хочется покинуть как можно быстрее. И неважно, говорите ли вы там о классных новинках или больших скидках. Здесь либо надо менять тайминг всплывающих окон, либо подумать, а нужны ли они вообще.

Помогает найти нужный товар

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

Традиционно поиск размещается в верхней части страницы, с правой стороны:

Пример верхнего правового размещения строки поиска

Такая рекомендация связана с исследованиями вопроса. У пользователей есть так называемый Z-образный паттерн сканирования информации:

Максимум внимания – верхней части страницы. Затем взгляд переходит от верхнего левого в правый верхний угол, после чего в нижний левый, а затем в правый нижний угол

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

«Лабиринт» – пример магазина с центрированным поиском

Организует предсказуемый и «умный» поиск

Факт расположения поиска на видном месте сегодня является не преимуществом, а стандартом по умолчанию.

Кроме того, он должен содержать поисковые подсказки:

Хороший пример контекстного поиска с Amazon

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

В поиске Ozon по запросу cars предлагаются машинки и мотоциклы. а также пластиковый конструктор

Дополнительным плюсом будет учет ошибок написания товаров в поиске и выдача искомых:

Интернет-магазин косметики в результате поиска выдал корректные написания товара

Инициирует реакцию сайта на действия пользователя

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

Виден не только сам факт заполненной корзины, но и то, что и в каком количестве в нее было добавлено только что

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

Избавляет от непонятных терминов и слов

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

Как только они встречают нечто неясное, это приводит минимум к смятению, а максимум – к гневу. И снова – уход с сайта, нулевая конверсия и прибыль…

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

Здесь есть категория «Гитары» и категория «Смычковые инструменты»: надо либо писать «Струнные инструменты», либо альты и скрипки тоже выводить в корень каталога

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

Дает возможность размещения на сайте собственных отзывов и просмотра других

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

Весьма лаконичные, но значимые отзывы о листах гипсокартона с сайта «Леруа Мерлен»

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

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

Правильно организует каталог товаров и систему фильтрации

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

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

Пользователь также должен иметь возможность сбросить все фильтры нажатием на одну кнопку

Встраивает интуитивно понятную процедуру оформления покупки

В течение всей процедуры оформления заказа необходимо:

• задавать пользователю вопросы по существу;
• при необходимости запроса дополнительных данных предельно упростить их ввод и не делать его обязательным (!);
• не дать введенным данным потеряться – неважно, при перезагрузке страницы или авторизации на сайте, но все введенное должно остаться на своих местах.

Процедура заказа товара в «Читай-город» состоит только из нужных этапов. При подтверждении заказа можно (но необязательно) ввести свои пожелания к заказу

Позволяет сравнивать похожие товары друг с другом

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

Два ноутбука с разницей в 8000 рублей и серьезным отличием только в объеме SSD

Делает возможным обратную связь с владельцем / представителями владельца сайта

Казалось бы, о контактных данных можно вообще не говорить, тем более в разрезе UX. Пользователь должен знать обо всех каналах связи с магазином, какие бы вопросы, жалобы, пожелания и просьбы у него ни возникли.

Обратите внимание: предлагаются сразу два способа обратной связи: чат с сотрудником магазина и обратный звонок

Очень хорошо снимает пользовательский возражения раздел FAQ (он же ЧаВо или «Вопросы и ответы»), где есть развернутые ответы об особенностях доставки и оплаты, возврате товара и пунктах обращения в случае проблем с покупкой или использованием товаров:

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

Создает ценный контент

Сами по себе грамотные и полновесные тексты, написанные для разделов «О нас», «Доставка», «Оплата» и «Возврат товаров» и закрывающие клиентские вопросы и возражения, являются мощнейшими инструментами формирования и развития пользовательского опыта.

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