Grafika a webový design na základě principů Edwarda Tufteho

Autor: Larry Gales

Překlad: Alena Piksaeva

Toto je osnova průkopnické práce Edwarda Tufteho na využití grafiky k zobrazování kvantitativních informací. Většinou se skládá z textu a myšlenek převzatých z jeho tří knih na toto téma spolu s některými dalšími materiály z mé strany. Tato stránka je v textovém formátu: abyste porozuměli konceptům, musíte si přečíst knihy, protože koncepty nelze skutečně pochopit bez ilustrací a současná technologie videomonitorů má příliš nízké rozlišení na to, aby jim spravedlivě posloužila. Jeho práce byla popsána jako „vizuální Strunk a White“.

V celé této osnově jsem zahrnul odkazy na ilustrace z jeho knih, které jsou označeny zkratkami VD-pp, VE-pp a EI-pp, kde „pp“ je číslo stránky a:

VD je „The Visual Display of Quantitative Information“ (Vizuální zobrazení kvantitativních informací)
VE je „Visual Explanations“ (Vizualizace vysvětlení)
EI je „Envisioning Information“ (Představování informací)

Úvod

Tufteho práce se zabývají následujícími otázkami:

Problém: Problémem je prezentace velkého množství informací tak, aby byla kompaktní, přesná, dostatečná pro daný účel a snadno pochopitelná. Konkrétně se jedná o zobrazení příčin a následků, zajištění správných srovnání a dosažení (oprávněných) cílů.

Jeho důležitost: Tištěné a grafické informace jsou nyní hnací silou našich životů. Už nejsou vyhrazeny pro specializované pracovníky v určitých oborech, ale ovlivňují téměř všechny lidi prostřednictvím širokého používání výpočetní techniky a internetu. Rychlé a přesné přenosy informací mohou být pro mnoho lidí otázkou života a smrti (např. katastrofa raketoplánu Challenger). Míru, do jaké symboly a grafika ovlivňují naše životy, lze vidět na dramatickém nárůstu IQ ve všech kulturách, které přijaly informační technologie: ve Spojených státech došlo za posledních 60 let k průměrnému nárůstu IQ o 3 body na dekádu, což činí celkový nárůst o 18 IQ bodů. Neexistuje žádné známé biologické vysvětlení tohoto nárůstu a nejpravděpodobnější příčinou je široká expozice textům, symbolům a grafice, které doprovázejí moderní život. Jak již bylo zmíněno, tento nárůst byl zaznamenán ve všech kulturách, které se setkaly s informačními technologiemi.

Jeho aplikace: Některé informace se týkají zobrazování statistických údajů, ale mnoho z nich se vztahuje na jakýkoli typ zobrazení, včetně prostého textu.

Řešení: Vyvinout konzistentní přístup k zobrazení grafiky, který zlepší její šíření, přesnost a snadnost pochopení.

Historie grafů

První známý graf pochází z 10. století (VD-28: první známý graf). To bylo přibližně ve stejné době, kdy Guido z Arezza vyvíjel dvourozměrnou hudební notaci, která je velmi podobná té, kterou používáme dnes. V 15. století Nicolas z Cusy vytvořil grafy závislosti vzdálenosti na rychlosti. V 17. století René Descartes založil analytickou geometrii, která byla používána pouze pro zobrazování matematických funkcí. Hlavním iniciátorem informační grafiky byl však William Playfair (1759-1823), který vyvinul liniové, sloupcové a koláčové grafy, jak je známe dnes.

Vysvětlovací síla grafiky

Důležitost a vysvětlovací síla grafiky lze vidět na těchto příkladech:

