Prototypes

¿Qué es son los Prototypes?

Los Prototypes son una muestra o modelo preliminar del producto en el que estás trabajando. Cuando se utiliza un Prototype existe la oportunidad de que los usuarios puedan interactuar y ayudarte a validar el modelo final con retroalimentación final.

Son útiles por varias razones:

  • Identifican problemas preliminares con los que los usuarios se pueden enfrentar al usar el producto.
  • Recolectan retroalimentación temprana.
  • Demuestran cómo los usuarios irán a interactuar con el diseño.
  • Apoyan para entender funciones y flujos que pueden llegar a ser bastante complejos.
  • Empiezan a dar una idea de cómo definir el diseño de interacción.
  • Es más fácil de elaborar en relación a un código completo (front and back end).
  • Existen diversas formas y niveles de Prototypes que van desde los bocetos en papel, esquemas interactivos, hasta las versiones en código HTML.

No existe un estándar en específico y cualquiera puede elegir el de su preferencia. Sin embargo, yo tomaría en cuenta el tiempo disponible para realizar el proyecto. Así como el nivel de impacto y qué tan realista quieres ser con el proyecto que estés desarrollando.

 

¿Cómo elaboro un Prototype?

Por ahora está fuera del alcance de esta guía el aprender paso a paso cómo desarrollar un Prototype. En lugar de eso te proporcionamos una lista general de las herramientas que se utilizan para hacerlos y un resumen específico sobre las ideas principales de estos:

Axure

Axure es una de las aplicaciones disponibles con más utilidades para hacer Prototypes y ahora también te permite hacer Prototypes móviles. También cuenta con una selección completa de tutoriales en línea que te ayudarán a aprender rápidamente los conceptos principales.

Balsamiq

Balsamiq es una gran herramienta para hacer Prototypes rápidamente. Balsamiq está orientado a prototipos interactivos convirtiéndolo en una gran herramienta para probar la navegación entre pantallas. Te permite crear una serie de “vínculos” entre los diferentes Wireframes que hayas creado.

 

Prototypes en papel

Los bocetos son siempre una buena técnica y esta idea no cambia a la hora de hacer Prototypes.

Los prototypes en papel son una variación de pruebas de usabilidad donde los usuarios realizan pruebas de tareas reales interactuando con una versión de papel de la interfaz de usuario que es manipulada por una persona que actúa como “la computadora” quien no debe explicar como la interfaz debería de trabajar – http://www.paperprototyping.com/

Uno de los problemas que puedes encontrar haciendo prototypes en papel es que se requiere de un poco de imaginación de parte de los usuarios ya que no es una prueba real de cómo van a interactuar con la interfaz. Dicho esto, cualquier prueba es mejor que ninguna prueba.

Esta es probablemente la forma más rápida de crear un Prototype y esto significa que se pueden hacer pruebas con más frecuencia.

Te recomendamos que revises este artículo para entender mejor los prototypes en papel.

Prototypes en el navegador

Hay una relativamente nueva tendencia para realizar prototypes directamente en el navegador. Este método puede parecer únicamente aplicable a diseñadores de UX con conocimiento de código pero hay herramientas como Bootstrap de Twitter que lo hacen mucho más accesible para aquellos que no están familiarizados con el código.

Con esto nos referimos a utilizar HTML, CSS y Javascript para crear Prototypes realistas que pueden ser probados usando el medio para el cual estamos construyendo nuestro proyecto. Esta técnica es particularmente útil para probar la interacción en diseños responsive, pero si no eres un desarrollador, el tiempo que puede tomarte para crear este tipo de prototypes puede superar los beneficios.

Patrick Marsceill y Steven Bradley han creado muy buenos artículos relacionados a este tema que te recomendamos leer.

 

¿Qué deben contener los Prototypes?

Deben contener tanta información como sea necesaria para poder obtener los resultados que necesitas. Por ejemplo: Si solo estás probando cuál sería la mejor ubicación para un botón para suscribirse a la lista de correos, tal vez solo necesites hacer un boceto en lugar de construir toda la página. O si estás probando una transacción compleja en una aplicación de banca en línea, probablemente necesites diseñar la interfaz completa para emplear una prueba más realista del sistema final.

En la mayoría de técnicas de User Experience (UX) debes tomar el nivel de detalle que te proporcione lo siguiente:

  • El mayor impacto en relación al tiempo que tienes disponible.
  • La habilidad de probar lo que necesitas.
  • El nivel de realismo que te proporcione suficientes resultados para probar e implementar.

 

¿Qué sigue?

Tradicionalmente una vez que los prototypes y las pruebas están completas, el siguiente paso sería escribir una especificación de funcionalidad completa y pasarla a los diseñadores y desarrolladores.

El siguiente paso es tomar un enfoque más moderno y acercarnos al modelo de funcionalidad en la forma de User Stories.