Optimizar la IU para pantallas horizontales y verticales

Como ya hemos demostrado en muchos foros, con Windows 8 hemos tendido a utilizar la orientación en sentido horizontal (apaisada) con bastante asiduidad. Básicamente esto se debe a que muchas veces utilizamos proyectores y de este modo obtenemos una mejor experiencia. Otra razón es que muchos de los primeros dispositivos empleados (como la Tablet Samsung presentada en el BUILD con la Preliminar de Desarrollo de Windows) son panorámicos, que es ideal para mostrar aplicaciones una al lado de otra con la nueva función Snap, y en general va mejor en esta posición. Hemos dedicado un gran esfuerzo a lograr una experiencia rápida y fluida en rotación de la pantalla, y poder ofrecer una experiencia de máxima calidad a la gente que prefiere ver la pantalla en sentido vertical. Como ya has leído, todo este esfuerzo deriva, sin duda, de nuestros análisis previos de los factores que inciden en la elección de una u otra orientación. Incluso hemos modificado nuestras herramientas Visual Studio y Expression para que los desarrolladores también puedan crear aplicaciones y que funcionen correctamente en ambas orientaciones. David Washington, de nuestro grupo de Experiencia de Usuario, ha elaborado este artículo donde explica las pantallas en sentido horizontal y vertical con Windows 8. También podéis verle en la sesión APP-207T del BUILD. --Steven

Un PC con Windows 8 es realmente un nuevo tipo de dispositivos, capaz de escalar desde pequeñas tabletas basadas en interfaz táctil exclusivamente hasta portátiles y equipos de escritorio. Con el replanteamiento de Windows 8, lo hemos diseñado para ofrecer una gran experiencia independientemente de la orientación de la pantalla o factor de forma. Los tablets son ergonómicamente flexibles, y nos permiten colocar el dispositivo en la orientación que más nos guste y que mejor se adapte al tipo de contenidos.

Una de las cosas más interesantes de los tablets es que lo podemos coger con las manos. Es personal. Tanto si estamos leyendo el periódico  del domingo o revisando un montón de fotos de la boda, el permitir que se pueda coger e interactuar con los dedos genera un vínculo emocional con él. En la era digital, mucho de lo que realmente importa está relacionado con nuestros dispositivos y así, durante la planificación de Windows 8, queríamos estar seguros que la experiencia de usuario era la mejor posible en cualquier orientación que ofrezca el dispositivo.

Por ello empezamos a diseñar por completo la experiencia de Windows 8 partiendo de distintos factores de forma y aplicando los siguientes principios:

• La experiencia se adapta por sí sola a todos los factores de forma: pantallas pequeñas, pantallas anchas, portátiles y equipos de escritorio
• La experiencia aprovecha los formatos de pantalla panorámica para multitarea y vídeo a pantalla completa.
• El dispositivo se puede coger con las manos e interactuar con él de la manera que resulte más cómoda.
• Los desarrolladores tienen la posibilidad de crear una aplicación que puede utilizarse en todas las vistas y orientaciones, sobre cualquier factor de forma, con el mínimo esfuerzo.

Hemos dedicado un montón de horas a estudiar la forma en que la gente utiliza las tabletas en nuestros laboratorios y en sus propias casas. Hemos observado a personas que están familiarizadas con las tabletas y a otras que empezaban a utilizar estos equipos, y hemos mantenido contacto con ellos durante meses. Hemos tomado nota de qué forma cogen los equipos, las posturas de su cuerpo, sus movimientos con las manos y las interacciones con una gran variedad de aplicaciones, lugares del dispositivo y orientaciones. Hemos visto una casuística enormemente variada y hemos escuchado a los usuarios qué factores influyen a la hora de elegir el aparato y la orientación. Entre los factores que influyen aquí encontramos factores antropométricos como el tamaño de la mano y las distancias abarcadas con los dedos, factores ergonómicos como la repetición de gestos y la fatiga, factores relacionados con el hardware como la accesibilidad a los botones del equipo, factores ambientales como el lugar en donde utilizan la tableta (p.ej. en la cocina, en el dormitorio o en el salón), y factores físicos como si lo utilizan de pie, sentados en una mesa o en un sillón. El número de combinaciones posibles es inmenso, lo que nos llevaba a una primera conclusión básica de que las posturas, estilos de manejo y orientaciones cambian con enorme frecuencia. En pocas palabras, que no hay una manera única de coger el dispositivo y la gente busca de manera natural la posición y orientación que le parece más cómoda y que considera adecuada para lo que están haciendo con ese aparato en ese momento concreto.

