¿Qué son las aplicaciones Estilo Metro?

Desde que ha iniciado la difusión del Estilo Metro, muchos se han interesado por entender lo que significa. Al empezar a consultar sobre Metro es común encontrarse con un conjunto de principios "no técnicos" si no más bien conceptuales sobre lo que debería generar la experiencia de usuario en una aplicación con personalidad Metro.

Esto para un diseñador probablemente sea más fácil de asimilar, sin embargo algunas personas técnicas, equivocadamente han caído en pensar que aplicar metro es una lista de chequeo que siguen las aplicaciones que construyen. Tengo la pena de comunicarles que eso no es totalmente cierto y me atrevería a decir que ni siquiera es la idea principal.

Aunque hay detalles técnicos puntuales que ofrece Microsoft para la construcción de aplicaciones Metro, el nacimiento de Metro y su pretención es más un real impacto y cambio sobre la forma en que las personas interactúan actualmente con los sistemas, un camino que evidentemente apalanca e intenta iniciar la evolución de los usuarios y sus experiencias con el software, a las ideas de nuevas aplicaciones que tanto hemos visto en los videos de futuristas de Microsoft (por cierto de un futuro no tan lejano).

Metro sin embargo no se reduce a ceñirse a la propuesta de Microsoft, si no que establece un conjunto de ideas alrededor de las cuales muchas aplicaciones y sitios web pueden ser construidos, no necesariamente usando los mismos elementos, pero seguramente si bajo la misma intención.

Aunque temas como la tipografía evidentemente darán una linea característica a este tipo de aplicaciones, hay una absoluta libertad, mientras conserve y se alinee a los principios que sigue la propuesta. De hecho en la mayoría de sitios de Microsoft hoy, podemos ver detalles de sutiles a fuertes con respecto a la alineación con Metro, y quien mejor que los que lo proponen para darnos diferentes y hermosos estilos de aplicación, como el portal de Zune o el de Azure, donde se aplica el estilo Metro sin necesidad de alinearse al uso de los cuadros tan característico en las propuestas para Windows Phone y Windows 8.

Aquí una implementación bastante bonita del sitio de DreamSpark

Personalmente siento que muchos han confundido Metro con una linea monótona de hacer aplicaciones con cuadros y una tipografía fija, también sobre colocar o no colocar demasiados elementos en las interfaces, pero Metro no se reduce a eso, por soñador que parezca Metro habla de tocar al usuario al interactuar con nuestra aplicación, de producir sensaciones, de usar la disposición y estilos de los textos, las animaciones de elementos, las respuesta a los gestos táctiles, todo esto en su sana proporción, sin exceso, y obviamente sin olvidarse que lo principal es llevar al usuario a ejecutar tareas concretas en la menor cantidad de pasos que esto sea posible y comprensible.

La aplicaciones de estilo Metro son aplicaciones adaptadas a las necesidades de sus usuarios, adaptadas al dispositivo que se ejecutan y optimizadas para para la interacción táctil. Ser liviano y minimalista está muy lejos de creer que Metro es para tomárselo a la ligera, y temas como inmersión, movimiento e impacto emocional no son solo conceptos accesorios, lo son todo.

Obviamente hablar de forma tal elevada de estos conceptos hace que muchos además de desinteresarse no sepan como aplicarlos, espero poder darles algunos tips extraídos de la mucha lectura sobre Metro sobre como darle esa personalidad a sus aplicaciones:

• Metro habla de atracción, si tal cual, de ser atractivo y vivo, esto además de relacionarse con la estética de nuestra aplicación, márgenes, el buen uso de las escalas de colores y la tipografía, tiene que ver con lograr que tu usuario quiera ver tu aplicación siempre. ¿Qué eso como se logra? La propuesta puntual de Windows Phone y Windows 8 son los Live Tiles o los cuadros dinámicos, que deberíamos usar desechando la idea de que es solo un acceso directo. Estos cuadros son una oportunidad para definir visualmente la marca para sus usuarios, además los cuadros tanto en Windows Phone como en Windows 8 son una manera de comunicarnos con ellos y atraerlos con la información que les interesa y la gente que les importa y llevándolos así a usar la aplicación. Usar los cuadros como acceso directo solo es un desperdicio de estrategia. debería trabajarse por que los usuarios volvieran de forma recurrente a los cuadros dinámicos en busca de actualizaciones.

• Metro también es experiencia, el movimiento y la atracción distan de interferir con la concentración de los usuarios para que puedan hacer las cosas que quieren hacer, además de poder compartir contenido con sus círculos sociales y enviar contenido a los dispositivos que están conectados. Además es importante tener en cuenta que a los usuarios les encanta hacer más de una cosa a la vez, conocer el espacio que tenemos disponible y como usarlo, además de el ciclo de vida de las aplicaciones y como lograr usarlo de forma que permita realizar otras tareas de forma y retornar de forma cómoda volviendo al punto donde se encontraba trabajando, son detalles que conciernen directamente a los desarrolladores y que no deben olvidar. La experiencia en Metro es vital, hasta la instalación fácil hace parte del concepto.

• Hablando de interacción en el tema de los gestos, no seguir algunas consideraciones serían razones por las q nos rechazarían las aplicaciones en el Marketplace de no seguirlas. Conocer los gestos que maneja el dispositivo en el cual corre nuestra aplicación es importante, como desarrolladores trasladarnos al mundo táctil y salir del entorno donde clic, clic derecho y doble clic eran lo más importante es imprescindible, y para ello debemos reconocer con que gestos funcionan los controles y los contenedores de dichos controles, puntualmente me refiero a los pivots y panoramas, cuyo gesto base de deslizamiento horizontal podría entrar en conflicto con el comportamiento de otro control y generar una mala experiencia de usuario. Estos no son los únicos casos, cualquier otro contenedor al que le asociemos un comportamiento, olvidando que luego podemos colocar controles dentro de el podría generar esta misma situación. También en este punto debemos tener en cuenta la distancia entre los elementos, al ser una experiencia táctil la precisión se reduce, por lo que guardar una distancia mínima adecuada (además de estética) entre los elemento es importante.

• Cuando nos referimos al movimiento podemos hablar del uso de animaciones, y aquí tengo que decir que tener Expression Blend para facilitar este trabajo es excelente. El movimiento sin embargo no se reduce a animaciones de adorno, de hecho debemos ser mesurados con el tema y no abusar. El movimiento podríamos asociarlo mucho a la experiencia de usuario, cosas tan simples como presionar un elemento en la pantalla y que el usuario se de cuenta con un movimiento, cambio de estado o de colores que ha realizado un gesto sobre el son detalles bastante importantes, y que si bien los usuario no lo agradecerán por que lo considerarán obvio, si lo odiarán si no lo hacemos.

Para finalizar les recomiendo el blog de Arturo, definitivamente mucho que aprender desde el día 1, tiene excelentes post para ver puntualmente como aplicar el estilo Metro a nuestras aplicaciones. Espero que les haya gustado un poco mi muy personal análisis y hasta la próxima ;)

Sorey