Si hay algo extraño en tu interfaz, ¿a quién vas a llamar? ¡A los botones fantasma!
Al diseñar experiencias web intuitivas, las señales visuales —como flechas sutiles para enlaces o banners destacados— desempeñan un papel vital para guiar a los usuarios a lo largo de su navegación. Entre los elementos de interfaz, los botones fantasma ofrecen un enfoque único de jerarquía visual que mejora tanto la estética como la usabilidad.
Los botones fantasma son botones de acción. Pero, a diferencia de los botones de llamada a la acción (CTA) tradicionales que captan la atención con colores llamativos, los botones fantasma utilizan un diseño minimalista y sutil que guía a los visitantes hacia acciones secundarias o alternativas. Aunque pueda parecer contradictorio, hay muchos casos en los que un botón fantasma puede hacer que la experiencia del usuario sea más intuitiva y atractiva. Sigue leyendo para saber cómo y dónde usarlos.
¿Qué es un botón fantasma?
Los botones fantasma son botones CTA con un diseño claramente minimalista. Prefieren un fondo transparente en lugar de los fondos rellenos que suelen tener los botones CTA. A primera vista, son fáciles de pasar por alto, especialmente cuando se colocan junto a botones más evidentes que contrastan con la página en lugar de integrarse en ella; de ahí el nombre de "botón fantasma".
Los estados principales de los botones fantasma
Al igual que otros tipos de botones, los botones fantasma tienen tres estados principales: reposo, al pasar el cursor y presionado. Aquí tienes los tres estados de un botón fantasma en una plantilla clonable creada por Ailín James Tobin:
Estado de reposo
En el estado de reposo, un botón fantasma es sencillo y, por lo general, no tiene color. El ejemplo anterior utiliza un contorno, pero no todos los botones fantasma lo hacen. También puedes crear botones fantasma sin contorno, donde solo aparece el texto.
Al diseñar este estado, presta mucha atención al contraste de color, ya que los usuarios aún no están pasando el cursor sobre el botón ni leyéndolo. El botón podría pasar desapercibido si no eliges el color correcto para el texto o el contorno.
Estado al pasar el cursor
El estado al pasar el cursor ocurre cuando alguien coloca el puntero sobre el botón. Durante este estado, los diseñadores suelen cambiar el color del texto, del contorno o del fondo para que el texto sea más legible e indicar que se puede hacer clic.
Recuerda que este estado no aparecerá en dispositivos móviles, ya que no tienen cursor. Para mantener tus diseños accesibles en todos los dispositivos, diseña los otros dos estados de modo que sean legibles y visibles en pantallas más pequeñas.
Estado presionado
Después de que alguien hace clic en un botón fantasma, este debería cambiar de alguna manera única para indicar que se está realizando la acción descrita. En el ejemplo anterior, aparece un pequeño menú de contacto con el que los usuarios pueden interactuar. Pero también podrías cambiar el fondo, añadir una imagen de carga o ajustar el texto.
Si tu botón fantasma dirige a los usuarios directamente a otra página, el estado presionado solo aparece brevemente antes de que comience la carga. Usa algo rápido y directo, como invertir los colores o añadir una sombra que dé al botón un efecto de hundimiento.
Diseño web de otro nivel
Desde lo más básico hasta lo avanzado: aprende a crear sitios en Webflow con más de 100 lecciones, incluyendo los fundamentos de HTML y CSS.
Pros y contras de los botones fantasma
La sutileza que ofrecen los botones fantasma juega a su favor y en su contra de las siguientes maneras.
Pros
- Cumplen un propósito único. El diseño discreto de los botones fantasma indica que su CTA es lo suficientemente importante como para tener un botón, pero no tanto como para competir por tu atención. Esa es una señal visual matizada que los botones fantasma comunican muy bien.
- Diversifica tu sistema de diseño. Añadir elementos a un sistema de diseño es como darle más colores a un pintor. Aunque no terminen en el producto final, los botones fantasma ofrecen a los diseñadores de IU otra herramienta interesante con la que experimentar. Y quién sabe cuándo surgirá el contexto perfecto para usarlos.
- Versatilidad. Puedes ponerte creativo con los botones fantasma usando sus estados para indicar distintas cosas. Por ejemplo, puedes convertirlos en interruptores de activación rellenándolos una vez que se pulsan.
Contras
- Contraste deficiente. La transparencia de un botón fantasma hace que sea el texto el que deba contrastar con el fondo. Si tienes una imagen o un degradado detrás, es posible que el texto no alcance el contraste necesario para cumplir con las pautas WCAG.
- Reputación dudosa. Algunos diseños usan botones fantasma para ocultar opciones, como el botón de "Rechazar todas" en las cookies o el de "Desactivar cuenta". Estos casos les dan mala fama. Cuando los usuarios los ven, es comprensible que se muestren recelosos.
El impacto de los botones fantasma en las tasas de conversión
Curiosamente, los botones fantasma están diseñados para tener tasas de conversión más bajas que otros botones de acción. Según un estudio de CXL, tienen una tasa de clics un 20% menor. Por eso son perfectos para indicar que una acción no es la opción preferida.
Por ejemplo, en un flujo de incorporación (UX), podrías usar botones de llamada a la acción (CTA) llamativos para "Continuar" y botones fantasma para "Cancelar". Esto facilita que los usuarios sigan el flujo, ya que pueden distinguir rápidamente qué botones hacen avanzar el recorrido del usuario.
Factores a tener en cuenta al diseñar botones fantasma
Añade botones fantasma a tu sistema de diseño con éxito teniendo en cuenta los siguientes factores y mejores prácticas.
1. El botón fantasma no es un botón de acción principal
A menos que estés creando un diseño extremadamente excéntrico que solo use botones fantasma, resérvalos siempre para acciones secundarias. Los botones fantasma no son tan evidentes ni fáciles de detectar, por lo que un diseño de botón de acción convencional es preferible para las acciones principales que quieres que el usuario note de inmediato.
2. Ten cuidado con la imagen de fondo
Coloca los botones fantasma donde no se pierdan con el fondo para asegurar que contrasten lo suficiente y cumplan con las normas WCAG. Si se colocan sobre una imagen con colores variables, el texto del botón podría no cumplir con ese estándar si queda sobre la parte equivocada de la imagen.
Pon los botones en áreas con un fondo plano, como un banner o una fila en una página de destino. De este modo, aunque la imagen de fondo se ajuste a diferentes tamaños de pantalla o se desplace con el usuario, el botón siempre tendrá un color sólido con el que contrastar.
3. Diseña interacciones predecibles
Incluso con los diseños web más inusuales, todas tus interacciones deben seguir patrones coherentes para que los visitantes aprendan a navegar por tu sitio. Esto es especialmente cierto para los botones fantasma, ya que rompen las normas a las que los usuarios están acostumbrados. Cuando tus botones fantasma siguen un patrón coherente, los usuarios aprenderán a interactuar con ellos como con cualquier otro elemento de tu sitio.
Diseña con impacto usando Webflow
Los botones fantasma son complicados de implementar: deben fomentar acciones secundarias sin distraer de las principales. Para usarlos eficazmente, necesitas analíticas sólidas que te permitan descubrir cómo interactúan los usuarios con ellos.
Con Webflow Analyze, puedes realizar un seguimiento nativo de las interacciones de los visitantes, lo que te permite experimentar con las ubicaciones y diseños óptimos. Empieza a diseñar en Webflow hoy mismo para crear y mantener un sitio web rápido y fiable que crezca con tus necesidades.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
