Uno de los problemas que tenía Microsoft Visio hasta la aparición de la suite 2010 era el hecho de que el copiar/pegar formas en las anteriores versiones funcionaba de una manera un tanto peculiar. Concretamente, cuando se copian las formas o un conjunto agrupado de ellas de una página a otra en Visio 2007 y anteriores versiones, el programa las pega en el centro -punto medio tanto horizontal como vertical- del área de página que se está visualizando. Un funcionamiento extraño que provoca que sea complicado pegar formas en la misma posición de una página a otra.

Así, para pegar formas o conjuntos de formas agrupadas (puedes agrupar varias formas manteniendo la tecla Mayús pulsada, seleccionándolas con el cursor  y a continuación pulsando la combinación Ctrl+G, para desagruparlas puedes hacerlo con Ctrl +Mayús+U) hay dos opciones, o instalarse Visio 2010 que ya las pega correctamente en la  misma posición que ocupaban en la página original o, si utilizas versiones anteriores, hacer lo siguiente:

• Mostrar la ventana o panel de “Tamaño y Posición” mediante la opción de menú “Ver > Ventana Tamaño y posición”

• Seleccionar las formas o conjunto de formas agrupadas en la página original. Al hacerlo en la ventana “Tamaño y posición” verás las coordenadas X e Y donde están colocadas. En el ejemplo de la captura de un poco más abajo puedes ver que están situadas en X=540 pt e Y=685 pt (suelo trabajar en puntos de ahí que aparezca las unidades en pt). Puedes elegir el tipo de unidades con las que deseas trabajar en el menú “Herramientas > Opciones > Unidades” seleccionando puntos:

• Ahora sólo queda insertar una nueva página (la de destino) en la que pegar las formas. Para ello se puede hacer por ejemplo pulsando el botón derecho del ratón sobre la pestaña de la página actual y seleccionando la opción “Insertar página”:

• Cambiarse a la nueva página y pegar las formas. Luego hay que hacer clic en ellas para seleccionarlas y ver las coordenadas en donde se han pegado:

• Por último se han de sustituir dichas coordenadas por las que tienen en la página original, en nuestro caso X=540 e Y=685

• Para duplicar una página manualmente el proceso es análogo, tan sólo hay que agrupar todos los objetos o formas en la página original mediante Ctrl+Mayús+A, irse a la página destino, pegarlos y cambiar las coordenadas escribiendo las de la página original. Con ello tendremos una copia exacta de la misma.  Se puede hacer eso o utilizar una macro para hacer el proceso mucho más rápido y sencillo, o instalar Visio 2010 que tiene mejoras que merecen la pena en cuanto a productividad y una mayor galería de formas predefinidas.

Utilizar este procedimiento para posicionar las formas en los mismos lugares en páginas diferentes tiene la ventaja de que al previsualizar los prototipos con la tecla F5 podemos simular el estado de interacción de un componente como por ejemplo, un menú desplegable, poniendo en una página el menú sin desplegar y en la siguiente, el mismo desplegado.

• F4 repite la última acción realizada
• F5 visualización a pantalla completa del documento (luego con AvPag RePag te puedes desplazar cómodamente entre
  las diferentes páginas creadas)
• F8 Muestra el cuadro de diálogo de alinear formas

Cuando hay una forma seleccionada:

• Ctrl+D duplica la forma. Si hay varias formas seleccionadas duplica todas.
• Ctrl+Mayús+L alinea el texto a la izquierda.
• Ctrl+Mayús+C centra el texto en la forma.
• Ctrl+Mayús+R alinea el texto a la derecha.
• Ctrl+R gira la forma 90º a la derecha.
• Ctrl+L gira la forma 90º a la izquierda.

Zoom:

• Ctrl+W Hace zoom del documento y ajusta la página al ancho o alto de la ventana actual
• Ctrl+i Zoom al 100%

Selección y agrupación de formas:

• Ctrl+A Seleccionar todos los objetos de la página
• Ctrl+G Agrupar objetos
• Ctrl+Mayús+u Desagrupar objetos
• Ctrl+Barra espaciadora Alterna el foco entre los distintos elementos del prototipo, con retorno se selecciona el elemento.

Edición de texto de formas:

• F2 activa el modo edición y permite cambiar o editar el texto.
• Ctrl+T borra directamente su contenido y permite escribir uno nuevo.
• Ctrl+Mayús+A Teniendo una forma seleccionada con contenido en su interior, cambia el mismo alternativamente a mayúsculas / minúsculas.
• Ctrl+Mayús+S Teniendo una forma seleccionada con contenido en su interior, borra el contenido y permite escribir uno nuevo directamente en su lugar (activa el modo edición).

Cuadros de diálogo y moverse por el documento

• Mayús+F4 Ir a página
• Mayús+F3 Cuadro de diálogo de línea
• Mayús+F5 Cuadro de diálogo de configurar página
• Mayús+F6 Alterna el foco entre los paneles abiertos (explorador de dibujos, Formas, tamaño y posición)
• Mayús+F11 Cuadro de diálogo de texto
• Inicio Se mueve a la parte superior de la página con la que se está trabajando
• Fin Se mueve a la parte inferior de la página con la que se está trabajando

