22 ошибки в юзабилити российских (и не только) интернет магазинов

Автор: Петр Пономарев, Eshopsales.ru Статья на CMSmagazine: http://www.cmsmagazine.ru/library/items/ecommerce/22-main-usability-errors/

22 ошибки в юзабилити интернет-магазинов

EshopSales.ru

http://www.cmsmagazine.ru/library/items/ecommerce/22-main-usability-errors/

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

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

А почему 22?

За полтора часа общения мы успели перечислить и обсудить 25, из которых 3 были явно дублирующими. Чтоназывается — что успели. Я перечислять могу долго, но нужно же с чего-то начать... Еще раз повторю: задачей той статьи не является структурировать что-либо или дать какие то основополагающие базовые вещи — это росто вытащенные на поверхность типовые ошибки, те, что пришли в голову, и те, что мне лично заметнее всего. Говорить о юзабилити всерьез будем в других статьях.

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

http://www.cmsmagazine.ru/library/items/ecommerce/22-main-usability-errors/ EshopSales.ru


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

Или оно спрятано так далеко и глубоко, что до него точно никто не доберется. Такие аргументы можно оформить в виде блока и транслировать на всех страницах. Другая проблема, что для многих не понятно что можно в этом блоке писать. Но как говорится — это уже совсем другая история.

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

И что на принятие решения о том остаться на сайте или нет — уходит 2 секунды.

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



Пример 1.

http://bubbles.com.ua/




Пример 2.

http://tverhit.ru/


http://tverhit.ru/


Пример 3. За счет размещение этого теста на Цифротерре, количество отказов главной страницы снизилось в два раза.

http://www.cifrocity.ru/


http://www.cifrocity.ru/


Пример 4.

http://shoptime.ru/les.com.ua/


http://shoptime.ru/



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

Либо это «быстрое оформление» требует заполнения больше 2-х полей. Среди

Ваших покупателей скорее всего существует категория людей, которым нужно все

получить быстро. Они не хотят тратить свое время на заполнение форм. Не стоит

их игнорировать. Дайте им возможность альтернативного способа заказа. Этот

способ должен быть максимально простым. Введите номер телефона и удобное

время звонка и мы Вам перезвоним. У меня в практике 3 кейса, когда введение

этой простой (и вроде бы бесполезной) формы на карточке товара увеличивало

заказы более чем на 15%.



Пример 1.

http://tverhit.ru/


http://tverhit.ru/


Пример 2.

http://www.mvideo.ru/




3. Требование регистрации при оформлении заказа

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

самых больших дырок, куда уходят заказы. При том, что вопрос регистрации в

юзабилити магазинов решен уже давно и бесповоротно. Слово «регистрация» не

нужно. Если у человека есть пароль — он его вводит, если нет — то регистрация

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

пользователя. Обратите внимание! Я говорю именно о требовании регистрации

— это когда ,вам сообщают что заказ невозможно оформить, если Вы не

зарегистрированы и предлагают регистрироваться.



Пример 1.

http://ekaterinburg.technopoint.ru/


http://ekaterinburg.technopoint.ru/


Пример 2.

http://www.bolero.ru/




Пример 3.

http://shoptime.ru/


http://shoptime.ru/


Пример 4.

http://www.hit.kz/


http://www.hit.kz/


Пример 5. Вместо двух форм — одна, которую заполнить «на автопилоте» значительно проще.

http://www.tehnosila.ru/




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

Добавили товар в корзину, а что делать дальше? Нажать на кнопку еще раз? Где то там

наверху есть блок «корзина» с красноречивой надписью «Корзина» и ссылкой. По идеи,

умные должны догадаться, что ее нужно найти глазами, нажать на ссылку «Корзина» и там

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

такие... Вполне очевидно, что нужна какая то кнопка «оформить заказ» — но ее почему то

нету.

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

двумя кнопками «перейти к оформлению заказа» «вернуться к покупкам». Либо сделайте,

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

корзине есть продукты и становится яркой и заметной. Этот совет реально повысил

продажи во многих магазинах.



Пример 1.





Пример 2.

http://www.getmart.ru/




Пример 3.



Пример 4.





Пример 5. Все просто и очевидно.

http://www.coolairsport.ru/


http://www.coolairsport.ru/


Пример 6. Cсылка на оформление заказа на кнопке корзины





Пример 7.

http://rozetka.com.ua


http://rozetka.com.ua/


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

90% интернет-магазинов содержат в значимых, заметных местах ссылки

«Регистрация» и «авторизация». Зачем? Что это значит? Зачем мне

регистрироваться? А если я не дай бог уже зарегистрирован — зачем мне

копаться в почте в поисках пароля? Ради чего? Не проще написать — введите

свой логин и пароль чтобы увидеть Ваши специальные цены? А регистрация в

современном магазине не нужна. Ее полностью заменяют оформление заказа и

подписка на рассылку.



