Què són els Wireframes i com utilitzar-los?

L’espontaneitat es una gran característica de les persones que els poden fer ser més naturals i gaudir d’aventures i viatges inesperats en el seu dia a dia. Tot i això aquestes decisions ràpides i no planificades no funcionan en situacions complexes cam l'experiència entre una persona i un sistema logic. De la mateixa manera que no es pot escriure un llibre sense primer planificar un fil conductor tampoc es pot crear un lloc web ni una aplicació sense primer planificar el seu esquelet que estrocturi el contingut. Aquest primer esbós es diu wireframe.

Els Wireframes son una eina básica en la experiència d’usuari (UX). L’UX és una part essencial en el disseny que qualsevol producte, també en els digitals. A continuació podeu trobar de forma detallada una guia per la iniciació en aquests. ¿Qué son? Perquè són necessaris? i quins son els seus principis entra altre informació de valor.

Què és un wireframe?

L’objectiu del wireframe es descriure l'estructura i la funcionalitat del flux d’usuari. Per tant qualsevol element amb el que l’usuari interactua (botons, menús i desplegables...) ha d'aparèixer representat. Així creem una descripció visual de com ha de ser l’estructura del producte, la jerarquia de la informació, el comportament, la navegació i la ubicació del contingut. Aquesta descripció es funcional, no ens comunica com serà l'aspecte visual ni el disseny de la interfície.

Per què és important el wireframing?

Un wireframe és necessari per plantejar els components essencials d’una interfície. Ajuda a tots els implicats a comprendre completament quin ha de ser el resultat funcional del producte abans de començar fases posteriors. Sense aquesta base, és complicat que les fases posteriors de disseny i producció es facin de manera correcte i àgil sense donar voltes i cometre equivocacions derivades del desconeixement de la funcionalitat del producte. També proporciona un mètode amb el que l’equip prendrà decisions en un estadi inicial del procés de manera facil i economica. A més, en ser una eina visual, els wireframes són molt més accessibles que les idees escrites que poden semblar abstractes. Mostrar un wireframe als desenvolupadors o als clients els ajudarà a entendre la intenció final, cosa que permetrà rebre feedback i implementar-lo al disseny en cas de ser necessari.

Quins tipus de wireframes hi ha?

Durant tot el procés anem perfeccionant els wireframes de manera que els podem classificar en diferents tipus segons l’estadi en el que ens trobem. A mesura que tingueu una millor idea del vostre producte, gradualment podreu implementar formes més avançades de wireframes de manera natural, construint-los a mesura que passeu d’una etapa a l’altra. Aquí teniu una breu explicació dels dos tipus de wireframes:

- Wireframes de baixa fidelitat: Un cop hem començat el procés a mà, realitzant alguns esbossos ràpids per aclarir les nostres idees, es el moment de començar a crear els nostres wireframes de baixa fidelitat. Passem els nostres apunts i ideas a una primera versió més ordenada, normalment feta amb ordinador. Aquesta ens permetrà tenir una idea general de com ha de ser el producte final i les seves pàgines principals, la pàgina web comença a prendre cos pero en aquesta fase no s’ha de concretar els detalls concrets sino imaginar la pàgina en el seu conjunt.

- Wireframes d'alta fidelitat: en aquest moment, el vostre wireframe hauria de mostrar el recorregut complet que pot tenir el vostre lloc web, cobrint tota la gamma de casos en què es pot trobar un usuari, des d'errors, rutes alternatives per a usuaris habituals, recorreguts per usuaris que entren per primera vegada…

Alguns consells a l'hora de crear wireframes

Abans de començar a crear estructures penseu en els consells que us volem donar.

• No caldria dir-ho, pero si que cal. No us salteu la fase de wireframing, ja que ens permet centrarnos en una experiència d’usuari positiva (enllaç a l'article ux) i ajuden a estalviar temps de disseny i producció ja que preveuen algunes de les complicacions abans que es donguin. Es posible que hi hagin projectes en el que no sigui necessari desenvolupar wireframes que detallin al milimetra cada opció que te l’usuari com per exemple projectes de modificació de pàgines concretes o de processos aïllats. Tot i això és necessari que en aquests projectes es pensi l'estructura d’aquests processos o parts que estem treballant.
• Un wireframe a de ser esquemàtic i no entrar en l'àrea del disseny visual. Tot i així no ha de ser lleig o caòtic, ha de ser clar i net i poder marcar les jerarquies i les posicions de forma exacte i intuitiva. Podem tenir una sèrie d’eines preparades per a realizarlos com una escala de gris estàndard, un conjunt de fotografies a diferents mides per marcar la jerarquia i/o algunes caixes fetes amb linea fina, que ens ajudaran a marcar els espais.
• A mesura que el procés de wireframing va avançant aniran adquirint una millor comprensió del producte. En aquesta etapa no hem de tenir por de pensar i repensar novament les diferents vies estructurals ja que per això es fa aquest procés. És millor repetir alguns dels wireframes que ja tenim fets que trovarnos amb problemes posteriors en les fases de disseny visual i producció.
• Sempre és preferible fer els wireframes amb el contingut de text acabat, així ens permet crear l'estructura tenint en compte les dimensions que aquest ocupa. El text simulat no reflecteix la quantitat d'espai que ocupa el contingut real.
• Sigueu ordenats a l’hora de treballar amb els wireframes. En general, el nom ha de descriure la intenció principal de la pantalla o l’estat concret en què es troba l’usuari en aquesta pàgina, per exemple, “Home”, “contrasenya incorrecta” o “article”.
• Descriviu la jerarquia tenint cura de no dissenyar la interfície mentre ho feu. Tingueu en compte què ha de fer l'usuari en aquesta pàgina en concret. I indiqueu la jerarquia segons les seves necessitats, d’una manera entenedora.
• Mantingueu la coherència assegurant-vos que els components individuals tenen el mateix aspecte a cadascuna de les vostres pantalles o pàgines. Per exemple, si un botó es presenta com un cercle i un encapçalament com un rectangle en blanc, assegureu-vos que aquests elements es repeteixin de la mateixa manera a tot el wireframe, per evitar confusions.