Acciones generales de documento

• Ctrl+F4 Cerrar archivo
• Ctrl+F2 Vista preliminar del documento
• Ctrl+F12 Cuadro de diálogo de abrir archivo
• Ctrl+O Abrir documento
• Ctrl+P Cuadro de diálogo de imprimir
• Ctrl+F Cuadro de diálogo de buscar
• Ctrl+N Nuevo documento
• Ctrl+S ó Alt+F2 Guardar como
• Alt+F4 Cierra el archivo y sale de Visio
• Alt+F6 Hace zoom +
• Alt+F8 Ejecutar macro
• Alt+F11 Editor de macros de Visual Basic

Si no te has leido el primer libro de la trilogía de Milleniun “Los hombres que no amaban a las mujeres” y tienes pensado hacerlo, cosa que te recomiendo, sáltate los párrafos entrecomillados que vienen a continuación y sigue leyendo más abajo ya que la cita es un pasaje importante del mismo:

–0–

“Kurt Nylund había hecho en total dieciocho fotografías desde la ventana de la segunda planta de Sundströms Herrmode. En diecisiete de ellas, se veía a Harriet Vanger.

Harriet y sus compañeras de clase llegaron a Järnvägsgatan justo en el mismo instante en que Kurt Nylund empezó a hacer fotografías. Maikel estimó que las fotos se hicieron en un lapso de unos cinco minutos. En la primera, Harriet y sus compañeras estaban bajando la calle en dirección al fotógrafo. En las fotos que iban de la dos a la siete se las veía de pie mirando el desfile. En otra, ya se habían desplazado unos seis metros más abajo. En la última, posiblemente sacada un poco más tarde, el grupo ya había desaparecido.

Mikael agrupó una serie de instantáneas en las que cortó a Harriet por la cintura y las manipuló hasta conseguir el mejor contraste posible. Las guardó en un archivo aparte, abrió el programa Graphic Converter y activó la función diaporama. El resultado fue similar a una película muda entrecortada, con saltos de fotogramas, donde cada imagen se mostraba durante dos segundos.

Harriet llega, imagen de perfil. Harriet se detiene y mira calle abajo. Harriet vuelve la vista hacia la calle. Harriet abre la boca para decirle algo a su amiga. Harriet se ríe. Harriet se toca la oreja con la mano izquierda. Harriet sonríe. De repente, Harriet, con la cara en un ángulo de unos veinte grados a la izquierda de la cámara parece asombrada. Harriet abre los ojos de par en par y ha dejado de sonreir. La boca de Harriet se convierte en una fina línea. Harriet fija la mirada. En su cara se puede leer… ¿qué? ¿Tristeza, conmoción, enfado? Harriet baja la mirada. Harriet ya no está.

Mikael volvió a pasar la secuencia una y otra vez…”

–0–

Una de las herramientas fundamentales que utilizamos hoy día cuando diseñamos una web o una aplicación web o móvil, son los prototipos.

En contraposición a ellos, uno de los documentos de trabajo más comunes que se han estado utilizando principalmente hasta hace muy poco tiempo para producirlas (y que se siguen utilizando y son necesario para muchas otras cosas) han sido los funcionales que describen textualmente de manera detallada las páginas, la estructura y funcionalidades, los casos de uso, así como los procesos de interacción que se dan cuando el usuario interactúa con determinadas partes de la interfaz mediante diagramas de flujo.

No obstante, aunque los funcionales son muy importantes de cara al desarrollo back, carecen de la fuerza descriptiva y aclaratoria de los prototipos desde un punto de vista de usabilidad, tanto para visualizar de forma óptima cómo ha de ser la interfaz, dónde tienen que ir exactamente sus elementos y cómo se interrelacionan, como para visualizar los procesos de interacción que se dan en la web o aplicación de una manera más satisfactoria.

No es lo mismo colocar un literal encima de un campo input de texto, que situarlo al lado. No es lo mismo tampoco ponerlo a la izquierda o a la derecha, o elegir uno u otro orden de aparición. No es lo mismo agruparlos visualmente mediante una “caja” o línea que los rodee, que dejarlos al “aire” en una región abierta por la que fluya la mirada sin barreras utilizando la mera alineación de los mismos a izquierda, derecha, arriba o abajo, para que queden relacionados mediante la aplicación de algunos de los principios básicos de la Gestalt.

Y tampoco es lo mismo leer una descripción textual de cómo funciona un elemento de una interfaz, que visualizarlo mediante prototipos en los que se ve de manera gráfica su comportamiento (por ejemplo, la secuencia de agregar un producto a un carrito de la compra en una tienda electrónica).

Esta es una de las razones por las que me gusta tanto Microsoft Visio para prototipar.

