Después de años de realizar prototipos/wireframes  en Visio y Omnigraffle, estamos tanteando la posibilidad de trabajar ahora con herramientas de prototipado en la nube, ya que aportan algunas ventajas adicionales.

En Biko seguimos un proceso de trabajo para prototipar websites, portales, apps para móviles, etc. centrado en el usuario. Y vemos que este proceso puede mejorarse con el empleo de estas herramientas online.

Para el prototipado, solemos realizar previamente una identificación de personajes, escenarios y tareas más relevantes a realizar por el usuario en el site o app. Jerarquizamos dichas tareas para ver qué es lo prioritario en cada caso (personaje/escenario). Y teniendo  en cuenta esta jerarquía,  maquetamos las pantallas ubicando los elementos de interacción de forma óptima para favorecer la usabilidad y conversión en el producto final.

Aunque herramientas como Visio u Omnigraffle permiten montar enlaces entre pantallas  y exportar el archivo como html para verlo en un navegador, lo habitual es que para  la validación de estos prototipos por nuestros clientes, simplemente los revisen sobre el papel impreso o, en ocasiones, sobre la pantalla, pero sin interacción efectiva.

Buscando herramientas que sí permitan simular esta interacción (por ejemplo, completar los campos de un formulario), nos hemos encontrado con varias muy completas, pero de licencia y descarga (Axure,  Flairbuilder,  Justinmind) y otras alojadas en la nube y que también ofrecen esta posibilidad y además, ventajas adicionales según los casos:

• al ser SAAS, la inversión en licencias no existe (la mayoría ofrecen una versión de prueba por tiempo limitado antes de contratar el servicio de pago)
• generan los prototipos en html + CSS de forma que pueden verse en cualquier navegador, lo que facilita revisiones por el cliente o hacer tests de usuarios sobre los propios prototipos
• se guarda el historial de todos los cambios realizados
• facilitan el trabajo en colaboración con páginas de discusión y sistemas de usuarios que editan, revisan, sugieren comentarios…
• facilitan la gestión de proyectos con la creación de tareas y asignaciones
• permiten asociar los elementos de un diagrama de flujo a cada una de las pantallas prototipadas
• permiten cambiar el aspecto del prototipo ya creado seleccionando entre el estilo “normal” y el estilo “scratch”

En definitiva, vemos que estas herramientas aportan funcionalidades adicionales a las que ya veníamos utilizando y nos estamos planteando el cambio de herramienta para algún proyecto concreto.

Os dejamos aquí la lista de las que hemos tanteado. Si las habéis probado, estaremos encantados de que nos contéis vuestra experiencia. Y también de nos sugiráis algunas más.

• inVision – más centrada en la parte de compartir/colaborar
• iPlotz – incluye gestión de proyectos y tareas
• Jumpchart – énfasis en la arquitectura del site
• Pidoco – tiene una versión “lite” más económica
• Protoshare – parece una de los más completas

¿Eres un poco manazas cuando dibujas wireframes en papel a mano alzada con lápiz y goma de borrar?

Por $19,99, puedes hacerte con una libreta de lujo para que tus manos de árbol no perjudiquen tus prototipos y la presentación de tus ideas. Y todo ello sin tener que recurrir al ordenador para pintar algo decente.

¡¡Quiero esa libreta!! ¿Reyes magos, estáis ahí?

Visto en Fubiz

Hola, me llamo Yoana, y soy nueva en el prototipado.

En uno de los últimos proyectos que nos hemos embarcado en Biko, y dentro de consultoría, me ha tocado empezar con la tarea de prototipado; y como soy nueva en esto y me iba a resultar igual de difícil trabajar con Omnigraffle (más o menos estándar en Biko) que con cualquier otra herramienta del mercado, decidimos probar a hacerlo con Google Drawings, ya que nos permite tener los documentos compartidos fácilmente y que todos pudiésemos ajustarlos con sólo tener acceso a un navegador.
Teniendo en cuenta que en el equipo somos 3, yo trabajo en remoto y además cada uno tiene un equipo con una batería de programas diferente, este punto era importante para que todos les pudiésemos meter mano.

Para empezar Sonesu me lo puso fácil, me pasó los Stencils de Morten Just para prototipar con Google Drawings. ¿Qué más se podía pedir? gracias Su!

Las formas que venían con los Stencils me vinieron de maravilla, luego solo era cuestión de adaptarlas a lo que íbamos pensando para la aplicación concreta.

