Els 10 errors en usabilitat que has d’evitar

Si vols tenir una pàgina web amb bona usabilitat et presentem els errors que has d’evitar.

La usabilitat és un dels pilars fonamentals de les pàgines web, juntament amb el disseny, la creativitat i el contingut, per això és vital tenir-ne molta cura, pots refrescar la memòria amb els principis bàsics de Jakob Nielsen abans de començar.

3, 2, 1… comencem!

1. Errors de coherència i consistència en el desenvolupament i disseny de la web.

La coherència és vital, la web ha de seguir la mateixa lògica en totes i cadascuna de les pàgines, és a dir, la informació ha de ser presentada de la mateixa manera, els botons i enllaços han de ser i funcionar igual, etc.

Foto: Robert Anaschn

La teranyina és una estructura de seda construida a partir de fileres, és més resistent que un cable d’acer del mateix gruix, els fils han d’estar ben tibants perquè l’estructura no es trenqui.

2. No tenir un disseny responsive.

Actualment l’absència de disseny responsive és un error greu i, tot i això, continua sent dels errors més habituals. Ho hem dit en d’altre articles, els usuaris cada vegada utilitzen més el mòbil, si la nostra pàgina web no està preparada per funcionar, i fer-ho bé, en totes les plataformes perdrem visites i possibles clients.

Però per si encara no trobes motius suficients, aquí tens algunes dels avantatges del disseny responsive:

3. Organització deficient de l’estructura i els continguts de la web.

Els usuaris han de poder trobar el que busquen amb facilitat, per aquest motiu la web ha d’estar molt ben estructurada, és a dir, hi ha d’haver un ordre jeràrquic amb un menú clar i intuïtiu. Si el disseny és molt atractiu i original però ningú l’entén no ens serveix.

A més, també hem d’organitzar el contingut de manera que sigui agradable de llegir. Hem de tenir en compte que els usuaris miren d’esquerra a dreta, no miren la publicitat la veuen i van directament al contingut i les opcions de la pàgina. Tampoc llegeixen, escanegen i són molt impacients i mandrosos, no volen ni esperar ni buscar.

4. Textos poc llegibles.

Com ja hem dit en el punt anterior els usuaris no llegeixen, sinó que escanegen, de manera que els hem de dirigir al més important quan escanegin. Us donem unes quantes propostes sobre com fer-ho.

Títols i subtítols de diferent tamany o color.
Paràgrafs separats.
Elements gràfics (imatges, taules, gràfiques) que donin suport al contingut.
Índex, si el contingut és molt llarg (exemple: Wikipedia).
Vinyetes o enumeració.
Evitar els textos justificats, ja que no facilita als usuaris la cerca d’informació i és un problema per les persones dislèxiques.
Utilització de la negreta i la cursiva.
Comprovar que el color de la lletra i del fons estan en harmonia, és a dir, que el fons permeti la lectura.
Escollir una bona tipografia. Sobretot evitar la Comic Sans. Descobreix les raons per odiar la Comic Sans, no ho diem nosaltres.

Foto: Randall Ruiz

Podem saber l’edat de les tortugues comptant les línies de la seva closca. És una manera fàcil i fidedigna de saber quants anys tenen de manera aproximada, mitjançant un mètode clar i visible. No és un text, però és llegible!.

5. Incorrecta gestió i control d’enllaços interns.

El botó ha de ser l’adequat, igual que els enllaços interns. Han de ser visibles, espaiats amb els altres elements i que es puguin clicar amb comoditat, és a dir, que no es pugui clicar a un altre lloc per error perquè sigui molt petit o perquè no hi hagi suficient espai al seu voltant.
L’usuari ha de poder veure en el text què és un enllaç i què no. Ja sigui diferenciant-lo des d’un bon principi o que al passar-hi per sobre aquest canviï de color.
El text de l’enllaç, el que anomenem text ancla (anchor text) ha de donar pistes del contingut que hi ha a l’altra banda, hem de fugir de CTAs clàssics com: clica aquí o visita l’enllaç. Recordem que l’usuari no llegeix, per tant si en el seu escàner veu l’enllaç i li posa “clica aquí” es quedarà igual, en canvi si diu “Els 10 principis d’usabilitat de Jakob Nielsen”, sabrà què es trobarà.
Els enllaços no poden estar trencats ni conduir a un lloc o secció equivocada.
Ressaltar amb un altre color els enllaços que ja hem visitat.

6. Errors de formulari i contacte.

A EVITAR:

La sol·licitud de dades innecessàries
No posar exemples als camps requerits.
No mostrar els possibles errors que comet l’usuari durant el registre.
No incloure algún botó de ‘començar’, ‘cancelar’ o ‘reiniciar’.
Si hi ha algún error en el formulari on s’ha deixat un camp obligatori, que el formulari no guardi la informació i que l’usuari hagi de començar de nou.
No comprovar si el formulari web funciona correctament quan l’usuari retrocedeix o avança en el navegador.
No comprovar diferents opcions de disseny de formulari web com canvis visuals en els camps del formulari, per exemple, en vermell quan hi hagi un error o quan s’oblidi un camp.
No comprovar si hi ha etiquetes de formularis que no estan bé correlacionades amb els camps dels formularis d’entrada, per exemple, posar els exemples en un altre idioma.

7. Manca de mecanismes de cerca interna o ineficiència dels existents.

Una web amb bastant contingut és necessari que tingui un cercador intern. Aquest ha d’anar optimitzant-se a mesura que els usuaris el vagin utilitzant. La web pot oferir exemples escrits en el camp que s’ha d’omplir a la caixa de cerca, que el buscador ofereixi alternatives si no troba el que l’usuari busca.

Foto: Unsplash

Depèn de la classe d’arbres que visquin en un bosc podem saber quin tipus de bolet hi creixerà. Per tant, els arbres són un bon indicador de si als seus peus s’hi amaguen bolets, sempre que sigui tardor, és clar!

8. Noms de pàgina i favicon.

La nomenclatura de les pàgines ha de ser lògica i que ens avanci de què anirà. Per exemple, és millor una URL que sigui:

https://www.intuix.cat/ca/blog/millorar-resultats-mapes-calor-web

Que no una d'aquest estil:

https://www.intuix.cat/ca/3850?=xw

D’altra banda, és imprescindible tenir un favicon (icona que s’associa a la pàgina web). Serveix per identificar la pàgina web d’un sol cop d’ull en les pestanyes obertes, l’historial de pàgines visitades, etc.

9. Saltar-se els estàndards.

Hem creat una serie de normes o de convencions que tothom segueix, sortir d’aquí és exposar-se a que no t’entenguin i marxin. Uns exemples d’aquests estàndards són:

La informació més important va a dalt a l’esquerra, perquè els usuaris miren d’esquerra a dreta i de dalt a baix.
Les paraules subratllades o d’un altre color significa que són un enllaç.
Per eliminar un element el símbol serà una X o una paperera.
El botó que indica que és un menú té forma d’hamburguesa.

10. No tenir mecanismes de feedback.

És importantíssim que els usuaris sàpiguen i que vegin que darrera de la web hi ha persones. Per tant els hi ho hem de posar fàcil i accessible el fet de parlar amb nosaltres.

+1. EXTRA!

Els usuaris esperen que el logotip, situat a la part esquerra superior de la pàgina web, els retorni a l’inici. És un petit detall, però que pot facilitar-los la navegació.

Ara sí, tenim les veles hissades i el vaixell a punt, a navegar!

Tot resumit i en un únic lloc!:

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