Leo en Torres Burriel diez principios de usabilidad que pueden mejorar esa interacción interface-usuario y son los siguientes:

1. Las etiquetas de los formularios funcionan mejor si están situadas justo encima del campo. Fuente: Label Placement in Forms
2. Los usuarios prestan atención a las caras que se ven en pantalla. Fuente: You look where they look
3. La calidad del diseño visual es un indicador de credibilidad: Fuentes: Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today (PDF)
4. La mayoría de los usuarios utilizan y hacen scroll. Fuentes: Unfolding the Fold, Paging vs. Scrolling y Blasting the Myth of the Fold
5. El azul es el mejor color para los enlaces.
6. La anchura ideal para una caja de búsqueda es 27 caracteres.
7. La existencia de espacio en blanco mejora la comprensión.
8. Un test de usuarios efectivo no tiene porqué ser extenso en su muestra. Fuente: Why You Only Need to Test with 5 Users
9. Las páginas informativas de producto ayudan a la decisión de compra del usuario
10. La mayoría de los usuarios no se fijan en los anuncios. Fuente: Banner Blindness: Old and New Finding

Vía: Torre Burriel

Hace algunos meses hablamos de otra herramienta para la creación de wireframes, Balsamiq Mockups, en esta ocasión hablaremos de Protoshare.

Protoshare es una herramienta online que nos permite realizar wireframes y prototipos funcionales de forma colaborativa, es decir podemos colaborar en tiempo real en la fase de prototipoado; es por ello que es ideal para grupos de traajo que estén distanciados geográficamente.

La aplicación se ejecuta en el mismo navegador y es compatible con los principales navegadores.

A primera vista parece una herramienta bastante potente, se puede navegar por los menús dinámicos, hacer presentaciones online a clientes etc…

Aunque la aplicación está disponible 30 días con usuarios ilimitados y 5mb de espacio en disco, si nos decidimos a adquirirla deberemos pagar por proyecto y por mes lo cual ya no resulta tan atractivo:

• $199/month NETWORK
• $99 /month TEAM
• $29 /month PERSONAL

Enlace a Protoshare

Realmente es espectacular ver la fácil que parece, pero luego ponte tu a bocetar y veras lo que sale

Vía: Digilicius

El concepto de usabilidad está presente cada vez más en nuestros desarrollos, desde un simple buscador, pasando por la homogeneidad en los links hasta la navegación por pestañas, precisamente en usabilitypost nos dan 5 consejos parar que esta navegación sea 100% efectiva para el usuario. Estos consejos se resumen en:

• Unir la pestaña activa con el contenido
• Diferenciar la pestaña activa por colores
• Poner en un color diferente el texto de la pestaña activa
• Hacer que toda la pestaña sea clicable y no solo el texto
• Definir siempre una pestaña activa

Vía: Isopixel

Lo importante de crear wireframes previos al comienzo de la fase de diseño, nos evitará hacer modificaciones en fases posteriores (aunque esto no es siempre así, ya se sabe…).

Ya sea un microsite, un blog, una web o incluso diseños para imprenta, es recomendable crear un wireframe que nos ayudará a definir un mejor proyecto final. Para la realización de wireframes hay multitud de herramientas. Yo utilizo el Photoshop, me permite crear los distintos elementos en capas, es fácil de modificar y me resulta cómodo no salir del programa en el que luego voy a realizar el diseño, pero lo importante es que sea una herramienta en la que el diseñador, se sienta a gusto.

La importancia de crear un Wireframe (diseño de alambre), antes de comenzar con el prototipado, es cada vez más aconsejable.

Hay numerosas herramientas para la creación de Wireframe, pero tal vez las más importantes sean Omnigraffle y Visio de Microsoft.

Ahora Yahoo, presenta el Stencil Kit que es un conjunto de objetos predefinidos que nos ayudarán a crear de forma rápida un wireframe desde nuestra aplicación favorita.

El Stencil Kit de Yahoo esta disponible tanto para usuarios de Omnigraffle como de Visio. Pero si tu programa para la creación de Wireframes es otro, puedes descargártelo en PDF, PNG y SVG.

Otra ayuda más…

Vía: Torresburriel

Sencillamente espectacular…