Demo cuadros informativos

Cuadros informativos: cuatro propuestas

Mismo contenido, misma paleta y misma tipografía que los demos de exámenes. Cambia la estructura, no los datos. Los tres implantes de /procedimientos/implantes-subcutaneos/ sirven de banco de pruebas porque son el caso más difícil: tres productos con los mismos cuatro atributos.

Lo que hay hoy

🩹💪

Implanon NXT

Duración: 5 años.
Varillas: 1 varilla única.
Efectividad: > 99.9%.
Hormona: Etonogestrel.

🩹🩹💪

Jadelle

Duración: 5 años.
Varillas: 2 varillas delgadas.
Efectividad: > 99.5%.
Hormona: Levonorgestrel.

🩹🩹💪

Levoplant

Duración: 3 años.
Varillas: 2 varillas delgadas.
Efectividad: > 99.5%.
Hormona: Levonorgestrel.

El problema no son solo los emojis. Los cuatro datos van en un párrafo corrido separado por <br>: no se pueden comparar entre tarjetas porque cada valor queda a distinta altura. Y el dato que decide la compra —cuánto dura— pesa lo mismo que el nombre de la hormona.

Opción 1

Ficha técnica

Etiqueta a la izquierda, valor a la derecha, línea punteada entre medio. Los cuatro atributos quedan a la misma altura en las tres tarjetas, así que el ojo compara en horizontal sin esfuerzo.

Implanon NXT

Implante en el brazo
Duración
5 años
Varillas
1 varilla
Efectividad
> 99,9%
Hormona
Etonogestrel

Jadelle

Implante en el brazo
Duración
5 años
Varillas
2 varillas
Efectividad
> 99,5%
Hormona
Levonorgestrel

Levoplant

Implante en el brazo
Duración
3 años
Varillas
2 varillas
Efectividad
> 99,5%
Hormona
Levonorgestrel

Dónde más sirve: cualquier cuadro de dato/valor. Ficha de un DIU, requisitos de un procedimiento, composición de un panel. Aguanta de 3 a 7 filas sin verse cargado.

Opción 2

Dato protagonista

La duración sube a titular y el resto baja a etiquetas sueltas. Es la que más rápido se lee de lejos, y la que ordena la decisión por el criterio que la paciente realmente usa primero.

5 añosde protección

Implanon NXT

  • 1 varilla
  • > 99,9%
  • Etonogestrel
5 añosde protección

Jadelle

  • 2 varillas
  • > 99,5%
  • Levonorgestrel
3 añosde protección

Levoplant

  • 2 varillas
  • > 99,5%
  • Levonorgestrel

Dónde más sirve: donde hay un número que manda sobre los demás. Plazo de un examen (15 minutos), duración de un DIU, cantidad de cepas del VPH, sesiones de un tratamiento. Se cae si los tres números son iguales.

Opción 3

Tabla comparativa única

En vez de tres cuadros, una sola tabla: filas de atributo, columnas de producto. Es la única que responde de verdad la pregunta que trae la paciente, que no es “qué es Jadelle” sino “cuál me conviene”.

 Implanon NXTJadelleLevoplant
Duración5 años5 años3 años
Varillas122
Efectividad> 99,9%> 99,5%> 99,5%
HormonaEtonogestrelLevonorgestrelLevonorgestrel
Inserción$159.990$174.990$149.990
Recambio$174.990$194.990$169.990

Desliza la tabla para ver las tres columnas →

Dónde más sirve: comparar dos o tres cosas de la misma familia. Panel Express contra Ampliado, DIU de cobre contra hormonal, inserción contra recambio. El verde marca el mejor valor de cada fila — hay que decidir si se marca o no, porque marcar también es recomendar.
⚠️ En mobile las tres columnas obligan a scroll horizontal. Es el precio de esta opción.

Opción 4

Fila con las varillas dibujadas

Reemplaza el emoji por un gráfico que sí informa: una barra por varilla. Se ve de un vistazo que Implanon lleva una y los otros dos llevan dos. Formato de fila, no de grilla, así que en el celular no se apila en tres bloques altos.

Implanon NXT

5 años · 1 varilla · > 99,9% · Etonogestrel

$159.990Inserción

Jadelle

5 años · 2 varillas · > 99,5% · Levonorgestrel

$174.990Inserción

Levoplant

3 años · 2 varillas · > 99,5% · Levonorgestrel

$149.990Inserción

Dónde más sirve: listados de 3 a 6 elementos donde el precio importa tanto como la ficha. También para “Beneficios” o “Requisitos” cambiando el gráfico por el número del paso.
Es la única de las cuatro que integra el precio, así que puede fusionar el cuadro informativo con la tabla de valores y eliminar una sección entera de la página.

Opción 4

La misma fila, sin precio

Prueba de que sirve de comodín. Los otros dos bloques de la misma página —el procedimiento y los beneficios— entran en el mismo esqueleto: marcador, título, texto y un dato corto opcional a la derecha. Cambia el marcador, no el componente.

Variante A · pasos numerados

1

Evaluación pre-inserción

Revisamos tu historial clínico y confirmamos que no existan contraindicaciones. Elegimos contigo el brazo, en general el no dominante, y marcamos el sitio exacto.

2

Anestesia local

Una pequeña dosis en la zona. El procedimiento es indoloro: solo sentirás un leve pinchazo inicial, similar al de una vacuna.

3

Inserción subdérmica

Con un aplicador estéril desechable, la matrona coloca el dispositivo justo bajo la piel.

Menos de 3 min
4

Verificación y vendaje

Comprobamos al tacto que el implante quedó en su lugar y colocamos un vendaje compresivo para prevenir hematomas.

5

Carnet de implante

Te entregamos tu carnet con la fecha de inserción y la fecha exacta en que corresponde el retiro.

Variante B · lista sin marcador

Independencia total

Sin alarmas diarias ni fecha mensual que recordar.

Reversibilidad

Si decides buscar un embarazo, el retorno a la fertilidad es inmediato tras el retiro.

Discreción

El implante es flexible y queda oculto bajo la piel: no se nota a simple vista.

Costo por año

La inversión inicial es mayor, pero se reparte en 3 o 5 años de protección continua.

Hasta 12 cuotas

Con esto, la página de implantes pasa de cuatro maquetaciones distintas a una sola. Ficha de producto en Opción 1, y estas tres en Opción 4: comparativa con precio, pasos y beneficios.
Decisión pendiente: en “Costo por año” el dato de la derecha puede ser el precio mensualizado — $159.990 en 5 años son unos $2.700 al mes. Vende, pero se puede confundir con la cuota. Dime si lo pongo.

Decidido el 2026-08-29

Opción 1 como estándar del sitio. Ficha de dato/valor, etiqueta a la izquierda y valor a la derecha. Es la hermana natural de la tarjeta de examen ya aprobada.

Opción 4 como apoyo. Formato de fila, complementario y no competidor: la 1 es grilla vertical, la 4 es lista horizontal. En mobile se apila sin scroll, integra precio cuando hace falta y absorbe pasos y beneficios cambiando solo el marcador.

Opción 3 descartada por el scroll horizontal en mobile. Queda anotado que se podía evitar: con CSS puro esa tabla se convierte en las fichas de la Opción 1 bajo 860px. Si alguna vez hay una página donde comparar sea la pregunta central, se retoma desde ahí.

Opción 2 solo en casos puntuales, donde un número manda de verdad sobre los demás.