En un primer momento pensábamos que la elección de la orientación, vertical o apaisada, vendría influida por las preferencias de cada uno. Cada persona que observábamos rotaba el equipo y en cada caso esperaban que el equipo y la interfaz de usuario funcionasen correctamente en ese momento. Lo sorprendente era que a medida que la gente iba familiarizándose con el dispositivo y con las aplicaciones que más les interesaban, el factor de influencia para elegir la orientación pasaba a ser, de manera exclusiva, el tipo de contenido que aparecía en pantalla. Si el contenido y la experiencia eran mejores en sentido apaisado, la gente de forma espontánea elegía el modo de presentación horizontal. Si el contenido y la experiencia eran mejores en sentido vertical, la aplicación se utilizaba en vertical. Como ejemplo, la mayoría de las personas prefieren ver una película en pantalla completa en sentido horizontal, sin barras negras arriba y abajo, mientras que cuando se trata de leer un artículo o una página web, lo hacen preferentemente en sentido vertical ya que así necesitan menos desplazamientos. Las preferencias que nos han ido comentando los usuarios venían influidas fuertemente por su propio criterio a la hora de valorar si la aplicación ofrece mejor experiencia en una u otra orientación. Hemos recibido preguntas y opiniones al respecto de si Windows 8 es principalmente “horizontal” o “vertical”. Nuestro punto de vista es que ambas orientaciones son igualmente importantes, y las experiencias deben ser las mejores en los dos casos. En vez de fijar una posición y una orientación y optimizar la interfaz para esas condiciones, hemos diseñado una experiencia que se optimiza sea cual sea la forma en que se coge el aparato, adaptándose a la aplicación y sus contenidos.

Nuestros objetivos al respecto  de la orientación vertical y horizontal eran estos:

• Podrás fácilmente rotar tu tablet para adaptarse lo mejor posible a la tarea o a las condiciones de ergonomía.
• La rotación en Windows debe ser rápida y fluida
• Windows debe poder rotar de forma previsible tanto a nivel de sistema como de aplicaciones y el usuario debe mantener el control en todo momento.
• Los desarrolladores deben poder crear de manera sencilla presentaciones de alta calidad  tanto en sentido apaisado como vertical, dependiendo únicamente del tipo de experiencias que quieran ofrecer al usuario.

Windows en modo apaisado

Algunos nos han preguntado por qué hemos enseñado la interfaz de usuario de Windows 8 en sentido apaisado principalmente durante la conferencia //build/. Windows 8 está pensado para todos los PCs, no solo para tablets. Va a funcionar en cientos de millones de portátiles y equipos de sobremesa (diseñados para Windows 7 y para el nuevo Windows 8), muchos de los cuales tienen y tendrán pantallas horizontales exclusivamente. Además, en modo apaisado y en formato panorámico, podemos ofrecer una experiencia multitarea (enfrentando dos aplicaciones una al lado de otra) y vídeo en formato 16:9 aprovechando toda la superficie. (Además debo decir que muchas de nuestras demostraciones se hacían con proyectores en pantallas enormes, que se ven mucho mejor en sentido horizontal).

Hemos diseñado Windows 8 para que sea ergonómico y cómodo en todas las orientaciones. Hemos visto que, cuando se utiliza un tablet en horizontal, una postura cómoda suele ser cogiéndola con ambas manos y tocando la pantalla con los pulgares. Por ello hemos diseñado la mayor parte de la experiencia de modo que sea fácilmente accesible utilizando los pulgares. Hemos optimizado también el sistema para el desplazamiento en horizontal,, que se ve rápido y fluido tanto en sentido vertical como horizontal.

Windows en pantalla vertical