Ilustrace VD-13/14 ukazuje 4 grafy, které mají velké množství naprosto identických statistických měr a vlastností, a přesto jsou velmi odlišné, jak lze okamžitě vidět z jejich grafů. Katastrofa raketoplánu Challenger: datové grafy prezentované NASA neukázaly skutečné informace, které byly potřeba (VE-47 versus VE-45). Kdyby NASA viděla vhodné, ale velmi jednoduché grafy, které ukazovaly vliv nízkých teplot a poškození pevných raketových posilovačů, Challenger by v ten (velmi chladný) den neodstartoval. Epidemie cholery na Broad Street v roce 1854 v Londýně, jak ji zobrazil John Snow (VE-31: úmrtí na choleru). Tento graf ukázal shluky úmrtí na choleru kolem místa pumpy. Ilustrace VD-166: „komuny ve Francii“ ukazuje extrémně hustý graf, který zobrazuje hranice více než 30 000 komun ve Francii.

Základní filozofie přístupu

Důležitá pravidla a témata při prezentaci grafiky:

Předpokládejte, že publikum je inteligentní (parafráze z E.B. White). I publikace jako New York Times předpokládají, že lidé jsou dostatečně inteligentní na to, aby četli složitou prózu, ale příliš hloupí na to, aby rozuměli složité grafice. Neomezujte lidi tím, že „zjednodušíte“ data – umožněte jim využít své schopnosti a získat z nich maximum. Pro objasnění přidejte podrobnosti (nevynechávejte důležité detaily; např. serifové písmo je „podrobnější“ než bezpatkové, ale ve skutečnosti je snadněji čitelné). A jak jednou řekl Einstein: „Vysvětlení by mělo být co nejjednodušší, ale ne jednodušší.“ Především ukažte data. Grafika je „viditelná inteligence.“ Datově bohaté grafy mohou ukázat obrovské množství informací z mnoha různých perspektiv: příčina a následek, vztahy, paralely atd. (VD-31: jízdní řád, VD-17: Chloroplethic map, VD-41: Napoleonova kampaň, EI-49: vesmírný odpad) Grafy potřebují anotace k zobrazení dat, omezení dat, autentifikaci a výjimek (VE-32: text výjimek). Nepoužívejte grafiku k ozdobení několika čísel.

Grafická integrita

Kromě „lží, zatracených lží a statistik“ lze grafiku také použít k oklamání. Například klamavá grafika může:

Porovnávat celé časové období s menšími časovými úseky (VD-60: Nobelovy ceny, které porovnávají desetileté období s jedním pětiletým obdobím).
Používat „faktor lži“ [= (velikost grafiky) / (velikost dat)] k zveličování rozdílů nebo podobností.
Používat reprezentace plochy nebo objemu namísto lineárních měřítek k zveličování rozdílů. Viz VD-69: „Zmenšující se rodinný lékař“ jako příklad toho, jak zmást lidi pomocí porovnání 1, 2 a 3 rozměrných velikostí. Reprezentace plochy a objemu matou lidi díky čtvercové/kubické zákonitosti: zvýšení lineární velikosti vede ke čtverci tohoto zvýšení pro plochy a ke krychli pro objemy.
Nezohledňovat růst populace nebo inflaci ve finančních grafech.
Používat variaci designu k zakrytí nebo zveličení datových odchylek (VD-61: zveličování cen OPEC).
Zveličovat vertikální měřítko.
Ukazovat pouze část cyklu, takže data z jiných částí cyklu nelze použít pro správné srovnání.

Grafické chyby mohou být dnes častější než v minulosti kvůli snadnému a častému používání počítačů. Zásady, které pomáhají zajistit grafickou integritu, zahrnují následující:

Vyhněte se „chartjunk“.
Neztrácejte kvantifikaci: poskytujte reálná data co nejpřesněji. Například hodnocení produktů jako lepší nebo horší podle jednoho kritéria, když je zapojeno více faktorů, není často užitečné, pokud nejsou uvedeny velikosti rozdílů.
Nezveličujte vizuální efekty, pokud to není nutné k předání informace. Někdy jsou takové zveličování nezbytné: například je prakticky nemožné ukázat současně velikost a oběžné dráhy planet v pravém měřítku na stejném grafu. Na druhé straně ilustrace VE-24: „Přehnaná vertikální škála Venuše“ ukazuje tak dramatické dezinformace, že jeden vědec volal po založení „společnosti pro plochou Venuši“.
Vyhněte se dezinformacím: silné rámečky a podtržený bezpatkový text ztěžují čtení.
Dávejte si pozor na účinky agregace: například bodové mapy jsou v tomto ohledu často upřímnější než chloroplethické mapy, které seskupují výsledky na základě (někdy libovolných) hranic.

