Декілька тижнів тому ми провели веб-семінар під назвою "Аналіз необанків: аудит UX/UI і детальний розбір проблемного сектору з особливим акцентом на стратегію Revolut". У цьому нам допомогли два великих професіонала Feri Muck і Ivan Muck. Ми розглянули Revolut із трьох аспектів: бізнес-стратегія, UX- та UI-дизайн.
Revolut - це британський фінтех-проект. По суті це банк без відділень, усі операції - в однойменному застосунку на смартфоні. Одна з перших переваг Revolut - відсутність комісії при обміні валют, кожен користувач отримує мультивалютну дебетову картку: у зв'язку з цим продукт ще називали "сервісом для мандрівників". Сьогодні це вже не так: компанія пропонує десяток різних послуг, починаючи від типово банківських (фізична картка для оплати покупок/послуг і кешбек) до більш широких (наприклад, трейдинг).
Одна з частин аналізу була присвячена огляду користувацького досвіду Revolut з використанням 10 евристик юзабіліті Якоба Нільсена. Крім цього, я додав ще три аспекти: іконки і мітки; порожні стани і візуалізація даних.
1. Видимість статусу системи
Перша евристика зі списку Нільсена - це видимість стану системи.
Нижче наведено скріншот екрана з юзерфлоу перевірки особистості. І він говорить мені, що буде далі: мені повідомлять, коли перевірку буде завершено. І це добре (управління очікуваннями).
Проте вони розмістили індикатор прогресу, і поки я залишався на цьому екрані, відсоток виконання не змінився. Тому було незрозуміло, що робити в цей момент, чи слід залишатися чекати на цьому екрані, поки індикатор не зміниться на 100%, чи ні? Я можу покинути цей екран?
Цікава особливість полягає в тому, що використання кастомного завантажувача замість звичайного лічильника зменшує час очікування, що сприймається.
Евристика Нільсена №1 "Видимість стану системи"
2. Відповідність між системою і реальним світом
Друга евристика пов'язана з використанням метафор або умовностей реального світу або термінології, знайомої користувачам. Використання ілюстрації картки - це хороший спосіб скорочення, що ґрунтується на наявних ментальних моделях користувачів і попередньому досвіді та знаннях.
Момент, не пов'язаний із другою евристикою, який я б хотів згадати - це встановлення осмисленої візуальної ієрархії - одної з найважливіших речей у дизайні. Я вже отримав свою карту, але на цьому екрані одна з найбільш пріоритетних опцій - "Відстеження доставки". І проблема в тому, що, як ви побачите, я не зміг позбутися її, навіть незважаючи на те, що вже отримав банківську картку багато місяців тому.
Евристика Нільсена №2 "Відповідність системи та реального світу"
І опис опції відстеження доставки обіцяє, що, якщо я натисну на неї, я побачу поточне місце розташування карти. Замість цього мене просять підтвердити адресу доставки, а потім кажуть, що картку мали доставити. Текст кнопки збиває з пантелику: "Got it" означає, що я розумію отриману інформацію, або, що мою картку доставили? І як бачите, позбутися цього варіанта мені не вдалося.
Відстеження доставки за допомогою UX-тексту кнопки, що збиває з пантелику
3. Користувацький контроль і свобода
Третій принцип полягає в тому, що всі процеси перебувають під контролем користувачів. Це означає, що вони повинні мати можливість повністю змінити дії та стани або знайти вихід з ненавмисно скоєних дій. На скріншоті нижче Revolut дозволяє мені скасувати запит на переказ грошей:
Евристика Нільсена №3 "Контроль і свобода користувачів"
4. Послідовність і стандарти
Четверта евристика стосується послідовності та стандартів, простіше кажучи, вам не слід винаходити велосипед. Закон Якоба, названий на честь самого Якоба Нільсена, говорить про те, що користувачі проводять більшу частину часу на інших сайтах, тому на їхні ментальні моделі та очікування щодо того, як щось працює, впливає попередній досвід. PIN-Pad - добре зарекомендував себе патерн, ми використовуємо цю сітку чисел, наприклад, ми не пишемо числа поруч одне з одним, по горизонтальній лінії.
Цікава особливість роботи мозку полягає в тому, що існує так зване декларативне знання. Наприклад, після певного періоду застосування послідовності чисел "2 3 5 6" вона стане процедурним знанням, ми запам'ятаємо патерн "Z". Процедурні знання вимагають менше когнітивної роботи. Тому, коли ви відображаєте числа у випадковому порядку щоразу, коли користувач відкриває застосунок, ви збільшуєте когнітивне навантаження. Звичайно, це продиктовано міркуваннями безпеки, але ви повинні знати про цей недолік.
Евристика Нільсена №4 "Послідовність і стандарти"
5. Запобігання помилкам
П'ята евристика стосується запобігання помилкам. Наприклад, тут Revolut пропонує переконатися, що ідентифікаційну картку додано і її деталі чітко видно. Це попереджає нас, що може піти не так на цьому етапі. І, якщо мене попросять зробити нове зображення (якщо якість недостатня для перевірки особи) це не викличе питань.
Евристика Нільсена №5 "Запобігання помилкам"
6. Розпізнавання замість необхідності згадувати
Наступна евристика стверджує, що набагато простіше зробити релевантну інформацію видимою в інтерфейсі, ніж просити користувачів її запам'ятати. Я вибрав два хороших приклади: один - Revolut показує баланс, коли я надсилаю гроші, мені не потрібно запам'ятовувати його з попереднього екрана, а всередині юзерфлоу транзакції, мені навіть не потрібно сканувати екран, все, що потрібно, відображається на кнопці, що запускає дію.
Евристика Нільсена №6: "Розпізнавання, замість необхідності згадувати"
7. Гнучкість і ефективність використання
Гнучкість і ефективність використання означає, що ви можете розрізняти початківців і досвідчених користувачів. Наприклад, Revolut показав мені низку взаємодій, коли я вперше відкрив сторінку менеджера по роботі з клієнтами (Account Manager). Наступного разу пропозицій не було.
Евристика Нільсена №7 "Гнучкість і ефективність використання"
Ще один приклад цієї евристики - патерн, схожий на Instagram сторіс, він з'явився, коли я відкрив функцію пошуку - він показав, які дії я можу зробити.
Однак я подумав, що це втрачена можливість, оскільки ці екрани не дуже інформативні. Наприклад, один екран стверджує, що пошук - це "найкращий і найшвидший спосіб знайти найактуальнішу інформацію, і навіть відкрити для себе щось нове".
Евристика Нільсена №7 "Гнучкість і ефективність використання"
8. Естетичний і мінімалістичний дизайн
Наступна настанова стосується так званої відносної видимості: якщо в інтерфейсі все вимагає уваги, жоден елемент не буде виділятися. Виникає питання: чи є на цих екранах, наприклад, нерелевантна інформація? Навіщо показувати їх зараз? Ви завжди повинні думати про пріоритети.
Евристика Нільсена № 8 "Естетичний і мінімалістичний дизайн"
9. Допоможіть користувачам розпізнавати, діагностувати й усувати помилки
Ця евристика тісно пов'язана з п'ятою - про запобігання помилкам. Якщо ми не змогли запобігти помилці, ми маємо переконатися, що користувачі помітять, що щось пішло не так, і ми завжди маємо допомогти їм виправити наслідки цих помилок, додаючи речення або показуючи можливі подальші дії.
Я хотів би підкреслити, що це хороша практика, коли Revolut не використовує складну мову або розумні формулювання для пояснення помилки "Немає підключення до Інтернету", і пропонує можливий наступний крок.
Однак цікаво зазначити, що це повідомлення про помилку автоматично зникає через кілька секунд, немає кнопки "Повторити спробу" або "Повторити" - індикатор показує, як довго це повідомлення відображатиметься.
Евристика Нільсена №9 "Допоможіть користувачам розпізнавати, діагностувати та усувати помилки"
10. Довідка та документація
Остання евристика стосується надання допомоги та документації. У кращому разі користувачам ніколи не знадобиться допомога, але, коли вона справді знадобиться, вони зможуть легко її знайти, і вони повинні бути в змозі знайти потрібну інформацію, так що можливість пошуку - найважливіша функція. Ось як можна потрапити в розділ "Довідка" в додатку Revolut: спочатку я вибираю свій профіль, а потім натискаю на іконку зі знаком питання.
Евристика Нільсена №10 "Довідка і документація"
Ще одна цікава деталь, яку я хочу відзначити - це те, що між двома платформами, iOS і iOS Android, є ряд непотрібнихх відмінностей розрізняютьй. По-перше, послідовність розділів різна, на Android розділ про транзакції - третій, в iOS - другий, але щось набагато проблематичніше, в iOS є гарний вторинний текст, який повідомляє користувачам, що вони спілкуватимуться з агентом підтримки, тоді як на Android його немає.
Евристика Нільсена №10 "Довідка та документація"
Я хотів би дати вам кілька порад, що стосуються ще трьох аспектів: використання міток разом з іконками; порожні стани та візуалізація даних.
Іконки + мітки
Якщо ви відкриєте додаток Revolut, перше, що ви можете помітити - це відсутність міток на нижній панелі навігації, тільки іконки. І хоча це, безумовно, робить інтерфейс менш захаращеним, є ризик заплутати користувачів і викликати проблеми з пошуком. Ці іконки не такі вже й очевидні: ви знаєте, що вони означають?
Поруч з іконками немає міток
Якщо ми подивимося на Посібник Material Design, там говориться, що "найкраще поєднувати іконки з текстовими мітками, особливо якщо іконка не має очевидного значення".
Рекомендації Material Design щодо поєднання іконок із текстовими мітками
Існують дослідження, що підтверджують цей аргумент, наприклад, Google виміряв, що, коли вони замінили іконку рукописного введення тексту у вигляді змії, залученість користувачів збільшилася на 25%.
З виступу Анни Потаніної на Google Conversions 2018
Звісно, існують певні випадки, коли іконки може бути достатньо, наприклад, якщо це паттерн, що добре зарекомендував себе, та, якщо це очевидне представлення реального світу.
Але сюрприз! Кілька місяців тому у Revolut були мітки поруч з іконками. Ось чому ви завжди повинні дізнаватися про контекст і, наприклад, проводити інтерв'ю з користувачами або переглядати дані. Ми не знаємо, чому вони прибрали мітки. Можливо вони просто експериментують.
Дизайн-процес - це прийняття безлічі рішень! Скріншот зі статті: How to search all your transactions revolut
Порожні стани
Порожні стани - дуже важлива частина додатків, яку часто не беруть до уваги. Порожній стан має щонайменше 3 можливіх функції функції:
- його можна використовувати як навчальну можливість, щоб ви могли пояснювати речі своїм користувачам;
- це момент, який можна використовувати для невеликого задоволення, наприклад, додавши гарну ілюстрацію і хороший UX-текст;
- по-третє, гарний порожній стан - це не глухий кут, натомість він показує наступну можливу дію.
На скріншотах нижче ми бачимо можливі наступні кроки, вони скеровують користувачів, проте представлена інформація, наприклад, про сховища, не така корисна. І, можливо, замість тексту кнопки "Get", краще було б використати "Discover", оскільки користувач тільки збирається дізнатися, що таке Сховище. Інтерфейс схожий на розмову з користувачем: усе має відбуватися в потрібний час і в певній послідовності.
І, якщо ми подивимося на цю опцію "Люди поруч зі мною", хоча вона пояснює, чому вона запитує дозвіл на отримання місцеположення користувача і які її переваги, вона не пояснює наслідків, якщо я ввімкну її. У користувачів можуть виникнути проблеми з конфіденційністю, тому слід змінити UX-текст.
Приклади порожніх станів усередині застосунку Revolut
Візуалізація даних
Візуалізація даних - дуже важливий аспект, і він також пов'язаний з встановленням осмисленої візуальної ієрархії. Я хочу виокремити позитивний момент: колір - не єдиний візуальний сигнал, що дає змогу порівняти поточні витрати з попереднім періодом, він враховує користувачів із червоно-зеленою колірною сліпотою, тому це важливий аспект доступності.
Однак є й низка проблемних моментів. Наприклад, розмір шрифту праворуч від діаграми занадто малий (і недостатньо контрастності).
Порожній стан марний, а його UX-текст надто роботизований ("Немає даних для відображення"), і це втрачена можливість навчання.
Крім того, збиває з пантелику те, що я можу встановити мету бюджету на вже минулий період часу. Також трохи збивало з пантелику те, що я не міг поміняти валюту, але потім зрозумів, що все автоматично конвертується в угорський форинт.
Приклад візуалізації даних усередині Revolut
Звісно, є ще багато аспектів, пов'язаних з UX, але моєю метою було надати основу і показати відправні точки для аналізу UX.
Ще одна примітка: усі скріншоти зроблені мною (якщо не вказано інше), скріншоти iOS зроблені на iPhone 8, а скріншоти Android - на Huawei P20 Pro.
Переклад статті uxdesign.cc
Топ коментарі (0)