Punteros, cursores y elementos de diálogo comunes para hacer prototipos en Visio
Me gusta Visio, me resulta francamente productivo.
Si lo utilizas habitualmente como herramienta de trabajo para prototipar puedes acceder a algunos controles comunes de la interfaz del entorno Windows escribiendo en el box de búsqueda de la ventana de Formas (menú Ver > “Ventana formas”) la palabra clave:
Curiosamente, se encuentran más elementos predefinidos de la interfaz buscando sólo por “usuario” que por la cadena “interfaz de usuario”. Especialmente útiles son los iconos de los botones de Windows, los iconos de los cuadros de diálogo y la típica silueta de usuario que viene bien en muchas ocasiones (todos ellos señalados con las pequeñas flechas rojas en la imagen):
- Diálogo: muestra entre otros controles los iconos de los cuadros de diálogo (error crítico, exclamación, interrogación e información) y los botones de las ventanas de Windows (restaurar, minimizar, maximizar, ayuda) además de otros controles comunes para el diseño de formularios
- Punteros: muestra entre otros, los punteros del mouse con las acciones más comunes (selección normal, selección ayuda, trabajando en segundo plano, ocupado, selección de precisión, selección de texto, escritura, no disponible, cambio de tamaño horizontal, cambio de tamaño diagonal 1 cambio de tamaño diagonal 2, mover, selección alternativa, selección vínculo).
- Usuario: muestra una silueta de usuario.
También se encuentran directamente buscando por las palabras clave de “diálogo” y “punteros”. Además, entre otras imprescindibles puedes descargarte la conocida galería con el kit de los elementos de Diseño de Yahoo disponible para Visio y Omnigraffle con elementos ya hechos que ahorran bastante trabajo. No está de más saberlo dado que suelen venir bien a la hora de prototipar.
Más galerías:
- una recopilación tanto para Visio como para Omnigraffle y en papel en el blog de DeInterfaz.
- Dos buenas galerías de Michael Angeles para ambos sistemas operativos.
¿Conocéis más trucos, atajos y/o consejos para Visio?
La que te va a caer
Yo también utilizo Visio, a pesar de lo mal visto que está. Es uno de los pocos programas de Microsoft que considero más o menos decentes. La navegación con ratón (ctrl+scroll, shift+scroll) debería ser un estándar.
Nosotros prácticamente en cada trabajo modificamos la forma de utilizarlo. Por ejemplo, no tenemos aún definido del todo un método para indicar el comportamiento dinámico: cómo se abren las capas ocultas, transiciones, highlights dinámicos, inlays y overlays, etc.
Respecto a bibliotecas, esta es graciosa (aunque no la que suelo utilizar):
http://www.abbett.org/2008/05/27/updated-sketch-gui-shapes-for-visio/
Comment by Diego Cano — May 8, 2009 @ 9:14 am
Diego… conocía ctrl+scroll pero… ¡¡¡SÍ!!! ¡¡shift+scroll para realizar desplazamiento horizontal es lo mejor!!
Yo hasta ahora vengo utilizando un modelo de ratón específico, el Logitech MX 400 que es el anterior modelo a este.
Lo bueno de este ratón es que además del scroll vertical y el zoom con ctrl+scroll me permitía hacer directamente el scroll horizontal en Visio ladeando la rueda a izquierda y derecha y era una gozada. Y digo era porque mientras que con XP funciona perfectamente con Windows Vista y en Visio el scroll horizontal ladeando la rueda no funciona. Se observa que la barra de desplazamiento de scroll horizontal se mueve pero el lienzo no ¿? ¡¡!! y para mí es algo que me resultaba fundamental. Lo he intentado de mil maneras, actualizando los drivers, cacharreando en la configuración y nada de nada. No había forma.
Un compañero (Pepe) me enseñó otro truco que es hacer zoom con la rueda para ampliar la vista y luego, pulsando:
ctrl+shift
el cursor se convierte en la lupa y puedes ir haciendo clic en la parte de la imagen que te interese para aumentar la que desees o arrastrar definiendo un área de la imagen y soltar para aumentarla.
Pero este atajo es fantástico ¡¡me encanta!!
Tengo que escribir un post comentando atajos. Otro que utilizo muchísimo es F5 y los botones de AvPag y RePag para ir a una página concreta, cuando te acostumbras es muy muy útil y para simular animación e interacción sobre un componente es una maravilla.
Comment by Administrator — May 8, 2009 @ 10:14 am
Mi problema con los desplazamientos es que soy usuario intensivo de productos de Adobe, así que en todos los programas pulso la barra espaciadora esperando que salga la mano de desplazamiento arrastrado
Lo de los atajos da para mucha pelea, en general. A mí me cabrea especialmente cuando los traducen para la versión española: ese CTRL+B para buscar, en lugar de CTRL+F. Hace falta un estándar (otro!): el F2 para pasar a modo edición, etc.
Comment by Diego Cano — May 8, 2009 @ 11:56 am
lo del F2 es fundamental, francamente útil
por cierto, que también funciona en Excel. Uno rebuscado que no utilizo porque es imposible pero que si pudiera personalizarlo sería muy útil:
ctrl + shift + alt retrocedes a la pestaña inmediatamente anterior (atajo imposible donde los haya) Para avanzar pestaña todavía no he descubierto la combinación y uso el F5.
Lo de la mano es toda una idea
¿estas cosas estarán patentadas por las correspondientes compañías y no se podrán usar en otros productos?
Por cierto: “Por ejemplo, no tenemos aún definido del todo un método para indicar el comportamiento dinámico: cómo se abren las capas ocultas, transiciones, highlights dinámicos, inlays y overlays, etc.”
¿? ni idea de lo que me cuentas, si sacas algún rato a ver si puedes contar algo de ello que me gustaría enterarme. Empiezo a creer que nos vendría bien una nueva desconferencia para hablar de todo ello. Esta vez yo me apuntaría.
Comment by Administrator — May 8, 2009 @ 12:52 pm
Mis 3 centavos para visio. 1 Stencil de Guui the interaction designer’s nail gun.
2 Macros para clonar páginas
3.Trucos para mejorar tu kung-fu con visio.
Comment by Eusebio Reyero — May 9, 2009 @ 8:53 pm
Me refiero a la forma de indicar en un wireframe el comportamiento dinámico dentro de la página, cuando lo hay. Generalmente se resuelve con una nota indicando, por ejemplo, que al hacer clic en un enlace se abre una capa flotante, se referencia el wireframe de la capa y ya está.
Me falta una forma directa de indicar si hay efectos de transición, si hay retardo de activación, facilitar la navegación por el wireframe desde el control al resultado, etc. Reflejarlo de una manera más directa pero que no se interponga en la información principal, tal vez con un sistema de iconos.
Por cierto, si te interesan los RIAs no te pierdas este libro
Comment by Diego Cano — May 11, 2009 @ 8:55 am
@Eusebio,
Gracias
Tengo que probar la macro ya.
@Diego
¡¡ahh!! ahora nos entendemos. Creo que es una de las cosas más difíciles de modelizar la interacción dinámica, la cinestesia y no hablemos ya de interacción háptica. En mi trabajo tampoco tenemos una forma normalizada todavía y por lo que sé no hay mucho escrito sobre el tema. Es un buen campo de investigación. Yo, lo hago “a lo bruto” aunque no es la solución óptima por la gran cantidad de trabajo que comporta en cuanto a volumen de wireframes y sobre todo por los problemas en cuanto a posterior actualización de los mismos si después de la revisión con el cliente hay cambios.
Me explico, para las transiciones y los modelos de interacción no complejos que se puedan entender bien sin necesidad de prototipo los explico directamente en la descripción de cada wireframe. Para las transiciones complejas directamente prototipo cada estado de la interfaz y simulo la interacción en Visio en el modo de previsualización (F5) y los botones de AvPag y RePag. Como esto también lo permite Adobe Reader pues no hay problema para enseñarle al cliente la interacción final y si utilizas los cursores que se correspondan con la interacción correspondiente con cada elemento de la interfaz el resultado es una especie de película dinámica bastante explicativa, tanto para el cliente como para los desarrolladores. Supongo que por lo que cuentas más o menos haréis lo mismo.
Pros: muy muy visual, la mejor forma de modelizar la interacción dinámica y desde mi punto de vista, una práctica que cada vez más tendremos que ir asumiendo dado que la tendencia en la World Wide Web es a que las interfaces se vayan haciendo mucho más dinámicas de lo que son ahora (la interacción a la que estamos habituados es francamente pobre hasta ahora).
Contras: muchísimo tiempo, requiere muchísimo tiempo para realizarla. En un proyecto medianamente grande consume una gran cantidad de horas y en consultoría…
Un modelo mixto que no funciona mal en los macroproyectos es una aproximación al diseño por componentes en lugar de por páginas. Se coge un excel, se definen las plantillas maestras y una a una se van explicitando y describiendo textualmente todos los componentes que forman parte de las mismas. Como es un modelo iterativo se va lento al principio y más rápido al final. Se describe la interacción textualmente de cada componente y luego se define un catálogo visual de componentes en Visio. Dependiendo del proyecto es una aproximación muy válida.
Es complicado y lo dicho, que hay muy poco escrito sobre el tema. Es interesante también como lo hace la gente de Mozilla.
Gracias por el libro, lo había visto pero no había entrado a hojearlo. Tiene buena pinta. ¿Lo tienes? ¿Merece la pena comprarlo?
Comment by Administrator — May 11, 2009 @ 9:31 am
La verdad es que sí, falta una normalización y cosas por escrito sobre cómo modelizar la cinestesia y la interacción rica de las aplicaciones, me has dejado pensativo… es importante el tema.
Comment by Administrator — May 11, 2009 @ 9:35 am
Sí, lo he leido ya y merece mucho la pena. Muy didáctico y práctico, lleno de ejemplos y con patrones y, lo que es más útil aún, antipatrones: ejemplos de malas utilizaciones.
En cuando al modelado de la interacción dinámica, me refería a documentar puntos concretos donde sea necesario explicitar el comportamiento dinámico. Lo solemos hacer con una especie de “storyboards”, como el enlace que muestras de Mozilla.
Sin embargo, es fácil dejar huecos en la definición: esa capa que se abre bajo la barra… ¿se muestra instantáneamente? ¿Se desliza desde arriba? ¿Desde la barra? ¿Hay que esperar unos milisegundos tras el tecleo del usuario, por si hace una corrección?
Comment by Diego Cano — May 11, 2009 @ 12:50 pm
pues mira, me lo compro.
Comment by Administrator — May 11, 2009 @ 1:09 pm