Una petita guia

Primer de tot cal reconèixer que el simple fet que hi hagi dades obertes sobre un tema, ja és una gran notícia! Si les dades van acompanyades d’una visualització que ens ajuda a entendre-les i explorar-les, és una notícia increïble!!

Per tant, si la vostra proposta es basa a redissenyar un panell de dades obertes, us recomanem que seguiu principis que respectin el disseny original alhora que milloreu la seva claredat i la usabilitat. En fer-ho, honorem la intenció i l’esforç dels dissenyadors originals i defensem un enfocament respectuós i reflexiu de la crítica i la millora.

En què es tradueix això? Comenceu per les mateixes preguntes que el panell o l’informe original, però responeu amb propostes visuals millorades. Això significa centrar-se en els estats actuals de les dades, la seva distribució, afegir tendències contextuals, etc. Per exemple, si l’original utilitza gràfics de barres, podríeu considerar l’ús de visualitzacions que puguin mostrar múltiples variables simultàniament o transmetre informació més matisada sense aclaparar la gent.

Veiem aquests redissenys com una evolució i no com un reemplaçament, preservant l’essència de l’original alhora que empenyem els límits del que és possible.

Recomanacions pràctiques

Entendre grans quantitats de dades sense visualitzacions és per a molts, fins i tot inviable. Les visualitzacions tradueixen les dades a elements visuals (amb colors, mides i posicions) i evidencie patrons, tendències i proporcions. En certa manera doncs, la visualització de dades és com una tecnologia d’assistència, per facilitar la comprensibilitat de les dades.

Organitza el panell de dades amb un fluix narratiu lògic. Comença amb una visió general o resum a dalt, donant context, i continua amb la informació més detallada a sota. Això ajuda els usuaris a comprendre el context general abans d’endinsar-se en els detalls específics.

Títol del panell

Igualment, estructura el panell de manera que la importància visual reflecteixi la importància informativa de cada element. En general, la informació més important hauria d’estar en targetes més grans i prominents, atraient l’atenció immediata. Una bona jerarquia visual ajuda a guiar els usuaris intuïtivament a través del panell, millorant la seva comprensió i interacció.

Crida l’atenció a les mètriques i tendències més importants utilitzant indicadors visuals com ara fonts en negreta o mides més grans. Destacar aquestes dades facilita que els usuaris trobin la informació clau més aviat.

Evita sobrecarregar les targetes amb massa informació. Cada targeta ha de centrar-se en un punt únic.

Assegura’t que la relació d’aspecte dels teus gràfics no distorsiona els patrons de les dades. Gràfics massa amples o massa estrets poden portar a interpretacions errònies. El format 4×3 (apaïsat) o 3×4 (vertical) potser són els més comuns i prudents, però també pots fer servir l’1×1 pels diagrames de dispersió, o formats més extrems: molt vertical si són moltes barres horitzontal apilades, molt apaïsat si és una sèrie temporal molt llarga i detallada.

Col·loca els filtres, desplegables i altres elements d’input dins de la mateixa targeta que el gràfic que modifiquen. Això fa que sigui intuïtiu per als usuaris veure com la interacció amb aquests elements afecta la visualització de dades, fent l’experiència més fluida i eficient 🥰

Els elements interactius han de tenir instruccions clares sobre el seu ús per asegurar la seva accessibilitat.

Cada gràfic ha de tenir títol clar i descriptiu, així com una llegenda si és necessari. Els títols ajuden els usuaris a entendre què estem mostrant, mentre que les llegendes expliquen el significat dels colors i altres elements. Aquest context és crucial per a una interpretació precisa de les dades.

Incorporar les etiquetes directament els elements gràfics permet una interpretació més intuïtiva i directa de les dades, eliminant la necessitat de cercar referències en altres parts de la visualització. Utilitzar títols descriptius ajuda els usuaris a comprendre ràpidament el contingut dels gràfics. A més, aplicar etiquetatge ARIA és essencial per garantir que les visualitzacions siguin accessibles per a persones que utilitzen tecnologies d’assistència, proporcionant una experiència inclusiva i comprensible per a tots els usuaris.

Els gràfics de dalt són una broma, compte amb les correlacions espúries (mireu el blog d’en Tyler Vigen) i, si us plau, no feu servir doble eix.

Tampoc oblideu les taules! Són una eina molt valuosa per presentar dades de manera organitzada i accessible. Quan permeten la cerca, faciliten als usuaris trobar informació específica ràpidament, i enriquides amb sparklines poden proporcionar una visió ràpida de les tendències sense necessitat de gràfics separats. Són una manera alternativa per als usuaris de consumir la informació en una visualització i, en general, els lectors de pantalla naveguen més fàcilment per les taules que per les visualitzacions.

Tipografia i edició

Observable Framework ja ofereix tots els elements de disseny que necessiteu per formatar el vostre panell. Llegiu sobre això aquí.

Els estils de lletra ja estan predefinits al projecte. (La iniciativa va de desbloquejar dades obertes mitjançant la visualització, no de genialitats tipogràfiques: no cal afegir nous tipus o estils de lletra.)

Títol h1

Títol h2

Títol h3

Títol h4

Text de paràgraf a l’informe

Colors

L’escala categòrica s’utilitza per representar dades que cauen en categories discretes i no relacionades entre si. Aquest tipus d’escala és ideal per comparar grups diferents, com ara tipus de productes, noms de departaments, o categories de serveis, on cada categoria és visualment distingida per colors o formes diferents.

Com veus, com màxim, tens 10 colors. I ja són molts. Si tens més categories, caldries que les combinesis en un grup “Altres” o que fessis servir small multiples (o facets).

També hem afegit un traç més fosc als quadrats per garantir que el contrast entre el fons i la marca sigui suficient.

cat

Aquestes escales seqüencials s’apliquen a dades que tenen un ordre natural o progressiu, típicament quantitats o rangs. Aquesta escala utilitza un gradient de colors, generalment des de colors clars a fosc, per representar l’increment o decrement d’un valor, facilitant la visualització de tendències o patrons dins d’un conjunt de dades.

blues

greys

bupu

purd

rdpu

Les escales divergents com aquesta son útils per visualitzar dades que oscil·len entorn d’un punt mitjà o valor crític, com desviacions o diferències respecte a una mitjana. Utilitza dos colors contrastants que esdevenen més intensos a mesura que s’allunyen del punt central, permetent una interpretació ràpida de les àrees on les dades divergeixen significativament del valor de referència.

buylrd

Com veieu, podeu crear les escales seqüencials o divergents a partir dels nostres colors a l’escala catagòrica 😇 —o fer servir els esquemes de color per defecte a Plot.