Mejorando la experiencia de usuario – Play Silverlight

Tecnologías como Silverlight y WPF, nos permiten llevar la experiencia de usuario a un nivel superior mediante el uso de herramientas como Expression Blend. Existen una serie de conceptos de diseño que nos permiten mejorar la experiencia de usuario, como es el caso del concepto de interfaz de usuario fluida (Fluid UI). Este concepto tiene por objetivo conseguir que el usuario pueda seguir y observar los cambios en la interfaz de usuario, evitando que éste quede confuso ante los cambios que se produzcan en la misma. Esto se obtiene haciendo que los elementos visuales se muevan y aparezcan de forma suave. Blend nos ofrece una serie de herramientas que nos permite poner en práctica este concepto.

FluidLayout

FluidLayout es una característica del Visual State Manager que permite realizar cambios de estado de forma fluida. Esta funcionalidad respondía a la necesidad de disponer de diferentes estados, cada uno de ellos con una disposición de los elementos en la IU diferente o con ciertos elementos ocultos. Sin embargo, esto no era posible hasta la aparición de FluidLayout ya que, en el caso de la ocultación de elementos, la transición de la propiedad Visibility de Visible a Collapsed no podía hacerse de forma fluida al no haber valores intermedios entre ambos.

Su funcionamiento consiste en que en el momento de  ejecutarse un cambio de estado toma una “foto” de la posición de los elementos de la UI en el estado anterior al cambio y otra tras el cambio, y se genera la animación adecuada para realizar la transición entre ambos estados de forma fluida interpolando entre su posición inicial y final. Para activar FluidLayout, tan solo debemos hacer click el botón remarcado en la imagen.

Fluid Layout

Fluid Layout

FluidMoveBehavior y FluidMoveSetTagBehavior

En Silverlight 3, disponíamos de FluidMoveBehavior que permitía aplicar el concepto de IU fluida a elementos de controles StackPanel y WrapPanel. Los elementos contenidos en estos controles ajustan su posición en base al espacio del que disponen y este comportamiento hace que, cuando el espacio disponible cambie, los elemento se muevan hasta su nueva posición mediante una animación.

En Silverlight 4 se añade una nueva característica que permite asociar posiciones a datos y no a elementos visuales. La mejor forma de explicar esto es utilizando un ejemplo práctico. En el video que aparece a continuación, aparece en la parte inferior izquierda un ListBox con datos de ejemplo que incluyen imágenes de sillas, y en la parte central se encuentra una vista detalle  de la selección realizada en dicha ListBox. Al seleccionar un elemento en  la lista, se produce una animación en la que la imagen  del elemento del ListBox, se desplaza y redimensiona hasta ocupar el espacio disponible en la vista detalle.

Tanto los elementos de la lista como la vista detalle se han generado a partir de datos de una colección y el hecho de poder asociar posiciones a datos nos permite relacionar una posición inicial del elemento (en el ListBox) y una posición final (en la vista detalle) lo que da la posibilidad de realizar una interpolación entre ambas posiciones. Para obtener este resultado, es necesario combinar FluidMoveBehavior con un nuevo comportamiento, FluidMoveSetTagBehavior.

Con FluidMoveSetTagBehavior  conseguimos etiquetar un elemento para que posteriormente sea utilizado por un comportamiento FluidMoveBehavior y realizar una animación. Al seleccionar DataContext como valor de la propiedad Tag del comportamiento, etiquetamos el dato asociado a ese elemento visual con una posición y se registrará en el llamado sistema FluidMove. En el caso concreto del ejemplo del video, en el que cada elemento de la lista completa una  plantilla en la que tenemos la imagen y asignaremos un FluidMoveSetTagBehavior a dicha imagen.

Propiedades FluidMoveSetTagBehavior

Propiedades FluidMoveSetTagBehavior

La otra parte de este sistema está en la vista detalle, en la que encontramos la imagen cuyo dato asociado es la imagen del elemento seleccionado en el ListBox. Para que se pueda realizar la animación de la imagen desde la lista a la vista detalle, debemos poner la propiedad InitialTag del comportamiento a DataContext. Al hacer esto el comportamiento accede al sistema FluidMove y recupera la posición asociada al dato del elemento visual para, finalmente, realizar la animación seleccionada en las propiedades del propio comportamiento FluidMoveBehavior.

Propiedades FluidMoveBehavior

Propiedades FluidMoveBehavior

De esta manera conseguimos un forma muy interesante para que el usuario pueda ver como el detalle se completa a partir de la selección realizada en el ListBox.

LayoutStates

Se trata de una nueva propiedad introducida en Silverlight 4 que introduce tres nuevos estados que permiten añadir animaciones a la adición y eliminación de elementos en un control ListBox.

Layout States

Layout States

Estos estados se encuentran agrupados en un nuevo grupo llamado LayouStates que podemos encontrar editando la plantilla del contenedor de cada item.

Plantilla contenedor item

Plantilla contenedor item

Como complemento a estos estados, podemos añadir un comportamiento de tipo FluidMoveBehavior para hacer que los elementos ya presentes en la lista también se muevan con suavidad para hacer hueco al nuevo elemento u ocupar el del elemento eliminado. Este comportamiento se tiene que aplicar a los hijos del contenedor de elementos del ListBox, al que accedemos editando la plantilla del ItemsPanel en el submenú de plantillas adicionales.

Aquí un ejemplo de esta nueva funcionalidad:

Hasta aquí, algunas de las herramientas que Expression Blend ofrece para poner en práctica el concepto de IU Fluida.

Referencias

Anuncios
Esta entrada fue publicada en Animaciones, Silverlight, UX y etiquetada , , , , , , , , , . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s