Ptejte se správných otázek:

Říká zobrazení pravdu?
Je reprezentace přesná?
Jsou data dokumentována?
Říkají zobrazovací metody pravdu?
Jsou ukázána vhodná srovnání, kontrasty a kontexty?

Hustota dat

Grafika je nejlepší, když reprezentuje velmi husté a bohaté datové soubory. Tufte definuje hustotu dat následovně:

Hustota dat = (počet položek v datové matici) / (plocha grafiky)

Je důležité si uvědomit, že nízká hustota dat na počítačových obrazovkách nás nutí zobrazovat informace sekvenčně spíše než prostorově, což je špatné pro porozumění. Kvalitní grafika je:

Srovnávací
Multivariantní
S vysokou hustotou
Schopná odhalit interakce, srovnání atd.
A kde téměř všechen inkoust představuje data

Příklady hustot dat zahrnují:

110 000 čísel/palec² pro astronomický graf. Toto je nejvyšší známá hustota grafu. Pro většinu vědeckých časopisů získáváme asi 50-200 čísel/palec².
150 Mbitů = lidské oko
8 Mbitů = typická počítačová obrazovka
25 Mbitů = barevný diapozitiv
150 Mbitů = velká rozkládací mapa
28 000 znaků = Referenční kniha
18 000 znaků = telefonní seznam
15 000 znaků = literatury faktu

Výborným příkladem grafu s vysokou hustotou dat je grafický jízdní řád (VD-31: jízdní řád), který ukazuje časy odjezdů a příjezdů, místa, směry, trasy, přestupy a rychlosti na jednom listu papíru.

Komprese dat

Používejte kompresi dat, abyste odhalili (nikoli skryli) data. Například EI-22: „Cyklus slunečních skvrn“ zobrazuje sluneční skvrny jako tenké svislé čáry pouze ve směru osy y, aby bylo možné prezentovat mnoho takových skvrn během určitého časového období na jednom grafu. Používejte kompresi, abyste ukázali mnoho informací v jediném grafu, například graf, který zobrazuje osu x, osu y a interakce x/y. (VD-134: Signály pulsarů; VE-111) Vylučte bilaterální symetrii, když je nadbytečná (např. charnoffovy obličeje), nebo ji rozšiřte, když to napomáhá porozumění (50 % větší pohled na svět na mapě světa poskytuje obalový kontext, který napomáhá pochopení). Studie ukazují, že se často soustředíme na jednu stranu symetrického obrazce a jen letmo pohlédneme na druhou stranu.

Multifunkční grafické prvky

Grafické struktury mohou často sloužit několika účelům najednou. Například:

Kmenové a listové grafy zobrazují sekvence čísel, které přímo ukazují strukturu fyzickou délkou každé sekvence. (VD-140: kmen/list; VD-141: armádní divize; VD-143: Normální křivka)
Seznam závad automobilů v Consumer Reports (VD-174: Consumer Reports) odhaluje mikro/makro strukturu: celkový displej černého inkoustu okamžitě ukazuje, které vozy mají nejvíce problémů, zatímco každý jednotlivý prvek v zobrazení identifikuje konkrétní slabinu.
Datová mřížka sama o sobě může být daty, odhalujícími jak hodnoty, tak i souřadnicový systém současně (VD-152: značky založené na datech).

Maximalizace inkoustu dat; Minimalizace ne-datového inkoustu

Tufte definuje poměr inkoustu dat jako:

Poměr inkoustu dat = (inkoust pro data) / (celkový inkoust v grafu)