Пример 1.





Пример 2.

http://www.getsmart.com/


http://www.getsmart.com/


Пример 3. Объясните пользователю зачем ему нужна регистрация

http://www.bubbles.com.ua/




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

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

Получая контактную информацию на первом шаге, мы увеличиваем свои шансы по закрытию заказа. Если человек прервет оформление — мы можем с ним связаться и даже настроить автопилотом закрытие сделок, Недавно, один из клиентов написал мне, что внедрение «сглатывания» email на первом шаге, описанное в статье про оформление заказа — увеличило реальные заказы на 6%.

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

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



Пример 1.

http://www.mobilluck.com.ua/


http://www.mobilluck.com.ua/


Пример 2. Такие формы заполняются «на лету» и не требуют обдумывания

http://www.sokol.ua/


http://www.sokol.ua/


Пример 3. И даже такая форма работает значительно хуже.



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

Необходимо, чтобы пользователь как можно раньше получал информацию о

стоимости доставки в свой регион, а также о способах оплаты. Не заставляйте

пользователя искать и прикидывать сколько будет стоить доставка в Новгород

или Самару. Пусть это не станет сюрпризом. Можно определить регион

пользователя сразу, по Geo IP и указать оптимальный для него способ доставки и

оплаты. Например «Доставка в Нижний Новгород 350 рублей, 7-10 дней. Оплата

наличными при получении».



Пример 1. «Доставка 2-3 дня» куда?



Пример 2. Указывается возможность самовывоза в разных городах





Пример 3.

http://www.ozon.ru/


http://www.ozon.ru/


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



Пример 5.

http://abo.ua/


http://abo.ua/


Пример 6.

http://www.labirint.ru/


http://www.labirint.ru/


Пример 7.

http://toyez.ru


http://toyez.ru/


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

При оформлении заказа не выводится список купленных товаров. Показали на

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

приводит к чувству неуверенности и дает еще один повод прервать оформление

заказа. Пользователь что-то забыл, не уверен то он купили или нет. И ему не

очевидно что нужно ждать финального экрана, где все будет. Выводите полный

список товаров на всех шагах оформления заказа.



Пример 1.



Пример 2.





Пример 3.





Пример 4.

http://euroset.ru/


http://euroset.ru/


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

Кнопки «купить», блоки конкурентных преимуществ, витрина товаров — должны

находиться до «линии сгиба». Чтобы пользователю не нужно было делать

прокрутку. Часто высокая шапка заставляет использовать прокрутку, чтобы

увидеть цену или кнопку «купить». Это просто не допустимо.



Пример 1.

http://holodilnik.ru/




Пример 2.

http://onlady.com.ua/


http://onlady.com.ua/


Пример 3. Только огромная шапка, а от обуви остался только маленький заголовок.

http://roro-style.com/




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

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

выбор. В любом списке товаров — нужно давать конкретные предложения.

Помогать выбрать быстрее. Самая простая модель (она может быть у вас другая)

— «самый популярный», «самый дешевый», «мы рекомендуем». Выводите

витрину по этим признакам в любом списке товаров. Не оставляйте покупателя

наедине со списком из 200 товаров и десятком фильтров и сортировок. Чем

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



Пример 1.

Onlinetraiding



Пример 2.

http://rozetka.com.ua




Пример 3. Можно воспользоваться простым фильтром или посмотреть «популярную модель»





Пример 4. В каждом разделе есть «лучший товар рубрики»

http://www.top-shop.ru/




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

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

процент аудитории не понимает о чем это. Не проще написать сроки поставки?

Понятный и очевидный ответ. Срок поставки — 1 день, 7 дней или 30 дней. Это

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

покупателям. Знают ли Ваши посетители что такое «авторизация»? Какие еще

слова не знают Ваши покупатели.



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

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

Например выбрать город, если это можно сделать по GEO IP, ввести отчество в

отдельное поле (что с ним делать?), выбрать способ доставки «Курьером в

пределах МКАД» «Почтой России» для заказа из Владивостока. Придумать логин

(«А что это?» Спрашивает Мария Ивановна из Курганской области). Позвонить

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

магазин) и так далее. Просто подумайте, от каких действий можно избавить

клиента. И он скажет Вам спасибо.



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

http://shoptime.ru/


http://shoptime.ru/


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

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

«Вы не можете у нас купить, потому что сумма заказа меньше 1000 рублей» —

напишите что при заказе больше 1000 рублей доставка 150 рублей, при заказе

меньше 1000 рублей — доставка 700 рублей. И пусть пользователь выбирает сам.

Любая информация, должна заканчиваться положительным предложением.

Вместо «Ничего не найдено» пишите — что «Пока ничего не нашли, посмотрите

наши специальные предложения или оставьте заявку». Вместо 404 ошибки —

бонус для ошибшихся сегодня... И так далее.



Пример 1.