El primer prototipo fue el más sencillo y complicado a la vez. ¿Cómo se mueven las cosas? ¿el alt funciona? ¿cómo selecciono varias formas a la vez para mover en bloque?, supongo que todo esto para alguien acostumbrado serán chorradas, para mí entonces era todo un mundo por explorar.

Tucos para utilizar Google Drawings para prototipar:

1. Seleccionar varias formas a la vez

Para seleccionar varias formas a la vez tenemos dos maneras:

• manteniendo la tecla alt pulsada
• seleccionando un conjunto. Para hacerlo hay que posicionarse fuera del lienzo y crear un cuadrado de selección.

Sobre esta última opción, un apunte importante: al contrario que en otros programas, los elementos seleccionados no son aquellos que quedan completamente dentro del cuadrado de selección, sino todos aquellos que toca dicho cuadrado, por lo que cada vez que quieres seleccionar varias cosas del centro hay que ir eliminando de la selección todas las formas que los contienen.

Ejemplo, en esta pantalla para seleccionar el buscador, al principio nos selecciona también el cuadrado grande que lo contiene:

Así que manteniendo “alt” pulsado deberemos quitar el cuadrado grande y otros elementos que no queramos agrupar:

Una buena práctica es ir agrupando cosas que tengan sentido como un todo, porque luego seleccionar un conjunto de elementos puede ser tarea difícil, sobre todo cuando se prototipan objetos encima de otros objetos que no están relacionados (ej. popups sobre fondos semitransparentes, simulando el efecto lightbox).

En este caso es bueno agrupar los objetos inferiores (el fondo semitransparente y resto de objetos por debajo de él), para luego poder trabajar fácilmente con los objetos superiores (el popup).

2. Mantener proporciones

En Google Drawings mantendremos pulsada la tecla alt para mover las formas con un ajuste más preciso, y de igual modo, la utilizaremos también, al redimensionar, para no perder la proporción inicial de la forma.

3. Copiar formas entre prototipos en diferentes documentos o archivos

Algo tan sencillo como copiar una forma o un conjunto de formas entre dos prototipos de diferentes documentos se convirtió en una auténtica odisea, hasta que descubrí que la única forma de hacerlo es a través del “web clipboard”.
Esto me ahorró mucho tiempo: ¡ahora era mucho más fácil cambiar en todos un fallo detectado en el prototipo número 5!.

4. Nunca eliminar la cuenta google a pesar de tener los prototipos compartidos

Queda ya para la historia que, después de tener todos los prototipos maqueados y entregados, se nos ocurrió borrar la cuenta google porque nos estaba dando problemas de compatibilidad.

No nos fijamos que esa cuenta era propietaria de los prototipos y que, por mucho que los documentos estuvieran compartidos, si el propietario desaparece… los documentos también. Como de todo se aprende, esto no nos volverá a pasar .

Al finalizar, esta vez sí, hicimos una copia de los documentos exportándolos a PDF para poder enviarlos al cliente, sin darle acceso a los prototipos online.

Como conclusión final puedo decir que el trabajo ha resultado ser entretenido y gratificante, y el poso que me ha quedado es que, en general, Google Drawings es una buena herramienta para prototipar. Para los eruditos seguro que se queda algo corta, pero para hacer cosas básicas a mí me ha parecido suficiente y además te aporta la gran ventaja de poder hacerlo todo online y en tiempo real a través sólo de un navegador, de forma que todos los miembros del equipo puedan ver y modificar, si es el caso, el trabajo que se va haciendo.

Que soy un fanático del uso de prototipos lo sabe cualquiera que me ha visto “vicioseando” con un papel y un lápiz en mano y la sonrisa de que algo malo voy a hacer puesta en la cara. Y soy un fanático porque me ayudan a ordenar las ideas y a separarme del ordenador. Algo que valoro mucho y más ahora que gracias a la implantación de SCRUM en la empresa requerimos de nuestros focos de trabajo, en los que las molestias tienden a reducirse al mínimo.

Los prototipos son la representación del trabajo de consultoría concentrado en un papel. Muestran ideas y conceptos muchas veces complejos. Los prototipos hay que explicarlos, pero muchas veces no estamos ahí para explicarlos. El cliente se ha quedado solo, vuelve a repasar la documentación o se la enseña a otro compañero, y entonces necesita explicarlo. El cliente vendiendo nuestra idea. ¡Qué miedo!