Windows también está preparado para funcionar perfectamente en vertical. Hemos analizado con detalle muchos escenarios como la lectura de noticias utilizando el navegador, visualización de fotos verticales y el desplazamiento por grandes listas de mensajes de correo y hemos condensado todas nuestras conclusiones en el diseño de un sistema que funciona de manera transparente en cualquier sentido de lectura. Hemos adecuado las experiencias del sistema, como el teclado, el selector de archivos y los charms para que funcionen bien tanto en vertical como en horizontal. Queríamos que fuese así para que el usuario no tuviera que aprender a utilizar el sistema al rotarlo en vertical; simplemente ¡debe funcionar!

Rotación

Puesto que uno de nuestros objetivos era conseguir que la transición durante las rotaciones fuera rápida y fluida, los distintos equipos que trabajamos en Windows hicimos un esfuerzo considerable por optimizar el curso de esta transición, desde el hardware del acelerómetro hasta la pila de gráficos y las aplicaciones.

Una parte importante de la transición entre horizontal y vertical es la animación. La animación soporta la coreografía de una rotación suave entre ambas modalidades de presentación. El control del tiempo en las animaciones es muy importante, ya que tiene que ajustarse para que la restitución en pantalla sea rápida y se mantenga la respuesta del sistema, pero al mismo tiempo debe ser lo suficientemente suave para que el movimiento no sea brusco. El DWM (Desktop Window Manager), que es una pieza fundamental para las animaciones fluidas en Windows 7 y Windows 8, se encarga de organizar esta animación.

Seguimos trabajando para conseguir que la rotación sea estable y previsible, ya que sabemos lo desconcertante que puede ser para el usuario una rotación sobrecargada. Antes de que empiece la rotación, el sistema espera a que el acelerómetro se estabilice para evitar rotaciones imprevistas. Además queríamos que el usuario siguiera controlando la experiencia de rotación, de manera que no se activase por accidente. Incorporamos un bloqueo para la orientación del hardware a modo de “compensación de la gravedad”, que mantiene la orientación deseada por el usuario bajo cualquier posición del equipo.

Distintas pantallas

En artículos futuros hablaremos más en detalle sobre cómo hace Windows 8 para escalar a distintos tamaños de pantalla desde el punto de vista del desarrollador, pero aquí puede ser interesante hablar algo del tamaño de la pantalla en el contexto de las orientaciones vertical y horizontal. Windows 8 va ase va a ejecutar en PCs con pantallas de distintos tamaños y con distintas resoluciones y proporciones, desde pantallas 4:3, casi cuadradas, a pantallas panorámicas 16:9 y todo el abanico intermedio. Nuestra plataforma escalable permite que Windows y las aplicaciones se adapten de manera transparente y restituyan los contenidos en todos estos tipos de pantallas utilizando el espacio disponible. Puedes emplear muchos de estos dispositivos tanto en sentido horizontal como vertical. Esta amplia gama de posibilidades es una característica exclusiva de Windows. Puedes elegir el dispositivo y la orientación que más te guste o más convenga a tus necesidades y usos.

La resolución mínima en la cual pueden funcionar las aplicaciones estilo Metro con Windows 8 es de 1024x768. Hemos elegido este tamaño por ser el diseño más común en la web y la inmensa mayoría (hablamos del 98,8%) de los usuarios de Windows utilizan el sistema con esta resolución o superior (ver diagrama).

Pensamos que es importante imponer una resolución mínima para las aplicaciones, ya que así los desarrolladores pueden diseñar la vista más pequeña para sus aplicaciones sin sufrir los efectos de la fragmentación que se producen en algunos dispositivos. Este mínimo garantiza además que los usuarios no ven trozos sueltos de las ventanas de sus aplicaciones debido al pequeño tamaño de sus pantallas.

La resolución a la cual se soportan todas las funcionalidades de Windows 8, incluyendo  la multitarea gracias al “snapping” de aplicaciones es de 1366x768. Elegimos esta resolución ya que en ella cabe la anchura de una aplicación en esa modalidad, que es de 320 pixels (y que viene a coincidir también con la anchura de muchas aplicaciones diseñadas para móviles), como complemento al tamaño base de 1024x768 píxeles que es el tamaño más frecuentemente utilizado en la web.

