Аналіз юзабіліті програмних продуктів

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

Так, сьогодні мова піде про юзабіліті.

Для початку швидко пригадаємо це поняття. Юзабіліті (від англ. «usability») — зручність користування товаром, його ергономічність, зрозумілість користувачеві. Як бачите, вже в самому понятті чітко видно фокус — на юзера (користувача) продукту. Чому? Саме він є рушійною силою вашого продукту і онлайн-бізнесу, бо тим чи іншим чином приносить вашому сайту або додатку користь. У вигляді відвідувань, залучення інших користувачів і, звичайно ж, у вигляді покупок.

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

Цільові дії

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

Це може бути:

• купівля;

• заявка;

• надання особистих даних;

• шейрінг (залучення нових відвідувачів через соцмережі);

• тривале перебування на сайті;

• завантаження прайс-листа або презентації;

• інші способи зв'язку з сайтом (онлайн консультант, швидкий чат та інше).

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

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

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

Для різних видів програмних продуктів успішна конверсія рахується по різному: від 2-3% для лендінгу з продажу «стрьомних» товарів і до 25-30% у випадку з зрозумілим масовим продуктом і хорошим маркетингом.

На жаль, поняття конверсії так міцно засіло в мізках багатьох власників програмних продуктів, що на інші речі увагу або не звертають зовсім, або роблять це за залишковим принципом. Проста математика: 5% конверсії від 1000 відвідувачів і 20% з 70 — це зовсім різні речі.

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

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

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

Їдемо далі.

Проектування інтерфейсу

Дуже важливим етапом при створенні будь-якого програмного продукту є проектування ресурсу. Що входить сюди:

• Створення загальної структури продукту, карти переходів, навігації;

• Реалізація в рамках продукту максимально простої та ефективної системи досягнення користувачем ЦД. В цьому плані дуже зручним і правильним є попереднє написання юзкейсів (призначених для користувача сценаріїв) для складних взаємодій. Про це ми вже раніше писали в нашому блозі ось тут: Декомпозиція проекту, розподіл ролей і створення юзкейсів;

• Поблочне проектування ключових сторінок;

• Мікропроектування ключових розділів і функціональних особливостей (меню, фільтри, зони реалізації ЦД).

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

Також дуже цікава штука — user pattern-и. Простими словами — це звичні для користувачів схеми і інтерфейси. Це коли ви входите в темну невідому кімнату, але підсвідомо знаєте, де знаходиться вимикач і в який бік відчиняються двері. Важливо, чи не так?

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

Ми також поважаємо подібні штуки. І намагаємося не переучувати відвідувачів Розетки, Алло і інших відомих магазинів на новий лад. «Добрий день, ви знаєте, що вам робити)))»

Дизайн

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

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

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

Якщо ж ви створюєте продукт, який передбачає часте використання (наприклад, соцмережа, гуртовий інтернет-магазин або особистий кабінет служби доставлення), то розклади тут зовсім інші. Дизайн повинен бути максимально чистим і мінімалістичним, кольори спокійними, інтерфейс ненав'язливим. Логіка тут проста як двері: ви ж вдома не клеїте собі шпалери темно-червоного кольору з яскравими агресивними картинками? В даному випадку акцент на комфортність тривалого перебування.

Важливими моментами є вибір правильних шрифтів і колірної гами.

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

Контент

Контент — один з головних болів UI/UX дизайнерів, і не дарма.

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

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

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

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

Магія впихування невпих… кхм, ви зрозуміли, вона, звичайно існує, але теж не всесильна.

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

Є ще момент, який не варто забувати — пам'ятаєте, я вище писав про лінь?)) Так ось, вона нікуди не поділася. Найчастіше люди не люблять багато читати. Картинки, 3Д моделі, віртуальні тури і відоси зараз вирішують набагато більше. Це треба пам'ятати.

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

Важливе — в лівий кут

Ну або в правий, якщо ви живете в світі «справа-наліво».

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

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

Ще один важливий момент: якщо говорити про патерни користувача, розміщувати всі основні елементи і call-to-action (заклики і кнопки по тих самих горезвісних ЦД) потрібно на першому екрані. Більшість ледарів не люблять скролл і не перетравлюють довгі сторінки — їх ми «посадимо» до нас уже на першому екрані.

Спілкування з користувачем

Спілкування і перше враження складається вже в першу хвилину.

По-перше, вам потрібно переконатися в тому, що інтерфейс зрозумілий користувачеві.

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

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

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

Є ще багато подібних, можливо менш глобальних моментів. Все писати відразу не буду, раптом ви теж лінуйтеся читати багато)). Одне ще додам  — ​​там правда дуже важливо.

Проста форма заявки/реєстрації/оформлення замовлення

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

Потрібну інформацію ви отримаєте від користувача потім — в особистому кабінеті або при спілкуванні менеджера сайту з користувачем. А поки дайте йому спокійно натиснути на червону кнопку.

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

Не проблема, це лікується))).

Для цього існує usability-аналіз програмного продукту. По суті, його можна розділити на прямий і непрямий.

З одного боку ми можемо ґрунтуватися на технічних параметрах і цифрах.

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

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

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

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

Про наболіле

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

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

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

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

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

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

У двох однакових за своєю суттю вікнах (оплатити) кнопка назад знаходиться в різних місцях. «Нашяльніке, вгадай де виклюцятеля?»

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

Що робити?

Чи можемо ми зробити ваш продукт більш юзабельним і успішним? Моя відповідь дуже проста і складається з трьох літер:

ТАК.

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