Guia SEO Pas 9: Optimització del Disseny

Aquest és el Pas 9 de la Guia SEO de 13 Passos. L'optimització del disseny és on SEO es troba amb conversió — perquè classificar no serveix de res si els visitants no prenen accions.

Pots classificar-te #1, tenir etiquetes meta perfectes, temps de càrrega ràpids i enllaços de retrocés autoritzats — i encara així fracassar. Per què? Perquè el teu disseny no guia els visitants cap a l'acció que vols que prenguin.

L'optimització del disseny se situa a la intersecció de SEO i CRO (Optimització de la Taxa de Conversió). Google mesura senyals d'interacció de l'usuari — taxa de rebot, temps de permanència, pogo-sticking. Un disseny confús provoca els tres. Un disseny clar i estratègic millora els tres.

Les dades són clares: les pàgines amb dissenys optimitzats veuen un augment del 30-80% en les taxes de conversió sense trànsit addicional. Això és ingressos gratuïts dels visitants que ja tens.

Què Cobreix l'Optimització del Disseny

L'optimització del disseny abasta 8 àrees:

Contingut per Sobre de la Línia de Vista — El que els usuaris veuen sense desplaçar-se
Jerarquia Visual — Guiar l'ull cap al que importa
Disseny en Patró F i Z — Com els usuaris escanejen realment les pàgines
Ubicació del CTA — On els botons i enllaços converteixen millor
Espai Negatiu i Llegibilitat — Espai que millora la comprensió
Patrons de Disseny per a Mòbils — Zones per al dit i flux vertical
Anàlisi de Mapes de Calor — Decisions de disseny basades en dades
Disseny Enfocat en la Conversió — Disseny que impulsa resultats empresarials

1. Contingut per Sobre de la Línia de Vista

"Per sobre de la línia de vista" és el que veuen els usuaris abans de desplaçar-se. En ordinadors de sobretaula, són aproximadament els 600-800px superiors. En mòbils, són 500-700px. Aquesta és la teva propietat més valuosa.

El que ha d'aparèixer per sobre de la línia de vista:

Un títol clar que respon a "De què tracta aquesta pàgina?"
La teva proposta de valor principal o missatge clau
Almenys un CTA o acció següent clara
Prova visual de credibilitat (logos, valoracions, insígnies de confiança)

El que s'ha d'evitar per sobre de la línia de vista:

Imatges d'hero gegants sense text (malbaraten espai)
Menús de navegació que empenten contingut cap avall
Banners de cookies que obstrueixen tot el viewport
Vídeo que s'autocomeça i retarda el renderitzat del contingut

La prova dels 5 segons: Mostra la teva pàgina a algú durant 5 segons. Pot dir-te de què tracta la pàgina i què ha de fer a continuació? Si no, el teu contingut per sobre de la línia de vista està fallant.

Guany ràpid: Comprova les teves 5 pàgines de destinació principals en mòbils. Si el primer CTA requerix desplaçament, mou-lo amunt. Les pàgines amb CTAs visibles per sobre de la línia de vista converteixen un 17% millor de mitjana.

2. Jerarquia Visual

La jerarquia visual determina l'ordre en què els usuaris processen informació a la teva pàgina. Es controla per mida, color, contrast, espaiat i posicionament.

La piràmide de jerarquia (superior = més atenció):

| Nivell | Propòsit | Exemple | |--------|----------|---------| | Primari | La cosa única que vols que facin els usuaris | Botó principal del CTA, títol d'hero | | Secundari | Informació de suport que genera confiança | Subtítols, beneficis clau, prova social | | Terciari | Context i detall per als usuaris compromesos | Text principal, llistats de característiques, especificacions | | Quaternari | Navegació i utilitat | Enllaços al peu, mig de pàgina, informació meta |

Regles per a una jerarquia efectiva:

Només UN punt focal primari per viewport
Els elements primaris han de ser 2-3x més grans que els secundaris
Utilitza contrast (color, pes, mida) per crear nivells clars
L'espai negatiu al voltant d'un element augmenta la seva importància percebuda
Trenqueu un patró visual per atraure immediatament l'atenció

Impacte SEO: Una jerarquia visual forta millora el temps de permanència (els usuaris troben el que necessiten més ràpidament) i redueix el pogo-sticking (els usuaris no tornen a resultats de cerca).

Guany ràpid: Enfoca la teva pàgina fins que es difumini. Pots veure encara 3 nivells d'importància distintius? Si tot sembla igual, la teva jerarquia és plana i els usuaris se senten perduts.

3. Dissenys en Patró F i Z

