Слабкі місця UI/UX та як дизайнеру їх виправити

Усім привіт, мене звати Олена Мягка, працюю в EVNE Developers на посаді менеджера з маркетингу. Я продовжую серію статей для дизайнерів початківців, що бажають стати професіоналами своєї справи. Сьогодні я хочу показати, що помилки в дизайні можуть інколи призводити до страшних та катастрофічних наслідків. Звісно, некоректна форма на сайті магазину не призведе до людських жертв, а ось некоректний інтерфейс медичного обладнання, може.

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

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

Що таке UI/UX

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

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

Під час створення інтерфейсу варто рівноцінно приділити увагу як UI, так і UX. Разом вони відіграють важливу роль для створення успішного та ефективного інтерфейсу.

«Ефективний» не завжди означає «красивий». Оскільки відчуття краси — поняття суб’єктивне, то зручніше орієнтуватися не на це відчуття, а на те, які бізнес-цілі стоять під час розробки продукту. Час від часу такі цілі можуть змінюватися, що, відповідно, призводить до потреби у редизайні.

Найбільш розповсюджені помилки в UI/UX

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

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

Некоректний дизайн не завжди залежить від того, наскільки сучасним є інтерфейс.

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

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

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

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

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

Це можна назвати найдорожчою помилкою інтерфейсу

Вплив слабкого UI та UX на людське життя

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

Кількість і розташування елементів інтерфейсу

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

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

Чіткість і дружність

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

Ще одна трагічна помилка дизайну інтерфейсу з продуктом у сфері охорони здоров’я. Апарат Therac-25 для рентгенівського та магнітного дослідження мав незрозумілий інтерфейс оператора.

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

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

Адаптивність до мобільної версії

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

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

Запити користувача

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

До прикладу, якщо не обмежити запити цільової аудиторії і забути про потреби бізнесу, можна втратити прибуток, як колись American Airlines. Розробляючи систему планування відпустки пілотів, не вказали обмеження кількості осіб, які можуть піти у відпустку на різдвяні свята. Пілоти обрали одні дати для відпочинку, і виявилося, що 1500 запланованих на той період рейсів взагалі не мають пілотів.

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

Реєстрація і онбординг

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

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

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

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

І ще один наочний приклад, який показує, як введення невірного параметру може вивести з ладу величезну систему. Авіаносець USS Yorktown раптово зупинився, і ніщо не могло змусити його рухатися далі. Судно довелося відбуксирувати до порту.

Причину виявили пізніше — один з членів екіпажу ввів «0» в одному з полів системи. Це призвело до того, що система намагалася розділити інші параметри на нуль і згодом припинила роботу. Уникнути інциденту можна було б, додавши інструкцію або нотифікацію щодо заборонених значень.

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

Етапи створення «правильного» дизайну

Після визначення всіх переваг інтерфейсу, варто подумати про команду.

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

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

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