Юзабилити
Сейчас читаете
Прорабатываем юзабилити интернет-магазина: большой план для разработчиков
0
Рейтинг
Наш Рейтинг
Читатели
оценить тут
Актуальность
Презентабельность
Полезность
Наш Рейтинг
Читатели
6рейтингов
Вы уже оценивали

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

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

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

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

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

Товары и фильтрация

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

Заголовок страницы

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

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

Обзоры

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

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

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

Дополнительный инструмент – дайте пользователю возможность писать в заранее подготовленных полях, каждое из которых описывает какие-то определенные свойства товара наподобие «Достоинства», «Недостатки», «Качество сборки/изготовления», «Выводы» и так далее. Если у вас достаточно прозрачный и открытый подход к ведению бизнеса и вы предлагаете пользователю действительно качественные товары или услуги, то вряд ли вы будете стесняться некоторых нареканий, которые могут появляться в обзорах. Кроме того, по аналогии с Яндекс.Маркетом, вы можете комментировать обзоры, в которых содержится критика, создавая у новых посетителей впечатление, что вы заботитесь о своих клиентах и помогаете им решать возникающие проблемы. Такое отношение всегда вызывает уважение и располагает.

UX, дизайн, юзабилити, ecommerceПример отзыва на Яндекс.Маркет: представитель магазина откликается на претензии пользователя и предлагает конкретные шаги по решению проблемы.

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

UX, дизайн, юзабилити, ecommerce 4.-F-verified2

Cackle.me:  : интегрирующаяся на сайт система отзывов от верифицированных пользователей. Пользователь может оставлять подтвержденные социальные отзывы, авторизуясь с помощью sign-in кнопок. Также имеется возможность отправлять отзывы без социального подтверждения – в таком случае, пользователь должен указать свое имя и email.

UX, дизайн, юзабилити, ecommerceАналогичная система отзывов yotpo.com

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

Скидки и доступ к ним

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

UX, дизайн, юзабилити, ecommerce

Сайт The Childrens Place предлагает пользователю ввести скидочный код с купона прямо в корзине. Поле ввода находится на видном месте и клиент, обладающий кодом, сможет без труда им воспользоваться.

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

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

Увеличение изображений товаров и уменьшение описаний

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

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

UX, дизайн, юзабилити, ecommerceХороший баланс вербальной и визуальной информации на сайте XciteRC.

UX, дизайн, юзабилити, ecommerceПри необходимости, пользователь XciteRC может увеличивать изображения товара для детального просмотра.

Феномен негативного влияния изобилия на конверсию

Согласно ряду исследований, большой выбор товаров может парадоксальным образом негативно влиять на конверсию. Изобилие запутывает человека, который начинает мыслить примерно так: «Здесь так много всего, я не могу просто так купить что-то одно, ведь я недостаточно хорошо изучил ассортимент». А тем временем, огромный ассортимент крупных торговых площадок растет, и изучить какой-то его сегмент полностью – задача трудоемкая и непосильная для большинства пользователей.

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

В итоге, за первый день мимо столика с джемом прошли 260 посетителей магазина из которых 40% решились попробовать джем. На второй день из 242 потенциальных покупателей 60% продегустировали джем.

Далее самое интересное – в первый день, когда выбор был ограничен 6-ю сортами, покупку сделал 31 посетитель. Во второй день, с шикарным выбором самого разного джема, представленного 24-мя сортами, покупку совершили только 4 (!) человека. В итоге мы имеем сухие статистические данные: маленький, сильно ограниченный выбор обеспечил конверсию в 30%, а действительно большой и разнообразный ассортимент привел нас к конверсии в жалких 3%.

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

Поиск товаров и формы фильтрации

К сожалению, «продуманная и эффективная» фильтрация встречается на eCommerce сайтах достаточно редко. Пытаясь решить проблему выбора определенных позиций из общего (и внушительного по объему) множества, разработчики создают новую проблему такого же характера: огромные формы фильтрации с кучей опций и параметров точно так же демотивирую юзера и охлаждают его желание совершить покупку. К тому же, подобные формы фильтрации часто располагаются сбоку, на отдельной узкой панели. Такое решение не учитывает важнейшую особенности человеческой психики, а именно способность человека осознанно фокусироваться только на одном объекте. Эта особенность называется локусом. В каждый последующий момент локус у пользователя может быть только один. При этом пользовательское бессознательное может иметь ввиду и обрабатывать множество других объектов, но осознанно мы можем фокусироваться только на одном. Как это связано с формами фильтрации, расположенными на узкой боковой панели? Очень просто.

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

