2. Repte. El disseny d’interfícies web

2.3. Els elements

Els elements del disseny d’interfícies es poden dividir en cinc capes dependents. Cada nivell es basa en el nivell anterior i progressen d’un nivell més abstracte a un més concret (de baix a dalt):

Encara que, en general, els plànols són dependents de baix a dalt, això no vol dir que hàgim de decidir cada aspecte de les capes inferiors abans de posar-nos a treballar sobre els elements de les capes superiors. Algunes dependències són bidireccionals, de baix a dalt i de dalt a baix, i necessiten correccions de forma iterativa.

A continuació, resumim els elements de cadascuna d’aquestes cinc capes, de la més abstracta a la més concreta.

Això es podria fer mitjançant el procés d’investigació estratègica, en què s’entrevista als usuaris i a totes les parts interessades, a més de revisar els productes o les empreses de la competència.

• Requisits funcionals es refereixen a les funcions o característiques del producte, com funcionen les característiques entre si i com s’interrelacionen entre si. Aquestes característiques són el que l’usuari necessita per a aconseguir els objectius.
• Requisits de contingut es refereixen a la informació que necessitem per a proporcionar el valor. Informació com ara text, imatges, àudio, vídeos, etc. Sense definir el contingut, no tenim idea de la grandària o del temps requerit per a completar el projecte.

Per exemple, la característica és tenir un reproductor multimèdia per a cançons, mentre que el contingut són els arxius d’àudio per a aquestes cançons.

L’estructura es divideix en dos components, el disseny d’interacció i l’arquitectura de la informació.

• El disseny d’interacció: atesos els requisits funcionals, defineix com l’usuari pot interactuar amb el producte i com es comporta el sistema en resposta a les interaccions de l’usuari.
• L’arquitectura de la informació: atesos els requisits del contingut, defineix la disposició dels elements de contingut i la seva organització, per a facilitar la comprensió humana. Hi ha dos acostaments diferents per a crear l’esquema de categories que estructurarà la informació que presentem a l’usuari: de dalt a baix i de baix a dalt. La primera consisteix a crear l’arquitectura directament des de l’estratègia (strategy plane), tenint en compte els objectius del producte i les necessitats de l’usuari. La segona, de baix a dalt, deriva de l’scope plane i es basa en l’anàlisi dels continguts i els requeriments funcionals de la interfície. Sovint aquests dos mètodes es combinen en diferents nivells de l’arquitectura. Més endavant veurem alguns exemples.

Els wireframes s’usen àmpliament per a crear un format visual, que és un diagrama estàtic que representa un format visual del producte, que inclou contingut, navegació i formes d’interacció.

L’esquelet es divideix en tres components:

1. El disseny d’interfície presenta i organitza els elements de la interfície per a permetre als usuaris interactuar amb la funcionalitat del sistema.
2. La navegació dissenya com navegar per mitjà de la informació utilitzant la interfície.
3. El disseny d’informació defineix la presentació de la informació d’una manera que facilita la comprensió.

En aquest nivell tractem el disseny visual (o sensorial), que es dedica a l’aparença visual del contingut i els controls, que donen una idea del que l’usuari pot fer i com interactuar amb aquests. Hauria de facilitar la comprensió de les coses, augmentar la capacitat cognitiva per a absorbir el que els usuaris veuen en la pantalla.