Wireframes: què són i per a què serveixen

En aquest món nostre utilitzem molts anglicismes que de vegades es descriuen a si mateixos, però a vegades no aporten informació sobre el que són.

Wireframes, mockup, prototip, esquema o pla de pàgina... tenen molts noms encara que són poc coneguts pel públic en general i pels entorns de desenvolupament web poc professionals.

Els wireframes (nosaltres sempre utilitzem aquest terme, costums...) són la primera aproximació al que serà la web, imprescindible en la fase de conceptualització del projecte, sobretot si és una mica complex. És un esquema en què no s'aplica (i això és molt important tenir-ho clar) la proposta gràfica, ja que aquesta es fa en funció de les necessitats reflectides en el prototip.

Els wireframes són, sobretot, un esquema de la interacció en què es detallen els elements que l'usuari necessitarà per realitzar les accions que plantegem per al nostre sistema: l'espai d'accés a l'àrea privada, el botó per afegir un producte a la llista de favorits, el formulari de finalització de compra, l'espai on es reproduirà un vídeo...

D'aquesta manera ens assegurem que no se'ns passi per alt cap element necessari perquè, en la fase de disseny, tots guardin coherència gràfica entre ells (que no hi hagi pegats ni elements introduïts amb calçador en el disseny final). La idea és que els wireframes siguin exhaustius i que recullin els itineraris d'interacció: l'usuari fa clic aquí i s'obre un desplegable, quan escull una opció passa això o allò... i així successivament.

La idea és plantejar ja l'arquitectura de la informació del site: quina informació contindrà, de quin tipus serà (text, foto, vídeo, descàrregues...) i on la trobarem, i les rutes que establirem entre les diverses pàgines (en fer clic aquí s'obre tal o qual pàgina), planificant-la de manera que l'usuari la trobi amb la màxima facilitat, és a dir, ens permeten definir amb detall l'experiència d'usuari.

En el cas de projectes web complexos són una eina fonamental, per no trobar-nos (ni desenvolupadors ni client) amb que a mitjan del desenvolupament i amb el disseny tancat fa temps, hem d'afegir elements, el que pot resultar costós una vegada el procés ja està en marxa.

Per al client, de vegades signifiquen un esforç d'abstracció ja que sovint els wireframes són esquemes poc vestits i centrats en organitzar informació, més que en quedar bonics. Encara que nosaltres som dels que prefereixen donar-li una mica de vida i, encara que sigui en blanc i negre, afegir imatges on se suposa que hi haurà imatges i encara que sigui, lorem ipsums on hi haurà text justament per ajudar als nostres clients a fer-se una idea de com estem plantejant la seva web, poden ser fins i tot esbossos sobre paper.

Els wireframes són una eina de disseny funcional i, sobre la informació que aquests aporten, treballarà l'equip de disseny web.

La pregunta al final és per què es fan maquetes i prototips? Segur que els nostres amics especialistes en el tema Fuhtah :), respondrien amb més claredat a la pregunta, però en el cas d'una web, abans del toc màgic del disseny, és fonamental definir com es va a estructurar la informació perquè l'usuari la trobi i la comprengui, el flux de navegació, és a dir, plantejar una estructura que ajudi a comprendre a l'usuari la relació existent entre els enllaços és un punt importantíssim ja que una web pot tenir diversos itineraris de navegació i, finalment, defineixen la interfície del lloc: quins elements (menús, botons, camps per email, telèfon, desplegables, selecció múltiple...) estaran presents i com s'organitzaran, prioritzant la usabilitat i l'eficàcia d'aquests.

Així són els wireframes i així us ho hem explicat. Si tenen alguna cosa a afegir, comenti si us plau!