tentándote.com » Herramientas de diseño

Atajos de teclado de Microsoft Visio

tentandote — Thu, 23 Dec 2010 07:51:40 +0000

Acciones muy útiles:

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

Human Interface Guidelines para el diseño de interfaces de usuario de apps en el iPad

tentandote — Fri, 28 May 2010 17:32:48 +0000

Apple acaba de publicar las Directrices para el diseño de Interfaz Humana del iPad y de elementos de interfaz de usuario de sus aplicaciones.

Gallery for prototyping Android applications [en] – Galería para prototipar aplicaciones de Android [es]

tentandote — Tue, 02 Mar 2010 09:59:37 +0000

A gallery for prototyping Android applications:

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! ;-)

Jing – capturador de pantalla y vídeo gratuito

tentandote — Sun, 10 Jan 2010 12:47:35 +0000

Hasta ahora no había hablado de él y ya va siendo hora dado que, desde que lo descubrí, se ha convertido en una de esas aplicaciones imprescindibles que, trabaje en el equipo que trabaje, tengo que instalar:

Jing es un estupendo capturador de pantalla de una compañía que en esto de la Experiencia de Usuario ya tiene tablas, Techsmith, y que tiene una serie de características que lo hacen más que recomendable:

Permite grabar vídeo gratuitamente en formato SWF o en formato MP4 en la versión de pago (15$ al año) que se puede editar posteriormente con Camtasia. Ideal para test de usuario.
Tiene un gestor o histórico de capturas de imágenes y vídeos que va guardando aquellas/os que hemos hecho y mediante el que podemos recuperarlos en cualquier momento.
Tiene un pequeño editor que permite resaltar áreas, zonas o elementos de la captura de pantalla mediante una flecha, marco o área semitransparente de color así como agregar texto en el mismo momento de la captura.
Permite subir las imágenes capturadas con un sólo clic a Screencast.com, un servicio de almacenamiento en línea puesto en marcha por Techsmith o a nuestra cuenta de Flickr especificando el título que deseemos (una pena que no tenga la opción de incorporar tags a la misma y que en la versión gratuita ponga siempre la etiqueta de Jing, pero bueno, al fin y al cabo alguna limitación ha de tener la versión gratuita).
Permite subir imágenes al servidor FTP que configuremos.
En la versión de pago, permite subir los vídeos a YouTube.
Permite lanzar el editor de Snagit una vez hecha la captura si tenemos la aplicación instalada en nuestro ordenador.
Posibilita hacer un copiar y pegar al portapapeles para editar la imagen en Photoshop si es necesario o en nuestro programa de edición de imágenes favorito.
Por supuesto, si lo preferimos podemos guardar las capturas con el formato que deseemos en nuestro ordenador.
Y para guinda, una nueva característica que acaban de añadir, permite con un sólo clic twittear una imagen junto a un enlace que lleva a la captura de pantalla en Screencast.com.

Lo dicho, toda una pequeña maravilla altamente recomendable de instalar que en su versión gratuita ofrece unas características estupendas. Y lo mejor, está disponible tanto para Windows como para Mac.

Pd. Y de postre, una estupenda noticia que anuncian en el web de Techsmith. Ya está disponible una beta de Snagit para Mac :-D

Utilizar códigos de colores para resaltar diferencias en el rediseño evolutivo de una interfaz

tentandote — Tue, 29 Dec 2009 13:15:28 +0000

Actualización 31 dic 2009 (*)

Me gusta bucear por los webs de la Fundación Mozilla, por sus Wikis y sus grupos de discusión. Y me gusta porque son uno de los lugares donde más Diseño de Interacción y Diseño de Información aprendo.

El equipo de UX de Mozilla es francamente bueno y algunas de sus discusiones son antológicas y de libro. No hay muchos sitios en donde se pueda aprender interacción como en estos lugares en donde uno tiene la sensación de que realmente la Experiencia de Usuario se valora en lo que vale. Razones no les faltan. Con un público de 300 millones de usuarios, o lo haces bien, o pasas a ser jugador de segunda en nada de tiempo.

En España, aunque la UX ha avanzado muchísimo desde el 2000, todavía nos quedan un par de vueltas antes de que nos pongamos al mismo nivel que en otros países en cuanto a inversión de recursos en UX se refiere. Por aquí, no conozco muchos lugares donde de manera sistemática se hagan tests de usuarios como parte del proceso de diseño/rediseño de los sites o productos que se acometen y se haga diseño centrado en el usuario por mucho que se predique que se hace. El coste que conlleva tanto económico, como en tiempo y Recursos Humanos lo hacen inviable dado que, de momento, no hay muchos clientes que puedan o quieran asumirlo cuando pueden tener un producto “más o menos” aceptable desde un punto de vista de usabilidad con una rebaja de presupuesto del ¿30? ¿40%?

No obstante, poco a poco, se va abriendo brecha y algunas empresas punteras sensibilizadas van poniendo en marcha sus propios labs (que por cierto, a ver para cuando alguna consultora se anima a realizar la inversión y abre su propio dominio que empiece con labs.xxxxxx.xxx). El problema es una vez más el coste, aunque hay jugadores muy grandes que podrían acometer la inversión holgadamente. Todavía falta implantar realmente una cultura del I+D+i.

Y volviendo a la materia que da origen al título de este post, navegando por los Wikis de Mozilla he ido a dar con esta maqueta en donde se plantea el rediseño del sistema de notificaciones para Firefox 4.0.

Me gusta la forma en que se han utilizado los colores para comparar las características del antiguo rediseño y el nuevo por las siguientes razones:

Los colores definen capas de información, relacionan elementos y permiten realizar con precisión comparaciones entre ellos.
Permite hacer emerger el conocimiento implícito en el rediseño explicitándo gráficamente las razones por las que se lleva a cabo, para que sean entendidas sin ambiguedades y rápidamente por parte del cliente.
Facilita juzgar fácilmente el peso que se le otorga a los distintos elementos de la interfaz y la mejora que supone en cuanto usabilidad.
Facilita estudiar la interrelación semántica que se establece entre los distintos componentes de la interfaz y entrar a considerar cuestiones como la idoneidad de su posicionamiento espacial.

Sin el uso de los colores sobre un prototipo en blancos, negros y grises, no sería posible obtener una visión y realizar una comparación tan clara de la interfaz original y la propuesta como evolución como se consigue en el presente ejemplo. Una buena práctica que se puede utilizar en nuestro trabajo diario:

Propuesta de rediseño para las notificaciones de Firefox 4.0. Los colores definen capas de información delimitando y relacionando con claridad y sin ambiguedades los distintos elementos de la interfaz original y la propuesta. La maqueta es de Alex Faaborg

(*) Para ver otro buen ejemplo de comparación de interfaces y uso del color (en este caso se comparan estados) se puede echar un vistazo a: “A piece with a lot of screenshots about the close tab behaviour in Google Chrome”