Vols millorar els resultats dels mapes de calor de la teva web?

Amb les 4 tècniques que us proposem podrem millorar els mapes de calor esbrinant els gustos i el comportament dels usuaris.

Com ja vam dir a l’article anterior, els mapes de calor són una gran eina per saber el comportament dels usuaris en una pàgina web. Però, com podem millorar el nostre disseny web per obtenir uns millors resultats?

Abans però, deixeu-nos ampliar els tipus de mapes de calor que us vàrem explicar, amb un de nou:

Mapa de confeti.

La novetat respecte al post anterior és l'anomenat "mapa de confeti". Aquest és semblant al mapa de clics amb la diferència que no mostra la densitat sinó cada un dels clics de manera independent. Cadascun d'aquests clics el podem filtrar-los per font de referència (origen), país, hora o terme de cerca a buscadors.

Un dels avantatges d'aquest tipus de mapa és que permet veure si els usuaris fan clic a elements que no estan enllaçats a res i poder-ho solucionar. També podem saber quants clics genera un element en particular i, si s'escau, millorar la seva ubicació o potenciar-lo.

En definitiva, és un mapa que ens permet precisió i detall, de manera que podem veure quins petits elements funcionen i quins hem de canviar, potser utilitzant la primera de les 4 tècniques que us expliquem a continuació!

Endavant amb les tècniques i consells!

4 tècniques:

1. Tècnica A/B testing

Consisteix en llançar dues versions d’un mateix element, per exemple, una landing i mesurar quina de les dues versions funciona millor. En les dues versions ha d’haver algun element diferenciat, és a dir, per exemple, un CTA (Call To Action) d’un color, tamany o posició diferent, de manera que podem mesurar si, seguint amb l’exemple, funciona millor el botó al final o al principi, a la dreta o a l’esquerra, el verd o el vermell, etc.

Què pot ser subjecte de ser provat mitjançant l’A/B test?

  • Titulars i descripcions dels productes.
  • Extensió de text.
  • CTAS: paraules, colors, tamanys i posicions.
  • Formularis: extensió i tipologia dels camps.
  • Layout o estructura visual de la web.
  • Presentació del preu dels productes i/o ofertes promocionals.
  • Imatges i vídeos: ubicació, quantitat, contingut i propòsit.

D’aquesta manera podrem millorar l’efectivitat de la nostra landing page.

ab-test
BoletL’explicació en un minut i mig:

2. Tècnica de focus

Aquesta és una tècnica que prové del cinema, concretament de la tècnica del principi d’escenificació (el podeu recordar a l’article ‘Els principis de l’animació clàssica aplicats a la web’). Bàsicament es tracta de redirigir la mirada de l’usuari de manera subliminal amb les imatges i el seu contingut. Ja sigui amb les línies de punt de fuga d’una perspectiva que apuntin a la zona que ens interessa o bé utilitzar persones a les imatges que mirin o apuntin amb els braços o mans cap a la zona d’interès de la web.

Us deixem alguns exemples d'aquesta tècnica amb imatges:

focus-example-1
focus-example-2

També podem utilitzar contrastos per destacar el text que volem que es llegeixi primer. En el proper exemple, podem veure com, contrastant diferents parts del text, la mirada de l'usuari a primer cop d'ull canvia en cada cas.

focus-example-3
Bromelia

Foto: Reidastexturas

Algunes plantes, com la Bromelia tenen unes fulles en forma d’embut per redirigir l’aigua de la pluja cap al centre de la planta, on hi ha un dipòsit de fins a 8 litres en els exemplars més grans.

3. Tècnica de ruta

Partint dels resultats de mapa de calor de scroll (explicat al post anterior), podem veure fins a quina profunditat arriben els usuaris a la nostra web. Per millorar aquesta profunditat i que els usuaris puguin veure el contingut de més avall, podem anar-los dirigint com si d’una ruta es tractés, de punt a punt, no gaire allunyats entre si.

Podem fer-ho amb referències a contingut posterior, amb botons de scroll o utilitzant també la técnica de focus amb imatges que apuntin avall, per exemple una persona mirant avall.

Vegem-ne alguns exemples:

ruta-example-1

Des d'Intuix hem aplicat aquesta tècnica a la pàgina principal, us ho demostrem.

Només entrar a Intuix.cat trobem una fletxa sota el títol que ens indica que hi ha més contingut a sota, i si fem clic sobre de la fletxa, ens porta directament a la següent secció. Aquesta mateixa idea la trobem en la imatge que acaba amb la punxa d'una fletxa que apunta cap avall.

ruta-example-2

