En este artículo quiero referenciar un libro que estoy leyendo en mi oficina, donde encontrarás buenas prácticas y recursos para la creación de formularios altamente usables y efectivos.

¿De qué libro estamos hablando?
WEB FORM DESIGN Filling in the Blanks by LUKE WROBLEWSKI foreword by Jared Spool

Luke Wroblewski (Senior Principal Designer de Yahoo! Inc.), nos deleita con este libro, pero lógicamente es en inglés, pues bien, buscando por la red he encontrado vía Paulo Arancibia, toda la información que ves aquí en castellano, asi que, desde aquí me gustaría agradecerle este aporte, ya que ayuda a todos aquellos que como yo, aún no estamos totalmente familiarizados con el inglés, el título del libro vendría a decir algo así como DISEÑO WEB DE FORMULARIOS Rellenando los campos vacíos.

Paulo Arancibia dice:

La creación de formularios es una tarea rutinaria tanto si estamos trabajando en desarrollos para la web como para el desktop, pues bien, como ya he dicho antes este artículo trata de aportar algunas buenas prácticas y recursos para la creación de formularios altamente usables y efectivos.

Muchos de los lineamientos descriptos a continuación se basan en estudios de usabilidad, estos estudios hacen uso intensivo de técnicas de eye-tracking para recolectar información acerca de cómo el usuario interactúa con la aplicación.

Eye-tracking

El eye-tracking es una técnica que mediante equipos especializados permite seguir los movimientos de los ojos de los usuarios para determinar las aéreas en las que fija su atención, cuánto tiempo pasa en ellas y como “navegan” la aplicación.

En esta imagen pueden apreciar a un usuario probando una aplicación web mientras es monitoreado.

Una vez recolectada la data del eye-tracking es posible crear los llamados “heat maps” o “mapas de calor“ donde es posible apreciar como el usuario interactuó con la aplicación, normalmente esto se hace coloreando las aéreas de la aplicación con una paleta que va del rojo para las zonas donde más atención se prestó hasta el verde pasando por el amarillo que son las zonas menos observadas por el usuario.

Heat Map

El uso de estas herramientas y técnicas aplicadas a la creación de formularios llevo a ciertas conclusiones, que permiten mejorar la usabilidad de los mismos dependiendo de la alineación y disposición de los elementos que conforman el formulario.

Top Aligned Labels

El uso de labels ubicadas sobre el textbox es recomendable cuando las data a ingresar por el usuario es familiar, esta práctica acelera los tiempos en los cuales se completa el formulario, pero tiene como contra que necesita más espacio vertical, algo a tener en cuenta es el espacio y el contraste entre los diferentes elementos para así lograr una navegación fluida por parte del usuario.

En esta imagen pueden ver el comportamiento del usuario frente a este tipo de disposición.

Right Aligned Labels

Alinear a la derecha los labels en los formularios es recomendable cuando se quiere mostrar una clara asociacion entre el label y su correspondiente textbox, esta técnica requiere menos espacio vertical, pero tiene la contra de que cuando los largos de los labels son muy dispares pueden hacer un poco dificultoso el escaneo de los elementos, en la siguiente imagen pueden ver un ejemplo de esta disposición y como el usuario reacciona al utilizarla.

Left Aligned Labels

Situar los labels alineados a la izquierda de los texboxs se recomienda cuando los datos a ingresar no son familiares por el usuario, esto es porque el moviente entre el label y el textbox es mayor y es posible utilizar esta desventaja a nuestro favor para que el usuario preste más atención, esto se puede apreciar mucho mejor en la siguiente imagen, en la cual notaran que la cantidad de pasos es mayor, como así también el diámetro de los puntos lo cual indica que se pasó más tiempo posicionado en esa área, esta técnica también es más eficiente en el uso del espacio vertical.

En esta imagen pueden ver el comportamiento del usuario frente a este tipo de disposición.

Si te interesa saber más acerca del tema te recomiendo que leas el libro Web Form Design Filling in the Blanks de Luke Wroblewski publicado por Rosenfeld Media.

Aquí tienes las transparencias en formato 3.9 MB PDF.

Images from Web Form Design: Filling in the Blanks by Luke Wroblewski; Rosenfeld Media, 2008. http://www.rosenfeldmedia.com/books/webforms/

TAGS (Etiquetas):

Luke Wroblewski, Web Form Design: Filling in the Blanks, Formularios, Usabilidad, Efectividad, Eye-trackingLuke Wroblewski, Web Form Design: Filling in the Blanks, Formularios, Usabilidad, Efectividad, Eye-trackingLuke Wroblewski, Web Form Design: Filling in the Blanks, Formularios, Usabilidad, Efectividad, Eye-trackingLuke Wroblewski, Web Form Design: Filling in the Blanks, Formularios, Usabilidad, Efectividad, Eye-tracking