"Юзабилити-экспертиза": выпуск № 2

Уважемые коллеги! Прошли две недели с момента запуска на Oborot.ru нового проекта – "Юзабилити-экспертиза". Он привлек много внимания. После первого выпуска на наш почтовый ящик пришло больше 50 заявок от владельцев интернет-магазинов на открытый аудит юзабилити. Мы не могли принять сразу всех, и нам пришлось провести жеребьевку. По ее результатам следующий участником проекта стал интернет-магазин "Уютсфера"

В ближайшее время мы проведем еще один отбор, причем рассматривать будем как новые заявки, так и те, которые накопились с прошлого раза. Ваши заявки на аудит юзабилити присылайте по адресу: usability-audit@oborot.ru.

"Юзабилити-экспертиза" будет выходить постоянно 1 раз в 2 недели.

Cегодня в выпуске:

Регистрация: миссия невыполнима. – Каталог: унылая трата времени. – Британский флаг коварно наползает. – Карточка товара: помогут конкуренты.

Сайт: yutsfera.ru

Дежурный эксперт: Барченков Иван, директор по развитию, РА ООО "МедиаНация".

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

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

Мобильные номера обычно вызывают у потребителей недоверие и опаску. Чтобы не быть голословным, я даже провел мини-исследование – опросил более 50 интернет-пользователей. Разумеется выборка нерелевантна, но тендецию понять можно.

Я задал им вопрос: "Каким телефонным номерам вы больше доверяете?" И вот какие результаты я получил.

Поэтому рекомендую, как владельцам сайта "Уютсфера", так и всем, кто торгует в Интернете, завести прямые телефонные номера или номер 8 800.

Время работы интернет-магазина

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

Что касается закрытия магазина, тут все несколько сложнее. Многие люди работают до 18 или 19 часов вечера. Предположим, что на дорогу до дома им нужно потратить примерно час, потом поесть, расслабиться, – и вот они опять у монитора, ищут, что бы им купить. На часах уже 21.

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

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

Вход и регистрация: миссия невыполнима

Я сторонник того, что эти 2 поля вообще нужно объединить и выводить в виде одного всплывающего pop-up, а не в виде двух разных страниц, как мы видим на сайте "Уютсферы".

В качестве примера можно привести следующую форму:

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

Рассмотрим подробнее, что же сейчас видит пользователь, желающий зарегистрироваться на этом сайте?

Обычная для Рунета ситуация: продавец всеми силами старается не допустить регистрации пользователя на сайте.

Cоветую убрать или максимально упростить данную форму максимально. Для начала, избавьтесь от капчи. Поле "Логин" можно также удалить, вместо него многие пользователи уже привыкли использовать свой почтовый ящик. Поле "ФИО" назовите "Имя" или уберите вообще. А вот поле "Адрес" на странице регистрации точно лишнее.

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

Копаем глубже.

Как обстоят дела с автопроверкой корректного заполнения формы?

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

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

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

В данном случае, на поле e-mail нужно было поставить стандартные ограничения:

<input type="text" name="email" size="20″ onchange="var pattern=/[`А-я`,`s`]/; if(pattern.test(this.value))alert(`Допущена ошибка в поле e-mail`);">

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

В поле телефон следует разрешить ввод только чисел и, если очень хочется, символа + (плюс).

Все это в результате должно выглядеть примерно так:

Внутренний поиск

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

Я бы предложил перенести данное поле над блоком "Акции" – как это показано красным на рисунке.

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

 

• отсутствует умный поиск;

 

 

• некачественные результаты выдачи;

 

 

• нет товарной выдачи в поиске.

 

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

Вас бы это вдохновило на покупку? Лично меня – нет.

Блок "Акции"

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

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

"Подвал"

В "подвале" обычно много мусора, о котором мы забываем.

Что касается "Уютсферы", то я рекомендовал бы в подвале оставить строку с реквизитами и указать сроки существования магазина, например "2009-2013", а не просто 2012.

Каталог

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

Так пользователь сможет увидеть сразу все подкатегории, как это сделано здесь.

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

Сэкономленное место можно было бы отвести на сетку с товарами, где в стоке будут 3-4 товара одной категории, а в строках – разные категории.

Категории

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

Первая ошибка "Уютсферы", которая бросается в глаза, – то, как организованы подкатегории. Во-первых, они дублируются. Во-вторых, не у всех категорий есть мини-картинки.

Вторая важная недоработка, которая бросается в глаза – это отсутствие фильтров внутри категорий.

Допустим, я хочу увидеть только шелковое постельное белье, за 7 000 руб., на двуспальную евро-кровать.

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

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

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

Сравните два варианта товарной карточки: слева и справа.

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

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

Карточка модели

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

Давайте попробуем использовать их опыт.

Для начала посмотрим на карточку товара на сайте togas.ru, который тоже торгует постельным бельем.

Что же мы видим? За исключением недостатков верстки, (например, того, что британский флаг в верхнем правом углу коварно "наползает" на "Корзину"), здесь есть еще на что обратить внимание.

Во-первых, белый фон – неплохой выбор. Он не нервирует пользователей и даже может повысить уровень конверсии на сайте.

Во-вторых, немного удивляет то, что Togas выбрал стандартную маленькую кнопку "Share", а не нарисовал красивые и большие иконки правее от цены.

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

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

В-четвертых, Togas сделал две кнопки заказа: через корзину и через звонок. И это правильное решение

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

Вот только Togas решил вместо того, чтобы спросить у нас "Имя", узнать назвать наше… "Название". Ну что же, и у крупных магазинов бывают забавные недоработки.

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

Итого. Можно смело заимствовать следующие моменты:

 

• cоциальные кнопки Share, но только несколько;

 

 

• выбор размера на карточке товара;

 

 

• кнопка "Заказ в один клик".

 

А также добавляем больше фотографий и в лучшем качестве, чем у Togas.

Изучаем других конкурентов и находим еще одну интересную вкладку – отдельную вкладку с подробной информацией о товаре. Эту опцию можно тоже позаимствовать:

Итак, с тем, что можно добавить на карточку мы разобрались. Еще раз отмечу, что самый важный момент – качественные и разнообразные фотографии товара.

Ну а что же нам нужно убрать из карточки?

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

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

Корзина

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

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

Для начала следует удалить поле "Примечания к заказу". В моей практике были случаи, когда, только удалив это поле, получалось повысить конверсию на 6%.

Далее делаем только одно обязательное поле – "Телефон". После этого переименовываем поле "Ваше Имя, Фамилия" в "Вас зовут".

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

Собственно все. Хотя нет… Кнопку "Отправить" лучше переименуйте в "Заказать".

Вот теперь точно все.

До встречи через пару недель!

Об авторе:

Барченков Иван – директор по развитию в рекламном агентстве "МедиаНация", соискатель MBA.

Раньше работал в "Яндексе", менеджером по работе с ключевыми клиентами.В профессиональную компетенцию входят:

• формирование маркетинговой стратегии для интернет-проектов;
• оптимизация рекламных бюджетов в Интернете;
• веб-аналитика;
• юзабилити-анализ сайтов.

 

Читайте также: Что такое onboarding и как лучше подойти к его реализации.

*Facebook признан экстремистской организацией на территории РФ.