−31 % de descuento
Lámpara de pie Arco
$ 89.900
Precio anterior: $ 129.900
Ahorras $ 40.000 (31 %)
6 cuotas sin interés de $ 14.983
Sistema de diseño · botón
Siete maneras de que el naranja vuelva al hover
En las siete, el relleno del botón hace lo mismo: pasa de #C8431A a
#A8380F y el texto se mantiene en 6,49:1. Lo que cambia es dónde vuelve
a aparecer el #FF6A3D. Ninguna variante toca el contraste del texto:
esa parte no está en discusión.
Pasá el mouse por cada una. Después recorrelas con Tab, que es como las va a encontrar quien no usa mouse.
A · Anillo (descartada)
- A favor
- Neutro, no envejece, cero riesgo de contraste.
- En contra
- No dice nada. Es la respuesta correcta, no la memorable.
B · Resplandor cálido (elegida)
- A favor
- La tienda vende lámparas: el botón se comporta como el producto. Nunca toca el texto, así que el contraste ni se discute.
- En contra
- Sobre fondo oscuro casi no se ve. Hay que verificarlo en el footer.
C · Levantar + resplandor
- A favor
- La sombra crece porque el botón se acercó: la física cierra. Se siente táctil sin ser un juguete.
- En contra
- Movimiento vertical en la grilla; con 24 tarjetas puede marear si el usuario barre rápido.
D · Sombra sólida (3D presionable)
- A favor
- El clic más satisfactorio de los seis. La affordance es obvia: esto se hunde.
- En contra
- Muestra naranja en reposo, así que en una grilla de 24 productos hay 24 barras naranjas compitiendo. Y es un estilo con fecha de vencimiento.
E · Barrido diagonal
- A favor
- Era el vínculo más directo con la marca cuando el acento del logo era diagonal.
- En contra
- La luz pasa por encima del texto blanco. Durante esos milisegundos el contraste baja. Reservarlo para un solo botón por pantalla.
G · Retroiluminación (descartada)
- A favor
- Es B llevado al extremo: la luz no rodea el botón, sale de atrás. Sigue sin tocar el texto, así que el contraste se mantiene intacto. Sobre superficie oscura es la más fuerte de las siete.
- En contra
- Sobre blanco puro el naranja saturado puede leerse como advertencia. Hay que ver que no compita con el rojo de "agotado" en la misma pantalla.
F · El acento entra
- A favor
- Marca sin movimiento del botón. Se lee igual en una grilla densa. Sobrevive bien al modo oscuro.
- En contra
- Más sutil: en móvil, donde no hay hover, no aporta nada.
La prueba que importa: la grilla
Un hover se ve lindo aislado. La pregunta real es cómo se comporta repetido veinticuatro veces, que es donde el usuario va a pasar la mayor parte del tiempo. Pasá el mouse por las tarjetas de abajo.
B · Resplandor cálido (elegida)
Alfombra Bereber 160 × 230
$ 74.500
6 cuotas sin interés de $ 12.417
−25 % de descuento
Puff tejido Nube
$ 38.900
Precio anterior: $ 51.900
Ahorras $ 13.000 (25 %)
6 cuotas sin interés de $ 6.483
Mesa auxiliar Roble
$ 62.400
6 cuotas sin interés de $ 10.400
G · Retroiluminación (descartada)
−31 % de descuento
Lámpara de pie Arco
$ 89.900
Precio anterior: $ 129.900
Ahorras $ 40.000 (31 %)
6 cuotas sin interés de $ 14.983
Alfombra Bereber 160 × 230
$ 74.500
6 cuotas sin interés de $ 12.417
−25 % de descuento
Puff tejido Nube
$ 38.900
Precio anterior: $ 51.900
Ahorras $ 13.000 (25 %)
6 cuotas sin interés de $ 6.483
Mesa auxiliar Roble
$ 62.400
6 cuotas sin interés de $ 10.400
D · Sombra sólida (3D presionable)
−31 % de descuento
Lámpara de pie Arco
$ 89.900
Precio anterior: $ 129.900
Ahorras $ 40.000 (31 %)
6 cuotas sin interés de $ 14.983
Alfombra Bereber 160 × 230
$ 74.500
6 cuotas sin interés de $ 12.417
−25 % de descuento
Puff tejido Nube
$ 38.900
Precio anterior: $ 51.900
Ahorras $ 13.000 (25 %)
6 cuotas sin interés de $ 6.483
Mesa auxiliar Roble
$ 62.400
6 cuotas sin interés de $ 10.400
La prueba del fondo: B contra su versión intensa
Una luz se juzga contra su fondo, y el sitio va a tener las dos superficies: la grilla es blanca, el pie y las franjas de campaña son oscuros. B es la elegida; G es la misma idea subida de intensidad. Pasá el mouse por los cuatro.
Sobre blanco · la grilla
Sobre oscuro · el pie y las campañas
Lo que quedó
B · resplandor cálido, al pasar el mouse y al presionar. Ya está aplicado al botón primario de todo el sitio. Los botones de esta página son el registro de las siete que se probaron, no la versión vigente.
La razón por la que gana no es estética sino del rubro. La tienda vende iluminación, y el botón se comporta como el producto: se enciende. Es el único de los siete tratamientos que se puede defender en una entrevista sin decir “me gustaba más”.
Técnicamente, lo que hace que se lea como luz y no como contorno es el spread negativo: las dos capas se achican antes de desenfocarse, así que la sombra nunca queda apretada contra la silueta del botón. Un spread positivo con poco desenfoque produce un canto nítido —un anillo disimulado—; uno negativo con desenfoque amplio produce luz. Y el desplazamiento hacia abajo es deliberado: una fuente cenital es lo que el ojo espera, y sin ese offset el resplandor parece un aura.
Además resuelve el conflicto del §8 mejor que el anillo con el que había arrancado.
La luz vive por fuera del relleno, así que el texto blanco se mantiene en 6,49:1 sin
excepción, y el #FF6A3D del brief aparece con más presencia que si se
hubiera usado como color de fondo.
Descartadas por motivos concretos: G es la versión intensa de la misma idea, pero sobre blanco el naranja saturado empieza a leerse como advertencia. D pone naranja en reposo, y con veinticuatro botones encendidos antes de que nadie los toque el precio deja de ser lo más naranja de la pantalla. E cruza el texto con la luz y baja el contraste durante el barrido. C mueve el botón en vertical, que en una grilla densa cansa.