paulo.arancibia

Hoy junto a Julian Dominguez estuvimos presentando en la edición local de la PDC  los nuevos controles Ribbon y Data Grid para WPF, tal como prometimos a continuación podrán encontrar la solución de ejemplo que usamos en la charla como así también algunos links con recursos para que puedan seguir ahondando en el tema.

• WPF Toolkit
• patterns & practices: Composite WPF and Silverlight
• Ribbons Guidance
• Lab: What’s Coming in WPF: Datagrid, Ribbon, and VSM
• Dabbling around the new WPF Datagrid
• Download Solucion de Ejemplo

La noción de aplicar diseño a los desarrollos de software cada día es más importante,  pero como todo, requiere un proceso de adaptación, capacitación y descubrimiento.

El Design Maturity Model propuesto por Jess McMullin describe cinco niveles y sus respectivos comportamientos ante el diseño para poder guiarnos en el camino de una correcta incorporación del mismo en nuestros procesos de desarrollo y detectar en que estadio de madurez nos encontramos.

Nivel 1 – No somos conscientes del diseño

• El diseño no se reconoce como algo de valor
• Se  “diseña” sin ningún fundamento
• El diseño se deja de lado por cosas más “importantes”

Nivel 2 – Style

• El diseño es añadido solamente para ser “cool” o para seguir alguna tendencia
• El diseño es algo que se agrega a último minuto para añadir funciones meramente estéticas

Nivel 3 -  Forma y Función

• Se implementa el diseño para mejorar ciertas funcionalidades
• Se utiliza de forma limitada para agregar pequeños incrementos de funcionalidad en aplicaciones en desarrollo o existentes

Nivel 4 – Diseño como una forma de resolver problemas

• El diseño nos permite encontrar nuevas oportunidades para resolver problemas existentes
• El diseño nos permite acotar las opciones para atacar un problema específico

Nivel 5 – Totalmente orientados al diseño

• El diseño redefine los desafíos que enfrenta la organización
• El diseño establece el orden del día
• El diseño forma parte de toda estrategia
• La innovación está inmersa en la cultura

Esta es mi interpretación del DMM,  espero les sirva para saber en cual nivel están parados en la actualidad y si no están aplicando el diseño los ayude a tomar conciencia.

La creación de formularios es una tarea rutinaria tanto si estamos trabajando en desarrollos para la web como para el desktop, este post 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.

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.

Ejemplo de heat map

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

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 por 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.

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

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.

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

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 paso más tiempo posicionado en esa área, esta técnica también es más eficiente en el uso del espacio vertical.

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

Para seguir ahondando en estos temas les recomiendo la lectura del libro Web Form Design
Filling in the Blanks de Luke Wroblewski publicado por Rosenfeld Media, o de los siguientes enlaces.

La aportación del eyetracking en el sector de usabilidad
Eye-Tracking en Interacción Persona-Ordenador
Label Placement in Forms
Web Application Form Design