Els 10 principis d’usabilitat de Jakob Nielsen

Et presentem els deu punts imprescindibles perquè una web tingui una bona usabilitat. Som-hi!

La fórmula de la pàgina web perfecta combina aquests quatre elements: usabilitat, disseny, creativitat i contingut. En aquest article parlarem del primer, la USABILITAT.

Què és?

És sabut que la línia recta és el camí més curt entre dos punts, oi? Doncs la usabilitat és la línia recta de la pàgina web, és a dir, no crear ports de muntanya per arribar a la informació.

Dit de manera més tècnica, la usabilitat és el grau de facilitat d’ús que té una pàgina web pels visitants que entrin o interactuïn amb ella. Perquè així sigui ha de permetre una interacció senzilla, intuitiva, agradable i segura.

topAvantatges:

Una bona usabilitat web ens permet obtenir molts beneficis, entre ells:

  • Millorar l’experiència i la satisfacció dels visitants.
  • Fidelitzar als visitants, de manera que tornin a visitar la web.
  • Facilitar que els usuaris recomanin la web, i així generar visites addicionals.
  • Aconseguir més trànsit.
  • Aconseguir una major comunicació i feedback amb l’usuari.
  • Augmentar la durada de les visites.
  • Augmentar les vendes a través de la pàgina web.
  • Aconseguir que l’usuari es familiaritzi amb la web i, per tant, que es desenvolupi de manera fàcil i intuïtiva.

Decàleg d’usabilitat de Jakob Nielsen

Jakob Nielsen és un enginyer d'interfícies danès que es considera un dels creadors del concepte d’usabilitat. L’any 1990 va definir 10 principis de disseny basats en l’usuari que a dia d’avui encara segueixen vigents. Són els següents:

1. Visibilitat de l’estat del sistema

Minut i resultat!

L’usuari ha de saber en tot moment què està passant i obtenir una resposta el més ràpida possible a totes les seves accions. El pitjor que pot passar en una web és que no passi res. No saber si està carregant, perquè no hi ha res que ens ho indiqui o no saber si hem fet bé o no una acció.

Exemples:

  • Barres de càrrega.
  • Els breadcrumbs o molles de pa que ens mostren en quin punt ens trobem dins la web.
  • Els indicadors dels processos de compra, ens indiquen a quina fase ens trobem i quantes ens queden per finalitzar.
  • Pàgines de situació de subscripció amb confirmació.

2. Relació entre el sistema i el món real.

Les coses clares i la xocolata espessa!

El sistema ha de parlar amb el llenguatge de l’usuari, amb imatges clares, un ordre lògic i amb una interacció que sigui natural.

El símbol de la paperera com a símbol d’esborrar o eliminar elements és el més clar. La majoria de símbols han de tenir lògica i ser intuïtius, com passa amb les múltiples apps, les que tenen una nota musical són de música, la del sobre és el correu electrònic, etc.

3. Control i llibertat de l’usuari.

Qui té boca s’equivoca i qui té nas es moca!

Aquest punt potser sembla molt obvi però no s’ha de passar per alt. Hem de donar l’opció a l’usuari de desfer l’acció que acaba de fer, ja sigui perquè s’ha equivocat o perquè se’n penedeix.

Exemples: treure elements del carro de la compra de la botiga online o canviar la quantitat de productes. Editar el propi perfil o, simplement, el botó de desfer (que ve que ens aniria a la vida real, eh!).

4. Consistència i estàndards.

No facis invents o els usuaris es perdran!

Trencar les normes està bé, però no aquí. El més lògic és que si hi ha unes normes establertes que tothom segueix la nostra web també les segueixi.

Exemples:

  • La tipologia dels menús en format hamburguesa.
  • Les creus (x) per tancar.
  • Els botons verds per acceptar i els vermells per rebutjar.
  • Tots els menús han d’anar al mateix lloc, el que vulguis, però si canvia de lloc depenent de la pàgina l’usuari es tornarà boig.
Bromelia

Foto: Viviane Okubo

