Utilizar Google Drawings para prototipar

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.