Una web coherente cuando crecen páginas y departamentos: cómo usar componentes reutilizables

Una web que crece se desmorona por acumulación, no por un error. Cada departamento añade su página, cada página resuelve los mismos problemas desde cero, y al cabo de dos años conviven seis tipos de botón y cuatro maneras de titular un servicio. El coste no es estético: es que cada página nueva reabre decisiones ya tomadas, y ya nadie sabe cuál es la versión correcta.

Un sistema de componentes sirve para cerrar esas decisiones una sola vez. No es un manual gráfico para consultar: es un conjunto de piezas ya decididas, con indicación de cuándo se usan, qué pueden cambiar y quién responde si cambian.

El síntoma no es la fealdad, es el tiempo

Antes de construir algo conviene reconocer si el problema existe de verdad. Las señales son operativas, no visuales.

• La misma información aparece en tres formas distintas según quién haya hecho la página.
• Cada página nueva empieza con una discusión sobre cómo tiene que estar hecha, en lugar de sobre qué tiene que decir.
• Ya nadie toca las páginas antiguas, porque no se sabe qué se rompe.
• Un cambio trivial, como modificar el texto de un botón en todas partes, requiere abrir treinta páginas a mano.

Si ninguno de estos síntomas se presenta, el sistema todavía no hace falta: llega cuando la web empieza a costar tiempo en cada añadido.

Las cuatro decisiones que vale la pena fijar primero

No se empieza por los casos raros. Se empieza por lo que aparece en cada página, porque es ahí donde la incoherencia se ve y cuesta.

• Títulos: cuántos niveles existen y para qué sirven. Una página tiene un único título principal; los subtítulos describen el contenido de la sección, no funcionan como eslóganes. Es la regla más aburrida y la más útil.
• Botones: cuántas formas existen y qué significan. Por lo general bastan tres, es decir, la acción principal de la página, una alternativa secundaria y un enlace de texto. Si en una página hacen falta dos acciones principales, el problema no es gráfico: es que la página tiene dos objetivos.
• Imágenes: proporciones admitidas, qué tiene que mostrar una foto de producto, de persona o de trabajo, y qué se hace cuando falta la foto. El caso de la foto que falta hay que decidirlo una vez, no improvisarlo página por página.
• Formularios: aspecto de los campos, señalización de los campos obligatorios siempre igual, dónde aparecen los errores, qué ve quien acaba de enviar. Es la parte en la que la incoherencia no queda mal: hace perder solicitudes.

Común, variante, excepción: cómo se decide

La pregunta que se repite no es cómo construir un componente, sino si una petición es realmente particular. Tres casos, por orden de frecuencia.

1. Es el mismo componente y solo cambia el contenido. Ninguna decisión que tomar: se usa.
2. Es una variante previsible, es decir, la misma pieza con una opción ya admitida, por ejemplo una ficha con imagen y otra sin ella. La variante se añade al componente y se documenta, no se recrea desde cero.
3. Es de verdad una excepción: hace falta una sola vez, en una sola página, por una razón que se sabe explicar. Se hace, se anota dónde está, y se revisa al cabo de unos meses. Si mientras tanto se ha copiado dos veces, no era una excepción, y es hora de convertirla en variante.

Un pequeño catálogo, con los límites escritos al lado

El catálogo útil no enumera componentes: dice cuándo se usan y cuándo no. Ejemplo ilustrativo para una web corporativa que está creciendo.

La columna de los límites es la que hace ahorrar tiempo: responde de antemano a la pregunta «¿puedo usarlo también aquí?», que es la pregunta con la que los sistemas se desmoronan.

Quién decide, quién actualiza, quién puede decir que no

Un sistema sin responsables dura lo que dure la permanencia de quien lo hizo.

• Una sola persona decide si una petición es variante o excepción. Puede consultar a quien quiera, pero la decisión no es colegiada: si no, no llega y cada uno actúa por su cuenta.
• Quien escribe los contenidos sabe qué componentes puede usar y con qué textos, longitudes máximas incluidas. Es ahí donde los componentes se rompen: un título de quince palabras en un espacio pensado para seis.
• Cada modificación de un componente común se comunica a quien gestiona las páginas, porque cambia en todas partes, también donde nadie estaba mirando.
• Dónde está el catálogo queda escrito en algún sitio. Si vive solo en la cabeza del proveedor, en la primera sustitución hay que empezar de nuevo.

La prueba: una página sencilla y una difícil

Un sistema solo se evalúa montando sobre él dos páginas reales, elegidas a propósito en los extremos.

1. Una página sencilla, por ejemplo la de presentación de la empresa: tiene que salir sin inventar nada. Si ya aquí hace falta una pieza nueva, faltan los cimientos.
2. Una página difícil: la que el comercial usa de verdad, con comparaciones, pruebas, archivos adjuntos y varias acciones posibles. Aquí surgen los casos que nadie había previsto.
3. Se anota cada vez que ha habido que forzar un componente para que encajara. Esa lista es el listado de variantes por añadir.
4. Se repite la prueba después de las correcciones, en las mismas dos páginas, para ver si los forzados han desaparecido.

Lo que esta guía no cubre

Aquí se habla del sistema visual: las piezas con las que están hechas las páginas y las reglas para usarlas. Cómo organizar los temas cuando los servicios son muchos, es decir, qué páginas existen, cómo se llaman y cómo se conectan, es una cuestión de estructura de la web y se aborda antes que esta. También quién actualiza materialmente los contenidos después de la entrega, y con qué herramientas, es un tema aparte.