Pedro Puig

Entradas de la categoría ‘Usabilidad’

10 principios de usabilidad que funcionan

El concepto de la usabilidad debe ser algo que tenemos que tener muy en cuenta a la hora de comenzar el desarrollo de un proyecto, la usabilidad nos permite mejorar la interacción con el usuario, y eso ya es un elemento que hoy en día se hace indispensable.

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

Protoshare, el prototipado online

protoshare

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

Bocetando en 3D

Digilicius nos enseña un interface para bocetar tridimensionalmente. Según nos cuenta, es un prototipo de los canadienses Seok-Hyung Bae, Ravin Balakrishnan y Karan Singh.

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


Vía: Digilicius

Usabilidad en la navegación por pestañas

Usabilidad en pestañas

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

La importancia de los wireframes

Leo en Nudonation un muy interesante post donde explica cómo se crea un proyecto web desde el inicio hasta la fase final, gráficamente hablando por supuesto. Desde el esbozo en lápiz y papel, pasando por el desarrollo de wireframes (bosquejo de la ubicación de elementos en una pantalla) hasta la fase de prototipado (la usabilidad y los sistemas de navegación van indirectamente implícitos en el desarrollo de los wireframes) .

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…).

Wireframe del sitio web Mexbest

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.

Stencil Kit de Yahoo

Stencil Kit de Yahoo

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

Ejemplo de Interacción

En este video podemos ver como a través de una pizarra digital, podemos  interactuar con lo que dibujamos.

Sencillamente espectacular…