A la natura els animals també tenen estàndards que han de complir, un exemple són els rituals d’aparellament. Si algún animal el canvia es quedarà sol.

5. Prevenció d’errors.

Més val prevenir que curar!

Això resa la sabiduria popular, fem-li cas! Ens hem d’anticipar a tots els possibles errors que pugui cometre l’usuari i donar-li solucions en el cas que en cometi algun que no hem previst.

Exemples:

  • Funció d’autocompletar de Google o els correctors automàtics dels serveis de missatgeria instantània.
  • La confirmació de la direcció de correu electrònic en doble camp en els formularis.
  • La comprovació dels camps dels formularis en temps real.

6. Reconèixer abans que recordar.

Una imatge val més que mil paraules!

Som de naturalesa vaga, per això és millor donar-ho tot el més mastegat possible. L’usuari no vol recordar com es fan les coses o com son, prefereix reconèixer-les quan les té al davant. És per això que li hem de posar la vida fàcil.

Exemples:

  • Les previsualitzacions, podríem dir de qualsevol tipus, però un exemple concret seria els de les tipografies que apareixen al editors de textos en els quals es mostra com són.
  • Les apps de notícies ens ofereixen un llistat de temes que ens poden interessar en comptes d’introduir nosaltres les etiquetes.
Bromelia

Foto: Kim Daniel

Els arbres busquen el sol de la manera més senzilla possible, normalment el tronc s’enfila recta amunt fins que la copa arriba a fer-se un lloc entre les altres. La natura també sap que la línia recta sempre és la més curta!.

7. Flexibilitat i eficiència d’ús.

Web tot terreny!

No sabem quin tipus d’usuari anirà a parar a la nostra pàgina web, poden ser molt experimentats o novells en quant al seu ús de la informàtica. Per aquest motiu hem de preparar la pàgina web pels dos tipus d’usuaris, de manera que hi puguin navegar, per tant hem d’aconseguir flexibilitat.

Exemples:

  • El cercador de Google, si ets un usuari novell posaras la paraula al cercador, en canvi un usuari experimentat podrà fer una cerca més precisa a través d’una cerca avançada.
  • Els tutorials d’aplicacions que es poden saltar, els experimentats o faran i els novells se’l miraran.

8. Disseny estètic i minimalista.

Keep It Simple Stupid (KISS).

Les webs no han de contenir informació innecessària, ja que distraurà a l’usuari. Si no cal, no ho posis. Aquest mantra també serveix per al disseny, no calen floritures que no aporten res, l’usuari vol sites nets que carreguin el més aviat possible.

Exemple:

  • El cercador de Google té el mínim imprescindible: el doodle del moment i la barra.
Bromelia

Foto: Virginia Lackinger

En les flors, el pol·len es concentra al centre de les mateixes. Pot variar la forma, el disseny, però la situació és sempre la mateixa i tots els insectes saben on l’han d’anar a trobar.

9. Ajudar als usuaris a reconèixer, diagnosticar i corregir errors.

Qui té boca s’equivoca i qui té nas es moca!

Hem d’ajudar a l’usuari a que entengui tot el que està passant, sobretot quan hi ha errors, per això ens hem d’expressar amb un llenguatge que pugui ser entès per tothom.

Exemples:

  • No és el mateix posar només Error 404 o posar-ho acompanyat amb “ho sento, la pàgina no ha estat trobada…”.
  • Quan un usuari s’equivoca en posar una contrasenya preguntar-li si la ha oblidat i donar-li solucions: enviar un missatge de text, recuperació via mail, etc.

10. Ajuda i documentació.

Respon a totes les preguntes abans que te les preguntin!

Li hem de donar a l’usuari un manual de funcionament, encara que seguim els punts anteriors al peu de la lletra. Aquesta ajuda ha d’estar en un lloc visible i ser molt concisa.

Exemple:

  • FAQS (Frequently Asked Questions)
  • Signe d’interrogació o la i d’informació
  • Minitours, tutorials
Si ens vols conèixer millor,
contacta'ns. I si t'agrada, segueix-nos!