Чому знижується конверсія сайту? Приклади 60 помилок в дизайні і юзабіліті

Помилки в дизайні і юзабіліті — це ті недоліки, через які падає конверсія сайту. Саме за ці недоліки відвідувачі і критикують сайт, не хочуть нічого купувати, відмовляються від підписки і переходять до конкурентів. Найчастіше ці помилки стосуються технічних несправностей, логіки, навігації, оформлення, маркетингу і контенту на сайті.

У цій статті ми, Роби бізнес, розглянемо приклади основних UX помилок і виділимо шістдесят поширених проблем, виправлення яких гарантує зростання конверсії на вашому сайті.

Якщо сумніваєтеся, чи потрібно це вам — просто прочитайте історію незадоволеного Васі. У ній розповідається, як через одну помилки інтернет-магазин позбувся постійного покупця.

Як Вася обирав мікрофон у інтернет магазині з поганим юзабіліті

Мова під про нашого знайомого на ім’я Василь (далі по тексту – “Вася”). Він ютубер-початківець, якому знадобився мікрофон для озвучування відеороликів. Його майбутній мікрофон повинен володіти трьома характеристиками: невисока ціна, чистий звук і затребуваність на Olx.

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

За рахунок продуманої навігації Вася не розгубився і швидко знайшов категорію «Мікрофони».

Коли Вася відкрив категорію «Мікрофони», то відразу зіткнувся з першою проблемою у вигляді непродуманого рубрикаторного фільтру. Цей фільтр не підходить для новачків, оскільки вимагає розуміння мікрофонної тематики. Без цього складно:

Оскільки у рубрикаторі не було ніяких підказок, Вася відфільтрував товари за призначенням і вибрав студійні мікрофони. Логіка тут така: якщо студійний — значить якісний. Все інше – другорядне і незрозуміле.

В розділі «Мікрофони» Васю зустрів складний фільтр, який новачкові правильно не налаштувати. Якщо не знаєте тему — не зможете обрати підходящий мікрофон.

У рубриці студійних мікрофонів Вася розставив товари за зростанням ціни і зупинив свій вибір на мікрофоні Superlux HO8 за 50 $. Це самий бюджетний варіант з доступних студійних мікрофонів і за відгуками покупців коштує своїх грошей. Тобто те, що потрібно для ютубера-початківця. Вася оформляє покупку і вже домовився з замовником на озвучку першого відеоролика.

Вибір Васі — мікрофон Superlux HO8 вартістю 50 $.

Вася чекає посилки, розпаковує свій мікрофон, підключає його до комп’ютера і отримує огидний звук. Вся справа у фантомному живленні, без якого Superlux HO8 не може повноцінно функціонувати. Цього моменту в картці товару приділений один рядок, який Вася по недосвідченості пропустив.

Джерело фантомного живлення — це додатковий елемент, без покупки якого студійний мікрофон Superlux HO8 не буде нормально звучати. В картці товару цей момент прописаний одним рядком, який непідготовлений новачок легко пропустить.

I

Далі Вася почав самостійно збирати інформацію по обраному мікрофоні і з’ясував наступні нюанси:

1. На сайті цього ж інтернет-магазину найдешевша установка фантомного живлення – ZEEPIN 48V. Вона коштує близько 37 $ і буде доступна тільки за попереднім замовленням. Вартість більш дорогих установок починається від 65 $.
2. Крім фантомного живлення до мікрофона Superlux HO8 потрібно придбати стійку і поп-фільтр. Ще не буде зайвою зовнішня звукова карта і акустичний екран для придушення зайвих шумів. Все разом це ще не менше 100 $.
3. Замість усього перерахованого можна було придбати бюджетний USB-мікрофон, який зміг би задовольнити його потреби. Наприклад, за 50 $ можна придбати Trust GXT 232; а за 85 $ — Blue Microphones Snowball iCE.

Що вийшло в результаті: Вася даремно викинув гроші і не користується купленим мікрофоном, а власник інтернет-магазину втратив постійного клієнта.

Установка фантомного живлення ZEEPIN 48V за 37 $.

Щоб уникнути втрати клієнта, власникові інтернет-магазину варто було подивитися на свої товари з позиції новачка і зробити ставку на освітній контент — до всіх складних продуктів додати підказки, корисні статті або відео. Якби Вася своєчасно дізнався про фантомне живлення, то не купив непотрібний йому товар: він би перейшов на сторінку з мікрофоном Superlux HO8 → з відкритих підказок дізнався про фантомне живлення → перейшов би на статті, де докладно розповідається про фантомні установки → вивчив матеріал про різновиди мікрофонів → повернувся б до списку мікрофонів і вибрав з доступних пропозицій оптимальний варіант з USB-роз’ємом. Всі залишилися задоволені і продовжили співпрацю. А так образа і перехід до конкурентів.

Відсутність освітнього контенту — це одна з багатьох помилок, яку допускають власники інтернет-магазинів. Про інші проблеми ми поговоримо далі.

Технічна частина

Низька швидкість завантаження

Приблизно 40% користувачів покинуть ваш сайт, якщо не побачать його початковий вигляд у перші три секунди. Ще стільки ж відвідувачів підуть відразу після того, як клікнуть на якийсь розділ і він знову зависне. Щоб цього уникнути — потрібно постійно проводити тести, оптимізувати важкі зображення і перевіряти швидкість завантаження шрифтів. Окрема ситуація з відео — якщо без них ніяк, то потрібно вкладати додаткові кошти і думати про підняття продуктивної потужності сайту. Якщо відео можна замінити текстом і зображеннями, то краще так і зробити. Швидкість завантаження важливіше формату контенту.

Довге завантаження сайту.

У прикладі показано, що час завантаження сайту становить 9,83 сек. Це неприпустимий варіант, оскільки рідко коли відвідувачі чекають більше 3 секунд.

Важкі файли картинок.

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

Велика кількість запитів під час завантаження сторінки.

В Amazon провели дослідження і порахували, що якщо швидкість завантаження сайту падає хоча б на 100 мс, то конверсія продажів відразу знижується на 1%. Щоб цього не допустити — власникам сайтів рекомендовано проводити два типи тестів. Перший тест повинен проводитися в реальному часі і з нього можна відразу вирахувати повільні сторінки. Другий тест повинен бути періодичним (раз на тиждень або місяць) і за його результатами можна виправляти всі повільні елементи.

Непрацюючі або биті посилання