Пример 2. Вместо остановки и отказа в получении информации — приятный сюрприз

http://egeriya.ru/


http://egeriya.ru/


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

На сайте даем 3 телефона, мобильный, скайп, email и еще. Чем больше видов

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

странице контакты, но никак, не в шапке магазина. Главный способ контакта —

должен быть один. Найдите то, что самое удобное для Ваших посетителей. Будет

здорово, если через Geo IP разделить по городам, и например, давать номер 8-

800 для посетителей из регионов и местный номер для местных жителей. Способ

контакта хорошо бы снабдить поясняющей надписью. «Звоните чтобы получить

консультацию». «Заказать и задать вопросы можно по телефону»

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



Пример 1.



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



Пример 3. А еще правильнее сделать так:





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

На карточке товара пользователь должен быть сосредоточен на тяжом для себя

решении «купить — не купить». При этом решение «не купить» всегда принять

значительно проще. Мы же показываем ему новости, поиск, новинки, другие

товары и не показываем способ доставки и оплаты.



Пример 1.

http://www.posuda.ru/


http://www.posuda.ru/


Пример 2. Ничего лишнего:

http://www.goldax.ru/




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

При оформлении заказа среднестатистический, человек чувствует себя

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

заказу и предложение позвонить если нужна помощь.

Здесь важно понимать, что просто указание телефона (например, на обычном

месте) проблему не решает. Нужно именно, направленное предложение помощи

в оформлении заказа.



Пример.





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

Про эту ошибку уже пора складывать легенды... Действие, которое приносит Вам

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

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

«Оформить заказ» — ярче, чем «продолжить покупки». "Купить", ярче, чем

«задать вопрос». При оформлении заказа «Дальше» ярче, чем «Назад». Хотя

слово «Дальше» лучше не использовать.



Пример 1.





Пример 2.

http://www.eldorado.ru/


http://www.eldorado.ru/


Пример 3.



Пример 4.





Пример 5.





Пример 6.





Пример 7.





Пример 8.





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

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

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

«Дальше» не говорит ни о чем. Что дальше? Называйте их названием

следующего шага — «перейти к выбору способа доставки», «перейти к

проверке». Этот шаг может сильно поднять конверсию.

Просто добавить фразу — «Вы перейдете к проверке и подтверждению заказа »

может значительно увеличить конверсию.



Пример 1. Не понятно что произойдет при нажатии на кнопку «оформить заказ».

http://shoptime.ru/


http://shoptime.ru/


Пример 2.





Пример 3. Что означает здесь кнопка «Продолжить» ?

http://www.citilink.ru/


http://www.citilink.ru/


Пример 4.

http://abo.ua/


http://abo.ua/


Пример 5.

http://www.bodo.com.ua/


http://www.bodo.com.ua/


19. Избыточная сортировка

Например, «по алфавиту». Во многих движках встроена по-умолчанию

сортировка списков по алфавиту. В большинстве случаев это абсолютно

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

на заказ, вводить пользователя в заблуждение лишними сортировками — тяжкий

грех. Базовые сортировки (которые должны быть всегда) — это по популярности

и по цене. Остальное зависит от специфики магазина.



20. Наличие пустых категорий каталога

То есть страниц, на которых нет товаров и кнопок купить. На каждой странице

каталога должен быть список товаров, категорий в которых только список

подкатегорий быть не должно. Это просто удлинение пути до покупки и

нарушение логики восприятия сайта.



Пример 1. Товаров не видим, предложений не видим.

http://zapp.ru/


http://zapp.ru/


Пример 2.

http://tverhit.ru/


http://tverhit.ru/


Пример 3.

http://tverhit.ru/


http://tverhit.ru/


Пример 4. Мы видим не только подкатегории с количеством товаров в каждой, но и список товаров.

http://www.003.ru/


http://www.003.ru/


Пример 5.





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

Почему то считается, что в шапке магазина ноутбуков должен быть ноутбук, в

шапке ювелирного магазина изумруд, в шапке интим-шопа... Ну или вообще,

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

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

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

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

описывается аргументация покупки здесь, а не красивые картинки. Не стоит

расходовать внимание пользователя нерационально. При этом имиджевые

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

посещениях они будут раздражать. В дизайне магазина полезность сильно

важнее красоты.



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





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

При оформлении заказа или в других местах требуют заполнить формы из 7-10 и

больше пунктов. Очень часто человека пугает необходимость такого заполнения.

Доказано множественными тестами, что заполнить 3 формы по 3 поля — проще,

чем одну форму в 9. И что важнее... Заполнить первую форму в 3 поля

соглашаются 70% посетителей, а в 9 пунктов 20%. Разбивайте свои формы на

части.

Гораздо проще заполнять короткие формы из 2, максимум 4-х пунктов, объясняя

зачем нам нужны те или иные сведения.



Пример 1.





Пример 2.

http://tverhit.ru/


http://tverhit.ru/