Cílem je, aby tento poměr byl co nejvyšší, a to v rozumných mezích. K tomu můžete:

Vyhnout se těžkým mřížkám.
Nahradit krabicové grafy přerušenými čárami (VD-125: zjednodušený krabicový graf).
Nahradit ohraničující rámeček osou x/y.
Použít bílé mezery k označení mřížkových čar ve sloupcových grafech (VD-128: bílé mezery).
Použít zarážky (bez čar) k označení skutečných umístění dat na osách x a y.
Zjednodušit grafiku: nahradit sloupce jednoduchými čarami, odstranit ne-datový inkoust; eliminovat čáry z os; začít osy x/y na hodnotách dat (rámce rozsahu).
Vyhnout se přeplněným mřížkám, nadbytečným zarážkám, nadbytečnému zobrazení jednoduchých dat, rámečkům, stínům, ukazatelům a legendám. Soustřeďte se na data, nikoli na obaly dat.
Vždy poskytujte tolik informací o měřítku (v tlumené podobě), kolik je potřeba.

Malé násobky

Malé násobky jsou sady miniatur grafů na jedné stránce, které představují různé aspekty jediného fenoménu. Tyto:

Zobrazují srovnání, rozšiřují dimenzionalitu, pohyb a jsou dobré pro multivariantní zobrazení (VD-114: hybnost částic).
Zvou k porovnání, kontrastům a ukazují rozsah alternativ nebo možností (VE-111: lékařské grafy).
Musí používat stejné míry a měřítko.
Mohou reprezentovat pohyb pomocí prolínání více obrazů.
Jsou obzvláště užitečné v počítačích, protože často umožňují překrývání obrazů a rychlé cyklování.

Chartjunk

Chartjunk se skládá z dekorativních prvků, které nepřinášejí žádná data a způsobují zmatek.

Tufte diskutuje pravidlo 1+1=3 (nebo více): Dva prvky v blízké blízkosti způsobují viditelnou interakci. Tyto interakce mohou být velmi únavné (např. moiré vzory, optické vibrace) a mohou ukazovat informace, které tam ve skutečnosti nejsou (EI-60: data, která tam nejsou, VD-111: chartjunk).
V hlavních vědeckých publikacích vidíme 2 % až 20 % moiré vibrací. Například v nedávných statistických a počítačových publikacích se chartjunk pohybuje od 12 % do 68 %.
Techniky, jak se vyhnout chartjunku, zahrnují nahrazení křížového šrafování (pastelovými) plnými barvami nebo šedou, použití přímého označení namísto legend a vyhnutí se těžkým datovým kontejnerům.

Barvy

Barvy mohou často výrazně zlepšit pochopení dat.

Vrstvení pomocí barev je často účinné.
Barevné mřížky jsou formou vrstvy, která poskytuje kontext, ale měla by být nenápadná a tlumená.
Čisté jasné barvy by měly být vyhrazeny pro malé zvýrazněné oblasti a téměř nikdy by neměly být použity jako pozadí.
Používejte barvy jako hlavní identifikátor na počítačových obrazovkách, protože různé objekty jsou často považovány za stejné, pokud mají stejnou barvu, bez ohledu na jejich tvar, velikost nebo účel.
Izolinie, které mění barvu podle pozadí, vyniknou bez vytváření efektu 1+1=3.
Barvy lze použít jako označení, jako měřítka a k napodobení reality (např. modrá jezera na mapách).
Nekombinujte jasné barvy s bílou vedle sebe.
Barevné skvrny proti světlé šedé jsou účinné.
Barvy mohou vyjadřovat vícerozměrné hodnoty.
Posuvníky by měly mít pastelové barvy.
Poznamenejte si, že okolní barvy mohou způsobit, že dvě různé barvy vypadají podobně, a dvě podobné barvy vypadají velmi odlišně (EI-92/93: vlivy kontextu na barvy).
Jemné odstíny barev nebo šedé škály jsou nejlepší, pokud jsou ohraničeny jemnými konturovými čarami (EI-94: odstíny s konturami).
Mějte na paměti, že 5–10 % lidí je do jisté míry barvoslepých (nejběžnější je červeno-zelená barvoslepost, následovaná modro-žlutou, která obvykle zahrnuje modro-zelenou).

