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

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]

A gallery for prototyping Android applications:

Enjoy!  ;-)

Francisco Tosete - Stencil of Android v1.0

--

 

Jing – capturador de pantalla y vídeo gratuito

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:

Captura de la ventana de preferencias de Jing

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

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:

Firefox 4.0. Rediseño de los mensajes de notificación. Los colores definen capas de información separando y relacionando en ambos diseños sin ambiguedades los elementos de la interfaz

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”

--

 

Switch to our mobile site