Оглавление
Электронная коммерция таит в себе массу сложностей, тонкостей и нюансов. Тем не менее, ее конечная цель проста и понятна, как таблица умножения. Интернет-магазин должен продавать. И делать это, как можно быстрее (читай — удобнее для покупателей). Стало быть, одной из первоочередных задач, стоящих перед владельцами e-commerce сайтов является сокращение количества действий пользователя — от захода на площадку до совершения покупки.
Достижение цели допускает и даже поощряет любые поощрения и ухищрения. Один из ключевых факторов, позволяющих повысить продажи интернет-магазина — это положительный пользовательский опыт — UX (User Experience). Для UX важна каждая мелочь. Даже цвет элементов управления формой регистрации, ее местоположение и прочие метрики. Короче, все, что может влиять на конверсию.
Негативный UX имеет скверное свойство отпугивать посетителей. Примерно в десяти случаях из десяти это приводит к падению конверсии и продаж. А далее — к прямым финансовым потерям. При этом пользователи становятся опытнее и требовательнее буквально с каждым днем. А значит, борцы за положительный UX должны демонстрировать все большую и большую изобретательность.
Что такое UX?
Ажиотаж вокруг UX, развернувшийся в последние пару лет, в первую очередь, связан с мобильными устройствами. Условно говоря — мы наблюдаем вторую молодость. Однако термин «UX проектирование» по-прежнему понятен не для всех. Точнее не все грамотно оценивают границы UX, путая его с UI и юзабилити.
UI — построение пользовательского интерфейса.
Юзабилити — практика построения удобного, “правильного” пользовательского интерфейса.
Конечно же, UX имеет прямое отношение к этим терминам. Но все же является отдельным и самостоятельным направлением.
UX изучает чувства, ощущения и впечатления от работы с сайтом. То есть мы видим привязку к психологическим аспектам поведения пользователей. Допустим, если сайт медленно загружается, его посетитель может запросто огорчиться. Огорчившись, он откажется от дальнейших посещений этой площадки. Перед вами классический пример негативного UX.
Еще один хрестоматийный пример касается неконтрастного контента. Если представленная на сайте информация чрезмерно сжата (не содержит разделителей и пустого пространства), пользователь испытывает вполне понятные трудности. И это, опять-таки, негативный UX. Продолжать примеры не будем. Мы говорим о достаточно широкой дисциплине. Но если вы овладеете ее основами, то сможете существенно повлиять на рост конверсии интернет-магазина.
UX проектирование для e-commerce сайтов
При проектировании сайтов для ведения электронной торговли следует учитывать огромное количество самых различных факторов. Их необходимо согласовывать с дизайнерами еще на этапе создания графических макетов. Самые важные моменты мы опишем в этой статье.
Цвета
Классическое правило: на сайте надо использовать цвета бренда и контрастные оттенки. Кроме того, не стоит забывать о людях с дефектами зрения, включая дальтоников. Допустим, красный и зеленый можно считать контрастными цветами, но для людей, страдающих дальтонизмом, они практически не различимы.
На рисунке показаны различия в восприятии цвета (от верхнего левого):
- C — нормальное зрение;
- P — протанопия (слепота к красному и зеленому оттенкам) — P;
- D — дейтеранопия (разновидность слепоты к красному и зеленому цветам) — D;
- T — тританопия (слепота к голубому и желтому цветам) — T.
Кнопки и прочие кликабельные элементы
Тут все очень просто: они обязаны быть очевидными. То есть пользователь должен понимать, что элемент кликабелен и осознавать, какую функцию он выполняет. Проще говоря — предвидеть, что произойдет, когда он совершит клик.
Все кликабельные элементы должны оформляться довольно большими отступами для исключения случайных нажатий на смежные элементы управления. Для мобильных устройств нужно учитывать размер кнопок. На десктопе даже маленький курсор позволяет управлять достаточно мелкими элементами. Ну а тачскрин без курсора просто обязывает учитывать физиологию человека. Нужно тщательно просчитывать пользовательский интерфейс под нажатие пальцев.
Наконец, следует обращать внимание на шрифты. Надписи на элементах управления должны читаться без каких-либо усилий.
Изображения
Убедитесь, что все изображения, размещенные на вашем сайте, с одной стороны имеют высокое качество, а с другой оптимизированы таким образом, чтобы физический размер файла не являлся фактором, замедляющим сайт. Если картинка долго грузится — это дистиллированный негативный UX, создающий проблемы с продажами.
Кроме того, фотографии должны четко и ясно отображать предоставляемые услуги или предлагаемые товары. Пользователь нуждается в максимально полном представлении о продукции, которую он хочет приобрести.
Современные технические возможности позволяют нам создавать медиаконтент на все случаи жизни: фотографии, рисованные картинки, видеоролики, 3D-модели, графическая визуализация и т.д. Ну и конечно же, не забудем сказать о необходимости оптимизации изображений для мобильных устройств.
Пустое пространство
Этот фактор зачастую игнорируется. Но, как показывает практика, пробелы на сайте очень даже нужны. Перегруженность интерфейса, как в цвете, так и в элементах управления утомляет пользователя. А это негативный UX.
Однако пустоты должны использоваться, что называется, к месту. Они нужны для визуального разделения блоков с разной целевой информацией. В противном случае все сливается в кашу. Рассмотрим пример на изображении.
Перед вами скриншот сайта фирмы Helbak, неоднократно отмеченного различными престижными премиями. На первый взгляд, его дизайн предельно прост. Складывается ощущение, что на разработку этого сайта было потрачено совсем немного времени.
Что мы видим? Минимум текстового контента. Основные навигационные элементы, равно как и логотип компании, располагаются в шапке. Прям-таки, памятник конвенции, основанной на обобщенном пользовательском опыте. Все, что должно находиться вверху — находится вверху. Все, что должно сразу же бросаться в глаза — бросается в глаза.
Упомянутые конвенции диктуют простые правила, которые складываются в результате обобщения пользовательского опыта. Помните, как Шерлок Холмс объяснял доктору Ватсону: человек, пишущий на заборе, делает это на уровне глаз? Причем, непроизвольно. Точно так же непроизвольно пользователь ищет, например, навигационное меню там, где он привык его видеть.
Поэтому, не следуя конвенциям, мы обеспечиваем своих клиентов увесистым негативным UX. Поэтому на приведенной картинке все хорошо, потому что — правильно.
И все же, обобщенный опыт — не истина в последней инстанции. В любом правиле можно найти исключения. Нарушая конвенции, вы должны учитывать негативный результат. То есть действовать на свой страх и риск. Но иногда нестандартные действия приводят к прорыву в плане повышения конверсии сайта. Это случается не так часто, поэтому принимая решение о нарушении правил игры, взвесьте все “за” и “против”.
Что стоит попробовать? Несколько примеров.
- Использовать контекстный контент, сопровождающий пользователя на пути к оплате товара. Имеется в виду любая дополнительная информация: 3D превью, видео, сравнительные характеристики. В общем, все, что поможет покупателю сделать свой выбор и приобрести товар.
- Использовать разные цвета для оформления различных целевых кнопок. Только не наугад. Обязательно проводите A/B тестирование изменений — возможно некоторые из них покажут плохой результат и будут отсечены на стадии проверки эффективности.
Чего не стоит делать категорически? Тоже несколько примеров.
- Перегружать сайт контентом. В таком случае пользователь утратит всякий интерес к площадке. Когда вместо краткой информации по теме он получает огромную и слабо структурированную простыню — это негативный UX. Также не стоит “прятать” информацию. Пользователь должен интуитивно понимать, где следует искать интересующие его сведения.
- Использовать длинные урлы. Чем короче url, тем проще с ним обращаться. Даже визуально он гораздо привлекательнее. И намного лучше запоминается.
- Размещать много текста вокруг кликабельных элементов. Элементы управления следует выделять пустым пространством. Иначе они просто сольются с контентом страницы.
Формы
Здесь мы берем на вооружение элементарный принцип: чем проще форма, чем меньше полей, тем больше вероятность, что пользователь ее заполнит. Форма должна емко отвечать на все возможные вопросы, давать подсказки по ограничениям ввода, если таковые имеются, информативно указывать на ошибки.
Опять же, нельзя забывать о пользователях мобильных устройств. Тут принцип простоты приобретает еще большее значение. Перечисляем основные требования.
- Не перегружайте форму, запрашивайте к заполнению только обязательные поля, без которых не сможет работать ваша бизнес-логика. Остальное можно заполнить либо позже, либо не использовать вовсе.
- Адаптируйте доступ к полям формы и размер полей под управление пальцами.
- Поля должны иметь подписи или, как альтернатива, содержать плейсхолдеры в качестве подписей.
Проведенное недавно исследование показало, что уменьшение количества полей приводит к увеличению конверсии на 160%. Пользователи не любят вводить данные — это аксиома. Лень по-прежнему остается одним из важнейших двигателей прогресса.
Резюме
Правило №1: при проектировании UX для e-commerce сайтов, в центре любого решения должен находиться пользователь. Звучит, как банальность, но ничего не поделаешь — все так и есть. В то же время, следует помнить, что вы не являетесь реальным пользователем, на котором должны обкатываться готовые решения. Только тестирование с привлечением сторонних посетителей (не забываем о репрезентативной выборке!) дает комплексное представление о пользовательском опыте ваших клиентов. Грамотное UX проектирование не приемлет иных подходов.
Правило №2: необходимо фокусировать внимание на той целевой группе, в которую входят реальные покупатели ваших товаров или пользователи ваших услуг. Выделение такой группы — довольно сложный и трудоемкий процесс (об этом стоит поговорить отдельно).
Правило №3: при создании сайта для десктопа всегда стоит учитывать адаптивный (или респонсивный) дизайн. В качестве альтернативы можно рассматривать отдельную мобильную версию.
Теперь вы знакомы с ключевыми моментами UX, на которые стоит обращать внимание при работе в сфере электронной коммерции. Опыт команды JetRuby Agency, насчитывающий не один десяток e-commerce проектов, позволяет реализовывать оптимальные решения в плане UX. Масса моментов уже проверена на практике и гарантирует закладку фундамента успешного онлайн-бизнеса еще на стадии разработки.
Обращайтесь. Будем рады сотрудничеству.