Obecná filozofie pro zlepšení porozumění datům

Vysoká hustota je dobrá: lidské oko/mozek může vybírat, filtrovat, upravovat, seskupovat, strukturovat, zvýrazňovat, zaostřovat, míchat, ohraničovat, seskupovat, jednotlivě rozdělovat, třídit, abstrahovat, vyhlazovat, izolovat, idealizovat, sumarizovat atd. Dejte lidem data, aby mohli plně využít své schopnosti — neomezujte je.
Nepořádek/zmatek jsou selhání designu, nikoli složitosti.
Informace se skládají z rozdílů, které činí rozdíl: můžete tedy „skrýt“ ta data, která nemají význam pro to, co se snažíte zobrazit.
Při zobrazování paralel by se měly objevit pouze relevantní rozdíly.
Hodnota a síla paralelismu: jakmile uvidíte jeden prvek, všechny ostatní jsou přístupné.
Důležité koncepty dobrého designu: oddělování figury a pozadí (například rozmazané pozadí často přináší popředí do ostřejšího zaostření), vrstvení a oddělování, použití bílého prostoru (např. čínské krajiny zdůrazňují prostor, jako u malíře známého jako „Ma z jednoho rohu“; orientální hudba je často přítomna k tomu, aby zdůraznila ticho a ne zvuk).
Grafika by měla zdůrazňovat horizontální směr.

Techniky pro zvýšení porozumění datům

Pro zvýšení porozumění datům byste měli:

Udělat značky nebo popisky co nejmenší, ale stále dostatečně čitelné.
Vyhnout se koláčovým grafům, protože mají nízkou hustotu a nezohledňují hodnoty podle vizuálního měřítka.
Obvykle používat bodové mapy místo chloroplethických map, protože zobrazují přesnější detaily.
Úzce proplést text a grafiku: přiřaďte názvy přímo k částem, umístěte malé zprávy vedle dat, pokud je to možné, vyhněte se legendám a data přímo anotujte na grafu (VE-99: anatomie písma).
Vyhnout se zkratkám, pokud je to možné, a používat horizontální text.
Používat serifové fonty s velkými a malými písmeny.
Používat transformace měřítka, pokud mohou (poctivě) odhalit informace, které by jinak mohly být přehlédnuty.
Používat různé struktury k zobrazení 3D a pohybu, jako například explodovaný šestiúhelník, skutečné stereo a extrémní zkracování (jako na okraji koule: viz EI-15 „explodovaný šestiúhelník“).

Kdy NEpoužívat grafiku

Často mohou textové tabulky nahradit grafy pro jednoduchá data; můžete také použít 2D textové tabulky, kde jsou souhrny řádků a sloupců užitečné. Nesrovnávací datové soubory obvykle patří do tabulek, ne do grafů.
Návrhy plakátů jsou určeny pouze k upoutání pozornosti, na rozdíl od předávání informací — obecně nejsou vhodné pro návrh grafů.
Pokud obrázek nestojí za 1000 slov, je zbytečný (citace od Ad Reinhardta — poznámka: toto pochází z původní čínské citace „obrázek má hodnotu 10 000 slov“).

Estetika

Grafická dokonalost spočívá v jednoduchosti designu a složitosti a pravdivosti dat. K dosažení toho:

Používejte slova, čísla a kresby v těsné blízkosti.
Zobrazte přístupnou složitost dat.
Nechte grafiku vyprávět příběh.
Vyhněte se dekoracím bez kontextu.
Používejte čáry různých tlouštěk jako atraktivní a kompaktní způsob zobrazení dat (VD-185: Mondrian).
Využívejte symetrii pro přidání krásy (i když někdo jednou řekl, že „všechna skutečná krása vyžaduje určitou míru asymetrie“).