Prosseguim amb la sèrie d'articles a través dels quals venim presentant algunes de les tendències en l'àmbit del
disseny web, i analitzant la seva evolució, si creiem que es consolidaran o no, pros i contres, etcètera. Petits detalls que ens permetin presentar un web net, ben muntat i ordenat, amb fotos i estils, convida a seguir navegant i anar descobrint què ens ofereix.
Un dels canvis més clars d'aquest últim any en disseny web, que ha passat desapercebut per a molts, són els anomenats botons fantasma. Els botons fantasma, també anomenats botons transparents o ghost buttons, són formes planes sense farciment que se solen usar per al call to action (crida a l'acció). De fet, tècnicament un ghost button no és exactament un botó en si perquè no té farciment. Seria millor descriure-ho com un marc, però això seria només semàntica.
Acostumen a ser botons simples, amb traçat fi, sense farcit, amb textos simples i una mica més grans que la resta de botons. Se solen camuflar sobre fotografies i en la part central de la pantalla. Es tracta, en definitiva, de portar els típics botons web a la mínima expressió: text, un requadre sense farciment i algun efecte hover, res més.
Com es fan servir?
En primer lloc, i potser no hi hagis parat atenció, fixa't que la majoria dels ghost buttons són més grans que els botons normals que pots trobar en una altra part de la pàgina web. Això ens ho permeten perquè mai obstrueixen la part posterior de la pantalla.
Es tracta d'un recurs utilitzat sobretot en landing pages (webs d'aterratge), ja que l'objectiu principal d'aquestes pàgines és capturar l'atenció del visitant i aconseguir una resposta a la crida a l'atenció que fem a l'usuari. El seu ús és habitual en pàgines on es presenta fotografia o vídeo de gran format, per no tapar-lo.
Pros
- Zero obstrucció de pantalla: no obstrueixen la vista dels objectes que es troben darrere.
- Menor mida d'arxius: ja que només són marcs, el seu pes és molt menor. Això facilita la càrrega de la web, ho agraeix l'usuari (sobretot mòbil) i millora el SEO.
- Mobile friendly: en un mòbil cada polzada d'espai de la pantalla té valor, i col·locant-hi ghost buttons aprofitem cada racó.
- Útils: les taxes de conversió i tests A / B realitzats demostren que funcionen molt bé des del punt de vista estètic, són capaços de cridar l'atenció del visitant.
- Embut: poder col·locar un botó transparent en un lloc estratègic, sense límit de mida i permetent veure el rerefons, ens pot ajudar a fer que l'usuari traci la seva navegació com nosaltres pretenem.
- Tot terreny: encara que inicialment es van aplicar sobretot en webs sobre tendències i moda, el seu ús s'ha estès a tot tipus de disseny web, tipografia o sector.
- Plus: els dissenyadors que fan servir els ghost buttons tindran un avantatge competitiu sobre els que no, per tant pot ser una cosa única que oferir al teu client.
Contres
- Com tot en aquesta vida (i més si es tracta de disseny), podríem estar davant d'una moda passatgera, i la seva popularitat pot esvair-se fins al punt que hagis de redissenyar la teva pàgina web en un temini breu.
- Alguns n’estan abusant: pot ser que no tots els esquemes de disseny necessitin els ghost buttons, però alguns desenvolupadors insisteixen en usar-los de totes maneres; limitar-se a usar-los on es necessiten té més sentit.
- Funcionalitat: si vols que aquests botons siguin un element funcional en el teu disseny web, aleshores et caldrà seguir les regles per mantenir-lo net i llegible, i evitar qualsevol tipus de sentit vistós.
Alguns exemples de com hem implementat els ghost button en disseny web són: Vila Hermanos, Fresh Laudry o Art&Servei.