Якщо користувач перейшов на ваш сайт, значить його зацікавила якась інформація і саме цю інформацію він повинен отримати. Якщо цього не буде, і замість цієї сторінки з’явиться бите посилання, користувач піде з сайту, занесе його в чорний список і в майбутньому завжди буде звертатися до конкурентів.

На биті посилання негативно реагують не тільки користувачі, але і пошукові роботи. Коли робот знаходить непрацююче посилання, то він робить такий висновок: на місці порожньої сторінки немає нового контенту → сайт не розвивається і не цікавий власнику → сайт можна знизити в пошуковій видачі.

Постійний моніторинг — це єдиний спосіб уникнути битих і непрацюючих посилань. Коли виявите несправність — відразу ж займіться коригуванням програмного коду.

Якщо у вашого сайту до 100 000 сторінок — запускайте моніторинг хоча б раз на місяць. Якщо більше сторінок, то намагайтеся влаштовувати щотижневі перевірки.

Не оптимізована сторінка 404

Сторінка 404 — це те порожнє місце, куди потрапить відвідувач сайту перейшовши по битому або неіснуючому посиланню. Якщо ця сторінка не оптимізована, то користувач одразу покине ваш сайт і без вагомої причини не буде на нього повертатися. Якщо сторінка оптимізована, то втрати трафіку не буде і користувач зможе переміститися в потрібний розділ.

Щоб оптимізувати сторінку 404 — дотримуйтеся наступних рекомендацій:

1. Коротко опишіть, куди потрапила людина і чому вона тут.
2. Розмістіть посилання на головну сторінку сайту.
3. Розмістіть посилання на популярні розділи сайту.
4. Попросіть користувача повідомити про помилку адміністратору сайту.
5. Зробіть так, щоб дизайн 404 сторінки було оформлено в тому ж стилі, що і весь сайт.

Остання порада — не забудьте про гумор. Якщо користувач посміхнеться, то ви завоюєте його гарне відношення до себе і можете розраховувати на його подальшу увагу.

Погано реалізована горизонтальна прокрутка

Горизонтальна прокрутка — це один із способів перегляду вмісту сайту, коли переміщення по сторінках відбувається не зверху-вниз (), а вправо-вліво (). Проблема горизонтальної прокрутки в тому, що її складно адаптувати під різні типи пристроїв — якщо не виділити бюджет і не проробити кожен елемент програмного коду, то сайт буде розвалюватися і працювати некоректно.

З горизонтальною прокруткою люблять працювати студії веб-дизайну, які за рахунок такої складної багатокомпонентної дії доводять свою компетенцію. Якщо ваш бюджет не дозволяє замовити індивідуальну верстку під кожен тип сучасного гаджету, то добре опрацювати сайт не вийде. У цьому випадку горизонтальна прокрутка не для вас і потрібно проектувати сайт з класичною схемою переміщення — робити вертикальну прокрутку.

Відсутність адаптивної верстки

У 2019 році більше половини інтернет-трафіку виходить від користувачів смартфонів і планшетів. У майбутньому це співвідношення може змінитися або на зміну смартфонів і планшетів прийдуть інші пристрої. Адаптивна верстка дозволяє не залежати від цієї тенденції і не втрачати конверсію через технологічні уподобання аудиторії. Тобто адаптивна верстка — це коли сайт може правильно підлаштуватися під ширину будь-якого екрану і коректно відображатися на комп’ютерах, планшетах, смартфонах і будь-яких інших сучасних гаджетах.

Якщо ваш бюджет поки обмежений і ви не можете замовити адаптивну верстку, то виконайте часткову адаптацію сайту. Часткова адаптація — це коли ви налаштовуєте сайт під ширину екрану тих пристроїв, якими найчастіше користуються ваші користувачі. У більшості випадків це будуть всі різновиди смартфонів.

Сайт не налаштований під дуже чіткі Ultra HD монітори

У 2019 році більшість сайтів орієнтуються на монітори з двома типами розширень: HD і Full HD. В HD-екранах щільність пікселів становить 1366×768 — це бюджетні монітори, які поступово втрачають свою популярність. У Full HD-екранах щільність пікселів становить 1920×1080 — це найпопулярніші монітори, на які орієнтується більшість розробників при налаштуванні адаптивного верстки.

Разом з Full HD-моніторами набирають популярність екрани з Ultra HD-роздільною здатністю (4К монітори). В Ultra HD-екранах щільність пікселів становить 3840×2160 — це дозволяє досягати чіткої картинки з деталізованим показом найдрібніших деталей на сайті. Також вже можна купити 8К монітор, де щільність пікселів становить 7680×4320.

Враховуючи таку тенденцію можна припустити, що Full HD-стандарт скоро перейде в бюджетну категорію і найпопулярнішими будуть монітори з Ultra HD-роздільною здатністю. Тому важливо проводити додатковий тест і стежити за тим, щоб всі елементи сайту коректно відображалися на 4К моніторах. Якщо цього не робити, то по мірі переходу користувачів на надчутливі монітори конверсія сайту буде стабільно знижуватися.

Неробочий пошук на сайті

Пошук на сайті — це такий інструмент, частота використання якого залежить від формату ресурсу: на інформаційних сайтах застосовується нечасто, а в інтернет-магазинах може повністю замінити рубрикаторний фільтр. Звідси висновок: пошуковик повинен бути і завжди працювати коректно. Якщо цього не буде, то користувач не зможе швидко знайти потрібну інформацію або товар, покине сайт, знайде все необхідне у конкурентів і з високою ймовірністю ніколи не повернеться.

Коли будете налаштовувати пошук на сайті, тримайте в голові той нюанс, що деякі запити часто вводяться з помилками. Наприклад, якщо користувач буде поспішати, то замість «ноутбук» може ввести «наутбук». Для пошукача на сайті це не повинно бути проблемою — він повинен правильно розпізнати запит і видавати потрібний результат: «наутбук» → «ноутбук» → список потрібних моделей.

Не працююче автозбереження в кошику замовлень

Кошик повинен дублювати всі користувацькі покупки. Це означає, що якщо в картці товару користувач вказав три ковдри, то і в кошику мають з’явитися три ковдри. Проблеми не виникає, якщо купується кілька одиниць товару.

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

Налаштуйте автозбереження в кошику і не змушуйте своїх клієнтів робити подвійну роботу. Інакше ви ризикуєте залишитися без постійних покупців.

За замовчуванням в кошику товарів стоїть «0». Згідно аналізу за допомогою карти кліків бачимо, що через це користувачеві доводиться робити одну зайву дія: спочатку додати товар у кошик, а після вказати його кількість.

