Аудит юзабіліті сайту okay-cms.com на основі карти кліків

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

За цей час кількість відвідувачів сайту okay-cms.com значно зросла. А ми додали складніший функціонал, який дозволяє не тільки вивчити інформацію про систему, а й спробувати повноцінну демоверсію, скачати CMS на тестовий період, купити ліцензію або доповнення з MarketPlace.

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

Текст аудиту залишили ми залишили без змін, але додали коментарі та примітки там, де визнали за необхідне.

Методологія юзабіліті аудиту

В основі даного підходу лежав традиційний принцип аналізу найбільш клікабельних сторінок сайту.

Ми переглянули список ТОП-10 сторінок, зібрали максимальну кількість кліків на комп'ютерах:

Карта скролінгу показує, що багато сторінок мають взаємодія в перших 40% екрану (на скріншоті - це червоні осередки):

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

Аудит основної версії сайту

Розглянемо кілька сторінок основної версії сайту.

Головна сторінка

Не може не привернути увагу велика кількість кліків по елементу меню «Особистий кабінет», який прихований в розділі «Партнерам»:

Ми рекомендуємо винести його як окрему кнопку на сайті.

Коментар від маркетолога OkayCms:

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

Невелика ремарка, що стосується логотипу на головній:

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

В меню "Демо" подано 2 сторінки:

• демо-магазин Lite;
• демо-магазин PRO.

Насправді компанія ще пропонує 3-й пакет (Pro +), який не представлений в даному списку. Для залучення уваги у одного з них (популярного) можна додати маленький значок (наприклад, )

Коментар маркетолога OkayCms:

Версія Pro + не представлена в списку демоверсий, так як є пакетної послугою. Вона складається з ліцензії OkayCms Pro і додаткових опцій. У неї просто немає демоверсії. Зараз створено окрему сторінку для опису даного пакета і посилання на неї знаходиться у табличці з описом пакетів послуг.

Справа на головній сторінці знаходиться елемент (кнопка), який відкриває вікно для запиту відеопрезентації:

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

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

Можна було б обіграти цей фрагмент і поставити якірні посилання на умови або переваги користування цією CMS-кою.

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

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

Контраст очевидний.

Коментар маркетолога OkayCms:

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

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

Розглядаємо наступний блок з переліком ключових особливостей. Бачимо кліки (користувачі цікавляться змістом), але всі елементи блоку не є розмітки:

Рішенням може бути формат, в якому відбувається уточнення по кожному наведеному тезі.

Те ж стосується і сусіднього елемента - картинки:

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

Нижче на сторінці знаходиться перелік пакетів і послуг:

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

Наступним йде блок з переліком сервісів, з якими інтегрується ця CMS-платформа:

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

Подібним чином можна організувати і посилання з логотипів партнерів:

Тому можна додати посилання з .js з відкриттям в новому вікні або показувати їх відгуки про цю CMS.

Блок з Відеоотзиви, розташований між інформацією про інтеграцію і партнерах, збирає мало кліків (щодо інших кліків на сторінці їх непропорційно мало):

Як бачимо тут - всього 4% кліків доводиться на блок, в якому є і навігація по слайдеру, і 2 відео. Насправді, блок з Відеоотзиви дуже цінний. Його слід підняти вище на сторінці і подивитися, як зміниться відсоток кліків - він однозначно повинен бути вище.

Аналіз футера показує, що найбільш клікабельним елементом є посилання на форум:

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

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

Такий формат вже кілька років вважається малоефективним. Кращим рішенням є використання розумних pop-up форм.

Сторінка з описом функціоналу

Тут, як і на головній, помічаємо, що заклик до дії у вигляді піктограми не є ефективним:

А ось в цій частині сторінки все добре і видно активна взаємодія з елементами:

Сторінка з описом демоверсії

Одним з елементів головного меню є розділ "Демо", до якого увійшли 2 версії - Lite і Pro. Обидві сторінки розповідають про переваги обраної версії, а також, що саме можна оцінити у відкритій демонстраційній версії CMS-платформи.

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

Загальна рекомендація для обох сторінок стосується того, що для відвідувачів пропонується мало інформації, тому вони переходять далі:

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

Краще було б розписати всі функції версії Lite на цій сторінці:

Та ж рекомендація справедлива і для другої сторінки - з описом версії Pro.

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

Сторінка категорії (перелік шаблонів)

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

На цій та подібній сторінці "Доповнення" слід було б розмістити банер або лід-магніт. Зокрема, тут можна додати:

• Прямий банер на категорію з акційною пропозицією;
• Посилання на статті, які стосуються додаткового функціоналу (наприклад, "ТОП доповнень на місяць", "5-ка найкращих доповнень", "Найпопулярніші шаблони" і т.д.).

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

Коментар маркетолога OkayCms:

Щоб сконцентрувати увагу відвідувача на виборі відповідного шаблону, ми не перериваємо його зайвими елементами.

Що стосується фільтрації за ціною. У дизайні передбачені безкоштовні і платні шаблони. Очевидно, що найбільше кліків збирає кнопка "Безкоштовні":

Насправді, було б добре дати хоча б 2 безкоштовних дизайну (насправді є лише 1).

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

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

Ще один нюанс стосується способу сортування "за замовчуванням", який є першим в списку:

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

Коментар маркетолога OkayCms:

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

В елементі сортування було б доречно використовувати хрестик (для скасування обраного типу сортування - якщо є необхідність повернутися до первісного вигляду):

На цій сторінці дуже рідко користуються пошуком:

В якості вирішення можна спробувати замінити текст на "Пошук по шаблонах" і додати приклад як потрібно вводити назву, щоб знайти потрібний шаблон.

Коментар від маркетолога OkayCms:

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

Сторінка порівняння версій

Сторінка порівняння версій дозволяє наочно оцінити відмінності різних пакетів доступу до можливостей CMS.

Можливим рішенням для цієї сторінки є поп-ап з можливістю задати додаткове питання по функціоналу:

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

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

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

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

сторінка доповнення

Доповнення є однією зі сторінок в меню «Маркетплейс».

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

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

Коментар маркетолога OkayCms:

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

сторінка шаблону

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

Для аналізу цього типу сторінок ми активуємо перегляд кліків на всіх сторінках сайту.

Зокрема, ми бачимо, що відвідувачі клацають на посилання розробника:

Проте це посилання не працює.

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

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

Наприклад, як виглядає такий поп-ап:

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

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

Кошик

Наступною в нашому аудиті стала кошик.

Досить дивно було побачити ось це поле:

З огляду на те, що товар є чисто цифровим (шаблони для інтернет-магазину), не зрозуміло для чого дізнаватися адресу замовника. Ймовірно, що це поле було додано автоматично.

Побачили також обов'язкову "капчу":

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

Один з елементів зібрав дуже багато кліків:

При цьому видно, що користувачі просто не розуміють яка з двох кнопок активна? Краще було б додати відповідне питання до полів оформлення:

Стаття блогу

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

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

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

сторінка замовлення

На цій сторінці явно мало кліків:

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

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

висновки:

Завдяки проведеним аудиту ми змогли краще зрозуміти поведінку наших клієнтів на сайті і визначити першочергові завдання щодо майбутніх змін.

Є спірні моменти, які ми проаналізуємо за допомогою A / B тестування і виберемо найкращий варіант.

Незабаром чекайте поліпшення на нашому сайті!