Dissenyar per a pantalla

Recursos

Introducció

Jakob Nielsen i Rolf Molich van definir el 1990 una llista de 10 principis per al disseny d’interacció. Aquests són encara vigents i encara que en aquell moment es referien a interfícies gràfiques, en realitat són aplicables a qualsevol altre tipus d’interfície.

Principis per al disseny d’interacció

Els principis de Nielsen i Molich són els següents:

  1. Visibilitat de l’estat del sistema. Els usuaris sempre han de ser informats sobre les operacions del sistema, amb indicacions fàcils d’entendre i visibles de manera immediata o en un temps raonable.
  2. Coincidència entre el sistema i el món real. El disseny ha de reflectir el llenguatge i els conceptes que els usuaris troben al món real, tenint en compte les característiques dels usuaris objectiu. Si la manera en què es presenta la informació és coherent amb l’experiència real dels usuaris, es facilita l’ús del sistema.
  3. Control de l’usuari i llibertat. Cal permetre als usuaris retrocedir, desfer i tornar a executar les accions.
  4. Consistència i estàndards. El disseny ha d’assegurar que els elements gràfics i la nomenclatura es mantinguin entre pantalles i entre dispositius, quan el producte interactiu és multiplataforma. Per exemple, una icona que en un interactiu representa un concepte no hauria de representar un concepte diferent quan s’inclou en una altra pantalla o dispositiu del mateix producte.
  5. Prevenció d’errors. És més important prevenir l’aparició d’errors que generar bons missatges d’error. Cal eliminar les accions que puguin afavorir els errors; si no es pot, es poden minimitzar o preguntar a l’usuari si està segur de voler fer-les.
  6. Minimitzar la càrrega de la memòria de l’usuari. El disseny ha d’evitar que l’usuari es vegi obligat a recordar una gran quantitat d’informació. Per a això, pot mostrar-la per mitjà d’objectes, accions o opcions. No cal que l’usuari memoritzi  la informació que rep: per tant, els processos que impliquin diversos passos, la informació sobre els passos anteriors ha de quedar visible. Així mateix, les instruccions per a l’ús del sistema han d’estar a l’abast de l’usuari.
  7. Flexibilitat i eficiència d’ús. Les dreceres del teclat permeten agilitar la interacció i són molt útils per a usuaris experts. El disseny hauria de tenir en compte tant els usuaris novençans com els experimentats, permetent atallar accions freqüents perquè l’usuari pugui agilitar les interaccions a la seva mida.
  8. Disseny minimalista. La interfície ha de contenir informació que sigui rellevant o que s’utilitzi. Cada element addicional de la pantalla competeix amb les dades rellevants i disminueix la seva visibilitat.
  9. Ajudar els usuaris a reconèixer, diagnosticar i recuperar-se dels errors. Els missatges d’error s’han d’expressar en un llenguatge clar, indicant el problema i sent orientatius sobre com aconseguir la solució.
  10. Ajuda i documentació. El millor disseny és el que no necessita ajuda. No obstant això, en ocasions és necessari disposar d’aquesta; si és així, aquesta ha de ser fàcil de trobar, estar enfocada a les tasques de l’usuari, detallar clarament els passos a seguir i ser breu.

Aspectes comunicatius

Els principis de Nielsen i Molich es refereixen fonamentalment a pautes associades amb la usabilitat del sistema. Quant als aspectes comunicatius es poden tenir en compte les pautes següents:

Conèixer l’usuari

Els objectius de l’usuari són els objectius del dissenyador. Aquest ha de saber quines són les habilitats de l’usuari, quina és la seva experiència i què necessita. Per a un dissenyador el focus està a conèixer a fons els seus usuaris.

Simplicitat

Les millors interfícies eviten elements innecessaris i són clares en el llenguatge que utilitzen.

Els elements rellevants han de ser obvis per a l’usuari i si un element no és realment rellevant cal qüestionar la seva inclusió.

Malgrat que la informació que hi ha darrere d’una aplicació és molt gran i molt complexa, la interfície ha de transmetre senzillesa i eficiència.

Claredat

Per a navegar per una aplicació l’usuari s’ha de sentir ben informat i confiat. Per a això, és necessari que sàpiga perfectament:

  • Què ha passat?
  • On està?
  • Què pot fer?
  • Què passarà quan ho faci?

