Використання таблиць і сіток є поширеним при проектуванні цифрових продуктів і інформаційних панелей. Таблиці даних допомагають упорядкувати велику кількість інформації.

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

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

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

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

Правильний дизайн таблиць даних

Плануючи дизайн столу, потрібно попрацювати над двома речами: стилем столу та функціональністю столу.

Стиль таблиці

Вирівнювання даних таблиці

Джерело зображення

Щоб відрізнити текст від числових даних, вирівняйте текст ліворуч, а числа – праворуч. Таке вирівнювання полегшує порівняння двох різних даних.

Заголовки таблиць також повинні узгоджуватися з даними стовпців для створення структурованої таблиці.

Деякі комірки таблиці можуть мати кілька рядків тексту, наприклад описи. Вертикальне вирівнювання такого вмісту має бути вгорі.

Інакше дані стовпця не будуть вирівняні один з одним.

Додавання рекомендованого розділу

Таблиця цін, яку можна створити за допомогою wpDataTables

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

Використовуйте пропонований розділ, щоб виділити важливу інформацію в таблиці. Це може бути найкращий тарифний план або популярний елемент у списку, наприклад.

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

Нанесення кольорів

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

Додавання забагато кольорів створює візуальний шум. Це ускладнює розрізнення елементів, які потрібно виділити.

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

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

Чергування кольорів рядків

Таблиця з об’єднаними клітинками, яку можна створити за допомогою wpDataTables

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

Це особливо корисно при створенні великої бази даних. Він також добре працює для невеликих таблиць даних.

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

Використання моноширинного шрифту

Для більш структурованого дизайну таблиці використовуйте моноширинний стиль шрифту для числових даних.

Табличний або моноширинний шрифт має фіксовану ширину та інтервал для кожного символу. Це покращує типографіку та читабельність.

Приклади моноширинних шрифтів включають Courier, Courier New, Lucida Console і Monaco.

Щоб ще більше покращити симетрію, переконайтеся, що форматуєте цифри однакової довжини, як, наприклад, дати. Замість того, щоб писати 15/3/2019, відформатуйте дату як 15/03/2019.

Візуалізація даних таблиці

Перетворіть дані стовпців на горизонтальні гістограми. Це допомагає візуалізувати дані та створити огляд.

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

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

Ще один спосіб візуалізації даних таблиці — використання теплових карт.

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

Функціональність таблиці

Зробіть його чуйним

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

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

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

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

Пам’ятайте, що на менших екранах кращі вузькі колонки. Існують різні способи зробити стовпчики тоншими.

Це включає використання значків, скорочень, коротшого формату чисел і округлених числових даних. Отже, 2,5 м замість 2 500 000 і 0,3 замість 0,3241.

Увімкнути зміну порядку стовпців

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

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

Розгляньте фіксовану висоту рядка

Таблиця, яку можна створити за допомогою wpDataTables

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

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

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

Використання розбиття на сторінки для довгих таблиць даних

Розбита на сторінки таблиця, яку можна створити за допомогою wpDataTables

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

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

Це також допомагає читачам зорієнтуватися в таблиці .

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

Включити функцію сортування таблиці

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

Сортування дозволяє користувачам упорядковувати дані відповідно до певного логічного порядку.

Це може бути за алфавітом, зі зміною дати та часу, за зростанням, за спаданням тощо. Чим більше варіантів, тим краще.

Ще один спосіб сортування даних — додати поле пошуку. Це дозволяє читачам шукати певні дані, такі як назва компанії, місцезнаходження, продукти тощо.

Фільтрування даних

Таблиця з фільтрами, які можна створити за допомогою wpDataTables

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

Вони також можуть знаходити певну інформацію та аналізувати складні дані. Особливо це стосується таблиць числових даних.

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

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

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

Microsoft Excel і Google Таблиці називають прив’язані стовпці «закріпленими».

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

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

Останні думки про те, як правильно оформити стіл

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

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

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

Якщо вам сподобалося читати цю статтю про те, як створити таблицю, ви повинні переглянути цю статтю про те, як створити таблицю даних.

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

Джерело запису: wpdatatables.com