Взаємозв'язок UX та оптимізації: як це правильно робити (Частина II)

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


(початок статті

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


UserTesting.com
image
Більш грунтовний тест користувацького досвіду можна зробити за допомогою UserTesting.com. Тести платні за $35 за тестування. Вони дають більш глибоке і серйозне рев'ю порівняно з Механічним Турком. Вище цінник, але більше і обсяг інформації: ви даєте вашим тестувальникам завдання і просите дати вам об'ємний фідбек. Це може бути надмірною у випадку якщо ви хотіли б просто спробувати невеликий шматок функціоналу на одній-єдиній сторінці. Але якщо ви хочете перевірити навігацію та архітектуру вашого сайту, то це, можливо, кращий варіант.

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

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

Вартість: $49 за тестера (їх знадобиться кілька).
Бонус: Завдяки тому, що вбудовувати шматки коду на сайт не потрібно, в даному випадку ви можете провести тестування і на сайті-конкурента! Для цієї мети можна використовувати як Feedback Army, так і UserTesting.com для того, щоб дізнатися, що притягує чи відштовхує аудиторію на сайтах конкурентів. Таким чином ви краще дізнаєтеся з ким ви змагаєтеся і крім того отримаєте можливість впровадити на своєму сайті, що тестувальники схвалять на іншому сайті.


Кількісні показники:


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

  • Заклики до дії насправді… не закликають людей до дії
  • Відвідувачі плутаються в навігації і не можуть прийти на потрібну сторінку
  • Читачі переглядають всю сторінку до кінця
Тоді подивіться на:

  • Який відсоток відвідувачів клікнув на заклик до дії (якщо для однієї сторінки передбачено кілька закликів до дії, спробуйте задіяти Event Tracking, щоб збирати показники окремо).
  • Visitor Flow репорт, який покаже як користувачі пересуваються по сайту, а також Site Search репорт, який показує, скільки відвідувачів клікнули на пошук по сайту
  • Наскільки глибоко користувачі скроллили по сторінці — для цього використовуйте Events на певних ділянках сторінки.


За: Це безкоштовно! І, найімовірніше, ця система аналітики вже встановлена на ваш сайт.

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

Вартість: Безкоштовно!


Як запропонувати рішення



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

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

Shipping tool і MS Paint


Я розумію, що немає дизайнерів, які використовують Paint. Але я дитя 90-х, і це був мій перший дизайнерський софт, тому мені легше всього використовувати саме його. Насправді ви можете використовувати будь-яку програму, придатну для цих цілей, яку вам зручно. Суть в тому щоб руки не опускались, якщо ви не володієте Dreamweaver або Photoshop.

Коли мені потрібно зробити макет сторінки, який буде сильно відрізнятися від поточного її варіанту, я використовую MS Shipping Tool для того, щоб зробити знімок сторінки в її поточному стані, а потім змінюю її частини. За допомогою виділення елементів можна міняти їх місцями. Якщо в Paint немає потрібної мені опції, я використовую інші продукти MS Office:

  • Для додавання тексту і різних форм я часто використовую Word, т. к. там є цілий набір форм, які можна заповнити текстом.
  • Для зміни кольорів і додавання прозорих кольорів я використовую PowerPoint тому що наскільки я знаю це єдиний продукт MS Office де можна це зробити.
  • Для зміни тексту я просто змінюю HTML в Chrome (див. секцію нижче), а потім копіюю те, що вийшло в свій шаблон в Paint.


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

Як переписати HTML


Як я вже казала раніше, це краще всього підходить у випадку якщо сторінку потрібно лише модифікувати на базі поточного дизайну. Ви можете завантажити HTML-код сторінки, змінити і потім відкрити його знову, або використовувати функцію перегляду елемента коду сторінки в Chrome. Внесені зміни досить заскринить. Головну сторінку Moz я змінила таким чином за 15 секунд:

image

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

Це можна зробити в Firefox а також в одному з розширень для нього — Firebug.


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

Як протестувати рішення



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

Якщо ви або девелопер може створити кілька варіантів сторінок:


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

За: Безкоштовно і вже інтегровано з вашої аналітикою.

Проти: Доведеться створити власний набір сторінок для тесту.

Вартість: Безкоштовно!


Якщо можливість співпрацювати з розробником обмежена:


Optimizely
image

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

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

За: Легко використовувати, відносна самостійність маневру

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

Вартість: В залежності від вашого місячного трафіку, ціна починається від $19/місяць.


Формулюйте рішення!



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

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

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.