Cuando el cliente se encuentra en esa situación es como si le dejáramos nuestro hijo a un kamikaze para que lo llevara al colegio. Puede que llegue sano y salvo, puede que llegue pero no se parezca en nada a lo que salió o, en el peor de los casos, puede que nunca llegue. Depende en gran medida de que le hayamos vendido bien la idea, de que los conceptos estén claros y de que lo hayamos convertido.

¿Cómo convertimos a un cliente en impulsor de nuestra idea? Con una presentación seductora del producto. Y en el caso de presentar unos prototipos ¿cómo lo logramos?

Solución 1: vendemos conceptos, vendemos una historia. Escenario de uso.

Sin especificaciones técnicas, sin diseño técnico de la solución. Vendemos un escenario de uso, un personaje y una aplicación real de la solución aportada.

Y una más…

Solución 2: el papel se mueve. Casos de uso.

A través de los prototipos mostramos un caso de uso, en el que el usuario realice una tarea.

Ponto i – Paper Prototyping from Felipe Sad on Vimeo.

Solución 3: montamos el show. Presentaciones seductoras.

Y quién mejor para vender una idea y que esta permanezca en el subconsciente de su audiencia durante mucho tiempo que Apple. Repitan conmigo: Great, incredible, amazing, simple, terrific…

Great, incredible, amazing, simple, terrific, great, great, incredible, simple, great, amazing, awesome! Y así hasta el infinito…. great!

Si nos atenemos a una definición formal de qué son los prototipos, “la representación mediante diagramas de la estructura, el funcionamiento y el comportamiento de objetos o procesos” (NoSoloUsabilidad), nos encontramos con que la mayoría de las veces no se cumple más que la representación de la estructura, olvidándonos del funcionamiento y del comportamiento.

Este “olvido”, normalmente, se debe principalmente a dos motivos, el primero suele ser causado por el propio diseñador (entenderemos diseñador por la persona encargada de la generación de wireframes) habituado a representar únicamente la estructura. El segundo motivo sería más propio del medio, el papel, en el que se presentan los entregables, ya que resulta complejo representar interacción en algo plano y estático.

¿Qué podemos hacer para representar el funcionamiento y el comportamiento?

Vamos a tratar de dar un poco de luz y unas pequeñas pautas que pueden servirnos en nuestro día a día, aunque la mejor solución siempre es la imaginación de cada uno.

Solución 1: Usar patrones

Un patrón es un modelo que sirve de muestra para sacar otra cosa igual (RAE). Un patrón siempre, o casi siempre, mantiene el mismo funcionamiento y comportamiento, y puede servirnos para entender de manera general qué interacción va a haber con el usuario.

Aunque no representará de manera específica y formal el funcionamiento exacto en un caso concreto, puede ser una guía útil, un punto de partida.

Podemos encontrar patrones en:

• UI Patterns: con definición del problema que resuelve y cuándo usarlos.
• Welie patterns: igual pero con muchos más patrones, más completo.
• MockupsToGo (patrones para la herramienta Balsamiq Mockups)
• Wiki Designing Social Interfaces: Wiki con patrones de interfaces Sociales

Solución 2: Representar la interacción

A través de:

• Iconos gestuales o que representen acción (flecha ratón, doble click, mouseover,…)
• Símbolos: números, anotaciones,comentarios
• Transiciones: Cambios de estado, flujo de interacción

¿Cómo? Con stencils

• Touchscreen Stencils: representan gestos táctiles
• Konigi Stencils: contienen muchos iconos de anotaciones

Solución 3: Crear prototipos interactivos

Los prototipos interactivos están entre un prototipo plano en papel y una maqueta dinámica en HTML y, a veces, pueden generarse desde prototipos planos sin mucho esfuerzo por parte del diseñador y cuentan con la ventaja de que pueden usarse como entregables.

Por ejemplo, para Microsoft Visio tenemos VisDynamica, un addon que nos genera páginas web interactivas desde nuestro prototipo. Y también contamos con la posibilidad de generar PDF’s dinamicos desde la propia herramienta.

También podemos crear un prototipo interactivo con PowerPoint 2007 y un toolkit, o incluso desde Excel. Aunque ambos estén quizás más enfocados a realizar test de usuarios sobre prototipos de manera ágil que a terminar como entregables para el cliente.

Otras soluciones

Existen otras soluciones para representar e incluso crear la interacción en nuestros prototipos, como puede ser el prototipado en papel, pero se trataba con este artículo de intentar representar la interacción en nuestros entregables, y a según que clientes parece dificil entregarles un boceto hecho con boli y post-its.