Учитывать эту данность можно несколькими способами:

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

UX, дизайн, юзабилити, ecommerceПростая горизонтальная форма фильтрации на Spyder

Еще один возможный подход, который можно встретить на некоторых сайтах интернет-магазинов – это разделение формы выбора товара и формы фильтрации. Суть этого метода заключается в разном подходе к разным группам пользователей. Те посетители, которые плохо представляют, что им нужно, имеют возможность воспользоваться формой выбора товара, которая представляет собой упрощенный и лаконичный вариант формы фильтрации, содержащий 2-8 категорий. Опытные же юзеры могут воспользоваться полноценной формой фильтрации, содержащей все необходимые параметры.

Что еще должны учитывать разработчики фильтров

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

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

UX, дизайн, юзабилити, ecommerce

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

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

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

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

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

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

UX, дизайн, юзабилити, ecommerceВ форме фильтрации на сайте MediaMarkt предусмотрен как сброс отдельных параметров при помощи [x], так и полное обновление формы при помощи «Очистить фильтр».

UX, дизайн, юзабилити, ecommerceНа Amazon.com сброс отдельных параметров фильтра продуман не очень хорошо – надпись «Clear» никак не выделяется среди других и не кажется кликабельной. Чтобы читатели смогли быстро найти эту кнопку на скриншоте, пришлось прибегнуть к дополнительному выделению.

Три нюанса, о которых мы говорили ранее и которые стоит вспомнить

В статье «Создание и оптимизация форм: мелочи, способные привить любовь с первого взгляда» мы упоминали такие базовые вещи, как

  1. расположение полей в одной колонке
  2. корректные и доступные сообщения об ошибках
  3. отказ от обязательной регистрации

Обсудим подробнее каждый из этих нюансов.

Одноколоночная форма

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

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

UX, дизайн, юзабилити, ecommerceСтарая форма заказа магазина Perfume.com. Расположение полей в две колонки вызывало путаницу среди пользователей – часть из них заполняла поле Email Address и все поля правой колонки, другие пытались заполнить все поля, попавшие в поле зрения, а остальные были уверены, что для быстрой покупки достаточно указать только свой email в соответствующем поле.

UX, дизайн, юзабилити, ecommerceПереработанная версия формы заказа Perfume.com – все поля расположены в одной колонке.

Допущенные при заполнении ошибки и их корректное обозначение  

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

UX, дизайн, юзабилити, ecommerce

UX, дизайн, юзабилити, ecommerceПримеры четкого и понятного обозначения допущенных ошибок

Отказ от регистрации

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

Лучше всего – сделать регистрацию добровольной. Позвольте пользователю беспрепятственно приобретать товар, не нагружая его бессмысленными регистрациями. К слову, зачастую посетитель сам желает зарегистрироваться, в случае если ему нравится ваш магазин, и он планирует в дальнейшем также совершать покупки. Главное – не навязывать ему регистрацию, а ненавязчиво предложить её в самом конце, после совершения покупки. Такое отношение в сочетании с продуманным процессом регистрации располагает и стимулирует пользователя продолжать взаимодействие с вами.

Формы оплаты и заказа

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

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

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

UX, дизайн, юзабилити, ecommerceПример нелинейного процесса заказа товара на сайте Walmart. С большим изображением можно ознакомиться по ссылке.

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

Делаем формы для заполнения предельно понятными

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

UX, дизайн, юзабилити, ecommerce

UX, дизайн, юзабилити, ecommerceОписания полей и подсказки на Aliexpress и Ebay

Визуальная безопасность полей, связанных с вводом платежных данных

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

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

