Prototipos para diseño web

¿Qué son los prototipos? ¿Sirven para algo aparte de para inflar la factura del cliente? ¿Pueden hacerte ganar tiempo? ¿Cómo se hacen y entregan hoy en día? ¿Tiene sentido hacer prototipos si haces diseño adaptable? La respuesta en las siguientes líneas…

Esquema de interfaz móvil de Anthony Lagoon

Esquema de interfaz para móvil de Anthony Lagoon

¿Por qué prototipar?

Porque son todo ventajas:
Mejora la velocidad de desarrollo: Da mucho menos trabajo hacer cambios sobre un boceto en papel o un wireframe en Axure que sobre un PSD con un montón de detalles. Si lo primero que ve el cliente es un diseño con todo el detalle, lo habitual es que se pierda en cosas como colores o tipografía, y en esta fase se trata de cerrar el diseño desde un punto de vista funcional. Sólo hay que saber donde irá cada cosa, y la jerarquía de cada tipo de contenido. El colorín, más adelante.
Involucra al cliente: La aprobación de un prototipo la tiene que dar el cliente. Como es mucho más cómodo hacer cambios sobre un esquema con poco detalle que sobre un diseño ya acabado, es fácil involucrar al cliente en esta fase de diseño. Y no es algo que puedas hacer, es algo que debe hacerse. Conocerás mejor al cliente y su proyecto, y el valorará más tu trabajo, porque empezará también a ser suyo.

Puede haber desventajas si no lo haces correctamente. Es necesario que expliques que lo que vas a entregar no es un diseño acabado, sino un documento de trabajo que se utilizará para definir posición y jerarquía de elementos en página. De este modo, evitarás decepciones si esperaban encontrar un pantallazo con todos los detalles.

Tipos de prototipos

Hay varios tipos de prototipos, y no todo el mundo llama igual a las mismas cosas. Así tenemos esquemas de página, wireframes, prototipos, mockups, bocetos, sketches, diagramas… etc. Me quedo con la definición que da Daniel Torres Burriel, distinguiendo tres tipos (cito textualmente):

  1. Sketching, para dibujar todo el sitio web, los procesos y las relaciones
    entre pantallas (sólo papel).
  2. Wireframing, para dibujar con un cierto nivel de detalle las pantallas,
    sus esbozos de contenido, las llamadas a la acción y en general la
    disposición física de los elementos (papel o digital).
  3. Prototipado, para diseñar y ejecutar la interacción entre las pantallas
    que componen los procesos (sólo digital).

Con esto no quiero decir que sea la única forma correcta de llamarlos, ni que no pueda utilizarse otra nomenclatura, en especial si se adapta mejor al tipo de proyecto que estás realizando. Hay también otros tipos de diagramas que pueden utilizarse para un desarrollo web, como los de procesos, storyboards, de datos, etc. En este artículo me centro en los más utilizados para el proceso de diseño y maquetación.

Prototipo navegable realizado en Axure

Prototipo navegable realizado en Axure, de Jim Callender

Si el diseño va a ser responsive (adaptable a múltiples dispositivos) es conveniente diagramar las diferentes pantallas al menos en tres vistas: PC, tablet y smartphone. De este modo el cliente sabrá cómo va a verse su sitio web en cada dispositivo desde un primer momento.

Cuándo utilizar cada uno

Depende de en qué fase del proyecto estás, y el tiempo que puede dedicarse.

Scketching

Normalmente, siempre hay una fase inicial en la que hay bastante indefinición. Aquí hacer sketching (diseños muy esquemáticos en papel) suele ser lo más útil, ya que permite la participación del cliente y ayuda a centrarlo en la jerarquización de contenidos sin entrar a otros detalles (sobre un boceto de este tipo no debe haber consideraciones acerca de imágenes, tipografía o colores).

wireframing

En la fase de wireframing ya se ha definido una estructura general, y se entrega una maqueta de más fidelidad. Suele servir para validar y confirmar aspectos que ya se han hablado previamente, por lo que no debería ser necesario realizar grandes cambios aquí.

Hay que decir que un wireframe sigue sin ser un diseño acabado, ya que en esta fase aún no hemos entrado con colores ni fuentes. Pueden mostrarse ya imágenes (aunque no tienen por qué ser las definitivas). Lo importante aquí es tener ya los textos definitivos, pero no debe haber color (todo en escala de grises), ni diferentes tipografías (una sans-serif para todo).

Lo importante de esta fase es que se apruebe la organización de contenidos (esto ya debe estar casi listo de la fase anterior), y que los textos sean los definitivos y estén en su sitio.

Prototipado

El prototipado debe llevarse a cabo cuando vamos a evaluar la interacción, y sirve para definir aspectos que no quedan claramente reflejados en un boceto de papel o un wireframe no navegable. Los prototipos son navegables, por lo que sirven para testear elementos de interacción como estados hover de botones, validación de formularios, iconos, o cualquier elemento con el que el usuario cuando interactúe.