Навіть якщо у кошику справно працює функція автозбереження — простежте за тим, щоб ваші менеджери завжди передзвонювали клієнтам і уточнювали замовлення. Іноді клієнти через помилку кілька разів клікають на кнопку «Купити», не перевіряють кошик і отримують не ту кількість товару. Це теж погано, тому краще передзвонити.

Проблеми з версткою

Сайт завжди повинен коректно відображатися у всіх браузерах. Якщо верстка почне злітати, то сайту буде складно виконувати заплановану корисну дію і у відвідувачів складеться думка про те, що ним займаються непрофесіонали. Уявіть, що клієнт хоче оформити замовлення і через погану верстку не може цього зробити. У кращому випадку він перезавантажить сторінку і спробує заново, в гіршому — перестане співпрацювати з вами. Такого допускати не можна.

Приклад зламаної верстки: тиснете на форму для заповнення → екран автоматично повертається в початкове верхнє положення.

Коли екран повертається у вихідне положення, то це віддаляє користувача від замовлення. Якщо процедура повториться хоча б раз, ви можете залишитися без клієнта.

Якщо кнопки соцмереж знаходяться не на своєму місці, то це виглядає негарно і провокує недовіру до власників ресурсу. Плюс можна помилково натиснути на одну з кнопок і відкрити додатковий сайт. Це дратує.

Ще один приклад зламаної верстки:

На більшості сайтів текст виступає основною одиницею контенту — тим носієм інформації, заради якої користувач знаходиться в інтернеті. Тому якщо текст буде важко читати, працювати з таким сайтом ніхто не захоче.

Ось ще один приклад:

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

Неклікабельні кнопки

Кнопка на сайті виконує функцію договору між власником і відвідувачем сайту. Якщо цей договір не можна укласти, то ніякої угоди не буде. Тому якщо розміщуйте кнопку — перевіряйте її клікабельність.

Приклад неклікабельних кнопок: не працюють кнопки «Купити в кредит» і «Купити в 1 клік».

Після натискання кнопки «Купити в кредит» перед користувачем повинна з’явиться сторінка з розміром щомісячних платежів та умовами кредитування. Через менеджера всі нюанси з’ясовувати довго, тому легше закрити сайт і подивитися у конкурентів. Кнопка «Купити в 1 клік» потрібна для постійних клієнтів, які багато купують і цінують свій час. Якщо кнопка не працюватиме, то такі користувачі відразу знайдуть заміну незручному сайту.

Ще приклад неклікабельних кнопок:

Якщо для користувача важливе колірне рішення, то він обов’язково повинен бачити товар у потрібному виконанні. Без цього картинка буде шукатися на інших сайтах і замовлення залишиться там, де це буде реалізовано.

Ще приклад неклікабельних кнопок:

Якщо на сайті є непрацюючий рейтинг і відсутня система з коментарями, то у відвідувачів може скластися думка, що власник сайту нехтує їхньою думкою. Звідси формується недовіра і негативне ставлення до ресурсу.

Ще один приклад непрацюючих кнопок на сайті:

У прикладі банер не тільки не клікабельний, але і складений без заклику до дії. Щоб це виправити досить додати працюють кнопки «Перейти» або «Детальніше».

Неклікабельний кошик товарів

Кошик товарів — це звичне місце, куди відвідувачі інтернет-магазину заходять перед підтвердженням замовлення. Якщо значок «Кошик» зробити неклікабельным, то багато користувачів не захочуть знатися з незвичним функціоналом і зроблять покупку в іншому місці. Щоб цього уникнути — не експериментуйте з кошиком товарів і завжди робіть цей значок клікабельним.

І ще момент: не використовуйте замість слова «Кошик» інші креативні назви. Є ризик, що на «Візок», «Склад» або «Кошик» користувачі не клікнуть.

Самостійний запуск аудіо і відеофайлів

На сайті ви маєте право публікувати контент в тому форматі, який вважаєте за потрібне. В цей же час у відвідувачів вашого сайту є право обирати, який формат контенту дивитися і коли це краще зробити. Якщо ви додасте самостійний запуск аудіо і відеофайлів, то порушите права користувачів — вони нічого не просили, а ви за них вирішили показати вміст сайту.

Іноді автовідтворення медіафайлів може бути вдалим рішенням і такий формат іноді практикує навіть видавництво Forbes. Однак у більшості випадків це викликає бажання відразу закрити сайт і ніколи до нього не повертатися. Тому ми радимо не ризикувати і не заважати користувачеві управляти контентом.

Логіка

Кнопка «гамбургер» в основній версії сайту

Кнопка «гамбургер» — це три горизонтальні решітки, при натисканні на які відкривається меню сайту. Цей прийом придуманий для адаптивної верстки і використовується для передачі вмісту сайту на гаджетах з вузьким екраном.

Якщо цей же прийом використовувати в основній версії сайту, то ускладнюється навігація і для пошуку потрібної інформації користувачеві потрібно зробити одну зайву додаткову дію. Звідси ризик, що користувачеві буде незручно і наступного разу він обере сайт з більш продуманою системою.

Користуйтеся кнопкою «гамбургер» в адаптивній верстці, а для основного сайту залиште просте лінійне меню.

Сайт без логотипу

Логотип — це звичний атрибут, який розташовується в шапці сайту і призначений для підвищення впізнаваності бренду. Зазвичай логотип використовується в парі з фавіконом — невеликим малюнком, який підсвічується у вкладці браузера перед назвою відкритої сторінки. Якщо логотип і фавікон розроблено правильно, то вони допомагають запам’ятати сайт та підвищують імовірність повторного повернення. Без цих атрибутів запам’ятати ваш сайт буде набагато складніше.

Слайдер на головній сторінці

Більшість слайдерів погано відображаються на мобільних девайсах і зберігають ті ж проблеми, що і сайти з горизонтальною версткою. Якісний слайдер робити іноді дорого, а бюджетні варіанти відразу псують загальне уявлення про ресурс: користувач переходить на сайт → бачить незручний і погано пророблений слайдер → залишає сторінку або починає вивчати сторінку з негативним настроєм. Щоб цього уникнути і не просіла конверсія сайту — досить відмовитися від слайдера на головній сторінці і розкласти презентаційний матеріал про сайт за допомогою простих дизайнерських рішень: тексту, графіки або відео.

Невиділені посилання

