Дизайн дашборду SaaS: сорок дій, один спокійний екран

У лендингу одна робота і одна кнопка, яку повторюють, доки відвідувач не зробить крок. Екран продукту інший. На ньому може бути сорок дій: додати, редагувати, відфільтрувати, призначити, експортувати, скасувати. Його дизайн не про те, щоб зробити гарною кожну кнопку. Він про те, щоб вирішити, що користувач бачить першим, що чекає за один крок і що взагалі не мусить з’являтися.

Починайте з результату, а не зі списку функцій

Ще до першого вайрфрейму ми ставимо власнику одне питання. Що користувач має отримати в результаті?

В Aimgod, системі особистого розвитку, відповідь така: день виконаних задач, у якому нічого не забуто. Тому головним екраном є список задач.

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

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

Задайте напрям над задачами

Іноді продукту потрібен напрям раніше, ніж макет. Aimgod міг стати ще одним застосунком для списку справ. Його напрям полягає в особистому розвитку, а список задач живе всередині як щоденний рівень більшої системи:

1. Довгий фокус. Думки, які варто зберегти на все життя, наприклад рядок із книжки, збережений із фото, щоб читати його на весь екран.
2. Середній фокус. Цілі на місяць і на рік.
3. Короткий фокус. Сьогоднішній день із задачами, прив’язаними до цих цілей.

Коли напрям зрозумілий, він сам вирішує, яким функціям місце на головному екрані, а яким деінде.

Побудуйте ієрархію функцій

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

1. Основні. Потрібні в кожній сесії. Завжди на виду, завжди за один дотик.
2. Другорядні. Потрібні часто, але не щоразу. За один крок: меню, попап, список, що згортається.
3. Рідкісні. Налаштування, експорт, масові зміни. Вони є, але не на очах, доки не знадобляться.

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

Об’єднуйте екрани замість того, щоб додавати нові

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

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

Кожен графік відповідає на одне питання

Графік на дашборді заслуговує на своє місце, лише якщо відповідає на питання, яке користувач справді ставить. В Aimgod головний графік відповідає на одне: чи зробив я те, що запланував на цьому тижні? Виконане і заплановане стоять в одному стовпчику, тож розрив видно, не читаючи цифр. Колір несе зміст, а не прикрашає, і над кожним графіком є просте речення про те, що він показує.

Три правила, яких ми тримаємося для даних на екранах продукту:

1. Одне питання на графік, і воно написане над ним.
2. Найбільшим на картці є число, яке перевіряють найчастіше.
3. Таблиці для списків, які переглядають, графіки для трендів, які порівнюють.

Правила лише там, де вони допомагають

Гнучкість є частиною зручності. В Aimgod кожна частина системи працює сама по собі: можна користуватися лише цілями або лише щоденним списком. Жорсткі правила з’являються тільки там, де вони захищають результат. Ціль розбита на етапи, і наступний етап відкривається, лише коли завершено попередній.

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

Проєктуйте порожній і перевантажений стани

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

Зробіть структуру масштабованою

Концепт дашборду лише початок, а не фінальний результат. Ми перетворюємо його на дизайн-систему: токени кольору, шрифтів і відступів, компоненти з усіма станами, правила щільності і компонування. Система Spillsjakk охоплює понад 150 екранів у світлій і темній темах. Нові екрани тоді займають години, а не тижні, і лишаються узгодженими з першим.

Чекліст дизайну дашборду

1. Назвіть результат, перш ніж щось малювати.
2. Задайте продукту напрям над функціями.
3. Розкладіть функції на основні, другорядні і рідкісні.
4. Об’єднайте екрани, між якими люди перескакують.
5. Одне питання на графік, написане над ним.
6. Спершу спроєктуйте порожній і перевантажений стани.
7. Додавайте правила лише там, де вони захищають результат.
8. Перетворіть концепт на систему.

Якщо ваш продукт ріс екран за екраном і тепер здається важчим, ніж мав би бути, подивіться, як ми підходимо до продуктового дизайну SaaS і дизайну дашбордів, або розкажіть нам про нього.