Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год
Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Каждый из пунктов, обозначенный как “Проблема” является гипотезой, требующей практической проверки путем проведения тестирования на сайте, где обнаружена проблема. Важно понимать, что можно предлагать сколько угодно обоснованные изменения, подкреплять их психологическими теориями, исследованиями, экспериментами и даже практиками, которые сработали у кого-то еще, однако это не дает нам 100% гарантии того, что данные изменения сработают также эффективно и на нашем сайте. Не говоря уже о том, что они могут сработать негативно. Никто кроме Вашей аудитории не знает, как будет лучше для них.
Хотелось бы сказать пару слов о том, на что я опирался при общем анализе юзабилити. Интернет-сообщество становится умнее с каждым днём. Оно уже научилось и привыкло покупать через интернет. И с каждым годом в интернет выходит все больше платежеспособных пользователей, которые готовы к удалённым покупкам. Кроме того, Ваш целевой покупатель скорее всего уже приобретал что-либо в интернете и Ваша задача, как владельца интернет-магазина понять, что вы имеете дело уже не с новичком, а с опытным пользователем, для которого важно как можно быстрее удовлетворить свою потребность. А именно приобрести тот или иной товар либо услугу.
Отмечу также что поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем, обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.
Итак, поехали. Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год.
Проблема 1: Неинформативные кнопки входа и регистрации
Текущая главная страница:
Причина и Обоснование:
Даже если пользователь уже слышал о бренде “Юлмарт”, то, перейдя на сайт, он все равно не понимает, зачем регистрироваться. К тому же перед ним стоит совершенно другая задача - купить товар. Как кнопка “регистрация” поможет ему удовлетворить текущую потребность совершенно неясно.
Пусть даже на сайт пришел постоянный клиент, зачем ему входить в личный кабинет? Ради того, чтобы не вводить данные на этапе оформления заказа? Если ответ - да, осознает ли это пользователь?
Решение: отказаться от кнопки регистрации, оставить текст “Войти и увидеть сниженные цены”, объединить процесс регистрации с формой входа.
Новая главная страница:
Разумеется, можно заменить фразы : “Войти, чтобы получать специальные предложения”, “войти и получить выгодную цену”.
Проблема 2: усложненный процесс входа и регистрации
Примечание: механизм GoogleRecaptcha (сайт нарушает закон РФ) уже интегрирован.
В решении проблемы 1 я уже предложил объединить страницы входа и регистрации. Рассмотрим данную проблему более подробно.
Текущая страница регистрации:
Текущая страница входа:
Причина и Обоснование: пользователю приходится совершать лишние действия и вводить слишком много личных данных, что рассеивает внимание.Ввод имени в три поля может смутить пользователя. Кроме того, пользователь должен совершить дополнительный клик, чтобы выбрать, как именно он хочет регистрироваться: через телефон или email/логин. Также зачем разделять страницы входа и регистрации? Можно объединить страницы в одну - при вводе логина\эл. адреса\телефона определять есть ли пользователь в базе данных и если нет, то помогать ему зарегистрироваться, показывая подсказки и необходимые для регистрации поля.
Также сразу возникает вопрос о необходимости такой сущности как “Логин”. Пользователь не всегда в состоянии вспомнить эл. адрес, которым он пользовался на данном сайте, а здесь еще и логин.
Решение: объединение двух страниц в одну и ее реструктуризация (упрощение). Отказаться от логина. Объедение Эл. почта\Телефон в одно. Перемещение кнопок социальных сетей. Внедрение GoogleRecaptcha (сайт нарушает закон РФ) (на данный момент Юлмарт уже внедрили GoogleRecaptcha) (сайт нарушает закон РФ).
Как только пользователь попадает на страницу входа:
Так будет выглядеть страница, если после ввода номера телефона, пользователь был найден в базе данных:
А так -если телефон в базе данных найден не был - система предлагает пользователю зарегистрироваться:
Минус, который я заметил, это использование ввода случайных цифр и букв с картинки в качестве проверки на робота. Google (сайт нарушает закон РФ) придумал отличный инструмент, чтобы избавить интернет-сообщество от бот-регистрации и не пугать обычных пользователей сложным набором символов. Это GoogleRecaptcha (сайт нарушает закон РФ). Всего в один клик пользователь может подтвердить свою человечность.
Как видите, на рисунках нет кнопки “Войти”, хотя это решение спорное и, возможно, ее все же нужно здесь оставить. Вместо кнопки войти, я предлагаю совершать регистрацию пользователя или отправлять форму для входа в аккаунт по событию верификации GoogleRecaptcha (сайт нарушает закон РФ).
Быстрый вход через социальные сервисы и личные кабинеты операторов связи также были перенесены и отображены возле ввода поля Логин/Эл. почта/Телефон.
На мой взгляд пользователи отлично знакомы с логотипом своей любимой социальной сети и/или провайдера связи, поэтому нет смысл делать это дополнительным большим блоком, отвлекающим внимание от основного процесса входа/регистрации.
Проблема 3: пропадает верхнее меню
Причина и Обоснование: На некоторых страницах, таких, как Регистрация, Вход, Оформление Заказа и некоторых других пропадает верхнее меню (верхняя часть сайта, шапка). В целом это оправданно, так как позволяет пользователю сосредоточиться на совершении более важных действий, чем обзор меню. Однако, если пользователь по инерции поведет мышкой вверх, выискивая заветный каталог, можно вывести то самое меню по событию наведения курсора мыши, чтобы не рушить его надежд.
Решение: показывать полное меню при наведении курсора мыши, а также добавить подсказку - серый указатель возможности показать меню полностью.
Как вариант, можно даже добавить бледно-серый текст: “Наведите, чтобы показать меню”.
Хочу также отметить, что вероятно стоит задуматься о развертывании меню только по клику, но не при наведении.
Также есть два варианта развертывания меню. Первый - это смещение меню вниз вместе с содержимым:
Второй - это показывать меню как выпадающее поверх содержимого:
Какой именно вариант выбрал бы лично я - сказать сложно. Однако, склоняюсь к тому, что отображение меню поверх содержимого при наведении курсора мыши будет более удобным. В идеале нужно определять путём тестирования.
Проблема 4: неинформативный баннер на главной странице
Примечание: похоже, что баннер уже убрали, и он не отображается.
Баннеры часто меняются на сайте, однако бывает, что этот баннер - первое, что клиент видит, попадая на главную страницу
Причина и Обоснование: ни о чем не говорящий баннер, вставленный, похоже, для красоты.
Решение: добавление в баннер информации о преимуществах интернет-магазина.
Преимущества, перечисленные в баннере, взяты со страницы описания преимуществ магазина.
Проблема 5: неудобный фильтр выбора города
Примечание: проблема исправлена. Не совсем так, как было предложено мной, но в целом получилось достаточно юзабельно.
Причина и Обоснование:
При нажатии на кнопку алфавита остаются видны все города, а отфильтрованные выделяются черным цветом. При этом, если вы находитесь в Ярославле, то при нажатии на букву “Я”, Ярославля вы не увидите вовсе, если только не прокрутите страницу вниз.
Решение: скрывать лишние города.
Если дизайнеры сильно обеспокоены изящностью решения - можно выводить города, на выбранную букву, вверху, оставляя остальные города также видимыми:
То, как реализовали это специалисты Ulmart:
Проблема 6: усложненный процесс оформления заказа
Причина и Обоснование:
После добавления товара в корзину, пользователь переправляется на страницу “Товар добавлен в корзину”.
Чтобы продолжить оформление заказа, ему необходимо нажать на кнопку “Оформить заказ”. А рядом отображается кнопка “Перейти в корзину”. Т.е. у нас аж три страницы с процессом оформления заказа.
Решение: сделать одностраничный процесс оформления заказа. Упростить форму ввода данных.
А для того, чтобы подсказывать клиенту, какой именно шаг ему нужно выполнить далее, можно использовать вот такой эффект:
Т.е. как только пользователь вошел/зарегистрировался мы подсвечиваем способ получения заказа, затем способ оплаты и далее кнопку оформления.
Отмечу, что сейчас на странице “Товар добавлен в корзину”, Ulmart отображает блок “Приобретите обязательно с этим аккумулятором”. Понятно, что это сделано для увеличения среднего чека. Я бы предложил отобразить этот блок во всплывающем окне на новом одностраничном этапе оформления заказа.
Проблема 7: путающий релевантный поиск
Примечание: проблема решена.
Причина и Обоснование:
Предположим, я ищу стиральную машину. Я зашел на сайт и ввел в поиске “стиральная машина”. В самом верху поиска вместо перечня стиральных машин, мы видим перечень категорий, которые с нашим запросом не связаны вовсе. Правда под ними идут нужные нам товары.
Решение: учитывая текущий алгоритм поиска категорий, поменять местами категории и продукты.
Вообще, поиск именно категории и отображение ее в верхней части страницы может быть оправдан, но в этом случае поиск должен найти хотя бы категорию “Стиральные машины” и предложить ее пользователю.
Проблема 8: кнопка “купить” отправляет на страницу информирования о добавленном товаре
Пожалуй, данный пункт может вызвать больше споров, чем какой-либо другой. С одной стороны, клиент сразу же попадает на страницу, где четко видит, что его товар в корзине, и откуда он может перейти на страницу оформления заказа. Также он может увидеть здесь раздел с интересными предложениями (с этим товаром также покупают) и продолжить покупки, нажав соответствующую кнопку. Однако и здесь, у меня есть предложения по переработке, которые могут обеспечить более удобную и эффективную работу с сайтом.
Причина и Обоснование: у пользователя нет возможности выбора быстрого оформления заказа. У пользователя нет возможности продолжить покупки, не переходя на дополнительную страницу.
Решение: переименовать кнопку купить в “Купить быстро”, добавить кнопку “В корзину”. По нажатии на кнопку “В корзину”, оставлять пользователя на текущей странице, вместо текста “В корзину”, показывать текст “Оформить заказ” после того, как товар добавлен в корзину. По нажатии на кнопку “Купить быстро”, перенаправлять на форму “Оформления заказа”, либо показывать окно с просьбой ввода номера телефона, по которому можно перезвонить.
Проблема 9: не видно вертикальных фильтров
Причина: как я уже отмечал, для пользователя крайне важно быстро найти нужный товар. При переходе на страницу категории фильтры находятся в левом меню и не сразу видны для пользователя.
Решение: реализация горизонтальных фильтров рядом с сортировкой.
Проблема 10: баннер на странице со списком товаров
Причина: баннер на странице категории смещает список товаров ниже и отвлекает внимание пользователя.
Решение: убираем баннер с рекламой, что поднимет контент выше и пользователь сразу увидит то, что иcкал.
Заключение
Такие гиганты, как Юлмарт безусловно задают тон юзабилити других более мелких интернет-магазинов. За 2016 год специалисты Ulmart успели поработать над юзабилити сайта и сделали его более удобным. Однако, не могу не отметить, что сейчас на сайте начинает появляться огромное количество рекламы, которое отвлекает пользователя от совершения покупки.
Надеюсь, статья оказалась полезной. Всем прибыли и удачных продаж.
Об авторе
 |
Кощеев Леонид - эксперт в области электронной коммерции. Профессиональную деятельность начал в 2008 году. Сегодня является директором по развитию Cart-Power — компании, занимающей лидирующие позиции среди разработчиков на платформе CS-Cart. В 2015 году компания Cart-Power заняла первое место среди разработчиков интернет-магазинов с сегменте Одежда/Обувь. Является автором серии статей: Быстрый запуск интернет-магазина, 9 составляющих прибыльного интернет-магазина, Профессиональная разработка интернет-магазина, История успеха интернет-магазина программного обеспечения. |