Посилання — це інструмент утримання відвідувачів на сайті. Користувач читає потрібну статтю → бачить додаткове корисне посилання → клікає по цьому посиланню і далі залишається на сайті.

Якщо посилання буде невдало позначено, то користувачеві буде за що зачепитися і після вивчення потрібної теми він відразу закриє сайт. Щоб це виправити — треба робити посилання помітними.

Через невиділені або непрацюючі посилання власники сайту втрачають потенційних клієнтів.

Детальніше про це можна почитати тут.*

* Правда, бісить подібне?

Надлишкові анімації

Будь-який мультимедійний файл на сторінці повинен виконувати якусь корисну функцію: розважати, розповідати історію або допомагати розібратися з темою. Якщо анімацій буде занадто багато, то сторінка вийде дуже “важкою” і її буде складно вивчити.

Також порушиться принцип контрасту і всі важливі анімації змішаються з другорядними. У підсумку користувач нічого не запам’ятає або взагалі відмовиться досліджувати перевантажену сторінку.

Не допускайте надмірності і акцентуйте увагу лиш на важливих анімаціях.

Відволікаючі елементи

Тут потрібно дотримуватися того ж принципу, що і з надлишковими анімаціями: якщо якийсь елемент не працює на корисну дію, то його краще не публікувати на сторінці. Винятки допускаються лише в таких ситуаціях, коли ці елементи представлені у вигляді якоїсь якісної декорації, що дозволяє створити приємну атмосферу на сайті. Якщо проблема з якістю, то відволікаючі елементи краще не використовувати — так буде менше роздратованих відвідувачів і вища конверсія сайту.

Спливаючі вікна без кнопки «Закрити»

Відвідувач сайту — це гість, всі дії якого повинні носити тільки добровільний характер. Якщо додати на сайт спливаючі вікна і спроектувати їх без кнопки «Закрити», то ніякого вільного вибору у користувача не буде.

Через це користувачу гарантовано не сподобається ваш сайт і наступного разу він обов’язково обере конкуруючий ресурс. Тому якщо користуєтесь спливаючими вікнами — обов’язково додавайте до них велику кнопку «Закрити».

Дратує капча

Капча — це корисний інструмент, який захищає сторінку від напливу роботів. Тому капча повинна бути і без неї не обійтися. Проблема виникає тоді, коли капча неправильно запрограмована і прирівнює кожного нового відвідувача до боту: людина приходить на сайт і бажає зареєструватися → замість вивчення вмісту користувач повинен витратити час на введення безглуздих для нього цифр і букв.

Ситуація ускладнюється, якщо капча пошкоджена або занадто довга — користувачеві легше закрити сторінку, ніж займатися її декодуванням. Тому, щоб не втрачати аудиторію — робіть капчу компактною, непомітною та такою, що рідко спрацьовує і здатною краще відрізняти людину від робота. Непоганий варіант – reCAPTCHA.

Нав’язливі pop-up вікна

Pop-up вікно — це спливаючий банер, який закликає користувача здійснити якусь конкретну дію: підписатися на розсилку, залишити номер телефону або перейти за певним посиланням. Спливаючі вікна виконують рекламну функцію і сильно дратують в тих ситуаціях, коли з’являється попап з нецільовим меседжем на сторінці:

Якщо робите pop-up вікна — пропонуйте в них щось корисне і налаштовуйте їх так, щоб користувач міг хоч трохи вивчити вміст сайту.

Обов’язкова реєстраційна процедура

Якщо в інтернет-магазині перед покупкою потрібна обов’язкова реєстрація, то приготуйтеся до більш низької конверсії.

Якщо хочете безпечно зібрати дані користувача — просто поясніть переваги реєстраційної процедури і зробіть її автоматичною, коли відбувається перша покупка. Пароль відправляйте на пошту.

Зібрати контакти зацікавлених користувачів важко, а втратити легко. Тому не набридайте своїм підписникам, не розсилайте спам і непотрібну рекламу. Пообіцяли інформацію про вигідні бонуси — спочатку розповідайте про бонуси, а після можете вставити трохи реклами. Так можна, а по іншому не можна.

Складна реєстраційна процедура

Якщо користувач вирішив зареєструватися на вашому сайті, то цей процес не повинен займати більше хвилини. Коли реєстраційна форма дуже складна, перенасичена обов’язковими полями і складається з декількох кроків, то користувачеві простіше передумати, ніж виконати запропоновану дію.

Якщо для реєстрації користувачеві потрібно ввести багато обов’язкових даних — подумайте про те, як цей процес спростити. Наприклад, можна підключити плагін та перетягувати необхідні дані з соцмереж. Чи можна розбити реєстрацію на кілька частин: пошта, ім’я і телефон вводиться спочатку, а всі інші відомості користувач можете додати в особистому кабінеті.

Маскування поля введення пароля

Приховане поле введення пароля (****) доречно застосовувати в онлайн-банкінгу і на тих сайтах, де зберігаються гроші або важлива користувацька документація. У цьому випадку прихований пароль обов’язковий і використовується в якості додаткового захисного заходу. Наприклад, якщо вирішите скористатися онлайн-банкінгом в людному кафе, то зможете авторизуватися і не переживати за збереження запису.

Для всіх інших ситуацій приховане поле пароля краще не використовувати, оскільки воно ускладнює процес входу в особистий кабінет. Якщо з якихось причин розсекретити поле введення пароля не виходить, то подбайте про те, щоб цю опцію користувачі могли включати і вимикати на свій розсуд.

Навігація

Відсутня пагінація на сайті

Пагінація — це сторінки каталогу товарів, які зчитуються пошуковими роботами відразу після головної сторінки. Якщо в інтернет-магазині неправильно оформлена пагінація, то абсолютно точно, що буде низка конверсія сайту, тобто він буде погано просуватися і слабо продавати.

При наявності великої кількості товарів певної категорії на сайті слід розділити цю категорію на сторінки пагінації. Варто додати знизу статті кнопки перемикання сторінок, скорочений перелік всіх сторінок. Часто на сторінках пагінації можна зустріти додаткову кнопку відображення всіх товарів відразу, тут необхідно бути дуже обережним і переконатися, що при оновленні списку товарів буде змінюватися URL-адреси, на який заздалегідь буде проставлений noindex.

Непродумані сценарії переміщення

Перебуваючи на сайті користувач завжди повинен знати, які дії він може виконати і що за цим послідує. Як тільки якийсь момент буде не погоджено — починається плутанина і проблеми з конверсією. Щоб було зрозуміло — розберемо цей момент на прикладі неузгодженої покупки товару в один клік:

