En este momento estás viendo Diseño Web: El uso de botones fantasma
diseñar con botones fantasma

Diseño Web: El uso de botones fantasma

Los botones son elementos muy importante en una web. Básicamente un botón es el elemento principal de llamada a la acción (CTA) para que tus visitantes conviertan. Es decir, un buen botón hará que los usuarios de tu web adquieran tu producto o servicio. Si no diseñamos los botones adecuados podemos decir adiós a nuestros visitantes.

Aunque desde hace tiempo tenemos bastante claro cuales son las normas en cuanto a diseño de botones, desde 2014 tenemos un nuevo y controvertido estilo de botón que gusta y disgusta por partes iguales. Estos elementos son los botones fantasma.

La peculiaridad de los botones fantasma es que son transparentes, es decir, no tienen color de relleno. Pero claro, precisamente por eso, la lógica nos lleva a pensar que no son botones recomendables ya que no parecen ser elementos tangibles o «clicables». Sin embargo, varias investigaciones sobre usabilidad nos demuestran que los visitantes no los ven necesariamente de esa manera.

De todas formas, vamos a explicar cuales son las ventajas y desventajas de este singular tipo de botón.

En el apartado de desventajas podemos encontrar las siguientes:

  1. Sencillez. Un botón debe guiar fácilmente a los visitantes para llevarlos a donde nos interesa de nuestro sitio web y para ello usamos botones con colores que llamen la atención. Sin embargo los botones fantasma solo tienen color en el borde del botón y en las letras interiores. Por ello, para usar botones fantasma debemos usar otros elementos complementarios que ayuden a conseguir la deseada llamada a la acción.
  2. Familiaridad. Los usuarios están acostumbrados a buscar botones vistosos, incluso botones con efectos 3D para que parezcan elementos físicos. Los botones fantasma les obliga a pensar y a aceptar algo nuevo que no pertenece a los estándares de usabilidad.
  3. Legibilidad. Mientras que los botones tradicionales permiten usar colores llamativos para el botón y un color más claro para el texto, los botones fantasma deben contar en un color de fuente más oscuro y en un fondo (en algunos casos) que permita que destaque dicho texto.
  4. Transparencia. Al ser transparente debemos tener mucho cuidado al elegir el fondo sobre el que ubicamos dicho botón. No podemos usar un botón fantasma con letras blancas ubicando el botón sobre una imagen que tenga demasiado blanco ya que, como es lógico, anulará el factor de llamada de acción.
  5. Ubicación. Mientras que podemos colocar los botones tradicionales en cualquier sitio de nuestra web, los botones fantasma deben ser ubicados en lugares predecibles por contexto. La zona más común para encontrar un botón fantasma es debajo del texto principal en el encabezado de la página de inicio o debajo de textos cortos y descriptivos.

Por su puesto, los botones fantasma también tienen puntos fuertes. Veamos sus ventajas:

  1. Minimalismo. Se dice que los botones fantasma surgieron con el lanzamiento del iOS7, con la decisión de Apple de conseguir una interfaz más simple y limpia.
    Actualmente Bootstrap usa botones fantasma con total normalidad y con muy buen resultado.
  2. Profesionalidad. Muchos diseñadores piensan que estos botones son ideales para sitios web profesionales en donde no se deben encontrar botones llamativos que desvíen la atención del usuario. Al contrario, se requieren botones limpios que destaquen esa idea de marca profesional.
  3. Tamaño. El tamaño es muy importante a la hora de crear una llamada a la acción efectiva. Debemos tener mucho cuidado de no usar botones tradicionales coloridos demasiado grandes, sin embargo con los botones fantasma el tamaño no importa, puedes usar un gran botón fantasma sin temor a «despistar» al usuario.
  4. Plano secundario. En ocasiones necesitamos botones que puedan ser clicados pero que no sean los más destacados de una página web, por ejemplo un botón que muestra un estado o una acción secundaria o una opción que existe pero no está activa.
  5. Animación. Cuando deseamos darle vida a un diseño se puede hacer uso de la animación funcional y qué mejor que usar un botón fantasma que tenga un sutil efecto de animación. Así obtenemos un elemento sorpresa que nos indica que es una llamada a la acción.
  6. Multiples llamadas a la acción. No es una buena práctica en principio pero con los botones fantasma la huella en el usuario es mínima, pasa más desapercibido tal y como comentaba en el punto 4.

En conclusión, los botones fantasma nos pueden ser muy útiles según las circunstancias, el tipo de web, el apartado, el dispositivo usado. La simplicidad de estos elementos ayuda en gran medida a crear un diseño limpio y ordenado para una empresa que no necesita destacar tanto sus llamadas a la acción.

Son una opción estupenda para crear llamadas a la acción secundarias o como complemento ubicado sobre una imagen que apoye la percepción de que el usuario puede pulsar en ella para obtener más información o poder contratar un servicio o producto.

Deja una respuesta