Abans de començar

Un prototip és un model del producte o servei que inclou aspectes funcionals, estructurals i gràfics del disseny. Es fa en la fase de generació, després d’haver fet la recerca i haver definit els objectius i els principals aspectes del disseny.

En l’àmbit teòric de l’experiència d’usuari (UX) no hi ha un consens clar entorn de les diferències i abast de conceptes com wireframe, mockup, prototip de baixa fidelitat i prototip d’alta fidelitat. No obstant això, en el context professional sí que està estesa la importància del prototipatge com a procés clau per a materialitzar la proposta de valor i iterar el disseny i la interacció fins a arribar a una versió final optimitzada.

El procés de prototipatge és iteratiu i evoluciona des de les primeres propostes de baixa fidelitat, encara llunyanes del disseny final, fins a les d’alta fidelitat, que defineixen les característiques que haurà de tenir el producte o servei quan sigui utilitzat pels usuaris. El prototipatge s’alterna, per tant, amb l’avaluació en un procés d’iteració contínua que permet optimitzar progressivament el disseny fins a aconseguir la proposta que es desenvoluparà.

Preparació

D’una banda, abans de començar a prototipar és necessari tenir clars els objectius del projecte i quines són les principals interaccions que representarem. En aquest sentit és convenient haver fet l’arbre de continguts del producte o servei i haver definit bé els principals fluxos d’interacció.

D’altra banda, el prototipatge és un procés iteratiu que consta de diferents fases en les quals el dissenyador pot treballar sol o de manera col·laborativa. Per això, abans de començar a prototipar és necessari planificar les diferents fases tenint en compte els objectius del projecte, el seu grau de complexitat, i també el temps i els recursos disponibles.

A més, si es preveu la intervenció d’usuaris reals en algun moment del procés de prototipatge, cal definir diferents aspectes de les dinàmiques de cocreació que es duran a terme:

  • Quantes dinàmiques es portaran a terme?
  • En quin punt o punts del procés de prototipatge es portaran a terme?
  • Quins són els objectius i la metodologia de cada dinàmica?
  • Quantes persones participaran i quin perfil tindran (usuaris, clients, dissenyadors, altres parts interessades)?
  • Quina durada tindran les dinàmiques?
  • Quina logística impliquen?

Desenvolupament / execució

El prototipatge s’executa en diverses fases i el resultat obtingut en cadascuna significa un grau de «fidelitat» (o aproximació al disseny final) creixent:

  • Sketching. El procés s’inicia generalment amb un sketching que afavoreix la generació i iteració ràpida d’idees (considerar el problema des de diferents angles i plantejar diferents solucions) amb un cost de temps i recursos molt baix.
    L’sketching es fa amb materials molt bàsics, com llapis i paper, retoladors, etc. L’objectiu és que el material no s’interposi en la ideació, sinó que afavoreixi que sigui fluïda i ràpida, la qual cosa convida a l’experimentació.
    Es pot fer de manera individual o col·laborativa, sempre tenint en compte els condicionants i objectius del projecte definits durant les fases de recerca i definició. En cas que es dugui a terme de manera col·laborativa, es pot treballar amb la tècnica de design studio, que permet fer iteracions ràpides, eficients i sovint disruptives.
    Una vegada fet, es poden enriquir els esquetxos afegint certs detalls, com un títol o una descripció, fletxes per a representar la interacció, gestos implicats en certes pantalles (si dissenyem per a dispositius tàctils), etc.
  • Prototipatge de baixa fidelitat (wireframe). Sobre la base de les idees extretes de l’sketching, es construeix un prototip de baixa fidelitat que representa l’estructura i la interacció del producte o servei sense incloure encara elements gràfics del disseny, la qual cosa afavoreix que la iteració sigui ràpida.
    El wireframe representa un primer model del disseny, però encara és un prototip de desenvolupament ràpid que inclou poc nivell de detall. El seu objectiu és avaluar i iterar la proposta per avançar cap a models més evolucionats.
  • Prototipatge d’alta fidelitat. Una vegada validades l’estructura i la interacció proposades en el wireframe, s’incorporen al prototip elements gràfics (logotip, colors, icones, imatges, etc.) que permeten començar a visualitzar (i a avaluar) l’aspecte que tindrà el disseny final.
    A mesura que evolucionen, els prototips són cada vegada més refinats i propers a l’aparença, les funcionalitats i les característiques del producte o servei finals.

Finalment, després de diverses iteracions amb prototips de fidelitat creixent (recordem que aquestes iteracions poden suposar l’aplicació de tècniques d’avaluació de diferents tipus), s’obté un prototip o maqueta final, que inclou tots els aspectes i funcionalitats del producte o servei que es duran a terme en la fase de desenvolupament.

En el cas de productes o espais, la maqueta física es pot complementar amb un prototip digital. Aquest prototip permet representar clarament funcionalitats o dur a terme simulacions que serien molt cares o complexes d’incloure en la maqueta física.

Anàlisi / Resultats

Al llarg de les diferents fases de prototipatge, cal fer avaluacions per a posar a prova la proposta de disseny, observar com la utilitzen els usuaris i incorporar-hi les millores pertinents.

Finalment, quan el producte o servei s’ha executat o llançat al mercat, és necessari continuar avaluant-ne el funcionament. Això implica reprendre el prototip per a fer les iteracions necessàries (modificacions, noves funcionalitats, etc.) de manera que el disseny respongui a les necessitats canviants dels usuaris en tot moment.

Exemples

Sketching. Font: Toptal.

 

Wireframe. Font: UX Planet.

 

Prototip d’alta fidelitat. Font: UX Design.

Referències

Banerjee, A. (2014). «What a prototype is (and is not)» [article en línia]. UX Magazine. [Data de consulta: 16 de juny de 2017]. <http://uxmag.com/articles/what-a-prototype-is-and-is-not>

Cao, J. (2017). «What is a prototype: a guide to functional UX» [article en línia]. Studio by UXPin. [Data de consulta: 16 de juny de 2017]. <https://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-functional-ux/>

Grothaus, M. (2015). «How to go from idea to prototype in one day» [article en línia]. Fast Company. [Data de consulta: 16 de juny de 2017]. <https://www.fastcompany.com/3045934/how-to-go-from-idea-to-prototype-in-one-day>

Hanington, B. (2012). «Sketchs, mockups, wireframes i prototips». Universal methods of design: 100 ways to research complex problems, develop innovative idees & design effective solutions. Rockport Publishers. <http://mosaic.uoc.edu/2015/09/15/proceso-de-desarrollo-de-un-proyecto-digital/>

Smith, Q. (2019). «Protyping user experience». [article en línia]. [Data de consulta: 15 de juny de 2019]. <https://www.uxmatters.com/mt/archives/2019/01/prototyping-user-experience.php>

Vyhouski, N. «Everything you need to know about sketching». [article en línia]. <https://www.toptal.com/designers/ux/guide-to-ux-sketching>