Ось ще ситуація. Уявіть, що вам потрібно зв’язатися з менеджером техпідтримки і зробити це можна тільки через заявку на зворотний дзвінок. Ви вводите номер телефону і не маєте ніякого оповіщення. Через це ви не знаєте, чи отримав менеджер ваш запит, коли чекати відповіді і куди звертатися, якщо у вас екстрена ситуація. Тобто сформований готовий привід піти до конкурентів.

Для закріплення розберемо ще один випадок. Програмісти неякісно пропрацювали сайт і у користувачів проблеми з картками товару. У картках не можна змінювати кількість одиниць товару і не можна видалити вибраний товар з кошика. Оскільки ніяких підказок немає — користувач швидко розчарується і не буде нічого купувати в такому інтернет-магазині.

Не вказано вибрана кількість одиниць товару і немає можливості що-небудь змінити. Якщо перейти на наступний крок, то і на ньому функція вибору кількості товару недоступна

Уникайте необдуманих сценаріїв і підкріплюйте кожен користувацький крок уточнюючими підказками. Це найпростіший спосіб уникнути конфліктних ситуацій.

Немає «хлібних крихт»

«Хлібні крихти» — це система навігації, що показує ланцюжок руху користувача від головної сторінки до поточного розділу. «Хлібні крихти» прийнято відображати в верхній частині сайту та з їх допомогою можна швидко переміститися назад і знайти розділ, який ви раніше розглядали. Наприклад, ви дивитися на товар № 10, а за «хлібним крихтам» зможете в один клік перейти на товар № 2.

Крім навігаційної функції «хлібні крихти» впливають на сео-оптимізацію: створюють перелінковку між іншими сторінками і позитивно впливають на поведінковий фактор. Тому якщо не буде «хлібних крихт», то користувачам буде незручно довго вивчати сайт і швидко знаходити вподобані розділи.

Навігація на головній сторінці

«Головна» — це та сторінка, на яку буде повертатися користувач якщо заблукає на сайті. Якщо такої сторінки немає, то при перших проблемах з навігацією частина відвідувачів буде йти з сайту. Щоб «Головна» сторінка виконувала більше корисних завдань доцільно в її описі додати основні рубрики або розповісти про всю структуру сайту.

Для інтернет-магазину, цей пункт меню можна не використовувати.

Відсутня навігація всередині статей сайту

Для великих статей в блозі потрібна своя навігація. Щоб підготувати її — досить виконати дві дії:

1. Встановити плагін, який з підзаголовків статті буде автоматично формувати зміст. Вміст виводиться в початку статті і з його допомогою користувач зможе відразу почати читання з потрібного розділу.
2. Додати кнопку «Вгору», яка дозволить швидко переміщатися з будь-якого розділу назад до змісту.

Якщо стаття невелика і поміщається в 3-5 екранів прокручування, додавати навігацію не обов’язково. Користувач і так швидко знайде потрібний матеріал.

Низька конверсія сайту: Формальна навігація

Навігація — це такий інструмент, який повинен допомагати наводити порядок на сайті. Якщо навігація буде складною або нелогічною, то це завадить користувачеві повноцінно вивчити сайт і зробити потрібні конверсійні дії: оформити покупку, залишити номер телефону або підписатися на новини.

Нижче опубліковано меню з неправильним ранжуванням категорій: не обрано основний розділ і не структуровані другорядні категорії.

Ще одна поширена помилка формальної навігації — дублювання позицій. Це коли в розділі «Аксесуари» можна зустріти категорії «Аксесуари». Такі збігі потрібно прибирати і не заплутувати користувача.

Приклад дубля пунктів меню, коли у розділі і категорії використовуються «Аксесуари».

Також не забувайте стежити за тим, щоб на всіх сторінках було меню першого рівня. Якщо його не додати, у користувача не вийде швидко переключатися по категоріях і переглядати різні товари.

Приклад товарного каталогу без меню верхнього рівня:

Щоб зробити правильну навігацію — поставте себе на місце новачка, який нічого не знає про ваш сайт. Тепер задайте питання: чи зможе такий новачок швидко пересуватися по опублікованим пунктам меню і знаходити потрібну інформацію? Якщо відповідь негативна, то навігаційний ланцюжок варто переробити.

Оформлення

Невідповідний дизайн

Дизайн — це візуальний образ, який повинен залучати аудиторію і спрощувати його взаємодію з сайтом. Якісний дизайн саме так і працює. Якщо у вас непродуманий, застарілий або занадто креативний дизайн, то і конверсія сайту буде відповідною. Тому все, що знижує  конверсійні показники потребує негайного виправлення.

Приклад непрофесійного дизайну.

Проблема креативного дизайну в тому, що його складно створювати. Тому якщо сумніваєтеся у своїй задумці, краще віддайте перевагу простим дизайнерським прийомам, які будуть зрозумілі всій цільовій аудиторії.

Принадність складного дизайну може оцінити тільки власник сайту, який за цей дизайн заплатив. Якщо сторінки не ріжуть погляд і на них зрозуміло як все можна сортувати, то для користувачів і цього буде достатньо. Інше – це вже надлишок.

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

Якісний дизайн не обов’язково повинен бути дорогим і громіздким. Якщо простий мінімалістичний стиль буде йти в парі з якісними послугами, то і цього буде достатньо для залучення лояльної аудиторії. Буде задоволена аудиторія → підвищаться продажі → з’явиться професійний дизайн.

Незручна текстова колонка

Текст має займати 60-70% ширини сторінки. Якщо зробити вузьке поле, то текст витягнеться і перетворитися у вертикальне простирадло.

Якщо використовувати максимальну ширину, то це простирадло розтягнеться по горизонталі. Повний провал — це коли до розтягнутого тексту додаються шрифти з зарубками. Частіше думайте про користувачів і не створюйте зайвих незручностей.

Непропорційні зображення

На сайті все візуальне оформлення повинно виконуватися в одному стилі. Акцентні елементи допустимі, проте вони повинні бути акуратно оформлені і користувач повинен їх розуміти. Наприклад, якщо ви робите опис якогось товару, то в статтю допустимо вставляти зображення з різними пропорціями і масштабом — читач розуміє, що мова йде про різні властивості одного товару. При цьому не можна міняти пропорції в загальному каталозі товарів — тут без додаткових коментарів незрозуміло, чому одні зображення відрізняються від інших.

Приклад надто високого зображення в шапці:

Часто проблеми з пропорційністю виникають в адаптивній верстці. Тому важливо перевірити дизайн на як можна більшій кількості пристроїв.

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

Текст і фон

Ідеальний варіант — чорний текст на білому фоні. Приблизно такий же ефект дає білий текст на чорному тлі. Поєднувати можна і інші кольори, які не зливаються між собою і дозволяють без зусиль зчитувати інформацію з сайту. Якщо весь контент легко прочитати з першого погляду, то ви правильно підібрали текст і фон.

Якщо у вас немає спеціального дизайнерської завдання, то вибирайте чорний текст на білому фоні. Не потрібно грати з кольорами просто заради краси — краще витратьте зекономлений час на виробництво контенту. Користувачі це точно оцінять.

Приклад складнощів з текстом:

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

Якщо з якихось причин класика у вигляді чорного тексту й білого фону вам не підходить, пам’ятайте про такий нюанс: у різних гаджетів різна передача кольорів. Якщо у вас на комп’ютері все виглядає добре, то це не означає, що аналогічно буде у користувача з бюджетним смартфоном на Андроїд.

Опрацювання дизайну тексту

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

Дизайн тексту — це не чарівний інструмент збільшення конверсії. Просто з його допомогою шанси залучити більшу кількість цільової аудиторії підвищуються.

“Задизайниний” текст:

Якщо сайт спеціалізується на публікації складних експертних статей і в обраних темах з вами ніхто не конкурує, можливо, дизайн тексту не потрібен. Ви — лідер думки і нема чого витрачати час на оформлення. У всіх інших випадках дизайн допоможе підняти конверсійні показники кожної статті.

Креативне використання посилань в елементах інтерфейсу

Всі посилання повинні бути помітними. Якщо цього не буде, то користувачеві буде складно перейти на рекомендовану сторінку і продовжити своє перебування на сайті. Чи може статися так, що людина випадково натисне на приховане посилання і розсердиться через те, що її змушують дивитися той контент, який вона не обирала. Тому в інтерфейсі не варто креативити і перетворювати посилання на загадку.

Приклад нетипового використання посилань у текстах і елементах:

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

Невдале кольорове оформлення

Колір — це важлива складова будь-якого дизайну. Колір впливає на настрій і робить так, щоб відвідувачам сайту було комфортно вивчати запропонований контент. Якщо колірна гамма підібрана невдало, то навіть на якісний контент можна отримати безліч негативних відгуків. І навпаки: якщо на сайті приємно знаходитися, то користувачі пробачать незначні помилки.

Якщо ви плануєте створити привабливий кольоровий сайт — подивіться базові уроки по колористиці. Там багато нюансів, які не вийде викласти в двох словах. Коли оберете колірну гаму — організуйте фокус-групу і спробуйте дізнатися, які рішення впроваджені вдало і що потрібно доопрацювати.

Якщо вам не цікаво вивчати колористику і розбиратися з колірною гамою — залиште на сайті білий фон. Так робить Apple і з клієнтами все в порядку.

Надмірна кількість реклами

Сучасні користувачі переглядають сайти з внутрішнім антирадаром, що дозволяє ігнорувати опубліковані рекламні пропозиції. Через це стаття з одним і десятьма рекламними банерами будуть давати приблизно однаковий ефект. При цьому стаття з одним рекламним банером не буде дратувати, оскільки вона в ненав’язливій формі розповідає про якусь корисну послугу. Стаття з десятьма банерами викликає відразу і відчуття того, що автор усіма силами намагається впарити читачеві рекламований продукт.

Тому якщо хочете менше критики, давайте чесну рекламу або дозуйте її кількість.

Конверсія сайту: Заклик до дії

Заклик до дії — це фінальна частина рекламноъ пропозиції, яку можна порівняти з рукостискання після обговорення умов угоди. Тому в будь-якій рекламі заклик до дії повинен бути і його потрібно правильно оформляти.

Якщо призову до дії не буде, то частина аудиторії не зважиться на покупку або перенесе її на інший раз. Це ваша недоробка, яку легко виправити.

Приклад слабкого заклику до дії:

Часто слабкий заклик до дії зустрічається у формі підписки. Користувачі рідко використовують таку форму, навіть якщо її розмістити на саме видне місце.

Іноді заклик до дії пропадає, коли сайт переключається в адаптивну версію. Це технічна проблема, яку потрібно своєчасно виявити і усунути.

Заклик до дії добре працює тільки в парі з картинкою банером. Одне без іншого дає слабкий ефект і часто залишається непоміченим.

Ставите заклик до дії — робіть його переконливим і чітким. Також обов’язково стежте за тим, щоб заклик добре поєднувався з зображенням рекламного банера.

Неякісні зображення

Більшість користувачів починають вивчати контент з перегляду зображень. Тому важливо стежити за тим, щоб ці зображення були чіткими, добре обробленими і в тему опублікованого матеріалу. Так формується цілісна історія, на основі якої користувачеві легко приймати рішення про покупку.

Щоб швидко підвищити якість зображень — купіть портативний китайський куб для предметної зйомки (photobox, лайткуб, фотобокс тощо). Це недорогий аксесуар, який додасть усім зображенням вашого інтернет-магазину фірмовості.

Відсутність або надлишок ілюстрацій

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

В той же час, якщо ілюстрацій буде занадто багато, то це може перевантажити сторінку і відлякати частину користувачів. Щоб цього уникнути — комбінуйте ілюстрації з відео. Наприклад, сфотографуйте товар з основних ракурсів і доповніть сторінку відеоглядом, в якому буде процес розпакування та сценарії використання товару в різних ситуаціях.

Погано зверстані кнопки соцмереж

Якщо кнопки соціальних мереж неправильно оформлені або виглядають неакуратно, то багато користувачів по ним не клікнуть і не продовжать знайомитися з вашим контентом на соціальних платформах. Щоб цього уникнути — верстайте красиво.

Крім візуальної непривабливості, з кнопками соцмереж часто виникають ще дві проблеми. Перша проблема пов’язана з будь-якими технічними збоями, які роблять кнопки неклікабельними. Від такого збою не вийде застрахуватися, тому сайт потрібно періодично тестувати на предмет працездатності всіх клікабельних елементів. Друга проблема може бути викликана тим, що соціальні мережі обрані без урахування інтересів аудиторії. Наприклад, якщо більшість ваших читачів користуються Telegram, а ви з цим месенджером не працюєте, то буде втрата трафіку, низька конверсія сайту. В цьому випадку потрібно виправляти ситуацію або змиритися зі втратою.