UX, дизайн, юзабилити, ecommerceФорма оплаты на Aliexpress: полный набор сертификатов (VeriSign, Verified by Visa, итд), а также гарантия защиты покупателя Buyer Protection by AliExpress. Срок действия и другие поля для оплаты банковской картой представлены корректно и удобно

Используя в платежной форме тот же формат даты окончания срока действия карты, что и на самой карте, вы вполне можете добавить название месяца для дополнительной ясности, но располагаться оно должно после числового обозначения, которое является приоритетным. Также постарайтесь сделать так, чтобы при вводе в поле «месяц» одной цифры (например, 4), ноль перед цифрой появлялся автоматически (04).

Делаем подписи на кнопках информативными

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

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

 Будьте аккуратными, запрашивая у пользователей личную информацию

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

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

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

Автозаполнение и геопозиционирование

Отличная возможность облегчить участь пользователя – автоматизировать заполнение формы адреса доставки. Это достаточно простой прием, о котором мы также упоминали в статье про юзабилити мобильных сайтов, реализовывается путем вынесения поля «Индекс» в начало формы. При заполнении пользователем этого поля, сайт должен определить местоположение юзера и автоматически указать область и город доставки в следующих полях. А чтобы пользователь случайно не наделал ошибок, начав писать в заполненных автоматически полях, необходимо сделать две вещи: оповестить о наличии автоматического определения местоположения (в виде небольшой текстовой подсказки рядом с полем «Индекс») и перемещать текстовый курсор сразу после указания пользователем индекса на поле, следующее после полей «Область» и «Город».

UX, дизайн, юзабилити, ecommerce

Автоматическое определение местоположения по индексу

Самый выгодный способ доставки расположен первым

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

UX, дизайн, юзабилити, ecommerceСогласно исследованию ConversionXL, этот нехитрый прием позволил увеличить доход со способов доставки до 19,31%

Сохраняем всю историю покупок

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

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

UX, дизайн, юзабилити, ecommerce

 

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

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

Упомянутые выше исследователи из ConversionXL пришли к выводу, что банальное кэширование информации в формах ввода может увеличить показатели конверсии до 12,9%.

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

UX, дизайн, юзабилити, ecommerceОранжевый в качестве цвета, сигнализирующего об ошибке

Перечитываем сообщение перед отправкой: скролл или возможность расширить поле

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

UX, дизайн, юзабилити, ecommerceКомбинация скролла и расширяющегося поля

Медленный доступ в интернет и запрет на редактирование отправленной информации

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

UX, дизайн, юзабилити, ecommerce

Типичный прелоадер

Ранжирование категорий исходя из их популярности

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

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

UX, дизайн, юзабилити, ecommerceМагазин подарков Plero.ru выстраивает категории товаров исходя из их популярности. Также возможна сортировка всех имеющихся позиций по критерию популярности, что позволяет быстро увидеть самые интересные и востребованные товары

Корзина

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

Заметные визуальные изменения при добавлении товара в корзину

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

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

UX, дизайн, юзабилити, ecommerceХорошее визуальное подтверждение добавления товара в корзину на Plero.ru

 UX, дизайн, юзабилити, ecommerceДобавление товаров в корзину на Asos.com

Интерфейс корзины

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

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

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

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

UX, дизайн, юзабилити, ecommerceСвязанные рекомендации в корзине на сайте М.Видео

Быстрый заказ: как нужно и как не нужно реализовывать форму моментального заказа

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

UX, дизайн, юзабилити, ecommerce

Быстрая и простая форма заказа в один клик на сайте Plero.ru

UX, дизайн, юзабилити, ecommerce
Немного более громоздкая форма заказа на сайте MediaMarkt.ru – адрес электронной почты вполне можно было бы опустить

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

Контакты

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

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

    

Ваша реакция?
поделюсь
13%
интересно
53%
полезно
27%
не уверен
7%
скучно
0%
где автор?
0%
Об авторе
Аслан Патов
Аслан работает в Geometry Global (London, Dubai), где занимается исследованиями поведения потребителей в каналах продаж для таких клиентов как Philips, Heineken, Suntory, British American Tobacco, GlaxoSmithKlein, HSBC, National Bank of Abu Dhabi и др. Является создателем Rusability и автором сразу в нескольких разделах сайта.

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