Перш ніж приєднатися до команди в якості дизайнера продукту, я вважав, що в банку є багато красивих темних панелей із діаграмами та багато експертів, які виявляють неймовірні висновки з них. Я навіть думав, що я можу принести на стіл як дизайнер.
Виявляється, що панелі(dashboards) також потрібно проектувати.
Справжня ситуація полягає в тому, що є багато недосконалих панелей(dashboards) із таблицями даних всюди і багато абревіатур, які користувачі не розуміють. Три роки та понад 700 панелей(dashboards) пізніше, ось як я додаю цінність як дизайнер.
1.Фокус
“Чому ми відображаємо лише три біти даних, коли ми можемо просто помістити все (всі 30 стовпців 😉) в одну таблицю?”
Це досить поширений запит: покажіть мені всі дані. Чому це завжди перший інстинкт?
Дашборди часто мають занадто багато таблиць. Коли команди хочуть відображати таблиці з великою кількістю стовпців і рядків, вони часто дають аргументи: “Ми хочемо надати користувачам вичерпний огляд… Користувачам може знадобитися вся ця інформація… Користувачі можуть читати ті стовпці, які їх цікавлять”. Насправді це лише свідчення того, що не було прийнято обґрунтованого рішення щодо того, які дані потрібні користувачам. Також можна почути аргумент “Користувачі звикли бачити таблиці, тому ми не хочемо, щоб вони загубилися вмістом візуалізації даних замість цього”.
Як впоратися з цим: поясніть, що знаходження висновків візуалізації даних вдвічі швидше, ніж спроба просканувати таблицю. Ще краще, підготуйте приклад з таблицею та простим графіком з тією самою інформацією, а потім порівняйте, як швидко можна зробити висновки — ось приклад.
Таким чином, ми завжди повинні замінювати наші таблиці красивими візуалізаціями? Не зовсім.
2.Правильна візуалізація
Спершу давайте поговоримо про зловживання та неправильне використання графіків. Ймовірно, ви помітили, що найпопулярнішими візуалізаціями даних є кругові та donut-графіки. Але їх часто використовують для неправильних потреб, надаючи користувачу неповну чи вводячи в оману інформацію — ризик тут полягає в тому, що користувачі можуть приймати невірні рішення.
Використовуйте кругові графіки, коли користувачам потрібно зрозуміти, які головні категорії (покриття) даного об’єкта. Але якщо їм потрібно порівняти категорії, круговий графік ускладнить їхнє життя — порівнювати розміри секторів категорій не є легкою справою, особливо якщо різниця невелика. Так що для порівняння категорій використовуйте стовпчиковий графік.
Порівняння з круговим графіком. Важко визначити різницю між двома найбільшими країнами.
Що може ускладнити порівняння категорій, але виглядає гарно? Кругові діаграми 🍩. З цими красивими діаграмами порівняння стає ще складнішим, оскільки кольорова область додатково зменшується.
Загальною помилкою, яку ми спостерігаємо, є те, що команди беруть сирі дані і просто створюють з них графік/таблицю. Вони очікують, що користувачі самостійно розрахують різницю між двома періодами, розпізнають тенденцію з таблиці або навіть самі розрахують середнє значення і середнє значення. Переконайтеся, що ви спростовуєте аналіз, щоб користувачі могли прочитати графік одним поглядом і зрозуміти, чи йдуть справи добре, чи погано. Часто добре, не тільки відображати рядкові дані, але і тенденцію та співвідношення для надання контексту. Якщо ви можете розповісти історію з вашими даними, це ще краще!
Я не буду розглядати кожен тип графіка окремо, оскільки є багато рішень в Інтернеті, які можуть допомогти вам вибрати правильну візуалізацію, яка відповідає вашим даним і меті. Ось мій короткий перелік:
–Visual vocabulary by Financial Times
Основне повідомлення тут полягає в тому, щоб уникати використання найкращих виглядів візуалізації (дивлючись на вас, кругові діаграми), а замість цього спрямовувати зусилля на вибір найкращого графіку для даних, які потрібно відобразити.
Зверніть увагу, що існує один випадок, коли використання таблиці може бути перевагою перед графіком: за словами Стівена Фью, таблиці полегшують пошук окремих значень.
3.Правильний рівень складності
Тепер, коли ви розглядаєте всі ці чудові типи візуалізації, настав час для “Відомості про даних”: навіть якщо незвичайна візуалізація ідеально відображає інформацію, багато користувачів може відмовитися від її використання, оскільки вони витратять занадто багато часу на вивчення цієї незвичайної візуалізації.
Запропонуйте менш звичайні візуалізації, якщо ви знаєте, що користувачі матимуть час їх сприймати і зможуть використовувати їх регулярно (щоб вони не забули, як це працює). Ви можете дізнатися більше про правильний рівень складності дизайну у нашій статті про UX Efficient Frontier.
Ми могли припустити, що в фінансовому секторі ми будемо більш відкриті до використання складних графіків, таких як бульбашкові діаграми чи діаграми Сенкі, але… це не так. Більшість часу ми використовуємо прості таблиці, стовпчасті / кругові / лінійні графіки або теплові карти.
Залежно від потреби ви можете створювати візуалізації даних, які є більш дослідницькими чи інформативними. У нас існують обидві, але більшість з них відповідають потребам моніторингу стану. У цьому випадку особливо важливо отримувати основні уявлення швидко, не змушуючи користувачів проводити складний аналіз у своїй голові для вживання заходів.
4.Дієві Дашборди
Дієві графіки та панелі приладів(dashbords) особливо важливі при підтримці прийняття рішень. Я бачив десятки графіків, які просто не допомагали приймати жодне рішення або не надавали інформації для вжиття заходів.
Якщо ви вважаєте, що ваш графік не є дієвим, тоді викличте його за допомогою тесту “і що далі?”. Ще краще скористайтеся цим методом від Ніка Десбаратса — ідея полягає в тому, щоб поставити користувачу дашборд запитання:
“Чи можете ви назвати хоча б 1 конкретну дію, яку ви особисто здійснили б у відповідь на цей показник? Чи ви щось робили б, якщо ці показники досягнуть екстремальних значень?”
Якщо відповідь “ні”, то, ймовірно, ви не хочете включати його, принаймні в дашборд для моніторингу статусу.
5.Більше фокусу (Узагальнення інформації)
Чи вам знайомий такий вид діаграми?
Я говорю про дашборди та візуалізацію даних, які просто показують занадто багато інформації.
Це часто виникає через відсутність вирішення, яка інформація є фактично важливою, а замість цього покладає відповідальність за це на користувачів, які не оцінять відсутність спрямованих даних. Не бійтеся приймати рішення і швидко вчіться на власних помилках також.
Ще однією поширеною помилкою є створення “ОДНОГО графіка” з усією можливою інформацією, яка може в ньому відображатися. Це часто робить графік дуже складним для читання для користувачів. У цьому випадку ви можете застосовувати принцип KISS (keep it simple stupid, (тримайте це простіше, “дурніше”) ) і заохочувати передавати одне повідомлення на один графік.
Отже, якщо ви вже вибрали правильну візуалізацію з правильним рівнем фокусу та складності, то що ще потрібно робити?! Ну, гарний графік може бути зіпсований через погані анотації.
6.Правильна кількість анотацій
Помилки анотації зазвичай полягають або в занадто великій кількості анотацій, або в їхньому відсутності зовсім. Як часто ви бачите графік, де не вказана валюта? Або можливо відсутня вказівка на період часу для представлених даних? Чи, можливо, є скорочення, які не пояснені.
Для забезпечення гармонії анотацій, переконайтеся, що ви розумієте, хто є користувачами, і протестуйте це з ними. Занадто легко вважати, що інші знають так само, як і ми, і що всі будуть розуміти графіки так само, як і ми.
Бонус: 7. Візуальна консистентність
Ми часто використовуємо зовнішні інструменти чи бібліотеки для візуалізації даних. Це значно економить час, але вони ніколи не відповідають нашим Дизайн-стилям. Таким чином, використання зовнішніх бібліотек може призвести до невідповідності у вигляді графіків на вашому сервісі.
Щоб боротися з цим в Societe Generale CIB, ми створили шаблони на основі зовнішньої бібліотеки, що дозволило уникнути багатьох обговорень стосовно консистентності. Однак все ще важко забезпечити, щоб команди дотримувалися шрифтів, кольорів та форматування тексту (дат, часу, сум) при використанні власних візуалізацій.
Якщо ваш Система Дизайну охоплює доступність у візуалізації даних, використання системи дизайну допоможе користувачам з обмеженими можливостями отримати доступ до вмісту графіків. Якщо вас ставлять під сумнів стосовно важливості доступності графіків, ви можете просто запитати в офісі, скільки людей мають яку-небудь форму візуального обмеження. Наприклад, якщо люди не можуть розрізнити зелений від червоного, це буде проблематично, якщо ваш продакт-власник очікує, що теплові карти або ключові показники будуть зеленими і червоними.
Примітка*: Доступні графіки – це велика тема, яку я сподіваюся розглянути докладно в іншій статті.
Добре, це все. Тепер ви все знаєте (?)
Багато в компаніях створюються для прийняття рішень. І, відповідно, вони повинні бути легкими, швидкими у розумінні, актуальними та практичними. Сподіваюся, що, використовуючи деякі поради, описані в цій статті, ви допоможете користувачам приймати рішення швидше та з більшою впевненістю.
Дякую за увагу! Не соромтеся залишити коментар та поділитися своїми враженнями. Et voilà!
ОРИГІНАЛ СТАТТІ:Data visualisation: the value of design
АВТОР СТАТІ:Kamila Giedrojc
Долучайтесь до нашої спільноти Telegram
* Data Life UA
* Data Analysis UA
* DATA ENGINEERING UA
Долучайтесь до нашої спільноти FaceBook
* Data-Life-UA
