Tècniques de disseny de dashboards

Aquesta pàgina amplia l'apartat "Disseny de dashboards" de la pàgina de Power BI amb un tractament complet de les tècniques de disseny, independent de l'eina concreta (Power BI, Metabase, Superset, Tableau...). Els principis que es treballen aquí són transferibles a qualsevol eina de BI: el que distingeix un dashboard professional d'un amateur no és l'eina, sinó les decisions de disseny.

Relació amb la resta del bloc

La pàgina Principis de visualització tracta el disseny a nivell de gràfic individual (Tufte, data-ink ratio, selecció del tipus de gràfic, mentides estadístiques). Aquesta pàgina tracta el disseny a nivell de dashboard sencer: com es combinen diversos gràfics, KPIs i filtres en una interfície coherent.

Qué és un dashboard i per qué el disseny importa

Un dashboard és una pantalla única que mostra la informació més rellevant per assolir un o més objectius, organitzada de manera que es pugui consultar d'una ullada. Stephen Few, autor de referència en aquest camp, el defineix com "una visualització de la informació més important, necessària per assolir un o més objectius, consolidada i organitzada en una única pantalla perquè es pugui monitoritzar d'un cop d'ull".

Aquesta definició conté tres restriccions que sovint s'ignoren en dissenys amateurs:

"La informació més important": no tota la informació disponible. Un dashboard que ho mostra tot no prioritza res.
"Consolidada i organitzada": no n'hi ha prou d'afegir gràfics; cal estructurar-los amb una lògica de lectura.
"D'un cop d'ull": l'usuari ha d'extreure la conclusió principal en pocs segons, sense haver d'interactuar-hi.

El mite del \"dashboard com a informe\"

L'error de disseny més freqüent és tractar un dashboard com un informe llarg comprimit en una pantalla: amuntegar 15 gràfics perquè "tota la informació hi sigui". Un bon dashboard respon a un nombre reduït de preguntes de negoci ben definides; la resta d'informació pertany a un informe detallat o a una pàgina de drill-through (vegeu Interactivitat avançada a la pàgina de Power BI).

Tipus de dashboard

Stephen Few classifica els dashboards en tres categories segons el seu propòsit, i cada categoria implica decisions de disseny diferents.

Tipus	Propòsit	Freqüència de consulta	Nivell de detall	Exemple
Estratègic	Monitorar l'estat general de l'organització respecte als objectius a llarg termini	Setmanal/mensual	Molt agregat (KPIs globals)	Quadre de comandament de direcció: facturació anual, marge, NPS
Analític	Explorar dades per descobrir patrons, causes i tendències	Segons necessitat, sessions llargues	Mitjà-alt, amb molta interactivitat (filtres, drill-down)	Anàlisi de vendes per explicar una caiguda de marge en un trimestre
Operacional	Monitorar processos en temps real i detectar anomalies immediates	Contínua, sovint en una pantalla fixa	Detallat però d'una mètrica concreta	Panell d'un centre de control logístic: comandes en curs, incidències obertes

El tipus determina el disseny

Un dashboard estratègic prioritza la simplicitat i pocs KPIs molt visibles (sovint sense necessitat de filtres). Un dashboard analític prioritza la interactivitat i la possibilitat d'explorar (slicers, drill-through, tooltips). Un dashboard operacional prioritza l'actualització en temps real i les alertes visuals (semàfors de color). Dissenyar els tres amb el mateix criteri és un error habitual: un dashboard estratègic ple de filtres satura el directiu que només vol la conclusió en cinc segons.

Jerarquia visual i patrons de lectura

El patró Z i el patró F

La recerca en seguiment ocular (eye-tracking) mostra que els usuaris occidentals exploren una pantalla seguint dos patrons habituals:

Patró Z: l'ull recorre la part superior d'esquerra a dreta, baixa en diagonal, i torna a recórrer la part inferior d'esquerra a dreta. Habitual en pantalles amb poca densitat d'informació.
Patró F: l'ull es concentra més a l'esquerra i a la part superior, decreixent l'atenció a mesura que baixa i es desplaça a la dreta. Habitual en pantalles amb molta densitat d'informació (com un dashboard amb diversos KPIs).

Patró Z                          Patró F
┌─────────────────────┐         ┌─────────────────────┐
│ 1 ────────────────►2 │         │ 1 ──────────────────►│
│  ╲                   │         │ 2 ────────►          │
│    ╲                 │         │ 3 ──►                │
│      ╲               │         │ 4 ►                  │
│ 3 ────────────────►4 │         │                       │
└─────────────────────┘         └─────────────────────┘