Si continuem navegant per la pàgina principal, trobem que diversos elements gràfics ajuden que l'usuari faci scroll per la web: un d'aquests, el més evident, és el separador de continguts també amb forma de fletxa que mira cap al proper punt. Dos dels menys evidents o que passen més desapercebuts son: d'una banda, el fons que dona sensació de continuïtat; i de l'altra, el text que va apareixent a mesura que anem fent scroll, aquesta és una manera de fer créixer la curiositat de l'usuari i que vagi seguint el text, com a mínim, fins on deixi d'aparèixer.

ruta-example-2

4. Tècnica de patrons

Els patrons de disseny son estàndards que es basen en estudis de comportament de lectura. Els més famosos son: El diagrama de Gutenberg y el Patró F de Jakob Nielsen.

Diagrama de Gutenberg:

Segurament és el patró de disseny més utilitzat de la història i s’utilitza en cartells, publicitat i televisió.

Basa el seu patró en el moviment de l’ull humà i determina, com es pot veure a la imatge, que els usuaris comencen a percebre informació des de la cantonada superior esquerra, movent-se horitzontalment fins a la cantonada dreta i seguidament per baixar en diagonal fins a la part inferior esquerra i tornar horitzontalment cap a la dreta.

Com es pot comprovar, aquest patró forma una lletra Z, per això el Diagrama de Gutenberg també rep el nom de Patró Z. Això ens dibuixa una forma de Z. Aquest patró és més efectiu en pàgines amb gran quantitat de text i popularment s’anomena “llegir en diagonal”.

Una derivat d’aquest patró es l’anomenat Patró Zig-Zag, que bàsicament es una concatenació de patrons Z i s’aplica en pàgines llargues.

Patró F de Jakob Nielsen:

El danès, Jakob Nielsen, denominat com “el guru de la usabilitat Web” va determinar l’any 2006 que amb el temps el comportament de lectura dels usuaris de pàgines web havia canviat i havia derivat cap a un comportament de lectura en forma de F. Segurament derivat pel fet de posar els menús a la part esquerra de la web.

D’aquesta manera, els usuaris acostumen a llegir primer en horitzontal per seguidament fer una lectura vertical de la part esquerra i tornar a fer una lectura horitzontal pel centre de la pàgina. Això crea una forma de F, com podeu comprovar a la imatge.

Aquests son els més comuns i més habituals, però hi ha molt més patrons de lectura depenent de l’usuari, del motiu de l’entrada a la pàgina o de temps que li vol dedicar. Hem de determinar a quin públic ens dirigim i quin patró volem aplicar en cada cas.

El que sí que podem dir-vos és que el caos no és bo, i per exemple, un botó:

Fibonacci

Foto: imgur

El patró més habitual que es troba a la natura el va descobrir Leonardo de Pisa (1170-1240), més conegut com a Fibonacci, amb la seva “Successió de Fibonacci” en forma d’espiral. Podem trobar-lo per exemple a la disposició de moltes fulles de plantes.

2 consells:

1. Call to actions efectius / Un, dos, tres, JA!

Els botons o call to actions han de ser prou visibles i destacar de la resta de contingut, que la vista s’hi pugui centrar ràpidament. Això sí, sempre seguint l’estètica de la web i no fer estridències :D .

Coses a tenir en compte amb els Call to actions:

  • Utilitzar copys amables. Fuig dels imperatius com “Descarrega” o “Entra” i utilitza fórmules que convidin a fer-ho, per exemple “Vols descarregar-ho?” o “Vull rebre més informació”.
  • Utiliza llenguatge adaptat al teu públic. És diferent un públic aficionat que un públic professional, un públic juvenil o un d’adult.
  • Coloca’ls a llocs estratègics i fàcils de veure. Que l’usuari se’l trobi i no l’hagi de buscar.
  • No abusis. És millor pocs i efectius que molts Call to actions que pot portar a desconfiança al visitant.
  • Integra’l amb el disseny. Que destaqui però utilitzant els colors i l’estètica del disseny global.
  • Que respiri. I si pot ser que estigui sobre una zona blanca. Un botó sobre una foto es difícil que destaqui.

2. Paciència / És la mare de la ciència!

Els mapes de calor son eines útils però necessiten temps. Si analitzem els mapes de calor d’una web amb poques visites, hem de tenir paciencia i esperar un temps prou prudencial per a que els resultats siguin fiables. Si tenim pressa i apliquem canvis amb els primers resultats, poden estar esbiaixats i no ser efectius.

13 consells per reduir el percentatge de rebot de la teva web

Camaleo - Animacions web

Foto: Mahir Dalloul

El Dragó de komodo és considerat un dels animals més pacients, ja que després d’injectar verí a una presa, pot esperar setmanes a que aquesta mori per poder alimentar-se. Mentrestant la va seguint a una distància prudencial.
Eina
Un estudi de la Universitat de Missouri va establir que un usuari tan sols necesita dues dècimes de segon per crear-se una primera impressió d'una web.

Si ens vols conèixer millor,
contacta'ns. I si t'agrada, segueix-nos!