Таблиці це один із найпопулярніших засобів візуалізації інформації. Однак у сучасному світі інтерактивних дашбордів та інтерфейсів статичні таблиці можуть здаватися застарілими. У цій статті ви знайдете декілька рекомендацій щодо дизайну таблиць, які допоможуть зробити їх візуально привабливими, інформативними та не такими нудними.
Складові таблиці
Розберемо зовнішній вигляд таблиці: з чого вона складається і як оформити кожну складову, щоб поліпшити досвід користувача.
Рядки
Є 3 варіанти оформлення рядків: стандартні лінії-роздільники, смугаста заливка («зебра»), або заливка конкретного рядка при наведенні курсора миші. Не залишайте рядки таблиці у «вихідному» вигляді, оскільки такий підхід ускладнює сприйняття даних.
Вертикальне прокручування
Щоб відокремити шапку таблиці від інших осередків, додайте невелику тінь (2–4 пікселі) по її нижньому краю. Це дозволить створити плавний ефект зникнення даних під час вертикального прокручування.
.gif)
Горизонтальне прокручування
Зафіксуйте перший стовпець під час горизонтального прокручування, щоб він залишався видимим. Не забудьте додати тінь праворуч.
.gif)
Зміна розміру стовпців
Використовується для відображення будь-якого контенту, який не помістився у задану ширину комірки.
Кнопки дій
Додайте кнопки дій, які будуть відображатися під час наведення курсора на останній стовпець. Це дозволить заощадити місце та зберегти фокус на даних.
Ярлики станів
Колір може бути потужним інструментом для поліпшення зручності читання та простоти сприйняття таблиць. Переконайтеся, що ви використовуєте кольори, що відповідають характеру даних (наприклад, зелений для статусу оплачено, червоний для статусу скасовано).
Ярлики команд
Переконайтеся, що ви використовуєте кольори послідовно. Це особливо актуально для позначення команд (дизайн/маркетинг/розробка тощо).
Сортування
Додайте іконки зменшення/зростання в шапку таблиці (коли це релевантно для конкретного стовпця), щоб користувачі могли змінювати порядок відображення даних.
Розкриття рядків
Може використовуватися для описового тексту або розбивки даних.
Пагінація
Елементи керування для переміщення сторінками повинні бути зрозумілими та простими. Зверніть увагу: іноді за стрілками в таблиці складно потрапити курсором, оскільки вони дуже малі.
Функції таблиці
Наведені нижче функції полегшують взаємодію з таблицями. Одним із ваших пріоритетів має бути просте редагування даних.
Додавання та перестановка стовпців
Ця функція дозволяє налаштовувати таблицю, додаючи, видаляючи стовпці або змінюючи їх порядок відповідно до потреб користувача.
.gif)
Бічна панель
Бічна панель може надавати додатковий контекст та містити інструменти для редагування даних. Це особливо актуально для таблиць із великою кількістю стовпців.
.gif)
Модальне вікно
Для більших обсягів даних скористайтеся замість бічної панелі модальним вікном або просто надішліть користувача на іншу сторінку.
.gif)
Фільтри
Фільтри, мабуть, є найважливішою частиною таблиці. Вони включають поле пошуку, засоби вибору дати та безпосередньо параметри фільтрації.
Порівняння даних
Використовуйте візуалізацію даних для порівняння різних змінних з таблиці.
.gif)
Завантажуйте/імпортуйте дані у форматі CSV
Вивантажуйте дані для аналізу, надсилання чи резервного копіювання або, навпаки, імпортуйте їх до таблиці. Щоб спростити користувачам життя, додайте індикатор завершення завантаження, а також кнопку відкриття завантаженого файлу.
Підсумкова візуалізація
Візуалізація допоможе користувачам побачити тенденції та закономірності. Наприклад, зростання чи спадання. При цьому їм не доведеться самостійно перебирати та зіставляти дані.
Індикатори обсягу
Така функція зазвичай використовується у фінтеху (фінансові продукти). Можливо, для вашого дизайну вона також буде корисною. Індикатори обсягу можна використовувати для відображення лімітів платіжних систем та інших даних.
Висновок
Поставте користувача на перше місце. Зрозумійте, які функції можуть бути корисні та впровадьте їх. Додайте кольори, можливість перетягування, інтерактивні візуальні ефекти, щоб зробити досвід взаємодії цікавішим та захопливішим.