Porque entre otras cosas, permite simular una suerte de “animación de la interfaz” yendo más allá de la mera narrativa visual estática del espacio y del tiempo del papel que Tufte explica de manera brillante en su excepcional “Envisioning Information”.

En la novela de Millenium “Los hombres que no amaban a las mujeres”, uno de los personajes centrales, Mikael Blomkvist, ordena una serie de fotografías tomadas en breves intervalos durante un tiempo de cinco minutos y luego los reproduce en una secuencia animada con un programa informático en el ordenador con el fin de poder obtener una determinada historia o secuencia completa de acontecimientos que reflejan las fotografías.

De manera análoga y en lo que al diseño de interacción se refiere una de las claves para explicar interacción es la animación de la interfaz como si de una película se tratara. Con Visio se puede recrear esta animación creando “n” prototipos en los que en cada uno se presente un estado distinto de uno o varios componentes de la interfaz y visualizándolos sucesivamente hacia delante y hacia atrás mediante una función de Microsoft Visio que para mí me resulta imprescindible y que utilizó de manera habitual y automática cuando trabajo:

la tecla F5 de previsualización a pantalla completa de la página

En un archivo de Visio con, por ejemplo, 30 prototipos presionando F5 y utilizando las teclas de avanzar o retroceder podemos realizar una simulación virtual animada de un proceso  para mostrárselo al cliente o a los desarrolladores. Además, podemos exportar el archivo a un documento PDF para verlo con Acrobat Reader que permite hacer lo mismo.

Un ejemplo: la secuencia de imágenes de la interacción con un buscador de manera estática y lineal en las imágenes, a continuación, y de forma animada abriendo el PDF del enlace y usando las teclas de avanzar – retroceder página:

Aunque los prototipos nos cuentan una narrativa y dicha narrativa se puede apoyar (y se apoya cuando trabajamos) en descripciones textuales al margen y llamadas mediante círculos a las mismas, fijaros en la fuerza descriptiva que transmite un PDF en el que el cliente puede “animar” la interfaz:

Animar interfaces en Microsoft Visio (PDF)

Podéis abrir el archivo y utilizar las teclas de avanzar – retroceder para visualizar la interacción.

El siguiente vídeo es una propuesta de rediseño para las tabs de Firefox que presenté en su día a uno de los primeros Concept Series de Mozilla Labs (os recomiendo verlo a pantalla completa con resolución Full HD que es como mejor se aprecian los detalles). La captura la hice con Camtasia y es una sucesión de 120 prototipos previsualizados a pantalla completa:

En un trabajo normal no se debe llegar ni mucho menos a semejante grado de detalle porque los cambios que se quieran realizar son muy costosos en tiempo y esfuerzo. Para nuestro día a día, lo ideal es hacer un único prototipo para cada estado de interacción de un componente. En plan casero, con las teclas de avanzar retroceder página podemos controlar manualmente los tiempos para acelerar o retardar la animación y si deseamos algo más profesional, podemos editarlo posteriormente con un editor de vídeo:

El prototipado en papel está muy bien para simular los procesos interactivos y testear las cosas de manera rápida, a bajo coste y en un estado inicial, con el fin de comprobar si funcionan correctamente o si existe algún problema serio de usabilidad. Está metodología además, es muy útil y práctica para algo más formal y trabajado dado que, además de tener la posibilidad de animar la interfaz, podemos generar directamente un documento entregable en PDF.

Es fantástico poder enseñar directamente en pantalla y mostrar de forma animada a los compañeros de desarrollo y al cliente cómo van a funcionar las cosas.

El equipo de UX de Mozilla utiliza la comparación de múltiples pequeños usando imágenes estáticas. Ponen todos los estados de interacción de un componente en una misma y larga imagen. Al lado de cada uno de ellos se acompaña una descripción textual que lo explica.

El siguiente es un ejemplo del funcionamiento de Ubiquity en la barra de Firefox para un futuro comando “Shop for” al que se le aplican modificadores (por cierto, acabo de descubrir que Flickr permite descargarse la imagen en el formato original en que la subió la persona que creó el archivo y que en este caso se puede editar directamente en Fireworks :D

Ubiquity – Shop for comand + modifiers. Prototipo original de Aza Raskin

Si os animáis, me gustaría conocer vuestra opinión y vuestras metodologías de trabajo acerca de cómo hacéis para simular la cinestesia -la animación-, los movimientos y las transiciones- con las que tenemos que bregar cada vez más. Prototipos, tipología de notaciones para describir elementos y tiempos que uséis, cómo indicáis los estados de interacción etc.

• Download Android UI gallery for Microsoft Visio (435.kb)

• Belén Pena & Susana Heredia: Download Android UI gallery for Omnigraffle (.gstencil 372 kb)

• Download Android UI gallery for Omnigraffle (.vdx 370 kb)

• Download PDF of Android UI gallery for paper prototyping (434 kb)

Enjoy!  ;-)

]]> http://www.tentandote.com/2010/03/02/gallery-for-prototyping-android-applications-en-galeria-para-prototipar-aplicaciones-de-android-es/feed/ 15