La recerca de seguiment ocular (Nielsen Norman Group, Hotjar) demostra constantment que els usuaris escanejen les pàgines en patrons predecibles. Alinear el teu disseny amb aquests patrons assegura que el contingut crític sigui vist.

Patró F (Pàgines Càrregues de Contingut)

Els usuaris escanejen en forma d'F a les pàgines amb molt de text (entrades de blog, articles, llistats de productes):

Escanejadura horitzontal a la part superior (àrea del títol)
Es desplaça cap avall, escaneja una altra línia horitzontal (subtítol)
Escanejat vertical cap avall per l'esquerra (buscant paraules clau)

Implicacions:

Col·loca les teves paraules clau i missatges més importants a les primeres 2-3 línies
Comença els paràgrafs amb la informació clau (front-load)
Utilitza subtítols cada 2-3 paràgrafs com a "àncores escanejables"
Alinea a l'esquerra el contingut important (no centris el text)
Utilitza punts de bala i negre per a patrons escanejables

Patró Z (Pàgines de Text Minimal)

Els usuaris escanejen en forma de Z a les pàgines amb poc text (pàgines de destinació, pàgines d'inici):

Part superior esquerra a part superior dreta (logo → navegació/CTA)
Diagonal cap a la part inferior esquerra (escanejant el cos)
Part inferior esquerra a part inferior dreta (acabant en un CTA)

Implicacions:

Col·loca el teu logo i navegació a la part superior esquerra i dreta
Posiciona el teu missatge principal al centre
Col·loca el teu CTA principal a la part inferior dreta del patró
Estructura els blocs de contingut al llarg de la diagonal

Guany ràpid: Mapa la disposició actual de la teva pàgina al patró F o Z. Està el teu CTA principal posicionat on els ulls naturalment aterren al final de l'escanejat?

4. Ubicació del CTA

La ubicació del CTA (Crida a l'Acció) impacta directament les taxes de conversió. La recerca de ContentVerve, Unbounce, i les nostres pròpies dades a milers de pàgines auditades mostra patrons clars.

Posicions de CTA de alta conversió:

| Posició | Millor per | Per què funciona | |---------|------------|------------------| | A sota del títol | Pàgines de destinació curtes | Els usuaris estan preparats immediatament | | Després del primer bloc de beneficis | Pàgines de característiques | La convicció creix abans de la petició | | Després de la prova social | Pàgines de servei | La confiança redueix la fricció | | Al final del contingut | Entrades de blog, guies | Els lectors compromesos arriben al final | | Flotant/Sticky (mòbil) | Totes les pàgines per a mòbils | Sempre accessible |

Regles del CTA:

Utilitza verbs d'acció: "Comença una auditoria gratuïta" no "Envia"
Fes que el CTA sigui l'element de més contrast de la pàgina
Un CTA primari per viewport (múltiples CTAs = paràlisi decisional)
Inclou un text de micro-compromís: "No es necessita targeta de crèdit" o "Triga 30 segons"
El botó de CTA ha de ser mínim 44x44px en mòbil (estàndard Apple HIG)

El problema del fals fons: Si la teva pàgina sembla acabar abans del CTA, els usuaris deixen de desplaçar-se. Utilitza pistes visuals (contingut parcial visible, indicadors de desplaçament, teasers de contingut) per senyalar que hi ha més contingut seguit.

Guany ràpid: Afegeix un segon CTA a la part inferior de les teves pàgines de millor rendiment. Els usuaris que arriben al final estan molt compromesos — dona'ls l'oportunitat de convertir-se sense haver de desplaçar-se novament amunt.

5. Espai Negatiu i Llegibilitat

L'espai negatiu (espai en blanc) no és un espai buit — és una eina de disseny. Les pàgines amb més espai negatiu funcionen millor en gairebé totes les maneres mesurables.

El que mostra la recerca:

L'espai negatiu al voltant del text augmenta la comprensió en un 20% (Wichita State University)
Un espaiat de línia augmenta la velocitat de lectura
Marge al voltant dels CTAs augmenta les taxes de clic
Densos dissenys s'associen amb taxes de rebot més altes

Regles de llegibilitat per SEO:

Longitud de línia: 50-75 caràcters per línia (evita la fatiga visual)
Alçada de línia: 1.5-1.8 per a text principal (no apilonis línies ajustades)
Longitud de paràgraf: 2-4 oracions màximes (trenca murs de text)
Espai entre seccions: 2-3x l'alçada de la línia entre seccions
Espai per al CTA: Mínim 24px de marge al voltant dels elements clicables

Mides de font per a web:

Cos: 16-18px mínim (mòbil: 16px base)
Títols: Utilitza una escala modular (1.25x o 1.333x de ràtios)
No utilitzis més de 3 mides de font per pàgina
Ràtio de contrast mínim: 4.5:1 (compliment WCAG AA)

Guany ràpid: Aaugmenta el marge al voltant del teu CTA primari en un 50%. Molts llocs afegeixen el seu element més important amb altres continguts, fent més difícil de trobar-lo i més difícil de tocar en mòbil.

6. Patrons de Disseny per a Mòbils

El mòbil representa més del 60% del trànsit web. El disseny mòbil és fonamentalment diferent del d'escriptori — no només més petit, sinó estructurat de manera diferent.

La zona del dit: Els usuaris de mòbil agafen el seu telèfon amb una sola mà. El rang natural del dit crea tres zones:

Zona fàcil (centre inferior): Col·loca els CTAs principals aquí
Zona acceptable (centre): Accions secundàries i contingut principal
Zona difícil (cantonades superiors): Navegació, configuracions, elements poc utilitzats

Patrons específics per a mòbils:

[Menú Hamburguesa]                [Acció]
┌────────────────────────────────────────┐
│  H1: Títol clar                      │
│  Subtext: Una línia d'explicació      │
│                                        │
│  ┌────────────────────────────────┐    │
│  │     CTA PRINCIPAL (ample complet) │    │
│  └────────────────────────────────┘    │
│                                        │
│  Bloc de contingut 1                  │
│  ────────────────────────────────      │
│  Bloc de contingut 2                  │
│  ────────────────────────────────      │
│  Bloc de contingut 3                  │
│                                        │
│  ┌────────────────────────────────┐    │
│  │    CTA SECUNDARI (ample complet) │    │
│  └────────────────────────────────┘    │
│                                        │
│  [─────── NAVEGACIÓ INFERIOR ───────] │
└────────────────────────────────────────┘

Regles de disseny per a mòbils:

Apila tot verticalment (sense elements un al costat de l'altre per sota de 360px)
Els CTAs han de ser botons d'ample complet (altura 44px+)
Utilitza encapçalaments enganxosos amb moderació (consumeixen espai de viewport)
Considera la navegació per sota per a experiències semblants a aplicacions
Targetes amb 16px de marge i 12px d'espai entre elles
Desactiva els efectes de desplaçament (no existeixen en el tacte)

Guany ràpid: Prova les teves pàgines mòbils agafant el teu telèfon de manera natural amb una mà. Pots arribar al CTA principal amb el dit sense estirar-te? Si no, mou-lo més avall.

7. Anàlisi de Mapes de Calor

Els mapes de calor mostren on els usuaris realment miren, clicen i es desplacen per les teves pàgines. Transformen les decisions de disseny d'una conjectura a una optimització basada en dades.

Tipus de mapes de calor:

| Tipus | Què mostra | Què buscar | |-------|------------|------------| | Mapa de clics | On els usuaris toquen/clicen | Clics morts, CTAs ignorats, objectius de clic inesperats | | Mapa de desplaçament | Com d'ample es desplacen els usuaris | Punts de caiguda, "la línia de fold", contingut per sota del 50% | | Mapa de moviment | Moviment del ratolí (escriptori) | Patrons d'atenció, flux de lectura, àrees de dubte | | Mapa d'atenció | Temps dedicat a veure àrees | Zones de gran valor, contingut ignorat |

Com utilitzar les dades del mapa de calor:

Executa el seguiment del mapa de calor durant 2-4 setmanes (necessites 1000+ sessions)
Busca "zones mortes" on ningú clica — elimina o repositiona aquest contingut
Troba "clics de ràbia" (clicant ràpidament en elements no clicables) — fes que aquests elements siguin funcionals o elimina'ls
Comprova la profunditat de desplaçament: si el 70% dels usuaris no arriben mai al teu CTA, mou-lo amunt
Compara patrons mòbils contra escriptori — sovint difereixen dràsticament

Eines per a l'anàlisi de mapes de calor:

Microsoft Clarity (gratuït, trànsit il·limitat, gravacions de sessions)
Hotjar (nivell gratuït: 35 sessions/dia)
FullStory (empresa, reproducció completa de sessions)

Connexió SEO: El mòdul d'escaner de disseny de LANGR analitza la ubicació dels CTAs, la densitat de contingut per sobre de la línia de vista i la mida dels objectius tàctils mòbils. Identifica problemes de disseny que es correlacionen amb senyals d'interacció deficients — les mateixes senyals que Google utilitza per classificar.

Guany ràpid: Instal·la Microsoft Clarity (gratuït, 5 minuts). Espera una setmana. Comprova el teu mapa de desplaçament a la teva pàgina més visitada. Si la majoria dels usuaris deixen de desplaçar-se abans d'arribar al teu CTA, tens un problema de disseny.

8. Disseny Enfocat en la Conversió

Cada decisió de disseny hauria de servir a un objectiu de conversió. Aquí t'expliquem com estructurar les pàgines per a diferents tipus d'intenció:

Pàgines d'informació (entrades de blog, guies):

Contingut primer, CTAs en punts de decisió naturals
CTAs dins del contingut després de les seccions de gran valor (no interrupcions)
Widgets de "contingut relacionat" que augmenten la profunditat de la sessió
Captura d'email al 50% i 100% de profunditat de desplaçament

Pàgines de transacció (producte, preus, registre):

Hero amb proposta de valor + CTA per sobre de la línia de vista
Prova social immediatament sota de la línia de vista (testimonis, logos, estadístiques)
Blocs de característiques/beneficis que es construeixen cap al CTA
Barra de CTA enganxosa en mòbil després de desplaçar-se més enllà de l'hero
Preguntes freqüents abordant objeccions prop de la part inferior del CTA

Pàgines de navegació (categoria, pàgines d'hub):

Matriu clara de opcions amb diferenciació visual
Mecanismes de filtratge/classificació que redueixen la càrrega cognitiva
Articles destacats per a contingut de alta prioritat
Breadcrumbs per a orientació

La regla de la proporció contingut-CTA: Per cada 3 seccions de contingut, inclou 1 oportunitat de CTA. No pop-ups agressius — enllaços contextals, CTAs en línia o barres enganxoses.

La Llista de Verificació de l'Optimització del Disseny

Comprova això per cada pàgina important:

[ ] Missatge primari i CTA visibles per sobre de la línia de vista (sense necessitat de desplaçament)
[ ] Claritat visual amb 3+ nivells distintius
[ ] Disseny que coincideix amb el patró F (contingut) o el patró Z (pàgina de destinació)
[ ] El CTA primari és l'element de més contrast a la pàgina
[ ] Espai negatiu: longitud de línia de 50-75 caràcters, alçada de línia de 1.5+
[ ] Mòbil: el CTA primari a la zona del dit, objectius tàctils de 44px+
[ ] El mapa de desplaçament mostra que el 50%+ dels usuaris arriben al CTA principal
[ ] No hi ha clics de ràbia en elements no interactius
[ ] La pàgina no sembla "acabar-se" abans de l'acabament real (fals fons)
[ ] Ràtio de contrast de fonts 4.5:1+ (compliment WCAG AA)

Com LANGR Detecta Problemes de Disseny

El mòdul d'escaner de disseny de LANGR utilitza IA per analitzar el disseny de la teva pàgina a través de tres dispositius (mòbil, tauleta, escriptori). Comprova:

Visibilitat del CTA: Són visibles els CTAs per sobre de la línia de vista en cada dispositiu?
Densitat de contingut: Hi ha prou contingut significatiu a la primera vista?
Objectius tàctils: Els elements mòbils compleixen la mínima de 44x44px?
Jerarquia visual: Hi ha un element primari clar per vista?
Falsos fons: La pàgina sembla acabar abans d'hora?
Consistència d'espaiat: Són consistents els marges i el padding?

Aquesta és una de les 13 disciplines SEO de LANGR. Cada auditoria comprova automàticament el teu disseny i identifica exactament on és probable que els visitants abandonin.

Errors Comuns de Disseny (Classificats per Impacte)

Sense CTA per sobre de la línia de vista — La majoria dels usuaris mai no es desplacen més enllà de la primera pantalla
Jerarquia visual plana — Tot sembla igual d'important = res no és important
Blocs de contingut densos — Pàgines amb murs de text causen rebot immediat
Disseny d'escriptori en mòbil — Elements un al costat de l'altre que es tornen il·legibles
CTA enfonsat després del contingut — Només els usuaris compromesos (minoria) ho veuen
Objectius tàctils minúsculs — Botons de 30px causen clics de ràbia i sessions abandonades
Falsos fons — El disseny suggereix que la pàgina acaba abans de veritat
CTAs competidors — Diversos botons amb igual prominència causen paràlisi decisional

Què Ve Dins?

Pas 10: SEO Multilingüe — Arribant a audiències globals amb hreflang, qualitat de traducció, ruteig regional i segmentació internacional sense diluir les teves classificacions.

Aquest guia és part de la sèrie de LANGR sobre SEO de 13 passos. Realitza una auditoria gratuïta per veure com es troba el teu lloc en les 13 disciplines.

Guia SEO Pas 9: Optimització del Disseny — On Col·loques els Elements Importa Més del Que Penses