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

La espontaneïtat és una gran característica de les persones que els pot fer ser més naturals i gaudir d'aventures i viatges inesperats en el seu dia a dia. No obstant això, aquestes decisions ràpides i no planificades no funcionen en situacions complexes com l'experiència entre una persona i un sistema lògic. 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 estructuri el contingut. Aquest primer esbós s'anomena wireframe.

Els Wireframe són una eina bàsica en l'experiència d'usuari (UX). L'UX és una part essencial en el disseny de qualsevol producte, també en els digitals. A continuació pot trobar de forma detallada una guia per a la iniciació en aquests. Què són? Per què són necessaris? i quins són els seus principis entre altra informació de valor.

Què és un wireframe?

L'objectiu d'un wireframe és descriure l'estructura i la funcionalitat del flux d'usuari. Per tant, qualsevol element amb el qual 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ó és 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 correcta i àgil sense donar voltes i cometre equivocacions derivades del desconeixement de la funcionalitat del producte. També proporciona un mètode amb el qual l'equip prendrà decisions en un estadi inicial del procés de manera fàcil i econòmica. A més, sent 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 els clients els ajudarà a entendre la intenció final, la qual cosa permetrà rebre feedback i implementar-lo al disseny en cas de ser necessari.

Quins tipus de wireframes existeixen?

Durant tot el procés anem perfeccionant wireframes per la qual cosa els podem classificar en diferents tipus segons l'estadi en què ens trobem. A mesura que tingui una millor idea del seu producte, gradualment podrà implementar formes més avançades de wireframes de manera natural, construint a mesura que passi d'una etapa a l'altra. A continuació una breu explicació dels dos tipus de wireframes:

• Wireframe de baixa fidelitat: Un cop hem començat el procés a mà, realitzant alguns esbossos ràpids per aclarir les nostres idees, és el moment de començar a crear els nostres wireframes de baixa fidelitat. Passem les nostres notes i idees 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 forma però en aquesta fase no s'han de concretar els detalls concrets sinó imaginar la pàgina en el seu conjunt.
• Wireframe d'alta fidelitat: en aquest moment, el teu wireframe hauria de mostrar el recorregut complet que pot tenir el seu 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, però ho diem. No et saltis la fase de wireframing, ja que ens permet centrar-nos en una experiència d'usuari positiva (enllaç a l'article ux) i ajuden a estalviar temps de disseny i producció ja que prevé algunes de les complicacions abans que es donin. És possible que hi hagi projectes en què no sigui necessari desenvolupar wireframes que detallin al mil·límetre cada opció que té l'usuari com per exemple projectes de modificació de pàgines concretes o de processos aïllats. No obstant això, és necessari que en aquests projectes es pensi l'estructura d'aquests processos que estem treballant.
• Un wireframe ha 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 exacta i intuïtiva. Podem tenir una sèrie d'eines preparades per realitzar-los com una escala de gris estàndard, un conjunt de fonts en diferents mides per marcar la jerarquia i / o algunes caixes fetes amb línia 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 a això es fa aquest procés. És millor repetir alguns dels wireframes que ja tenim fets que lidiar 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.
• Sigue un ordre 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", "contraseña incorrecta" o "artículo".
• Descriu la jerarquia tenint cura de no dissenyar la interfície mentre ho fa. Tingues en compte què ha de fer l'usuari en aquesta pàgina en concret. I indica la jerarquia segons les seves necessitats, d'una manera comprensible. Mantingues la coherència assegurant-te que els components individuals tenen el mateix aspecte en cadascuna de les seves pantalles o pàgines. Per exemple, si un botó es presenta com un cercle i un encapçalament com un rectangle en blanc, assegura't que aquests elements es repeteixin de la mateixa manera a tot el wireframe, per evitar confusions.