Prototipos con SketchFlow – Play Silverlight

En esta entrada voy a introducir una herramienta de prototipado rápido que he tenido la oportunidad de utilizar recientemente en el trabajo. Se trata de SketchFlow, incluída en Expression Blend, que me parece realmente útil en las fases iniciales de un proyecto, cuando aún no se es totalmente consciente de todos los requisitos a cumplir por la aplicación a desarrollar. Este tipo de herramientas ayudan a formar una idea bastante aproximada de lo que se quiere, creando un prototipo de la aplicación que a lo largo de varias iteraciones y en colaboración con el cliente, va obteniendo la forma que tendrá la aplicación finalmente, a la vez que nos puede facilitar la toma de requisitos.

En esta entrada desarrollaré un prototipo explicando los aspectos básicos de SketchFlow desde la creación del prototipo en sí hasta la gestión del feedback proporcionado por el cliente para hacer evolucionar el prototipo.

Al crear un proyecto de tipo Silverlight SketchFlow Application, nos encontramos con la pantalla principal, en la que destacan tres cosas con respecto a la interfaz de usuario de Blend habitual:

  • SketchFlow Map
  • SketchFlow Animation
  • SketchFlow Feedback

A continuación explicaré por encima cada una de ellas, además de una serie de características propias de SketchFlow.

Mapa SketchFlow

El mapa de SketchFlow representa el diagrama de navegación de la aplicación. Teniendo claro las pantallas de las que constará la aplicación y la relación entre ellas tendremos en apenas unos minutos la estructura de la aplicación. En la siguiente imagen se pueden ver las acciones que podemos ejecutar sobre una pantalla (pulsando botón derecho sobre un elemento) que van desde crear una nueva pantalla que esté conectada a la seleccionada a cambiar el color de la caja que representa la pantalla.

Mapa SketchFlow

Mapa SketchFlow

Una vez tengamos montada la estructura de la aplicación, debemos hacer efectivas las conexiones entre las pantallas, para lo que SketchFlow nos proporciona el comportamiento NavigateToScreenAction. Este comportamiento aparece como una de las opciones de acceso rápido al pulsar botón derecho sobre un control y, al seleccionar un destino, nos asignará este comportamiento al evento más adecuado (Click en el caso de un control Button).

Por otro lado, cuando necesitemos partes reutilizables, Blend incorpora los componentes (Component Screen) que, como característica principal, nos aportan información visual en el mapa sobre cuáles son las pantallas en las que están incluidos. Por ejemplo, en el caso de la cabecera, que comparte título, imagen y menú en todas las pantallas de la aplicación:

Component Screen

Component Screen

Animaciones SketchFlow

El panel SketchFlow animation, nos permite crear animaciones que simulan comportamientos del usuario, de esta manera logramos una demostración que hará ver al usuario el procedimiento a seguir para ejecutar una tarea, mostrando a la vez los cambios que dicho procedimiento causa en la IU.

Una animación consiste en crear una serie de fotogramas que representarán estados discretos de un procedimiento, empezando desde un fotograma base y creando nuevos estados a partir del anterior.

Panel SketchFlow Animation

Panel SketchFlow Animation

Al crear un nuevo fotograma deberemos cambiar las propiedades de los controles que queramos y será el motor de animaciones el que se encargará de realizar las transiciones entre los fotogramas que definamos. Además, podemos definir tanto el tiempo que se mantendrá en ese estado como el tiempo de transición de un estado a otro, así como la función de interpolación a utilizar en las transiciones entre fotogramas.

Relacionado con animaciones, SketchFlow nos proporciona un comportamiento llamado PlaySketchFlowAnimation que nos permitirá lanzar una animación SketchFlow al producirse un evento. También podemos encontrar un nuevo tipo de trigger, SketchFlowAnimationTrigger, que nos permitirá ejecutar un comportamiento basándonos en eventos producidos durante la reproducción de una animación de tipo SketchFlow como cuando ésta se termina, se pausa o se cambia de frame.

Este es un ejemplo de animación SketchFlow, en el que se ejemplifica la selección de un elemento de una lista y la muestra de estadísticas relacionadas con éste:

 

Estilos SketchFlow

Otro de los aspectos a destacar de SketchFlow es la existencia de los Sketch Styles. Se trata de una serie de recursos incorporados que aplican un estilo característico a los controles, haciendo que parezcan que están dibujados a mano. Esto es algo intencionado y pretende hacer ver que lo que se está presentando es tan solo un prototipo y permite centrarse en la interacción más que en el diseño. Estos son algunos ejemplos de los estilos disponibles en SketchFlow:

Sketch Styles

Sketch Styles

Más características

SketchFlow dispone de una serie de comportamientos específicos que explicaré por encima a continuación:

  • ActivateStateAction: Activa un estado de una pantalla o de un componente en el reproductor SketchFlow.
  • NavigateBackAction: Permite navegar a la pantalla anterior en el historial de navegación.
  • NavigateForward: Permite navegar a la pantalla siguiente en el historial de navegación.
  • NavigateToScreenAction: Permite navegar a la pantalla seleccionada.
  • NavigationMenuAction: Este comportamiento se utiliza principalmente en menús de navegación que, como decía anteriormente, debemos incluir como componente en nuestros proyectos y nos permite indicar estados a establecer en dicho componente cuando una pantalla determinada esté activa e inactiva.
  • PlaySketchFlowAnimationAction: Este comportamiento nos da la posibilidad de lanzar una animación SketchFlow
  • RemoveItemInListBoxAction: Como su nombre dice, con este comportamiento podemos eliminar un elemento de un ListBox. RemoveItemInListBoxAction tiene limitaciones, ya que solo funciona en Data Templates de los elementos en ListBox con datos enlazados (asociando la propiedad ItemsSource)

Distribuyendo nuestro prototipo y recuperando el feedback del cliente

Una vez finalizado el prototipo, se hará entrega al cliente del mismo. Para ello, seleccionaremos en el menú Archivo -> Empaquetar proyecto Sketchflow. Esto generará un sitio web que podremos dejar accesible al cliente para que pueda hacer comentarios sobre el mismo. El prototipo se ejecuta dentro de un reproductor SketchFlow que nos proporciona funcionalidad adicional como un mapa de navegación, acceso directo a pantallas conectadas con la mostrada actualmente, los diferentes estados visuales de la pantalla, las animaciones disponibles (con posibilidad de reproducir y pausar) y, la principal y más importante, la obtención de feedback por parte del usuario.

Reproductor SketchFlow

Reproductor SketchFlow

En la parte inferior izquierda del reproductor SketchFlow encontramos la zona de mis comentarios donde podemos realizar anotaciones sobre la pantalla en la que nos encontramos, tanto en texto como sobre el propio prototipo, utilizando las herramientas de dibujo que el reproductor nos proporciona.

Una vez el cliente haga una revisión completa del prototipo y haya anotado los aspectos que le gustaría añadir, eliminar o modificar, es el momento de recuperar esta información para llevar a cabo una segunda versión del prototipo. Para ello, el usuario ha de exportar los comentarios, lo que nos generará un fichero .feedback que nos deberá entregar.

Exportar Comentarios

Exportar Comentarios

Con los ficheros de feedback en nuestras manos, el siguiente paso consiste en añadir estos ficheros al proyecto. Para ello, en el panel ‘SketchFlow Feedback’ añadiremos los ficheros enviados por todas las personas implicadas en el desarrollo del prototipo y SketchFlow los organizará en base a revisión y usuario. Para localizar de forma rápida las pantallas sobre las que se han hecho comentarios, vemos que en el mapa aparece un icono de una bombilla junto a ellas.

SketchFlow Feedback

SketchFlow Feedback

Además, SketchFlow permite generar documentación asociada a cada revisión en documentos word en los que, por cada pantalla del prototipo, incluirá una imagen de la pantalla y los comentarios realizados sobre la misma.

Otro aspecto interesante a mencionar es que SketchFlow nos da la posibilidad de crear Work Items en Team Foundation Server a partir de un fichero de feedback. Pulsando botón derecho del ratón sobre un feedback, nos aparecerá esta opción.

Conclusiones

Después de haber trabajado con SketchFlow, he de reconocer que es una herramienta realmente útil en las fases iniciales del proyecto que ayuda a detectar necesidades rápidamente. En cualquier caso, para que su utilidad sea total es necesario que el cliente esté implicado en el desarrollo del prototipo aportando feedback que ayude a obtener una imagen de lo que la aplicación ha de ser finalmente. De ser así, conseguiremos reducir, que no eliminar, el número de cambios durante el desarrollo de la aplicación final.

Más información


Anuncios
Esta entrada fue publicada en Silverlight 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