La banda de cierre que construimos sesenta veces

Lo que encontramos en nuestro propio sitio

Este sitio tiene noventa y siete páginas públicas en tres idiomas. Casi todas las que venden algo terminan igual: una banda oscura con un título, una frase, un botón relleno para agendar una llamada y un enlace discreto a la auditoría gratuita. Es un solo bloque. Debería haber existido una sola vez.

Existía sesenta veces. Cada página llevaba su propia copia del código, y cincuenta y cinco páginas llevaban su propia copia de las reglas de diseño de los dos botones. Eran idénticas, hasta que una página se escribió sin ellas. En esa página los dos botones quedaron pegados a la frase de arriba y entre sí. Un lector lo notó antes que nosotros.

Contamos el resto. El encabezado de página está construido a mano en treinta y cinco páginas. El contenedor de sección con la etiqueta pequeña a la izquierda aparece ciento ochenta y seis veces en cuarenta y cinco páginas. La cuadrícula numerada de puntos está en treinta y nueve. Los componentes compartidos de verdad aparecían mucho menos: la lista de tarjetas del blog en treinta y tres, la banda de suscripción en dieciocho.

Por qué un visitante lo nota

Nadie que lee el sitio de un instituto de políticas está pensando en componentes. Está pensando en si la organización parece competente. La consistencia es uno de los hallazgos más antiguos de la investigación en usabilidad; es la cuarta de las diez heurísticas de Nielsen, y dice que lo mismo debe verse y comportarse igual en todas partes.

La razón no es estética. Las personas construyen un modelo de una interfaz en segundos y luego dejan de mirar con atención. Cuando un botón que era azul y cuadrado en la página anterior es azul y un poco más redondeado en esta, el modelo se rompe y el lector tiene que volver a mirar. No sabrá nombrar qué cambió. Registrará que algo está raro, y esa sensación se adhiere a la organización, no a la página.

Por eso la página del contrato con los botones apretados importaba más que dos píxeles faltantes. La página anterior tenía los botones bien espaciados. El lector llegó a la que vende el servicio y la encontró hecha por alguien con prisa.

Por qué cuesta velocidad

Un bloque compartido se escribe una vez y su estilo se escribe una vez. Un bloque copiado envía su estilo con cada página que lo lleva. En este sitio, eliminar las reglas duplicadas de los botones borró ciento cuatro declaraciones de cincuenta y cinco páginas, cada una de las cuales un teléfono venía descargando y procesando para nada.

En un sitio WordPress pasa lo mismo a través de los constructores de páginas. Una sección copiada de una página a otra lleva su propia configuración y a menudo su propio código generado. Cien páginas construidas así envían cien variaciones de lo mismo, y el sitio se vuelve un poco más lento con cada una.

Por qué cuesta dinero

Los botones apretados se arreglaban con una línea. Hacer el mismo arreglo a mano en cincuenta y cinco páginas es una mañana, y la página cincuenta y seis se queda sin él. Con un componente, el arreglo se hace una vez y todas las páginas lo tienen. Esa diferencia es buena parte de lo que paga un contrato de mantenimiento: poder cambiar algo en un solo lugar y confiar en que todo el sitio lo siguió.

Hay también una lección honesta sobre cómo se construyó este sitio. Las páginas se escribieron deprisa en agosto, y cada una nueva copiaba a su vecina, como hace cualquier proceso rápido, sean las manos de una persona o de una máquina. Un copiador produce sesenta casi-copias a menos que se le diga que produzca un componente. Ahora se le dice. Una verificación en nuestro despliegue rechaza cualquier página que declare sus propias reglas para un bloque que ya tiene componente.

Cómo saber si su sitio tiene esto

Abra tres páginas de distintas partes de su sitio en tres pestañas. Mire los botones, los títulos, el espacio alrededor de la sección de cierre y la forma en que se rotula una foto. Si son iguales, alguien construyó un sistema. Si son casi iguales, alguien copió, y las diferencias crecerán con cada edición.

Hágale a quien lo mantiene una pregunta más simple: si mañana cambiáramos el color de todos los botones, ¿cuántos lugares tendría que tocar? Uno es la respuesta correcta. En WordPress significa un tema con sus propios bloques o patrones, con el estilo en un solo lugar. Un número de decenas significa que el sitio es un montón de páginas que hoy casualmente se parecen.

Qué estamos haciendo con el nuestro

La banda de cierre ya es un componente, y las reglas de los botones viven en una sola hoja de estilos, así que las cincuenta y siete páginas que aún llevan el código antiguo ya heredan el espaciado correcto. El resto pasa a componentes en orden según cuántas páginas dejan de llevar su propia copia: el encabezado de página, el contenedor de sección, los puntos numerados, la foto con pie, la banda de evidencia.

También hay ahora un catálogo, una página privada donde cada componente se muestra con contenido de ejemplo en claro y oscuro y en los tres idiomas, con sus reglas al lado. Antes de que alguien agregue una sección a una página, esa es la página que hay que abrir. Escribiremos sobre la migración cuando termine, con los números.