Concretando la interfaz: Niveles de prototipeo

Comenzando por establecer términos relevantes, con prototipo (o wireframe) se hace referencia al producto gráfico que resulta de plasmar las ideas relacionadas con la construcción de una interfaz. Esto significa que es una imagen que representará la visión que el equipo tiene de cómo debe ser el proyecto terminado, una fotografía del futuro.

Antes de empezar a hablar sobre la creación de prototipos y las diversas opciones que existen para ello, es importante destacar la razón por la cual estos no son un proceso prescindible. Se han realizado muchos debates al respecto de porqué los prototipos podrían llegar a ser una pérdida de tiempo y de cómo los tiempos de desarrollo del proyecto como actividad integral quizá no los permitan. Sin embargo, incluso si no se llega a un prototipo completo de calidad alta, no es un proceso que sea recomendable evadir.

Todos los procesos, investigaciones, análisis y conceptualizaciones realizados durante el proceso de diseño de una interfaz efectiva se ven integrados en una serie de prototipos de calidades variables. El reflejar todo esto en un solo producto terminado va más allá de ser una simple página más en el portafolio empresarial o profesional, puesto que es una herramienta sumamente poderosa de comunicación entre los miembros de un equipo, e incluso entre el equipo y otros miembros de la organización.

Al momento de intercambiar ideas con el equipo de trabajo, plasmarlas como elemento gráfico es siempre más eficaz que una simple explicación o un documento escrito, este proceso puede llevarse a cabo en conjunto con pizarrones blancos (de pared completa son los más útiles) o con rollos de papel bond y marcadores gruesos. De este modo, los participantes se aseguran de estar ‘en el mismo canal’ o siguiendo una misma línea al momento de llegar a la culminación de la parte de diseño del proyecto.

Y no solo se trata, como se mencionó antes, de comunicación entre los miembros de un mismo equipo. Vender una idea a las personas que toman las decisiones de peso en una empresa es mucho más simple cuando se cuenta con una propuesta gráfica completa y no solo resultados del análisis y la planeación. Por otra parte, y más a un nivel operativo, la comunicación entre el equipo de diseño y el equipo de desarrollo es siempre un tema complicado por la variación de perfiles profesionales entre los miembros de ambas partes. La existencia de algo gráfico que concrete las ideas del equipo de diseño es un paso imprescindible para que la gente de desarrollo sepa cómo avanzar y continuar con los esfuerzos dentro del proyecto.

Niveles de prototipeo

Dejando atrás los miles de argumentos que podrían defender el uso de prototipos y habiendo dejado establecido que son un paso necesario, cabe resaltar ahora que existen niveles de calidad en la creación del prototipo. Utilizando la palabra ‘calidad’  como referencia a la cantidad de detalle que se refleja en la representación gráfica de cada pantalla dentro del proyecto.

Para efectos prácticos, y siendo normalmente los prototipos generados durante sesiones de lluvia de ideas entre miembros del equipo, existen los llamados de calidad baja. Estos son más como dibujos o bocetos de lo que se tiene planeado plasmar en la interfaz, el posicionamiento, los tamaños aproximados, etc. Normalmente no incluyen colores (o muy pocos) ni imágenes reales (solo algunos bocetos representativos de iconos en algunas ocasiones).

Existen, además, diversas herramientas en línea que pueden emplearse para el desarrollo de prototipos en calidad baja si no se es muy afín al uso de papel y lápiz o marcadores y pizarrones. El medio digital, por otra parte, nos permite difundir de manera más sencilla el resultado de la lluvia de ideas o la conceptualización en equipo de una interfaz. Estas herramientas disponibles son:

• Balsamiq (gratuito en línea, con costo si se quiere instalar en su computadora)
• Mockflow (gratuito en línea con limitaciones de cantidad de prototipos)
• Canva (freemium)

Hay muchas otras herramientas en línea disponibles para estos fines, mas estas son las que por experiencia de uso se recomiendan. También existen herramientas de prototipeo para aquellos que están acostumbrados al uso laboral de un dispositivo móvil tipo tablet.

Como un tema aparte existen además los prototipos de calidad alta, que son aquellos que ya se concretan más como una fotografía de lo que sería la interfaz terminada. Esto significa que en esta ocasión sí deben presentarse los colores reales, ejemplos de imágenes y texturas, iconografía, botones y demás elementos necesarios.

Un prototipo de calidad alta, por su alto nivel de detalle, se lleva a cabo por medio de software de diseño como Adobe Photoshop, Fireworks o Illustrator. Se sugiere el apoyo de galerías de elementos gráficos enfocados a la plataforma que se requiera para agilizar el proceso lo más posible.

Existen, por supuesto, alternativas gratuitas al software de Adobe tanto en línea como disponibles para instalación. Una herramienta excelente para descarga e instalación es Inkscape. Si se desea trabajar en línea, hay alternativas como Pixlr  o Aviary Phoenix.

En el caso de un prototipo de alta calidad, por supuesto, es mucho más relevante el seguimiento estricto de estándares de diseño generales y por plataforma. En el caso de web, hay archivos de apoyo a la creación de prototipos de alta calidad bajo el estándar de retículas 960 disponibles para descarga (http://960.gs/), así como para prototipeo bajo los estándares marcados por la nueva tendencia de retículas fluidas (http://lessframework.com). Dependerá del enfoque, las necesidades del proyecto en específico y  de retículas estáticas contra retículas fluidas el cual es un tema muy extenso, por lo que se recomienda documentarse ampliamente al respecto.

Prototipos estáticos y prototipos funcionales

Parte del debate en contra de la creación de prototipos (principalmente prototipos de alta calidad) es la posibilidad de saltar directamente a un prototipo funcional o demo, es decir, usar una carcasa HTML y CSS para plasmar ideas tanto visuales como de navegación, la cual ahorrará mucho trabajo de front-end al momento de pasar a la etapa completa de desarrollo. Esta no es una manera incorrecta de trabajar tampoco, y al final es cuestión de definir equipos y capacidades.

Si su equipo de diseñadores no tiene las capacidades necesarias para generar prototios funcionales que puedan después ser parte del desarrollo, los prototipos estáticos son su mejor opción a menos que planee incluirse gente de desarrollo en las fases de diseño.