Botones Fantasma. La tendencia más anticipada del diseño web para 2015
Tal vez ha pasado mucho tiempo desde que escuchaste hablar a un desarrollador web sobre el uso de botones como parte de su plan general en la construcción de una página web.
La mayoría de los diseñadores dejaron de usarlos como elementos de diseño desde, aproximadamente, el año 2003/2004, y emplearon sistemas de menú dinámicos y CSS para adornar las cosas. Pero, en un giro de eventos extraños, estos botones han regresado en los círculos de desarrolladores web, con excepción de que ahora se les conoce como ghost buttons (botones fantasma).
¿Qué es un ghost button con exactitud?
Seguro has visto los cuadros o rectángulos transparentes en las páginas web y das clic en ellos para hacer algo específico. Aquellas figuras son llamadas botones fantasma. El ghost, o fantasma, es por el hecho de que son transparentes y el resto se explica por sí solo, son botones. Para ser sinceros, un ghost button no es exactamente un botón en sí porque carece de relleno. Sería mejor describirlo como un marco, pero esto sería solo semántica.
Tal vez hayas notado que la mayoría de los ghost buttons son más grandes que los botones normales que puedes encontrar en otra parte de la página web, pero nunca obstruyen la parte trasera de la pantalla.
¿Quién los usa?
Ya que toman un espacio significativo de la pantalla, verás que estos botones son generalmente usados en páginas web de estilo aterrizaje (landing pages) porque capturan la atención del visitante y brindan una respuesta a la llamada a la atención tan funcional que motivan que los visitantes den clic. En pocas palabras, mientras más minimalista sea el diseño en cualquier página web, más probabilidades tienes de encontrar ghost buttons en posiciones claves en páginas específicas.
Los sistemas operativos más populares de los smartphones también tienden a hacer un uso generoso de los ghost buttons en el diseño su interfaz de usuario (IU). Apple hace esto de una gran manera. Desde el punto de vista de los desarrolladores web, los ghost buttons les permiten sacar provecho del campo visual de una pantalla, así que tiene sentido usarlos.
Los beneficios
Aparte del hecho que los ghost buttons están actualmente a la moda entre los diseñadores web, ¿existen otros beneficios en usarlos? Veamos algunas que vienen a la mente:
- Cero obstrucción de pantalla: No obstruyen la vista de los objetos que se encuentran detrás de ellos.
- Menor tamaño de archivos: Ya que solo son marcos, su peso es mucho menor.
- Aplicaciones móviles: Cada pulgada del espacio de la pantalla tiene valor, así que colocar los ghost buttons en los fondos de pantalla es muy útil.
- Más atención: Como funcionan muy bien desde el punto de vista estético, son capaces de llamar la atención del visitante.
- Embudo del visitante: Poder colocar botones grandes de este tipo en un lugar estratégico te permite tener un mejor “control” del embudo de navegación de tus visitantes en tu página web.
- Genérico: No importa qué tipo de esquema de diseño o tipografía decidas usar, siempre sabrás que los ghost buttons encajan muy bien por su buena apariencia.
- Funcional: No hay nada peor para un usuario que tener de descubrir dónde se encuentra el menú de navegación, algo que no ocurre con los ghost buttons.
- Único: Los diseñadores que usan los ghost buttons tendrán una ventaja competitiva sobre los que no. Es algo único que ofrecer a tu cliente.
¿Alguna desventaja?
Un hombre sabio alguna vez dijo todo lo que sube, baja; y esto se puede aplicar a las tendencias web como los ghost buttons. ¿Existe alguna desventaja desde el punto de vista a largo plazo de una empresa? La primera que se debe considerar es que estos botones pueden ser una moda pasajera y su popularidad puede desvanecerse al punto de que tengas que rediseñar tu página web.
En segundo lugar, puede no ser que todos los esquemas de diseño necesiten los ghost buttons, pero algunos desarrolladores insisten en usarlos de todos modos; usarlos donde se necesitan tiene más sentido. Y, finalmente, si quieres que estos botones sean un elemento funcional en tu diseño web, entonces necesitarás seguir las reglas de mantenerlo limpio y leíbles, y evitar cualquier tipo de sinsentido vistoso.
¿Cómo crear un ghost button?
Abajo podrás ver algunos ejemplos que puedes recrear con HTML y CSS.
Ejemplo 1
Ejemplo 2
Ejemplo 3
¿Qué piensas de los ghost buttons? ?Alguna vez has creado alguno? ¡Deja tu comentario!
Artículo cortesía de: Staff Creativa - agencia digital en Lima, Perú
Autor: Luiggi Santa María es CEO de Staff Creativa
OrtodonciaLosPalacios
La mejor manera de aprovechar todo el contenido y no quitar visibilidad sin duda.
Comunicamedia
Es muy buena idea, en nuestra empresa de Diseño Web en Sevilla lo llevamos utilizando hace varios años.
Parix
Muy buen artículo, lo voy a tener en cuenta para ponerlo en uso en mi web.
Gracias
Carlos
Es de lo mejor que puedes incluir en tu web ya que no entorpece nada la visibilidad.
oposicionesmossos
Genial artículo para los que estamos empezando en esto. Intentaré ponerlo en práctica, todo lo que sea mejorar la conversión y participación es bienvenido el problema es que a veces no sabes por dónde empezar con tanto recurso y herramienta, pero estos botones parecen muy útiles.
Gracias.
Despedidas
Antes de nada agradecer este interesante artículo, decir que no soy muy partidario de este tipo de botones, me gusta dejar bien claro al usuario que es un botón y que no.
También hay que decir que yo no soy diseñador ni muy creativo me dedico a organizar las mejores despedidas de soltera en Sevilla XD
Santi Navarro
La verdad es que es una magnífica solución para no entorpecer la visibilidad de la imagen posterior y siguen sirviendo de utilidad, a día de hoy se siguen empleando muchísimo. Saludos! :)