Conseqüència pràctica: la mètrica més important del dashboard ha d'anar a dalt a l'esquerra, on l'ull hi arriba primer en tots dos patrons. Els elements de filtratge (slicers) solen anar a l'esquerra o a dalt, ja que no son el contingut principal però han de ser fàcilment localitzables.

La regla dels 5 segons

Un bon dashboard estratègic o operacional ha de permetre identificar la conclusió principal ("tot va bé" / "hi ha un problema a la regió Sud") en els primers 5 segons de consulta, sense necessitat d'interactuar-hi. Si cal fer clic o filtrar per saber si una xifra és bona o dolenta, falta context visual (per exemple, un indicador de tendència o un llindar de color).

❌ Sense context                    ✅ Amb context
┌──────────────┐                   ┌──────────────────────┐
│  Vendes       │                   │  Vendes               │
│  142.300 €    │                   │  142.300 €  ▲ +8,2%   │
│               │                   │  vs. mes anterior     │
└──────────────┘                   │  ●●●●○ Objectiu: 85%  │
                                    └──────────────────────┘

Graella, alineació i espai en blanc

La graella (grid)

Tots els elements del dashboard s'haurien de col·locar sobre una graella invisible (per exemple, 12 columnes), no de manera lliure. Una graella consistent fa que el dashboard es percebi ordenat fins i tot quan els visuals tenen mides diferents.

┌─────────┬─────────┬─────────┬─────────┐
│  KPI 1  │  KPI 2  │  KPI 3  │  KPI 4  │   ← Fila de KPIs (4 columnes iguals)
├─────────┴─────────┴───────┬─┴─────────┤
│   Gràfic temporal (8 col) │ Rànquing  │   ← Fila de gràfics (8 + 4)
│                            │ (4 col)   │
├────────────────────────────┴───────────┤
│         Taula de detall (12 col)        │   ← Fila de taula (12)
└──────────────────────────────────────────┘

A Power BI, l'opció Visualització → Línies de graella i ajusta a la graella activa una graella visual durant el disseny, que facilita alinear els visuals amb precisió.

Agrupació (principis de la Gestalt)

Els principis de la psicologia de la Gestalt expliquen com el cervell agrupa visualment els elements, i son directament aplicables al disseny de dashboards:

Proximitat: els elements relacionats (per exemple, un KPI i el seu gràfic de tendència associat) s'han de col·locar físicament a prop els uns dels altres.
Similitud: els elements amb la mateixa funció (per exemple, tots els slicers) han de tenir el mateix estil visual perquè es reconeguin com a grup.
Tancament: agrupar visuals relacionats dins d'una targeta o un requadre amb vora ajuda l'ull a percebre'ls com una unitat, encara que la vora no sigui estrictament necessària.

Espai en blanc (whitespace)

L'espai en blanc no és espai desaprofitat: és l'element que permet a l'ull descansar i diferenciar grups d'informació. Un error molt habitual en dashboards de principiants és omplir tot l'espai disponible "perquè no quedi buit". La densitat d'informació s'ha d'ajustar al tipus de dashboard (vegeu la taula anterior): un dashboard estratègic necessita molt més espai en blanc que un d'operacional.

Disseny de targetes KPI (KPI cards)

Una targeta de KPI ben dissenyada inclou, com a mínim, quatre elements:

L'etiqueta: qué mesura la xifra (curta, sense ambigüitat).
El valor: la xifra principal, amb la tipografia més gran del dashboard i un format adequat (separador de milers, símbol de moneda, percentatge).
El context de comparació: respecte a qué es compara (mes anterior, objectiu, mateix període de l'any passat), normalment amb una fletxa i un color (verd/vermell) que indiqui si la tendència és positiva o negativa per al negoci, no necessàriament si ha pujat o baixat.
(Opcional) Un micro-gràfic: un sparkline (vegeu Principis de visualització) que mostri la tendència recent sense ocupar l'espai d'un gràfic complet.

// Exemple de mesura DAX per a una targeta KPI amb indicador de tendència
Indicador Vendes =
VAR Actual = [Total Vendes]
VAR Anterior = [Vendes Any Anterior]
VAR Variacio = DIVIDE(Actual - Anterior, Anterior, 0)
RETURN
    SWITCH(
        TRUE(),
        Variacio > 0, "▲ " & FORMAT(Variacio, "+0.0%"),
        Variacio < 0, "▼ " & FORMAT(Variacio, "0.0%"),
        "● Sense canvis"
    )

Verd i vermell no sempre signifiquen \"bo\" i \"dolent\"

Per a una mètrica de despesa, una pujada (que normalment s'associaria a verd per ser un número més gran) és en realitat negativa per al negoci. Configura sempre el color segons el significat de negoci de la mètrica, no segons si el número és més gran o més petit.

Color a nivell de dashboard

A diferència del color a nivell de gràfic individual (ja tractat a Principis de visualització), el color a nivell de dashboard ha de seguir regles addicionals de consistència global:

Una paleta limitada: 2-3 colors principals (marca/categoria) + 1 color d'èmfasi + verd/vermell/groc reservats exclusivament per a semàfors d'estat. Més enllà d'això, l'ull deixa de poder distingir significats.
El mateix color = la mateixa mètrica, sempre: si "Ingressos" és blau en un gràfic, ha de ser blau en tots els gràfics del dashboard. Canviar de paleta entre visuals obliga l'usuari a re-aprendre la llegenda a cada gràfic.
Accessibilitat i daltonisme: aproximadament un 8% dels homes tenen alguna forma de daltonisme, majoritàriament la dificultat per distingir vermell i verd. Per a indicadors d'estat crítics, combina el color amb una forma o icona (✓/✗, ▲/▼) perquè la informació no depengui únicament del color.

❌ Només color                    ✅ Color + forma
🔴 Regió Nord: -12%               ▼ Regió Nord: -12%  (vermell)
🟢 Regió Sud: +8%                 ▲ Regió Sud: +8%   (verd)

Power BI permet aplicar temes de color consistents a tot un informe des de Visualització → Temes, incloent-hi temes personalitzats definits en JSON, cosa que garanteix la consistència de manera centralitzada en lloc de configurar cada visual manualment.

Patrons de disseny habituals per àrea de negoci

Àrea	KPIs típics a la franja superior	Visualitzacions principals
Vendes	Ingressos, marge, tiquet mig, objectiu vs. real	Evolució temporal (línia), rànquing per producte/venedor (barres), mapa per zona
Operacions/Logística	Comandes en curs, temps mitjà d'entrega, incidències obertes	Semàfor d'estat, taula d'excepcions, mapa de rutes
RRHH	Plantilla activa, rotació, absentisme	Piràmide d'edat (barres), evolució de rotació (línia), distribució per departament (barres apilades)
Finances	Marge net, cash flow, deute	Cascada (waterfall) d'ingressos a benefici net, comparativa pressupost vs. real
Atenció al client	Tickets oberts, temps de resolució mitjà, NPS	Distribució per categoria, evolució del NPS, top motius de contacte

Aquests patrons no son normes rígides, però reflecteixen el que els usuaris d'aquell perfil esperen trobar i on l'esperen trobar, cosa que redueix el temps d'aprenentatge del dashboard.

Anti-patrons habituals (qué evitar)

Anti-patró	Per qué és un problema	Alternativa
El dashboard "sopa de gràfics"	15+ visuals sense jerarquia ni agrupació; l'usuari no sap on mirar primer	Limitar a 5-9 visuals per pàgina; usar pàgines de drill-through per al detall
Gràfics 3D i efectes decoratius	Distorsionen la percepció de magnituds (vegeu Principis de visualització)	Gràfics 2D plans, sense ombres ni gradients innecessaris
Targetes KPI sense context	Una xifra solta no indica si és bona, dolenta o normal	Afegir comparació (objectiu, període anterior) i indicador visual
Filtres amagats o difícils de trobar	L'usuari no sap que pot interactuar amb el dashboard	Slicers visibles, agrupats i etiquetats clarament, en una posició consistent
Inconsistència de colors entre pàgines	Obliga a re-interpretar la llegenda a cada pàgina	Tema de color global aplicat a tot l'informe
Massa decimals	"142.347,82 €" és més difícil de llegir d'una ullada que "142,3 mil €"	Arrodonir i usar sufixos (k, M) llevat que la precisió exacta sigui imprescindible
Dashboard sense propòsit definit	Es construeix "perquè es pugui", sense una pregunta de negoci concreta al darrere	Definir, abans de dissenyar, quina decisió ha de permetre prendre el dashboard

Checklist abans de publicar un dashboard

El dashboard respon a una pregunta de negoci concreta, no "mostra dades en general".
La mètrica més important és visible als primers 5 segons, sense interactuar-hi.
Tots els visuals estan alineats a una graella consistent.
Cada KPI té context de comparació (objectiu, període anterior).
La paleta de color és consistent en tot el dashboard i no depèn exclusivament del color per transmetre informació crítica.
No hi ha gràfics 3D, ombres ni decoracions sense valor informatiu.
Els filtres (slicers) estan agrupats i en una posició predictible.
El dashboard s'ha provat amb dades reals (no només amb el dataset d'exemple), incloent-hi casos extrems (valors molt grans, valors absents, dates futures).
El nom de l'autor i la data d'última actualització son visibles.

Exemples comentats

Exemple 1 — Dashboard estratègic de vendes (bo)

┌──────────┬──────────┬──────────┬──────────┐
│ Ingressos │  Marge   │  Tiquet  │ Objectiu │  ← 4 KPIs amb tendència, sense interactivitat
│ 1,2M € ▲5%│ 32% ▲1pp │ 45€ ▼2%  │  87% ●●●●○│
├──────────┴──────────┴──────┬───┴──────────┤
│   Evolució mensual (línia) │  Top 5 prod. │  ← 1 gràfic temporal + 1 rànquing, prou
│                              │  (barres)    │     per a una lectura d'un cop d'ull
└──────────────────────────────┴──────────────┘

Per qué funciona: 4 KPIs (no 12), comparació visible a cada un, només dos gràfics de suport, sense filtres perquè és un dashboard de consulta passiva per a direcció.

Exemple 2 — Dashboard analític de vendes (bo, més dens però justificat)

┌────────────────────────────────┬─────────────┐
│  Slicers: Any | Categoria | Zona │  Total: X € │  ← Filtres agrupats a l'esquerra
├────────────────────────────────┴─────────────┤
│ Evolució temporal (línia, amb comparativa AA) │
├──────────────────────┬─────────────────────────┤
│ Per categoria (barres)│ Per zona (mapa)         │
├──────────────────────┴─────────────────────────┤
│ Taula detallada amb drill-through a comanda     │
└──────────────────────────────────────────────────┘

Per qué funciona: més dens que l'estratègic, però justificat perquè és un dashboard d'exploració actiu, amb filtres ben agrupats i una taula de detall amb drill-through en lloc d'amuntegar-hi més gràfics.

Webgrafia i referències

Llibres de referència:

Stephen Few, Information Dashboard Design: Displaying Data for At-a-Glance Monitoring — l'obra de referència sobre tipologia i disseny de dashboards.
Cole Nussbaumer Knaflic, Storytelling with Data: A Data Visualization Guide for Business Professionals — enfocament pràctic orientat a negoci, amb molts exemples de "abans/després".
Andy Kriebel, Steve Wexler i Jeffrey Shaffer, The Big Book of Dashboards: Visualizing Your Data Using Real-World Business Scenarios — un recull extens de dashboards reals comentats, organitzats per sector.
Edward Tufte, The Visual Display of Quantitative Information — el fonament teòric del disseny de visualitzacions (ja citat a Principis de visualització).

Llocs web i recursos en línia:

perceptualedge.com — el lloc web de Stephen Few, amb articles tècnics sobre disseny de dashboards i crítiques de casos reals.
storytellingwithdata.com — blog, exercicis pràctics setmanals ("SWDchallenge") i recursos de Cole Nussbaumer Knaflic.
edwardtufte.com — lloc web d'Edward Tufte, amb articles i fòrum sobre disseny de la informació.
nngroup.com — Nielsen Norman Group, articles d'investigació en UX aplicables al disseny d'interfícies de dashboard (cerca "dashboard" al lloc).
material.io/design — guia de disseny de Google (Material Design), amb principis de color, tipografia i graella aplicables a qualsevol dashboard, no només a apps mòbils.
tableau.com/public/gallery — galeria pública de dashboards de Tableau, útil per veure exemples reals (l'eina és diferent de Power BI, però els principis de disseny són els mateixos).
powerbi.microsoft.com — documentació oficial de Power BI, amb una secció de guies de disseny i temes visuals oficials.

Com aprofitar la webgrafia a la pràctica

Abans de dissenyar el teu dashboard a la Pràctica PR507407, explora 3-4 dashboards de la galeria de Tableau Public o del Big Book of Dashboards del mateix sector que el teu cas d'ús. Identifica explícitament quins dels principis d'aquesta pàgina hi reconeixes (jerarquia, graella, context als KPIs) abans de començar a dissenyar el teu.

Activitat AC5074/07/02 — Anàlisi crítica d'un dashboard

Tria un dashboard real (de la galeria de Tableau Public, d'una empresa que coneguis, o d'un informe públic d'una administració) i analitza'l aplicant la checklist d'aquesta pàgina. Per a cada punt que no compleixi, proposa una millora concreta. Lliura una captura del dashboard original i un esbós (pot ser a mà) de la versió millorada.

Bloc 7 | Mòdul M5074 Sistemes de Big Data | Institut Sa Palomera (Blanes) | Curs CEIABD 2026-2027