Es una fase que puede obviarse en algunos proyectos (si vas a publicar un blog o una sencilla página informativa, probablemente no necesites un prototipo), pero que resulta de gran utilidad en otros, como apps, videojuegos, formularios largos, etc.

La gran ventaja de un prototipo es que puede utilizarse para hacer tests de usuarios antes de tener hecho el desarrollo completo del producto. Esto, en el caso de las apps, o de startups que estén comenzando su proyecto, es una ventaja inestimable, ya que permite refinar la interfaz en base a datos objetivos. Esto ahorra horas de desarrollo, ya que son necesarias menos versiones de la aplicación. Al probar con usuarios antes de estar desarrollada, tienes mucho feedback y sabes lo que funciona antes de escribir el código.

Hay infinidad de programas con los que puedes hacer un prototipo navegable (o puedes maquetar en HTML+CSS, si vas a reutilizarlo luego en el proyecto), pero a veces no es necesario llegar a desarrollar esto; también puede hacerse sobre prototipos en papel.

Prototipos y relación con el cliente

Cuando empecé como freelance e intentaba captar un cliente, a menudo preparaba un PSD con todo lujo de detalles de la página principal de un sitio web, y a veces de alguna página interior importante. Pensaba que si el cliente tenía un diseño acabado entre sus manos, le sería más fácil decidirse y tener claro lo que estaba pagando. Me equivocaba por completo. Esto, unido a que mis habilidades comerciales no eran precisamente las mejores, me hizo perder cantidad de tiempo preparando diseños que no acabaron en nada.

Cuando alguien contrata a otra persona para que lleve a cabo un proyecto de este tipo, lo primero que necesita es asesoría. Responder a sus dudas, y plantear las preguntas adecuadas para llevar adelante el proyecto. Por el camino, ayudaremos al cliente a definir mejor los detalles borrosos de su proyecto, aquellos puntos en los que no ha pensado o aún no ha resuelto. Esto, y los prototipos, harán que se valore mejor tu trabajo y conocimientos, mucho mejor que cualquier bonito PSD.

Los prototipos sirven para este proceso, para que el cliente y el diseñador tengan el mismo esquema mental de lo que va a realizarse. Que vas a crear un diseño impecable debe darse por supuesto, no necesitas demostrarlo (para eso ya está tu portfolio). Con los prototipos, lo que le aseguras al cliente es que tu trabajo va a estar lo más alineado posible con los objetivos que el sitio web o aplicación deben cumplir.

Si preparas una pantalla con todo detalle cuando no está completamente definido el sitio web o la aplicación que vas a diseñar, pierdes el tiempo, porque aún no conoces a fondo el negocio de tu cliente, quizá ni tengas claros sus objetivos, o el contenido de la página. A los clientes no se les gana con bonitas capturas de pantalla en PSD, porque normalmente piensan que esto lo haces en cinco minutos apretando un par de botones. A menudo el cliente no está preparado para valorar el trabajo que hay detrás de un buen diseño. De hecho, tu bonito diseño quizá no sea la mejor opción, porque no conoces en detalle lo que el cliente necesita, ni a sus usuarios/clientes.

Tu trabajo al principio no debe ser proporcionar un diseño acabado, sino recabar información acerca de tu cliente, su negocio, sus objetivos y las tareas que deben poder realizarse desde el sitio web. También sobre sus usuarios: franja de edad, clase social y económica, nivel de formación, gustos y hábitos, cómo navega, qué dispositivos utiliza, etc. Hay que adaptar el mensaje al tipo de usuario, y para esto debes conocerlo lo más posible. En esta fase, puede ser de gran utilidad el uso de Personas (hablaré sobre esto próximamente).

El texto es algo sobre lo que debes poner toda tu atención. Quien piense “el texto me lo ha pasado el cliente, no es cosa mía, porque yo soy diseñador, no copy” se equivoca de plano. Incluso en proyectos grandes, con perfiles de gran especialización, si haces diseño centrado en el usuario, no hay fase que no tenga que ver contigo. Debes estar en todas, porque eres el puente entre la aplicación y el usuario. Y los textos son fundamentales. Desde un mensaje de error en un formulario, hasta el título de la home, todos los textos han de ser revisados y validados. Esto va antes que la imagen y el color, así que no se debe empezar lo siguiente sin cerrar esto.

Quedan varios tipos de prototipos en el tintero: los storyboards, diagramas de proceso, para datos, etc. Volveremos sobre ellos en otra ocasión. En cualquier caso, dejo enlaces para que profundices más. En concreto recomiendo este vídeo de la Universidad de Alicante, realizado por Olga Carreras, que como casi todo su trabajo no tiene desperdicio:

Para saber más:

Soy Eduardo Suárez, diseñador front-end y consultor UX. Trabajo creando aplicaciones y entornos web, y realizando consultoría UX y de presencia online. Otros hobbies: música, motos, artes plásticas y ciencia-ficción.

Ayuda a Pymes

curso Divi actualizado y en español