П’ять помилок у дизайні інтернет-магазину, які вам дорого обійдуться

1 вересня 2020, 17:00

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

Помилка 1. Дизайн відволікає від контенту

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

Відео дня

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

Головна сторінка інтернет-магазину через фон сприймається як велика бордова пляма (Фото: Анабель)
Головна сторінка інтернет-магазину через фон сприймається як велика бордова пляма / Фото: Анабель
Білий фон не відволікає від головного — товарів і товарних категорій (Фото: Byurse)
Білий фон не відволікає від головного — товарів і товарних категорій / Фото: Byurse

Помилка 2. Неправильна розстановка акцентів

Важливо привернути увагу покупця. За допомогою правильної розстановки акцентів допоможіть вирішити його головне завдання — знайти і купити відповідний товар.

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

Ця сторінка — суцільна яскрава різнобарвна пляма. Потрібно витратити певний час, щоб зрозуміти, що це банери зі знижками і категоріями каталогу (Фото: Пустунчик)
Ця сторінка — суцільна яскрава різнобарвна пляма. Потрібно витратити певний час, щоб зрозуміти, що це банери зі знижками і категоріями каталогу / Фото: Пустунчик

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

Непоганий приклад сторінки з правильно розставленими акцентами. Це популярний бренд, тому вони перш за все показують акційні пропозиції (Фото: Master Zoo)
Непоганий приклад сторінки з правильно розставленими акцентами. Це популярний бренд, тому вони перш за все показують акційні пропозиції / Фото: Master Zoo

Помилка 3. Неякісні віжуали

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

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

Чайник на фото погано вирізаний і вставлений на чорний фон. Плюс мало фотографій і опис товару не розкриває всі особливості (Фото: Rozetka)
Чайник на фото погано вирізаний і вставлений на чорний фон. Плюс мало фотографій і опис товару не розкриває всі особливості / Фото: Rozetka
У цьому магазині якісні фото з різних ракурсів, тому вища ймовірність, що товар куплять (Фото: Gard)
У цьому магазині якісні фото з різних ракурсів, тому вища ймовірність, що товар куплять / Фото: Gard

Помилка 4. Явні вади в UX-дизайні

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

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

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

poster
Дайджест головних новин
Безкоштовна email-розсилка лише відбірних матеріалів від редакторів НВ
Розсилка відправляється з понеділка по п'ятницю
Проблема цього магазину в дуже незвичайному дизайні. Після натискання кнопки Купити, з'являється незвичний чорний блок з цифрами і не дуже зрозумілими вимогами. А щоб перейти саме в кошик, потрібно помітити кнопку, яка з'являється у верхній частині екрану (Фото: zeus ceramica)
Проблема цього магазину в дуже незвичайному дизайні. Після натискання кнопки Купити, з'являється незвичний чорний блок з цифрами і не дуже зрозумілими вимогами. А щоб перейти саме в кошик, потрібно помітити кнопку, яка з'являється у верхній частині екрану / Фото: zeus ceramica
У цьому магазині все набагато простіше і звичніше (Фото: Street Fassion)
У цьому магазині все набагато простіше і звичніше / Фото: Street Fassion

Помилка 5. Ігнорування мобільної версії

Спільне дослідження LivePage і Хорошоп показало, що в 2019 році більше 60% клієнтів інтернет-магазинів здійснювали покупки з мобільних пристроїв. Ці цифри — мовчазний докір всім, хто приділяє мобільній версії свого інтернет-магазину недостатньо уваги. Мобільна версія сьогодні важливіша десктопної, хоча багато хто поки що цього не розуміють. Наприклад, клієнти нашої платформи відразу отримують і десктопну, і мобільну версію інтернет-магазину. І незважаючи на еру mobile first, багато хто з них навіть не перевіряють, як виглядає їх сайт на екрані смартфона.

Дослідження Якоба Нільсена показали, що користувачам потрібно 10-20 секунд, щоб прийняти рішення про вихід з сайту. Це особливо критично на мобільній версії, тому що відволікаючих чинників набагато більше: прийшло повідомлення про новий лайк, хтось написав у месенджер тощо.

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

Зліва сайт, що не адаптований під мобільні пристрої. Користуватися ним не дуже зручно. Праворуч — окрема мобільна версія сайту. Вона виглядає непогано, хоча кнопку на банері варто було б зробити більшою. (Фото: Зліва - buy.ua, праворуч - frantini.ua)
Зліва сайт, що не адаптований під мобільні пристрої. Користуватися ним не дуже зручно. Праворуч — окрема мобільна версія сайту. Вона виглядає непогано, хоча кнопку на банері варто було б зробити більшою. / Фото: Зліва - buy.ua, праворуч - frantini.ua

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

Показати ще новини
Радіо НВ
X