En el cas d’errors inevitables, cal informar clarament de les causes de l’error i de quines accions pot fer l’usuari. El llenguatge utilitzat en aquests casos ha de ser clar i directe però empàtic.

També cal pensar si podem facilitar les coses a l’usuari: per exemple, si en un formulari hi ha un camp referit a la ubicació de l’usuari, podem omplir algunes dades per defecte tenint en compte l’IP des de la qual es connecta (deixant que les pugui modificar si no són correctes, per descomptat).

Flexibilitat

Un prototip gràfic pot tenir molt bon aspecte quan s’està treballant en aquest, però quan es converteix en una aplicació amb dades reals, se segueix veient bé?

És recomanable:

  • Basar-se en solucions que ja s’ha demostrat que funcionen bé en diferents situacions (per exemple, treballar amb reticles responsive).
  • Utilitzar una tipografia que tinguem clar que és llegible (negre sobre blanc, grandària gran, ben dissenyada).
  • Prototipar les possibles contingències del contingut: què passa si no hi ha contingut? i si n’hi ha massa?
  • Preveure tots els dispositius i resolucions.
  • Considerar quins problemes poden sorgir durant el procés de desenvolupament i proporcionar pautes clares als desenvolupadors.

Familiaritat

Als usuaris els agrada veure i utilitzar coses que els semblen familiars: no cal reinventar la roda. Això no vol dir que tots els dissenys hagin de ser iguals, però és positiu aprofitar l’experiència prèvia de l’usuari quan es dissenyen elements com ara:

  • Icones
  • Navegació
  • Call to action (també anomenats CTA, és a dir, botons especialment destacats)
  • Codis de color
  • Processos de pagament

Parlar el llenguatge de l’usuari

El copywriting (estil del llenguatge) forma part de la interfície. Conèixer els usuaris target i tenir clars els objectius del projecte són fonamentals per a definir l’estil expressiu de la interacció.

En tot cas, sigui quin sigui l’estil, aquest ha de mantenir un to conversacional, natural, clar i concís. Les etiquetes de les opcions han de ser breus i han indicar clarament quines accions activen o cap a on porten.

Eficiència

L’usuari ha de poder dur a terme les tasques de la manera més eficient, sense perdre mai els resultats del seu treball.

Per a aconseguir-ho, cal preguntar-se en primer lloc quina és la tasca que l’usuari fa més sovint i quins passos implica aquesta tasca. La interfície s’ha de dissenyar perquè aquesta seqüència d’accions impliqui el menor esforç possible (menys clics, menys pantalles, …).

Coherència

La coherència possibilita que l’usuari se senti familiaritzat amb certs elements malgrat que no els conegués prèviament. La coherència s’aplica en la creació dels patrons del llenguatge, reticle i elements de disseny. Una vegada que l’usuari aprèn com fer alguna cosa, ha de poder aplicar aquest coneixement a altres llocs de l’interactiu.

Estructura

L’estructura fa que els continguts siguin fàcilment accessibles, sense que hi hagi sensació de desordre ni aclaparament, de manera que la jerarquia dels elements sigui clarament visible.

Per a aconseguir una bona estructura, es poden seguir les recomanacions següents:

  • Col·locar els elements de manera que l’atenció recaigui en les peces més importants: la posició, el color i la grandària són fonamentals a l’hora d’establir una bona jerarquia visual. Les coses realment importants han de destacar de manera audaç.
  • La tipografia també és un element fonamental de la jerarquia visual: la grandària i el tractament del text ha de permetre diferenciar clarament quins nivells hi ha en un contingut.
  • Alinear-ho tot bé, tenint com a base un reticle.
  • Utilitzar un esquema de color coherent al llarg de tota l’aplicació.

Referències

Interaction Design Foundation. «User Interface (UI) Design». Disponible a: <https://www.interaction-design.org/literature/topics/ui-design>. [Data de consulta: 25 de gener de 2021].

Portman, J. (2016). «The core principles of UI Design». Disponible a: <https://www.invisionapp.com/blog/core-principles-of-ui-design/>. [Data de consulta: 25 de gener de 2021].

Sollenberger, K. «10 User Interface Design Fundamentals». Disponible a: <http://blog.teamtreehouse.com/10-user-interface-design-fundamentals>. [Data de consulta: 25 de gener de 2021].

usability.gov. «User Interface Design Basics». Disponible a: <https://www.usability.gov/what-and-why/user-interface-design.html>. [Data de consulta: 25 de gener de 2021].