Привет!

Как улучшить UX интернет-магазина. И платить меньше, а продавать больше [digital note for ecommerce #62]

Валерия СластенниковаВалерия Сластенникова

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

Эван Уильямс, соучредитель Твиттера, однажды сказал: “UX-это все. Но он всегда был недооценен и в него недостаточно инвестировали”.

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

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

Что такое UX и почему нужно об этом думать?

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

Готова поспорить, при слове UX вы думаете о дизайне. Хотя за этим скрывается много больше. Например…

  • Быстро ли грузится сайт?
  • Простая ли там навигация?
  • Так же прост и удобен сайт на мобильных устройствах?
  • Контент прост, специфичен и понятен?
  • Легко ли расшифровать иконки?
  • Убраны ли лишние шаги?

И этот список можно еще долго продолжать. И дизайн всего лишь один из элементов.

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

Яркий слайд зарубежного эксперта (Karl Gilis из AGConsult)

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

UX включает то, что не входит в UI и графический дизайн. Он ориентирован на клиентов и информацию, призван помогать пользователям выполнить свои задачи. Цель всего остального просто красиво выглядеть.

UX строится на анализе и оценке. И, что самое главное, в центре всегда стоит покупатель. Фокус UI и графического дизайна на красоте страниц и бренда, фокус UX на лучшем понимании намерений пользователей и то, как помочь их осуществить.

4 рекомендации по UX интернет-магазинов, о которых всегда нужно помнить

1. Приоритет функционала

Вам знакомы такие дизайнерские тренды?

  • Параллакс скроллинг (Элементы на переднем плане прокручиваются быстрее, чем элементы на заднем).
  • Автоматические слайдеры.
  • Кнопки-призраки.
  • Видео фоны.

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

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

Дело не только в том, как выглядит сайт, но и в том, как он работает.

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

Взгляните на Google или Amazon. Их сайты не самые креативные в части дизайна. У них есть кое-что общее: функциональность и минимум отвлекающих факторов.

И в этом хороший опыт взаимодействия. Каждый элемент на вашем сайте должен помогать посетителю совершить целевое действие.

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

2. Клиентоориентированный контент всегда опережает дизайн

Как правильно?

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

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

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

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

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

Хороший пример страницы товара от Chubbies.

Обратите внимание на описание товара. В нем слышен “голос” покупателей. Вот как эксперт объясняет важность такого подхода и его перспективы в будущем:

“Знаю, многие не думают, что это часть пользовательского опыта. Но это его основа.

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

Многие организации начинают со своей точки зрения. Хотят показать характеристики, которые важны с их точки зрения.

Новость: речь идет не о вас. Клиентам до вас дела нет. Они заботятся только о себе.

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

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

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

3. Интуитивно понятная навигация

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

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

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

Что нужно помнить при дизайне навигации:

  • Используйте понятные заголовки. Не заставляйте пользователей думать.
  • Используйте привычные элементы в дизайне магазина. Пользователь будет искать корзину в правом верхнем углу, например.
  • Наличие подкатегорий это нормально.
  • Всегда добавляйте функцию внутреннего поиска для тех, кто знает, что ищет.
  • Если используете иконки, убедитесь, что они привычны и понятны.
  • Убедитесь, что на ссылки навигации легко нажимать с мобильных устройств. Очень часто они слишком малы.
  • Если у вас широкий выбор продуктов, нужно использовать мега меню. Сделайте кликабельный категории и подкатегории. Лендинги категорий будут хорошо работать для SEO.
  • Используйте хлебные крошки, пожалуйста.
  • Сохраняйте последовательность.

4. UX в мобильной электронной коммерции

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

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

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

Адаптивная тема не означает наличие UX мобильной версии. Этот вопрос остается открытым для многих компаний. 78% мобильных интернет-магазинов работают плохо.

Вот о чем нужно помнить:

  • Все должно быть естественно. В 40% случаев с мобильных устройств нельзя увеличить фото продукта при клике или двойном нажатии на него.
  • Выбирайте правильную клавиатуру. Не нужно показывать обычную клавиатуру, если знаете, что пользователь будет вводить цифры.
  • Будьте понятны, покажите нужные характеристики. 80% магазинов предлагают функцию “гостевого оформления”, без регистрации. И 88% делают эту функцию незаметной.
  • Отключите автозамену в форме заказа. Есть ли что-то более ужасное, чем трижды вводить свой адрес с iPhone?
  • 61% всех мобильных пользователей, “иногда” или “всегда” завершают заказ с десктопов. Убедитесь, что у вас есть возможность сохранить корзину.
  • Позвольте пользователям искать в рамках категории или подкатегории.
  • Экспериментируйте с электронными кошельками.
  • Сокращайте, сокращайте, сокращайте. Если вы способны сократить количество кликов, необходимых для выполнения целевого действия, то делайте это.
  • Особое внимание уделяйте кросс-браузерному и кросс-девайсному тестированию.
  • Скорость здесь важна как никогда. Мобильные пользователи очень отвлечены и торопливы. Убедитесь, что страницы быстро загружаются.
  • Позвольте клиентам просканировать свою карту, не заставляйте вводить данные вручную.
  • Позвольте пользователям сохранить личную информацию для дальнейших посещений.

Хороший пример:

Как распознать UX проблемы на вашем сайте

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

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

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

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

Что можно использовать?

  • Тепловые карты кликов и скроллинга. Добавьте ссылки там, где кликают пользователи. Если определенное место пользователи быстро прокручивают, возможно там что-то не так. Обратите внимание, как далеко прокручивают страницу и исходя из этого стройте иерархию.
  • Просмотры посещений. Посмотрите, как пользователи ведут себя у вас на странице. Что сбивает их с толку? Что их останавливает? Почему?
  • Пользовательское тестирование. Дайте группе людей определенные задания (найти часы стоимостью менее $89 и добавить его в корзину) и смотрите как они это делают, сопровождая свои действия вслух.
  • Тест 5 секунд. Покажите ваш сайт на короткое время, чтобы узнать, понятны ли основные ценности и предложения.

Как решить UX проблемы на сайте

Инструменты помогут определить проблемы, но решить их не смогут. Тут все зависит от вас!

  • Оцените приоритетность каждой проблемы по ожидаемому результату и легкости реализации.
  • Основывайтесь на здравом смысле. Как можно улучшить работу? Обратитесь к результатам исследований.

How to Improve Your Ecommerce Store's User Experience (and Pay Less to Sell More)