A parte de todo lo ya dicho, siempre nos queda nuestra propia imaginación : )

En el último año hemos realizado varios proyectos en los que hemos utilizado de forma conjunta herramientas de análisis de tráfico (tipo Omniture, CoreMetrics, WebTrends o Analytics ) y de análisis de clics (tipo Crazyegg, Click Heat o Wordpress Click Tracking), para valorar la usabilidad de los sites en función de la experiencia de navegación de los usuarios.

Aunque el uso de ambos tipos de herramientas por separado ofrece ya datos interesantes, la combinación de ambas aporta unos resultados mucho más completos y fiables, y nos permite llegar a conclusiones más depuradas.

El análisis de tráfico nos proporciona datos sobre el tamaño de la audiencia y la frecuencia de consumo: usuarios únicos, visitas, frecuencia de las visitas, páginas vistas (en total, por visita o por sección) y procedencia de las visitas. También nos permite conocer los contenidos más visitados, los trayectos de navegación seguidos por los usuarios y las páginas de entrada y de salida más habituales.

Pero en cambio, no nos facilita información sobre los elementos de la interfaz que los usuarios prefieren: aquellos en los que clican más para navegar. Esta información sí nos la ofrecen las herramientas de análisis de clics, y lo hacen además en modo visual mediante mapas de calor o heatmaps.

Sin embargo, por las características de estas herramientas, el análisis de clics se realiza habitualmente sobre una muestra limitada de usuarios (ej. 5.000 ó 10.000 usuarios escogidos al azar, o durante un periodo establecido de tiempo), con lo que no aporta datos globales de navegación.

Tampoco ofrecen normalmente informes sobre los trayectos de navegación seguidos por los usuarios. Aunque algunas como ClickTale sí permiten hacer el seguimiento de los trayectos de navegación (los graban en una secuencia de vídeo), en estos casos, el universo de usuarios sobre el que hacer el análisis es aún mucho más reducido.

En los últimos meses, la opción que hemos seguido en Biko es utilizar Google Analytics junto con CrazyEgg. Hemos podido comprobar que, cruzando los datos de ambas herramientas, es posible llegar a conclusiones muy razonables sobre la experiencia de los usuarios en su navegación por el site.

Por el momento la forma en que estamos cruzando los datos es empleando una hoja de calculo en la que volcamos los datos manualmente y establecemos las relaciones. Desconozco si alguna de las herramientas que ofrecen ya ambos tipos de mediciones -tipo Omniture o Xiti-, permite generar automáticamente algún informe en el que se crucen los dos tipos de datos. (Si alguien tiene constancia de ello, le agradeceré mucho si nos lo indica).

Finalmente, el modo en que presentamos las conclusiones del análisis incluyen tanto recomendaciones de acciones en cuanto a arquitectura de navegación, diseño, maquetación o contenidos, como propuestas de prototipado.

Llevan tiempo, pero para los que no los conocíais: Design Stencil Kit del Yahoo! Developer Network. Puedes descargarlos para Omnigraffle, Visio, en PNG, PDF o SVG.

Yahoo Design Stencil Kit

Wireframing power!

Cuando el equipo lleva más de una hora tratando aspectos de una interfaz sin llegar a ningún tipo de conclusión, es muy probable que el motivo real de fondo sea que se esté discutiendo sobre los distintos modelos mentales del público objetivo, sin tener datos suficientes para contrastarlos por la falta de investigación previa.

Así podemos leer en Usolab cómo los datos estadísticos son importantes tanto si vas a prototipar un web como si se trata de conceptualizar el modelo de un WC.

Y es que es demasiado cierto que muchas veces en este sector trabajamos a ciegas, dando por buenos muchos supuestos sobre los posibles usuarios de una interfaz, sin tener datos objetivos que justifiquen nuestras decisiones, salvo, que no es poco, la experiencia en el medio.

Sin embargo, nos sorprenderiamos (y no gratamente) si, más a menudo, sentaramos a usuarios a juguetear con las arquitecturas que proponemos y, por lo mismo, nos ahorraríamos grandes esfuerzos de desarrollo si siempre pudieramos contar con datos de uso fiables antes de comenzar a trabajar. Porque… ¿alguien se atreve a poner la mano en el fuego asegurando que los usuarios no navegan por menús sino por contexto? ¿y apostando a que la columna derecha es siempre zona fría?

Mejor no apostar, que el juego no es sano… especialmente si te puedes quemar