0-800-759-750
Ми на зв'язку с 7:00 до 24:00
office@elit-web.ua

Як дизайн інтернет-магазину впливає на його просування

25 березня 2021
1955
0
Поділіться
Зміст

    Навіщо інтернет-магазину SEO-просування? На перший погляд, відповідь очевидна: щоб вийти у топ пошукової видачі. Так? Не зовсім! Вихід у топ - це ще не гарантія активного зростання кількості клієнтів, кількості замовлень та конверсії. Є сотні і навіть тисячі сайтів, які за рядом ключових запитів перебувають у топі, але при цьому вони мають низьку конверсійність. Чому так? Відповімо одним словом: дизайн.

    Сьогодні ви дізнаєтесь, наскільки сильно впливає дизайн інтернет-магазину на його просування та конверсію, що таке UX/UI, як пошуковики насправді бачать ваш сайт і що з цим робити. Буде цікаво!

    навіщо інтернет-магазину SEO-просування

    Дизайн інтернет-магазину: UX та UI

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

    В інтернеті досить багато складних описів UX/UI-дизайну, які заплутують користувача. Ми ж постаралися дати максимально чіткі, лаконічні та зрозумілі визначення.

    Що таке UX Design інтернет-магазину?

    що таке UX Design інтернет-магазину

    UX Design (User Experience) - "досвід користувача". Його суть не в тому, як виглядає сайт, а наскільки він зручний для сприйняття. UX Design відповідає за розташування меню, кнопок, банерів та інших елементів сторінки. Крім того, UX — це «шлях користувача» з пункту А до пункту Б. Сайт, завдяки проробленому UX-дизайну, буквально веде людину за руку до цільової дії — замовлення товару чи послуги.

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

    Що таке UI Design інтернет-магазину?

    що таке UI Design інтернет-магазину

    UI Design (User Interface) - "інтерфейс користувача". Це безпосередньо графічні деталі: зовнішній вигляд кнопок та іконок, анімації, шрифти та інше. Все, що користувач бачить перед собою на екрані. Ключова мета UI-дизайну - естетичний зовнішній вигляд сайту та відповідність фірмовому стилю. З його допомогою створюються акценти на цільові дії (кнопки «Купити»/«Зателефонувати), викликаються емоційний відгук та довіра користувачів до компанії.

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

    Як пошукові системи бачать дизайн сайту?

    Ніяк не бачать... Сказали б ми, якби не були досвідченим рекламним агентством.

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

    • поведінкові;
    • посилальні;
    • доменні;
    • текстові;
    • технічні;
    • комерційні.

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

    Дізнайтесь як дизайн впливає на SEO Вашого інтернет-магазину

    Адреса сайту

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

    Core Web Vitals

    Core Web Vitals

    Core Web Vitals - це набір факторів, які враховує Google при оцінці взаємодії користувача з сайтом:

    1. Швидкість завантаження сторінки.
    2. Можливості та зручність взаємодії з ресурсом.
    3. Стабільність вмісту.

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

    Page layout

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

    Page layout

    Mobile-first

    Mobile-first означає первинну розробку версії сайту під мобільні пристрої, а надалі її розширення для стаціонарних комп'ютерів та ноутбуків. При цьому в мобільній версії повинні бути всі ключові елементи контенту: текст, зображення з описом alt, відео, інше. В останні роки Mobile-first стає загальноприйнятим стандартом, хоча вперше про це серйозно заговорили далекого 2010 року на Всесвітньому конгресі мобільних пристроїв.

    Mobile-first

    Швидкість завантаження сторінок

    Чим швидше завантажується ваш сайт, тим краще. Відмінною швидкістю вважається 1-2 секунди. Допустимою — 3 секунди. Неприпустимою – від 3 секунд і більше. На цей показник впливає безліч факторів: чистота HTML-коду, розміри та формат зображень, JavaScript та інше.

    А тепер погляньте. Ми перевірили швидкість завантаження головної сторінки інтернет-магазину Розетка за допомогою сервісу LOADING.express. І результати неоднозначні:

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

    Час повного завантаження – 8,6 секунди. Це дуже багато. Як і час виконання JavaScript – 5829 мс (оптимально – до 2000 мс). Плюс максимальна затримка введення – 908 мс, хоча в ідеалі вона не повинна перевищувати 300 мс.

    Для порівняння погляньте на результати такої самої перевірки іншого інтернет-магазину — «Фокстрот». Різниця очевидна.

    швидкість завантаження сторінок інтернет-магазину

    Зверніть увагу! Це лише орієнтир, і перевірку у разі ми здійснювали з допомогою лише ресурсу. Тому сприймати результати як на 100% об'єктивні не варто.

    Що реально може оцінити пошуковик

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

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

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

    Як UX-дизайн впливає на SEO просування

    Оптимізація дизайну сайту – це комплексний список завдань, над якими має працювати не лише дизайнер. Погляньмо на кілька прикладів того, як UX-дизайн впливає на SEO-просування і чому потрібно приділяти увагу не тільки контенту.

    Архітектура сайту

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

    Перед вами один із прикладів архітектури сайту:

    архітектура сайту

    Зручна структура каталогу

    Каталог — це для багатьох відвідувачів інтернет-магазинів відправна точка пошуку потрібних їм товарів. Він має бути зручним, зрозумілим та функціональним. Плюс повинен містити додаткові елементи (необов'язково всі):

    • смарт-фільтри для швидкого вибору продукції;
    • сортування за різними параметрами: ціною, популярністю, новизною;
    • пагінація та підвантаження;
    • вкладеність категорій та підкатегорій;
    • прев'ю товарів;
    • наклейки та інше.

    Для кращого розуміння погляньмо на кілька прикладів.

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

    зручна структура каталогу

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

    функціональний каталог

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

    головна сторінка - недоліки

    Це приклад абсолютно нераціонального використання простору. До того ж неможливо навести курсор на категорію «Велосипеди» і відразу отримати список підкатегорій, що випадає: «MTB», «Шосе», «Дитячі» і т. д. А це має бути в сучасному онлайн-магазині.

    Зручний підбір товару

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

    1. Передбачуване розташування основних елементів інтерфейсу.
    2. Швидкий доступ до кнопок замовлення, порівняння товарів, фільтрів та іншого.
    3. Клікабельні "хлібні крихти": "Головна", "Каталог", "Про нас", "Послуги" і так далі.

    Знову ж таки, звернімося до прикладів: інтернет-магазин «Ельдорадо». Є практично все для зручного та швидкого вибору товару: фільтри, сортування, порівняння і т.д. Крім того, на картках товарів, крім ціни, є інформація про знижки, можливості покупки в кредит, кнопки порівняння та інше. Чим більше корисних даних, тим краще.

    зручний підбір товару

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

    відображення елементів

    Користувальницький досвід у другому випадку буде гіршим, а кількість відмов — вищою. Відповідно, SEO та дизайн сайту в комплексі працюють погано.

    Повнота інформації у картках товарів

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

    Ось базовий список того, що має бути у ваших картках товарів:

    1. Назва за формулою: «Тип товару – Назва (бренд) – Короткі характеристики.
    2. Візуал: живі фото та відео.
    3. Детальна інформація про товар: характеристики, властивості, можливості використання та інше.
    4. Ціна та інформація про можливість покупки в кредит.
    5. Варіанти доставки.
    6. Оцінки та відгуки.
    7. Кнопки «Додати до вибраного» та «Порівняння».

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

    повнота інформації у картках товарів

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

    Читайте також

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

    Експрес-чек-лист для перевірки usability сайту

    Ми підготували невеликий чек-лист із SEO та дизайну як важливих компонентів usability сайту:

    1. Візуальна привабливість та грамотне поєднання кольорів – в ідеалі не більше чотирьох.
    2. Жодного нагромадження текстової та графічної інформації.
    3. Коректне відображення всіх елементів на різних пристроях, швидкість завантаження сторінок – 1-2 секунди.
    4. Єдиний стиль для всіх сторінок з хедером, слоганом та меню.
    5. Типове розташування основних елементів інтернет-магазину: меню каталогу, карток товарів, «Кошики», кнопки для зв'язку з менеджером.
    6. Компактний багаторівневий каталог товарів, який вимагає від користувача зайвих дій.
    7. Коректно оформлені картки товарів.
    8. Відсутність неробочих посилань, недоступних зображень, неклікабельних кнопок тощо.
    9. Захищений протокол HTTPS.

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

    Чи впливає UI-дизайн на SEO просування інтернет-магазину

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

    Комерційні фактори

    Для SEO дизайн сайту забезпечує три головні пункти:

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

    Закріпимо : дизайн інтернет-магазину має бути привабливим, зрозумілим та інтуїтивним для відвідувача сайту. Інакше користувач просто піде.

    Чинники довіри

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

    1. Контактні дані компанії
    2. Форма зворотного зв'язку.
    3. Чітко описані умови гарантії, повернення товару та сервісного обслуговування.
    4. Ліцензії, сертифікати та дипломи.
    5. Юридичні реквізити та інше.

    Ваша компанія має бути обличчя. І наскільки воно буде привабливим для користувачів залежить від UI-дизайну.

    Виявляємо проблемні місця дизайну, які негативно впливають на SEO та конверсію

    Перелічимо 7 головних помилок UI, які знижують конверсію:

    1. Неадаптивний дизайн та некоректне відображення веб-ресурсу на мобільних пристроях.
    2. Непророблені з погляду дизайну елементи: дрібні шрифти, погане поєднання кольорів, злиття елементів сторінки з тлом тощо .
    3. Відсутність СТА-кнопок із мотивацією або їх непророблений веб-дизайн: розміри, шрифти, кольори та інше.
    4. Стокові фотографії або рендер замість реальних знімків.
    5. Відсутність Social Proofs : відгуків, запитань та відповідей.
    6. Перевантаженість сторінки важкими анімаціями та ефектами, які уповільнюють завантаження сторінки.
    7. Надмірно яскравий та недоладний дизайн, який тільки відштовхує та погіршує сприйняття контенту.

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

    Як різні парадигми дизайну впливають на SEO?

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

    Паралакс

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

    паралакс

    Анімації

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

    анімації

    Нескінченна прокручування

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

    нескінченна прокручування

    Фіксоване меню

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

    фіксоване меню

    HTML5

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

    HTML5

    Інфографіка

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

    інфографіка

    Адаптивний дизайн

    Для SEO дизайн сайту та його адаптивність дійсно важливі. Інтернет-магазин має коректно виглядати, залишатися зручним та функціональним, незалежно від того, яким пристроєм користується ваш потенційний клієнт: комп'ютером з величезним 4К-монітором або старим смартфоном, діагональ якого – 4 дюйми. Адаптивний дизайн дозволяє унеможливити створення різних версій сайту під різні типи пристроїв — сторінка адаптується самостійно.

    адаптивний дизайн

    Коментар нашого експерта: які помилки у дизайні негативно впливають на SEO-просування інтернет-магазину

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

    Можемо розглянути кілька популярних помилок:

    1. Відсутність досліджень та створення дизайну «за відчуттями».

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

    відсутність досліджень та створення дизайну - за відчуттями

    2. Прагнення закрити все «повітря» - незайнятий простір.

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

    прагнення закрити все повітря

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

    незайнятий простір

    недостатньо важливої інформації

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

    3. Непророблена мобільна версія.

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

    непророблена мобільна версія

    4. Достаток яскравих кольорів.

    Якщо яскраві кольори не є частиною вашого корпоративного стилю, краще відмовтеся від їх надмірного використання. Іноді це виправдано:

    достаток яскравих кольорів

    А іноді – ні:

    яскраві кольори

    5. Відверто застарілий дизайн.

    Як кажуть, ласкаво просимо на початок двохтисячних. Такий дизайн жахливий:

    відверто застарілий дизайн

    застарілий дизайн

    старий дизайн сайту

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

    Олександр Кантур , SEO Team Lead

    Висновки: дизайн чи SEO? Що ж допоможе вашому інтернет-магазину підвищити продажі?

    Дизайн без SEO-просування некорисний, а SEO без дизайну - безглуздо. Можливо, це занадто перебільшено, але загалом правда. Обидва компоненти важливі. І для досягнення найкращих результатів працювати потрібно комплексно.

    Ми в Elit-Web знаємо, що мало досягти зростання трафіку, важливо ще й нарощувати конверсію. А тому SEO-просування та дизайн інтернет-магазину для нас — дві складові єдиного цілого у підході до кожного сайту. Як наслідок – ми досягаємо не просто збільшення трафіку, а й реального зростання продажів. А це найголовніше для клієнта!

    FAQ

    Що таке Core Web Vitals?

    Core Web Vitals - це набір факторів сайту, які враховує Google при ранжируванні: відтворення контенту, час до першої взаємодії з контентом, коректність відображення всіх елементів.

    Що таке Page layout?

    Page layout – мінімізація або повне виключення реклами на першому екрані сайту. Її наявність негативно позначається на ранжируванні та потребує оптимізації дизайну сайту.

    Що таке Mobile-First?

    Mobile-first - принцип, який використовується при створенні веб-сайтів, - "від мобільної версії - до десктопної". Раніше здебільшого використовувався зворотний принцип.

    Що таке UX Design?

    UX Design - "досвід користувача", побудова логіки та структури сторінок, розташування різних елементів на сторінці. UX Design стає якимось «кістяком», на який надалі накладається UI Design.

    Що таке UI Design?

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

    У Вас залишились запитання?
    Наші експерти готові відповісти на них.
    Залишіть ваші контактні дані.
    Будемо раді обговорити ваш проект!
    Отримати консультацію
    Наш менеджер зв'яжеться з Вами найближчим часом