Usabilitat

La usabilitat és la capacitat d'un sistema de proporcionar les condicions perquè els seus usuaris puguin realitzar les seves tasques de forma segura, efectiva i eficient, i que ho facin gaudint l'experiència. COm hem vist, es tracta d'una de les facetes de la UX.

Aquests són 10 principis heurístics per a dissenyar interfícies usables (segons Nielsen).

  1. Visibilitat de l'estat del sistema. Cal compartir l'estat, i no actuar sense informar, donant feedback tan aviat com sigui possible.
  2. Reflex del món real. No hi ha d'haver vocabulari desconegut, cal reflectir la terminologia més familiar.
  3. Control i llibertat de l'usuari. Permetre desfer i refer, saber com cancel.lar i sortir.
  4. Consistència i estàndards. Interna, al producte i a una família, i externa, amb els estàndards de la indústria.
  5. Prevenció d'errors. Evitar els errors en situacions proclius, sempre comprovar-los i informar si cal alguna acció.
  6. Reconèixer millor que recordar. Reduir la quantitat d'informació que cal recordar, ajudar contextualment millor que fer tutorials.
  7. Flexibilitat i eficiència. Proporcionar dreceres, personalització i customització per a permetre diferents formes de portar a terme accions.
  8. Disseny minimalista i estètic. Centrar-se en els qüestions essencials, traient aspectes innecessaris i prioritzant els objectius principals.
  9. Identificació d'errors. Els errors s'han d'expressar en un llenguatge planer que indiqui el problema de forma precisa i ofereixi una solució constructiva.
  10. Ajuda i documentació. Ajuda fàcil de buscar, en el context i amb passes concretes a realitzar.

Visibilitat de l'estat

Només podem canviar l'estat del sistema si sabem quin és aquest estat. Un cop tenim un objectiu, hi ha dos processos problemàtics o bretxes:

  • l'avaluació: quin és l'estat actual del sistema?
  • l'execució: com puc utilitzar el sistema?

Alguns consells a seguir:

  • Dissenyar el sistema per a informar de l'estat per a poder actuar sobre ell, i veure com les accions modifiquen l'estat (interdependència). A més, el disseny ha de ser familiar per als usuaris. Per exemple: el comptaquilòmetres i l'accelerador.
  • Donar una realimentació apropiada un cop es produeix la interacció, si la operació està en progrés i si ha acabat.
  • L'estat i les possibles interaccions ha de mostrar-se de forma senzilla, convidant els usuaris a actuar.

Aquests són les opcions comunicatives que tenim:

  • Indicadors: fem destacar un element per a informar l'usuari que se l'ha d'atendre. Es pot fer amb icones, variacions tipogràfiques, canvis de mida o animacions. Són contextuals, apareixen condicionalment i són passius (no cal actuar).
  • Validacions: són missatges d'error sobre un problema a una entrada per part de l'usuari, que haurà d'actuar. Es pot utilitzar una icona.
  • Notificacions: alerten l'usuari sobre esdeveniments generals al sistema no relacionats amb accions immediates. Poden ser contextuals o globals, i poden requerir o no accions.

Reflex del món real

Cal tenir en compte que nosaltres (dissenyadors) no som el mateix que els usuaris. Els termes que utilitzem li han de resultar familiars sense caldre consultar un diccionari.

La solució seria utilitzar objectes i activitats del món real. Si el model mental (teoria de com funciona el sistema) de l'usuari sobre el sistema s'assembla al de la realitat, li facilitem la comprensió i li diem que el coneixem i ens importa.

Control i llibertat

Alguns aspectes a considerar:

  • Sempre permetre anar enrere.
  • Que anar enrere sigui el que espera l'usuari.
  • Que els enllaços de tancar, sortir o cancel.lar siguin visibles i estiguin on cal.
  • Que es pugui cancel.lar una acció en qualsevol punt intermedi i, si cal, distingir-ho de tancar.
  • Poder desfer una acció fàcilment.
  • Que desfer sigui visible, i ho sigui mentre es pugui dur a terme.

Consistència i estàndards

Hi ha unes convencions que caldria respectar. Tenim internes i externes:

  • Les internes dins el nostre sistema o sistemes es pot guiar mitjançant un manual d'identitat de marca.
  • Les externes poden basar-se en les convencions i estàndards establerts a la indústria. Per exemple, com funciona la navegació, quin aspecte tenen les pàgines d'inici, l'aspecte dels enllaços o dels botons, com s'introdueix la informació als formularis, com funcionen les cistelles de la compra, etc.

Alguns nivells als quals podem actuar:

  • El visual. Per exemple, l'hamburguesa del menú per a llocs mòbils.
  • La pàgina i la distribució de botons (ordre i colors).
  • La introducció de dades de forma guiada segons el seu tipus (telèfons, dates, etc.).
  • El contingut, mantenint un to consistent de comunicació.

Prevenció d'errors