Estos límites serán impuestos de manera obligatoria por el runtime. Con ello rompemos una tradición de diseño al no ofrecer alternativas, puesto que la principal motivación ahora consiste en garantizar que las aplicaciones estilo Metro están diseñadas para funcionar a pleno rendimiento a una resolución concreta y públicamente establecida. En la Preliminar de Desarrollo no hemos añadido ningún aviso de interés en el runtime aparte de la comunicación al respecto en el sitio de descarga, que obviamente resolveremos al publicar la versión beta. Hemos podido ver que algunos que utilizan máquinas virtuales con resoluciones de 800x600 o netbooks con 1024x600 tienen ciertos problemas, y lo sentimos. Conviene recordar, no obstante, que la proporción de equipos con pantallas de 1024x600 es muy pequeña dado que las resoluciones de pantalla en los equipos de gama baja han pasado a 1280x800, que ya está soportada por las aplicaciones estilo Metro sin snap. Esta resolución sigue estando lejos de las resoluciones adecuadas para el máximo rendimiento de la interfaz y esperamos que, a medida que vayan comercializándose nuevos modelos de PCs, las resoluciones disponibles vayan aumentando también.

La rotación para los desarrolladores

En Windows 8, las aplicaciones aprovechan la experiencia del propio sistema y por eso hemos puesto un gran empeño en conseguir que para los desarrolladores sea lo más fácil posible crear vistas tanto en sentido horizontal como vertical. Como sucede con cualquier otra plataforma, los desarrolladores pueden elegir la orientación que más convenga a sus aplicaciones y la forma en que se ajustarán sus experiencias. Nosotros esperamos que la mayor parte de los desarrolladores optarán por la vista horizontal puesto que el parque actual de portátiles y equipos de sobremesa suponen la mayor parte de los PCs actualmente en servicio. No obstante, si una experiencia de aplicación puede utilizarse tanto en sentido vertical como horizontal, el proporcionar una vista vertical supone un trabajo de diseño adicional para ellos.

Utilizando las mismas técnicas que se emplean para crear la función Snap o para distintos tamaños de pantalla, los desarrolladores pueden crear con facilidad experiencias en vertical. Los desarrolladores de HTML5 pueden emplear media queries de CSS para asociar un estilo de presentación concreto a la orientación del sistema, y en el caso de los desarrolladores para XAML, pueden cambiar la presentación en respuesta a eventos de estado de la vista. En ambos casos, HTML y XAML, todos los controles adaptativos y plantillas que ofrece la plataforma van a soportar tanto el sentido vertical como el horizontal. Por otra parte, el sistema gestiona de forma automática la animación de la transición sin añadir esfuerzo extra a los desarrolladores. Si algún contenido de las aplicaciones se ve mejor en una orientación concreta, los desarrolladores pueden optar por ella en vez de la otra y el sistema puede mantener la aplicación en dicha orientación (si el dispositivo la soporta).

A la hora de probar las aplicaciones, tanto Visual Studio 11 como Expression Blend permiten a los desarrolladores probar las aplicaciones en vertical y horizontal y sobre distintos tamaños de pantalla y formatos, incluso sin necesidad de disponer de una tablet.

Puedes elegir el dispositivo más adecuado a tus gustos, ponerlo de la forma que te sea más cómoda y la experiencia se adapta a dicha postura. Las aplicaciones pueden aprovechar las ventajas de las pantallas panorámicas en multitarea y seguir viéndose perfectamente en vertical con un esfuerzo adicional mínimo.

Aquí os pongo un video que muestra las transiciones de modo vertical a horizontal en acción.

Descarga este vídeo para verlo en tu reproductor favorito:
MP4 de alta calidad | MP4 de calidad media

¡Espero que lo pruebes pronto!

Muchas gracias
David

FUENTE: Steven Sinofsky - https://blogs.msdn.com/b/b8/archive/2011/10/20/optimizing-for-both-landscape-and-portrait.aspx

Saludos,

El equipo de MSDN España