Metro Los Leones | Providencia
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 NXT | Jadelle | Levoplant | |
|---|---|---|---|
| Duración | 5 años | 5 años | 3 años |
| Varillas | 1 | 2 | 2 |
| Efectividad | > 99,9% | > 99,5% | > 99,5% |
| Hormona | Etonogestrel | Levonorgestrel | Levonorgestrel |
| 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.