Tenim dos tipus d'errors:

  • Relliscada: és inconscient, per un descuit, l'usuari volia fer una acció però acaba fent una altra, de forma accidental.
  • Errors: és conscient, perquè el model mental de l'usuari no encaixa amb el disseny. L'acció acaba sent inapropiada per a la tasca que volem completar, perquè no hem entès com funciona el sistema.

Per a prevenir relliscades:

  • Incloure limitacions a les entrades de dades.
  • Oferir suggeriments i bons valors per defecte (tasques repetitives). Es poden utilitzar valors més freqüents o representatius.
  • Permetre formats alternatius per a introduir certs tipus de dades.

Per a prevenir errors:

  • Fes una bona visualització de l'estat.
  • Recull dades dels usuaris per veure on fallen.
  • Segueix les convencions de disseny.
  • Permet fer una previsualització del resultat.

Per a prevenir els dos tipus d'errors:

  • No obligar a recordar moltes coses.
  • Confirmar abans d'accions destructives.
  • Permetre el desfer.
  • Avisar d'errors abans de que passin.

Reconèixer millor que recordar

Cal fer visibles i fàcilment accessibles:

  • La informació necessària per a aconseguir un objectiu.
  • Les funcions de la interfície, com botons, navegació i altres elements.

Per exemple:

  • Tenir un historial o contingut visitat prèviament.
  • La revelació progressiva amaga les funcions avançades o por habituals a espais secundaris.
  • Ajuda contextual i consells en lloc de tutorials.

Flexibilitat i eficiència

No tots els usuaris tenen les mateixes necessitats. Cal:

  • Tenir mètodes diferents per a acomplir la mateixa tasca, segons les preferències.
  • Permetre l'usuari customitzar la interfície segons les necessitats, però deixant uns bons valors per defecte.
  • També pot ser que la customització la faci el sistema, llavors es diu personalització.
  • Tenir acceleradors per a usuaris avançats, que no afecten als primerencs. Per exemple, gestos o macros.

Disseny minimalista i estètic

Els aspectes estètics són importants. Les primeres impressions són importants, com també ho són la percepció visual per sobre de l'experiència. A més, reforcen la identitat de marca.

Per altra banda, el disseny minimalista demana que hi hagi tots els elements per a suportar les tasques de l'usuari, però cap altra més. Tenir elements de més pot amagar els elements necessaris. Podem reduir el soroll del disseny:

  • Aprofitant patrons universals de disseny amb connotacions positives. Per exemple, certs tipus d'imatges, com paisatges.
  • Acceptar que la bellesa està a l'ull de l'espectador, i que hem de considerar les persones.

Els cinc principis de disseny visual poden ajudar a assolir aquest disseny:

  1. Escala: utilitzar mides relatives a la importància i prioritat dins de la composició dels elements.
  2. Jerarquia visual: guiar l'ull dins de la pàgina perquè atengui els elements en ordre d'importància.
  3. Balanç: passa quan hi ha una càrrega de senyals visuals distribuïda de forma igualitària als dos costats d'un eix imaginari.
  4. Contrast: la juxtaposició d'elements no iguals per a mostrar elements diferents.
  5. Principis gestalt: la tendència a percebre diversos elements individuals com a un tot, ja que ens resulta una forma més estable.

Identificació d'errors

Segueix aquesta guia per a escriure els teus missatges d'error:

  • Cal que sigui explícit, indicant que alguna cosa concreta ha fallat.
  • Ha de ser fàcil de llegir per a qualsevol persona, sense codis ni abreviacions.
  • Ha de ser respectuós.
  • Ha de ser precís, sense vaguetats genèriques.
  • Ha d'aconsellar constructivament com resoldre el problema.

A més, els errors s'han de mostrar amb tractaments visuals que permetin identificar-los i reconèixer-los. Utilitza els visuals de les convencions, com text vermell o negreta.

Ajuda i documentació

Tenim dos tipus d'ajuda: proactiva i reactiva.

L'ajuda proactiva, abans de que es produeixi un error. L'onboarding (primer cop que veiem la interfície) i els consells contextuals són d'aquest tipus. S'orienta a familiaritzar l'usuari amb l'interfície. Pot estar fora del flux de treball i s'ignoren (push) o contextuals i són útils (pull). Guia:

  • Mantenir-la curta i en el punt on som per no distreure l'usuari.
  • Afavorir la pull sobre la push.
  • Les revelacions push haurien de ser fàcils d'ignorar.
  • Ha de ser accessible des de qualsevol lloc (fins i tot quan s'han ignorat).

L'ajuda reactiva, amb materials de consulta. S'orienta a respondre preguntes, consultar problemes o ajudar a usuaris que volen ser experts. De vegades s'orienten amb un FAQ. Guia:

  • Assegurar-se que la documentació és comprensiva i detallada.
  • La informació més important s'ha de presentar abans.
  • Considerar l'ús de gràfics i vídeos com a font secundària.
  • Permetre la cerca.
  • Organitzar per categories.
  • Subratllar el contingut visitat freqüentment.