Маркетинг

Немає чіткої пропозиції

Головна пропозиція — це та тема, на якій спеціалізується ваш ресурс. Це те, що користувач повинен побачити в перші три секунди перебування на сайті. Продаєте уживану техніку Apple — розташовуйте на головній сторінці каталог з доступними гаджетами, а все інше уже на сторінках блогу і в новинах. По-іншому робити небажано, оскільки від цього втрачається чіткість головної пропозиції сайту. Якщо головна пропозиція буде неочевидною, то частина користувачів не буде ні в чому розбиратися і відправитися за покупками до конкурентів.

Відсутність гарантій

Гарантія — це ознака того, що продавець впевнений у товарі і може ручатися за його якість. Візьмемо два інтернет-магазини, в яких MacBook Air 2018 року продається за 1900 $. Перший магазин працює без гарантій, а у другому термін гарантійного періоду становить 12 місяців. При таких умовах більшість користувачів здійснювати покупку у другому інтернет-магазині.

MacBook Air 2018 року — це приклад товару, який у всіх інтернет-магазинах буде продаватися приблизно за однією ціною. Виграє у конкуренції сайт з найкращою гарантією.

Якщо ви продаєте одноразові або товари, що швидко псуються, то швидше за все видати на них гарантію не вийде. У цьому випадку вам ніщо не заважає придумати рівноцінну заміну. Наприклад, у бізнес по продажу квітів можна запровадити безкоштовну доставку або накопичувальну систему знижок для постійних клієнтів.

Складні товари продаються без підказок

Якщо ви пропонуєте будь-який технологічний товар, який по принципу складніше чебурека, то на сайті потрібні підказки. У підказки потрібно виносити всі поняття, з якими навіть у теорії можуть виникнути складності.

Згадайте Васю з початку статті, який нічого не знав про фантомне живлення і через відсутність підказок інтернет-магазин втратив постійного покупця. Якщо сумніваєтеся, ставити підказку чи ні — ставте. Для тих хто розбирається в темі це не зашкодить, а зацікавлених новачків виручить.

Онлайн-чат без менеджера

Продаж будь-якого товару пов’язаний з нюансами, які не можна розкрити за допомогою запрограмованого чат-бота, що вміє давати відповіді на часті питання. Про ці нюанси має розповідати жива людина — менеджер. Якщо у когось з користувачів виникне питання і у вас на сайті не буде живого консультанта, то практично завжди замовлення буде залишене в тому місці, де цей консультант працює.

Крім того, коли менеджер наживо спілкується з зацікавленим користувачем, то у нього є можливість збільшувати середній чек за рахунок рекомендації супутніх товарів. Працює на кожному четвертому покупцеві!

Немає інформації про кількість доступного товару

Уявіть таку ситуацію: велика IT-компанія відкриває новий офіс і купує в нього сорок 2К моніторів Dell P2418D. Представник IT-компанії переходить на сайт інтернет-магазину → оформляє замовлення → отримує накладну із зазначенням точного терміну доставки і відштовхуючись від цього терміну оголошує співробітникам про дату початку роботи в новому офісі.

Якщо компанії потрібно сорок 2К моніторів Dell P2418D, то їм важливо знати, чи можуть вони купити таку кількість товару в одному місці. Зазвичай оптова купівля обходитися дешевше.

На наступний день менеджер інтернет-магазину починає збирати замовлення і з’ясовується, що вказаної кількості моніторів на складі немає: потрібно сорок штук, а є тільки десять. Менеджер передзвонить замовнику і оголошує про проблему. Представник IT-компанії скасовує замовлення, оскільки у нього є корпоративний стандарт, правилами якого дозволяється використовувати лише вказаний тип моніторів. Крім того, працівникам, які вийшли раніше терміну, доведеться платити неустойку за кожен день, коли вони виходять на роботу і не можуть виконувати свої обов’язки через відсутність монітора.

Нескладно здогадатися, що в інтернет-магазині від цієї компанії більше не буде жодного замовлення. Наш приклад умовний, проте він показує, яке значення може мати інформація про кількість доступного товару. Майте це на увазі при проектуванні карток товару на власному сайті.

Немає даних про доставку та способи оплати

Тарифи перевізників разом з комісією платіжних сервісом можуть додати до первісної вартості замовлення до 15%: вибрали товар на 100 $ → отримали до оплати 115 $. Через подібне важливо прописувати всі служби доставки і всі платіжні системи, які підтримує інтернет-магазин:

1. Якщо вибір великий, то користувач зможе підібрати оптимальний тариф і час доставки. Можна переплатити і отримати товар швидше або навпаки — довше чекати і заощадити.
2. Якщо вибору немає або він обмежений, то користувач заздалегідь буде знати про комісії і не буде пред’являти претензії під час отримання товару.

Завдання власника інтернет-магазину — детально проінформувати користувача, який самостійно буде вирішувати, що робити далі. Якщо потрібної інформації не буде, то є ймовірність втратити постійного покупця.

Немає листа підтвердження

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

Щоб цього уникнути — досить кожне замовлення дублювати на електронну пошту. Тоді не буде приводу для суперечок.

Контент

Проблеми з граматикою

Будь-який текстовий матеріал повинен публікуватися без помилок і друкарських помилок. Якщо за цим не стежити, то це може відбитися на іміджі і довірі покупців до ресурсу. Логіка тут така: якщо у власників сайту немає часу перевірити свої тексти, то де вони знайдуть час на якісне виконання клієнтських замовлень.

Тут варто зробити важливе зауваження: від помилок не застраховане навіть велике видавництво, де кожне речення перевіряється армією коректорів. Тому граматичні помилки неминучі і для вирішення цієї проблеми потрібно виконувати два завдання: по кілька разів перевіряти контент перед публікацією і стежити за відгуками, де користувачі будуть критикувати ваш матеріал за безграмотну подачу. Побачили критику у відгуках — подякуйте коментатору і відредагуйте текст.

Неактуальна інформація

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

Якщо розцінки і інформацію про себе не оновлювати, то у клієнтів формується неправильне очікування: розраховували замовити візитки за 100 $, а мінімальна ціна ще півроку тому зросла до 200 $. Конверсія сайту падає, так як це дратує, викликає недовіру і стає стимулом для того, щоб ніколи не користуватися послугами вашої компанії.

Якщо з якихось причин швидко оновити інформацію не виходить — на час закрийте сторінку з неактуальними даними і на її місці опублікуйте контакти менеджера. Нехай менеджер спілкується з клієнтами і дає усні консультації.

