Основы юзабилити сайтов для повышения конверсии

 

Wireframe

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

 

1.10 Проблемы интернет-магазинов

1. Нет объяснения того, почему нужно покупать именно в этом магазине(Или оно спрятано так далеко и глубоко, что до него точно никто не доберется).

Вот такой баннер украшает главную страницу bubbles.com.ua

 

А вот, что размещено на главной странице тверского магазина tverhit.ru

 

2. Нет быстрого оформления заказа

Как реализован быстрый заказ  в tverhit.ru

 

А вот вариант реализации от mvideo.ru — во всплывающем окне по ссылки «Заказ в один клик»

 

 

 

 

 

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

Такой оголтелый антипользовательский подход используется уже довольно редко, хотя найти еще можно например на екатеринбургском technopoint.ru

 

 

4. Не очевидный переход к оформлению заказа (нет кнопки «оформить» и не понятно что делать дальше)

Магазин getmart.ru. После клика на добавить в корзину. Появляется вот такое окно, которое пропадает через 2 секунды и возможность попадания в корзину значительно усложняется.

 

5. Наличие регистрации на сайте

90% интернет-магазинов содержат  в значимых, заметных местах ссылки  «Регистрация» и «авторизация».

Например, на том же Bolero.ru

 

 

6. Не требование email или телефона на первом шаге

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

 

А вот как это сделано  на sokol.ua

 

7. Нет указания на способы доставки и оплаты. Либо информация о стоимости и возможности доставки предоставляется слишком поздно.

 

Ozon определяет срок доставки на втором шаге оформления заказа — при выборе адреса.

 

В Labirint.ru на карточке товара тоже определяется местоположение пользователя и сообщается о возможности доставки в его регион.

 

8. Не видно списка товаров и стоимости на каждом шаге оформления заказа

Вот например, в одном  из ювелирных магазинов — после  перехода к оформлению заказа. Нас просят заполнить довольно серьезные данные, при этом мы не видимо что именно мы заказали и на какую сумму

А вот так это реализовано  в Евросети

 

9. Важные элементы находятся за пределами первого экрана

Например, при переходе в  раздел «газовые плиты» на сайте holodilnik.ru мы не получаем никаких инструментов для управления вниманием, взглядом, не видим никаких плит. Нам потребуется какое то время и прокрутка экрана вниз, чтобы понять организацию страницы.

 

 

А на сайте onlady.com.ua на карточке товара не видно кнопки купить, это прерывает эмоциональное действие — необходимостью прокручивать и искать кнопку.

 

А здесь за линией сгиба  находится вообще все... При переходе в категорию мужская обувь  в магазине roro-style мы никакой обуви не видим вообще... Только огромная шапка, а от обуви остался только маленький заголовок.

 

10. Слишком большой выбор. Отсутствие предложений и помощи в выборе

Старая история о том, что пользователь не любит выбирать, но любит большой выбор. В любом  списке товаров — нужно давать конкретные предложения. Помогать выбрать  быстрее. Самая простая модель (она может быть у вас другая) — «самый популярный», «самый дешевый», «мы рекомендуем»

 

Как выглядит список телевизоров  в магазине Onlinetraiding

 

А вот как, например, выглядят списки на украинском гипермаркете rozetka.com.ua. Где сразу же есть возможность сузить свой выбор.

 

 

11. Использование непонятных  пользователю обозначений

Товар под заказ, в наличии, транзит, в наличии у поставщика. Существенный процент аудитории не понимает о чем это.

 

12. Требование лишних действий от клиента

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

 

13. Лишние ограничения и запреты

Не нужно людям мешать и запрещать. Просто давайте им выбор.

А вот как выглядит 404 ошибка в новосибирском магазине egeriya. Вместо остановки и отказа в получении  информации — приятный сюрприз и  варианты по тому, что можно делать дальше.

 

14. Слишком большой выбор обратной связи

Чем больше выбора, тем больше шансов что пользователь выберет  «ничего». 4 телефона и непонятно чем они отличаются.

 

Можно же разделить телефоны по назначению, например, вот так.

 

 

 

15. Наличие отвлекающих элементов на карточке товара

На карточке товара пользователь должен быть сосредоточен на тяжом  для себя решении «купить —  не купить». При этом решение «не  купить» всегда принять значительно  проще. Мы же показываем ему новости, поиск, новинки, другие товары и не показываем способ доставки и оплаты.

На posuda.ru и акции, и спецпредложения  и новинки. Все, чтобы пользователь ушел посмотреть что-то еще.

 

16. Нет предложения о помощи при оформлении заказа

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

Вот как это просто решается в mvideo.

17. Равнозначные элементы, которые отвечают за разные действия

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

 

В Mvideo кнопки четко разделены  цветом. Ясно, что кнопка Оформить заказ  — является главное, а «перейти в  корзину» второстепенной.

 

А в Эльдорадо при добавлении в корзину визуально нет никакой  разницы между оформлением заказа и уходом в аксессуары с риском заказ не оформить.

 

18. Нарушение принципа ожидаемого результата

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

 

При оформлении заказа в citilink что означает здесь кнопка «Продолжить» ? Куда я перейду по ней? Неопределенность

 

19. Использование имиджевых элементов

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

 

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

 

 

20. Длинные формы

При оформлении заказа или  в других местах требуют заполнить  формы из 7-10 и больше пунктов. Очень  часто человека пугает необходимость  такого заполнения. Доказано множественными тестами, что заполнить 3 формы по 3 поля — проще, чем одну форму в 9

 

Например, такая вот длинная  форма заказа на top-shop.ru приводит к  большому проценту недооформленных  заказов.