Usabilitat web: què és i com millorar-la

La usabilitat web és un seguit de principis que, regits pel sentit comú, busquen fer la vida més fàcil als usuaris digitals: tot accessible, transparent i clar en tot moment per a l’usuari. En aquest post veurem els seus principis, i un munt d’exemples i consells d’implementació. Som-hi:

Definició d’usabilitat web

Podríem definir la usabilitat web com “la facilitat d’ús de les interfícies d’usuari”, segons Nielsen & Norman, referents en la matèria.

La usabilitat web és un dels factors que componen l’experiència d’usuari UX, juntament amb d’altres com l’accessibilitat, la seguretat o la velocitat de càrrega. Encara que sovint es confon amb l’experiència d’usuari, aquesta última és molt més àmplia. La UX en el seu conjunt és una sensació, una satisfacció (o no), mentre que l’usabilitat és una cosa mecànica i gradual. Podem executar una acció usable sense que ens generi cap sensació de satisfacció.

Els 10 principis d’usabilitat web

Al sector es continuen prenent com a referència els 10 principis d’usabilitat web de Nielsen & Norman, que repassarem a continuació:

1. Visibilitat i estat del sistema

Els usuaris necessiten saber que la interacció amb la web ha estat exitosa (o si ha fracassat). El cas més típic és l’enviament d’un formulari. He de veure a la pantalla de manera MOLT CLARA si el formulari s’ha enviat correctament, o si no ha estat així. Es recomana usar colors identificatius: verd per a l’èxit, vermell per al fracàs. Podem complementar-ho amb l’enviament d’un correu de confirmació. Es tracta de reduir la incertesa a pràcticament 0. En processos llargs que requereixen pujar molts arxius o connectar amb serveis externs, mentre l’usuari espera, hem de ser transparents i informar què estem fent i que aviat finalitzarà. A nivell d’e-commerce, és clau notificar de manera clara i intuïtiva quan l’usuari ha afegit un ítem al carret.

2. Connexió del sistema amb el món real

Aquest punt fa referència al fet que el sistema ha d’usar el llenguatge i codis que reconeixerà el seu usuari final. Tant en llenguatge escrit o parlat com en el gràfic. Alguns exemples clàssics serien: implementar un llenguatge d’icones per marcar categories o serveis, o una guia de talles a una botiga online de moda. O quan ens demanen un codi de la targeta de crèdit, però ens faciliten una imatge per trobar-lo. Posem exemples, fotos de gent real com els nostres usuaris, perquè puguin traslladar la nostra proposta digital al seu món físic. A les botigues online, veureu que cada vegada s’usen més fotografies amb el producte posat per models que s’assemblin al nostre buyer persona. Així ens imaginem com ens quedarà i la mida real.

3. Control i llibertat de l’usuari

Aquest punt és molt important i sovint no es compleix. L’usuari ha de tenir el control i ser capaç d’interactuar amb la web amb llibertat, podent realitzar processos però també desfer-los si ho desitja o s’ha equivocat. Encara que al director de màrqueting li pugui interessar, no podem atrapar l’usuari a propòsit. Hem de deixar-lo fluir, retrocedir o abandonar quan vulgui. Un exemple encara visible és obligar l’usuari a tornar a la fitxa de producte per eliminar un producte del carret. Això és un 0 en usabilitat web. També és recomanable implementar breadcrumbs, un botó de tornar enrere o un current al menú, destacant amb estils la pàgina actual.

4. Coherència i estàndards

Totes les interfícies digitals han de seguir una sèrie de costums que els usuaris ja tenen interioritzats pels seus hàbits de navegació. És lícit ser creatiu, però si el 99% de webs tenen el menú en un lloc i el carret amb un aspecte determinat, innovar aquí és un risc enorme. Quan accedim a una web esperem trobar certes funcionalitats i intuïm on seran. En una botiga online esperarem una lupa per al cercador, un icona de persona per al login, un cor per a la wishlist o un carret de compra. Innovar aquí és una temeritat.

5. Prevenció d’errors

Hem dit al punt 1 que hem d’avisar l’usuari de l’estat del sistema, inclosos els errors. Però el més important és anticipar-se i evitar l’error. És important, especialment en processos complexos, incloure instruccions d’ús visibles. Estalvia errors i consultes al servei d’atenció al client:

Un escenari especialment dolorós és establir una contrasenya. Si demanem una contrasenya segura amb requisits concrets, en lloc d’esperar l’error, podem avisar abans l’usuari indicant què necessitarem:

O en una fitxa de producte amb atributs: si no tenim una talla o color disponible, no permetem afegir-lo al basket. També podem gestionar sinònims en cercadors per evitar “0 resultats”.

6. Reconèixer en lloc de recordar

L’usuari no hauria de recordar dades d’una part de la web a una altra. Posem-ho fàcil guardant aquestes dades i mostrant-les sempre disponibles. Exemples:

• guardar la seva informació d’inici de sessió
• conservar el carret o els filtres d’una cerca
• mostrar els últims productes vistos, o per compres recurrents, consultar les últimes comandes i repetir-les
• guardar alertes de cerca (vols, productes, etc.)
• habilitar bookmarks o wishlists

7. Flexibilitat i eficiència en l’ús

La personalització de continguts és una tendència creixent, però és un principi de usabilitat que ve de lluny. La web ha d’adaptar-se a tota mena d’usuaris amb necessitats diferents. En e-commerce això inclou oferir diferents mètodes de pagament i enviament. Un e-commerce amb una sola forma de pagament perdrà moltes vendes. Igual per a l’enviament: oferir diverses empreses, entrega exprés, punts de recollida o recollida a botiga augmenta la conversió.

8. Disseny estètic i minimalista

En disseny web sempre diem que menys és més, i no només per estètica: també millora la usabilitat. No és casualitat que gairebé tots els e-commerce apostin per fons blanc, tipografies llegibles i elements que respiren. Evitem webs sobrecarregades d’elements, colors i tipografies diferents. Davant del dubte, consulteu sempre la web d’Apple:

9. Informació d’errors

Els missatges d’error han de ser entenedors per a persones normals, no només per a màquines. A més del missatge, podem suggerir solucions: provar més tard, trucar al servei d’atenció al client, o mostrar productes alternatius. Especial atenció als errors en formularis, processos de compra i pàgines 404.

10. Ajuda i documentació

L’escenari ideal és que la web sigui tan clara que aquestes funcionalitats no calguin, però sempre és útil tenir-les. Tot això es pot resoldre amb documentació, FAQs, opcions d’ajuda i contacte, o fins i tot amb un chatbot (un que ajudi, no que molesti).

Conclusions

Hauries de gravar-te a foc els principis d’usabilitat web, perquè són clau en l’experiència d’usuari i tenen un gran impacte no només en termes de SEO, sinó sobretot perquè si no els complim estem perdent infinitat d’oportunitats de negoci, que al cap i a la fi és l’objectiu del 99% de les pàgines web que existeixen.