Неякісний текстовий контент в блозі

Блог — це інструмент, який повинен працювати на користь сайту. Тому будь-який контент, який не допомагає це робити, не здійснює корисну дію, буде вважатися неякісним. Наприклад, якщо сайт присвячений продажу газонокосарок, то і блог повинен бути присвячений продажу газонокосарок: клієнт приходить на сайт → сумнівається у виборі тієї чи іншої моделі газонокосарки → переходить в блог і читає огляди → отримує необхідні відповіді → робить замовлення або звертається за консультацією. Це якісний контент.

А тепер уявіть, що клієнт переходить в блог і замість лайфхаків з вибором газонокосарок він побачить тільки фото милих песиків на фоні свіжоскошеної трави. Це неякісний контент, оскільки фото не допомагають вибрати газонокосарку та всю потрібну інформацію ваш потенційний клієнт піде шукати у конкурентів.

Відсутність обов’язкових сторінок «Про нас» і «Контакти»

Сторінка «Про нас» — це єдине місце на сайті, де компанії доречно хвалити себе і розповідати про свої досягнення. На цій сторінці важливо показати, чим ви відрізняється від конкурентів і чому клієнтам вигідно співпрацювати з вами. Якщо сторінки «Про нас» немає або її складено формально, то це викликає недовіру.

Щоб зробити корисну сторінку «Про нас» — підготуйте відповіді на такі питання: хто ви, яка у вас глобальна місія, чим займаєтеся і за яку роботу не беретеся, в чому ваша фішка, в яких нестандартних випадках можете допомогти і якими нагородами можете підтвердити свою кваліфікацію.

Сторінка «Контакти» — це те місце, куди куди будуть приходити всі користувачі, що бажають зробити замовлення або уточнити інформацію на сайті. Якщо у них не буде можливості цього зробити, то вони просто знайдуть всі відповіді у конкурентів.

Занадто довга сторінка товару та/або категорії

Якщо ви готуєте матеріал для блогу, то тут немає ніяких обмежень за обсягом і по довжині сторінці. Пишіть стільки стільки, скільки потрібно. Головне, щоб стаття вийшла корисною для читача. Коли мова йде про сторінку з пропозицією про покупку товару, то довгий формат сторінки тут не доречний: користувачі втомлюються, не доскролюють сторінку, втрачають інтерес і нічого не купують. У результаті залишаються тільки ті користувачі, які купили цей товар і без опису.

Занадто довга сторінка з пропозиціями товарів:

Винятком є ситуації, коли продається складний багатокомпонентний товар, кожна частина якого потребує докладного пояснення. У цьому випадку сторінку можна перевантажувати інформацією і робити будь-якої довжини.

Є сторінка, але немає опису товару

Якщо інтернет-магазин запускається на швидку руку, то багато його сторінок залишаються незаповненими. У кращому випадку є фото, короткий перелік характеристик, ціна та телефон, в гіршому — немає взагалі нічого. Коли немає опису товару, то відвідувачу складно зрозуміти, що перед ним таке і чому це варто купувати. В цьому випадку навіть при низькій ціні ваш потенційний клієнт спробує перейти до конкурентів, на сайтах яких наведено порядок і які докладно розповідають про свої товари.

В деяких випадках весь текстовий опис допускається замінити видеообзорами. Однак навіть при наявності відео додавати хоча короткий перелік основних характеристик потрібно: користувач подивився відеоогляд → пройдеться по основних моментах текстового опису → прийме рішення про покупку. Без текстової шпаргалки приймати рішення складніше.

Непродумана структура картки товарів

Картка товару — це одна із сторінок інтернет-магазину, що розповідає про всі характеристики товару. Продумана картка товару складається з двох версій: короткої і розширеної. У короткій картці перераховуються тільки найпопулярніші і важливі характеристики, на основі яких користувачі вибирають товар. У розширеній картці зазначаються всі технічні дані, що стосуються даного товару.

Якщо у картки буде непродумана структура, то вона буде обмежена лише коротким або розширеним описом. Якщо буде тільки короткий опис, то це буде відсівати досвідчених користувачів, яких цікавлять деталі. Якщо буде тільки розширений опис, то підуть новачки, яких злякають деталі.

Відсутність заголовків і підзаголовків

Заголовки і підзаголовки виконують відразу кілька важливих функцій: вони розповідають про текст і де в цьому тексті знаходиться потрібна інформація.

Якщо не розбивати текст на заголовки і підзаголовки, то читач побачить довге простирадло букв. Зчитувати з екрана таке простирадло незручно, тому з більшою ймовірністю він покине ваш сайт і не зробить жодної покупки. Щоб виправити ситуацію — завжди подавайте інформацію шматочками. Так працює краще .

Непродумані назви заголовків і підзаголовків

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

Якщо у читача немає вагомої причини вивчати ваш контент, то без продуманих заголовків і підзаголовків він цього робити точно не буде: завжди легше закрити сторінку, ніж розбиратися в її вмісті. Тому під час проектування статті завжди думайте про діагональне читання.

Маскування корисного контенту

Якщо після діагонально читання користувач вирішив вивчити вашу статтю, то в першу чергу він зверне увагу на перший абзац. У цьому абзаці повинні бути опублікована основна ідея всієї статті. Якщо цього не буде, то значна частина користувачів піде і не буде дивитися залишився текст.

Намагайтеся завжди виносити головну думку в перший абзац. Після додавайте аргументи. Якщо робити навпаки, то конверсія сайту буде знижуватися.

Ігнорування списків

Список — це інструмент, який виконує дві функції: допомагає впорядкувати однорідну інформацію і спрощує читання статей на сайті. Якщо користувач бачить список і розуміє про що він, то читати цей список не обов’язково. Якщо списку не буде, то доведеться читати все підряд.

Не ігноруйте списки і додайте їх там, де йде перерахування кількох однорідних сутностей. Якщо важливий порядок — користуйтеся нумерованим списком. У всіх інших випадках можна обійтися маркованим списком.

Що далі

Крок №1. Завантажте чек-лист з перерахованими помилками в дизайні і юзабіліті.

Крок №2. Перевірте свій сайт і відзначте всі моменти, які потребують поліпшення.

Крок №3. Приберіть зазначені проблеми і замірюйте конверсію сайту.

А з якими помилками в дизайні і юзабіліті стикаєтеся особисто ви? Діліться досвідом в коментарях.