Створюйте хороші таблиці

Таблиця
Бідні таблиці. Ну що з ними не так?
На початку історії веба таблиці були основою відображення інформації. З часом розробники знайшли нові, більш модні способи подання даних та таблиці відійшли на другий план. Сьогодні таблиці використовуються набагато рідше, проте як і раніше збирають й упорядковують великі обсяги інформації, з якими ми стикаємося щодня.
Ось приклад, який я називаю таблицею всіх таблиць: Гармонізований тариф США, що займає більше ніж 3550 сторінок. У ньому міститься опис кожного товару, який може бути імпортований в США, включаючи такі захоплюючі позиції, як «Чоловічі і дитячі пальта, півпальта, накидки, куртки, анораки (включаючи лижні костюми), куртки та подібні товари (включаючи утеплені жилети)».
Гармонізований тариф США
Так що ж таке півпальта?
Безграмотно спроектована таблиця виглядає потворно. Дизайн — основа таблиці: коли він зроблений правильно, складні дані легко переглядати і порівнювати. Якщо дизайн некоректний, інформація перестає бути зрозумілою.
Давайте подивимося, як робити правильно.
Слідкуйте за числами
Не всі однакові числа. Я не маю на увазі π (Пі) і ∞ (хоча згадую про них на вечірках), а кажу про відображення цифр, розділяються на старовинні або лінійні, і на пропорційні або табличні.
Старовинні та лінійні цифри
Старовинні і лінійні цифри
Старовинні цифри здорово виглядають в реченнях, де вони співвідносяться з розмірами і відступами рядкових символів. Лінійні цифри більш одноманітні, що відповідає рівною структурі таблиці.
Різниця між пропорційними і табличними цифрами не настільки очевидна:
Пропорційні і табличні цифри
Пропорційні і табличні цифри
Пропорційні цифри створені, щоб передавати відтінок — відповідати загальним розмірами і або вставкам — гарнітури шрифту. Табличні цифри пропорційні один з одним, що дозволяє вирівнювати колонки з числами. Хоча різниця на прикладі одного-двох рядків не настільки очевидна, використання табличних цифр дозволяє легко переглядати великі таблиці і знижувати ймовірність помилок прочитання.
Технічне зауваження про табличному лінійному вирівнювання цифр
На етапі дизайну варто переконатися, що використовуються цифри вам підходять (табличне і лінійне вирівнювання зазвичай вимкнено за замовчуванням). Продукти Adobe включають панелі «анімація», за допомогою якої цифр задається правильна настройка. Щоб включити відповідне властивість CSS, потрібно розібратися в злегка заплутаному синтаксис. Як би те ні було, кілька запитів до гуглу повернуть вас на шлях істинний.
Тепер погані новини: табличні лінійні цифри доступні не для всіх шрифтових гарнітур. Гарнітури, які їх включають, зазвичай дороги. Є кілька винятків: наприклад, прекрасний Work Sans — безкоштовний шрифт з табличними лінійними цифрами.
Якщо важко знайти підходящу шрифтову гарнітуру, використовуйте запасний варіант — шрифт фіксованої ширини. Вони виглядають більш схожими на код, проте завжди підійдуть для відображення чисел у таблиці. Варто додати, що San Francisco, новий системний шрифт за промовчанням у Apple, містить табличні лінійні цифри, добре відображаються при малих розмірах.
Пам'ятайте про вирівнювання
Дотримуйтесь 3½ правилами:
1. Числові дані вирівнюються по правій стороні.
2. Текстові дані вирівнюються по лівій стороні.
3. Заголовки вирівнюються так само, як і їхні дані.
3½. Не використовуйте вирівнювання по центру.
Список штатів США по історичному населенню
Список штатів США по історичному населенню — Wikipedia
читаються справа наліво — при порівнянні чисел ми спочатку дивимося на одиниці, потім десятки, сотні і т. д. Це той же спосіб, яким люди вивчають арифметику — починають праворуч і рухаються вліво, збираючи і групуючи цифри по ходу прочитання[1]. Отже, таблиці повинні вирівнювати числові дані по правому краю.
Тексти (російською мовою) читаються зліва направо. Тексти зазвичай порівнюють за алфавітним порядком: якщо два рядки починаються з однієї літери, порівнюється наступна, і т. д. Спроба швидко пробігтися по тексту, не вирівняні по лівій стороні, вкрай скрутна.
Заголовки повинні зберігати вирівнювання відповідних їм даних. Вертикальні лінії таблиці в цьому випадку будуть виглядати охайно, а дані — цільно і злагоджено.
При вирівнюванні по центру лінії таблиці здаються «зазубреними», що ускладнює перегляд вмісту. Це часто змушує додавати в таблицю додаткові роздільники і графічні елементи.
Узгоджуються значущі цифри = гарне вирівнювання
Простий спосіб зберегти правильне вирівнювання таблиці — дотримуватися одноманітності в написанні значущих цифр. Зазвичай це означає, що всередині кожного стовпця у чисел має бути однакова кількість знаків після коми. Значущі цифри — тема для окремої статті, так що я залишу тут лише короткий порада: чим меншою кількістю значущих цифр можна обійтися, тим краще.
Лаконічні, зрозумілі підписи
Підпису, що супроводжують дані, особливо важливі. Ці елементи допоміжного контексту дозволяють читати таблицю більш широкої аудиторії, і при більшій кількості різних обставин.
Прогноз рівня води під час повені в Mississippi
Прогноз рівня води під час повені в Mississippi — NOAA
Заголовок
Це звучить як само собою зрозуміле, але короткий і ясний заголовок настільки ж важливо для таблиці, як і весь інший дизайн. З гарним заголовком таблиці стають мобільні, їх можна перенести на безліч контекстів, на них легко послатися із зовнішніх джерел.
Одиниці виміру
найчастіша підпис, використовувана в таблицях — одиниці виміру даних. Зазвичай її повторюють в кожній окремій клітинці таблиці. Щоб уникнути повторення, досить включити підпис у першу сходинку кожної колонки.
Заголовки
Зберігайте заголовки настільки коротким, наскільки це можливо. Дизайн таблиці повинен фокусуватися на даних. Довгі написи в заголовках будуть заважати цьому, займаючи величезну частину візуального простору.
Як можна менше чорнил
Коли ви вирішуєте, як стилізувати графічні елементи в таблиці, завжди слід намагатися зменшити колірну насиченість таблиці без втрати структури. Намагайтеся використовувати якомога менше «чорнила» — тобто не стилізувати елементи, коли це можливо.
Статистика бэттинга в Національній Лізі 2016
Статистика бэттинга в Національній Лізі 2016 — BaseballReference
Лінійки
Якщо ви правильно вирівняли дані в таблиці, використання лінійок немає сенсу. Головна перевага лінійок — можливість скоротити відстань між елементами, в той же час відокремлюючи їх один від одного. Навіть якщо ви використовуєте лінійки, намагайтеся зробити їх непоказними, щоб вони не заважали при побіжному перегляді.
Найбільш корисні горизонтальні лінійки. Вони дозволяють значно скоротити висоту довгих таблиць, прискорюючи порівняння великої кількості даних або помічаючи тенденції їх зміни.
Також у мене є особиста думка з приводу лінійок: не використовуйте поділ на смуги по зебрі. Це погана практика. Втім, погоджуватися зі мною чи ні — вирішувати вам.
Фони
Фони найбільш гарні для підсвічування різних областей даних: наприклад, переходів від приватних значень до сум чи середніх значень.
Багато елементів можна виділити без використання фонів: підсвічування значень, додатковий контекст даних, зміни у значеннях порівняно з минулими періодами. Скористайтеся графічними елементами, наприклад ✻, † (один з моїх улюблених), або ▵.
На додаток до цього, таблиці повинні бути монохромними. Використання кольорів в організаційних цілях або для додавання додаткового значення збільшує ймовірність неправильної інтерпретації або помилки, викликає проблеми у людей з порушеннями зору.
Висновок
Таблиці можуть бути скучныале вони є одним з головних елементів в інформаційно насичених документах, тому дизайнери не повинні ставитися до них зневажливо. Ефективні, прозорі, читабельні таблиці значно полегшать важкий процес сприйняття великої кількості даних.
Подальше читання і матеріали для натхнення
FiveThirtyEight завжди був відмінним джерелом натхнення для відображення числових даних використовується гарнітура Decima Mono, яка спеціально розроблена для відображення великих наборів даних на малому просторі.
Butterick's Practical Typography — мій довідник з усіх питань в типографіці. Це той тип ресурсів, на які у вас купа посилань — стільки там корисних статей!
Ну і нарешті, ніяка стаття по дизайну даних не буде повною без статті Edward Tufte. Його лист про дизайні просто незамінне.


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


Оригінал: Design Better Data Tables, автор: Matthew Ström.
Переклад: aalexeev, редактура: Яна Криклива, Чайка Чурсіна.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.