Tiempo en Pantalla

Tiempo en Pantalla

Speaker: Luke Wroblewski.
Título Original: Screen Time.
Evento: An Event Apart, Austin 2014.
Tema: Diseño Web | Multi-dispositivos.

La pantalla es el medio de los diseñadores web tal como el papel lo es para los diseñadores de impresos. Conocer las características de la pantalla permitirá crear mejores experiencias y asegurar al diseñador que el producto funcione mejor.

Luke Wroblewski quien ha compartido mucho acerca del diseño de multi-dispositivos, nos explica en esta plática la importancia de tener un entendimiento sobre las pantallas por las cuales nuestra audiencia experimenta el internet y los productos que creamos.


La pantalla es una ventana hacia el software, es el medio con el que interactuamos en internet y con el que hacemos que las cosas sucedan. Para poder diseñar productos digitales que ofrezcan mejores experiencias, no es necesario que seamos expertos, pero sí debemos conocer nuestras pantallas y tomar en cuenta otros aspectos como el Output, el Input y la Postura.

No todas las pantallas son iguales, pero podemos estar seguros de que la mayoría son para uso móvil. Mientras que la venta de PCs se ha estancado, la de tablets, smartphones y phablets ha aumentado exponencialmente. La tendencia dicta que lo seguirán haciendo y por lo tanto siempre debemos tener en cuenta el aspecto móvil al diseñar.

Venta exponencial de pantallas móviles
Venta exponencial de dispositivos móviles

Output

El Output tiene que ver con las características externas de la pantalla y de cómo el contenido será desplegado por ella. El tamaño es una de ellas; sin embargo, hay otros factores que no debemos olvidar:

Resolución:

La resolución es la cantidad de pixels que hay en un espacio determinado. Mientras más densidad de pixels haya será mayor la calidad de la imagen. La resolución es independiente al tamaño pues hoy en día un smartphone puede tener la misma (o mayor) resolución que una pantalla de desktop.

Resolución
Un teléfono ya puede tener la misma resolución que una pantalla desktop.

Pantallas de alta resolución requieren el uso de imágenes de mayor calidad para que nuestros diseños puedan seguirse viendo con claridad y nitidez. Aunque ahora ya contamos con muchos dispositivos de muy alta resolución, las estadísticas prevén que ésta seguirá incrementándose todavía más, ocupando imágenes todavía más grandes y pesadas que afectan el performance de nuestra página web.

Por lo tanto debemos diseñar tomando en cuenta una resolución alta en las pantallas, ya que si no lo hacemos, es muy probable que las imágenes de nuestro diseño se vayan a ver pixeleadas o de mala calidad. Para lidiar con los problemas de performance, LukeW cita a Dave Rupert y las soluciones que presentó en su artículo “Mo’ Pixels, Mo’ Problems”:

  • El uso de CSS y Tipografía web cada que sea posible.
  • Uso de SVGs e íconos de fuente cada que sea aplicable.
  • Uso de Picturefill Raster Graphics

LukeW también propone tener diferentes versiones de la imagen en diferente resolución. Mediante el uso de media queries se puede detectar la resolución de la pantalla y descargar sólo la versión de la imagen que sea adecuada para ésta.

@media only screen and (min-device-pixel-ratio: 1.5) { 
    .class {
            background: url(img@2x.png); background-size: 50%; 
           }} 

Orientación y Aspect Ratio.

Otro de los aspectos para tomar en cuenta es la orientación de la pantalla y el aspect ratio. Si un dispositivo tiene la capacidad de mostrar el contenido tanto de manera horizontal como vertical, el usuario utilizará ambas orientaciones. Por lo tanto es necesario pensar en cómo se verá el contenido en ambas formas.

Orientación de pantalla
Los usuarios van a utilizar ambas orientaciones, así que hay que tomar en cuenta ambos casos.

Uno de los usos más populares que la gente da a sus dispositivos móviles (al menos en EUA) es para ver videos. Netflix y Youtube ocupan el 50% del tráfico de streaming dentro del público norteamericano. La conclusión que sacamos de esto es que las tablets tienden a tener un aspect ratio de widescreen.

Widescreen puede ser un tanto tricky, pues si se utiliza en manera horizontal hay que cuidar que las líneas de texto no queden demasiado anchas y la recomendación de LukeW es la de mover las acciones (como botones y Call to Actions) en la parte superior.

En la orientación vertical, habrá que ver la manera de re-acomodar el contenido, pues como pueden ver en el siguiente ejemplo, hay mucho espacio que se desperdicia y se ve muy poco del mapa, que es el contenido principal.

Mapa en Widescreen Vertical sin optimizar
Mucho espacio desperdiciado. El mapa casi no se ve.

Para estos casos LukeW nos aconseja reposicionar el contenido a través del uso de media queries verticales.

@media screen and (min-width: 75em) and (min-height: 30em)
Mapa en Widescreen Vertical
Se utiliza un poco más el espacio, pero aún hay ajustes por hacer
Mapa Optimizado para Widescreen Vertical
Contenido optimizado para Orientación Vertical (widescreen)

Nótese en el último ejemplo, que el menú se movió hasta la parte inferior, (en una pantalla widescreen en vertical, una de nuestras manos tendría que moverse mucho para acceder al menú si éste se quedara hasta arriba) y otro menú se sacó del canvas para maximizar la visibilidad del mapa.

Input

En el contexto de esta plática, el Input se refiere a todo lo que le agregamos a la pantalla. Se trata de las otras alternativas que tenemos para introducir datos e interactuar con la pantalla además del touch. Por ejemplo: Un teclado, Multitouch, GPS, Cámara, Cursor (Mouse o Trackpad), Voz, Pluma, etc.

Input
El input es todo lo que le añadimos a la pantalla

No hay una manera exacta de determinar cuál es el input con el que cuenta cada dispositivo y por lo tanto necesitamos una solución general otorgando soporte a cuantos se pueda. No hay que olvidar comunicar al usuario lo que es posible hacer dentro de su contexto.

Los siguientes ejemplos pertenecen a Polar, la popular app de encuestas que desarrolló LukeW En ellos se ejemplifica cómo se le da soporte a todos los inputs y la manera de comunicárselo al usuario.

También podemos tratar de asumir el input tomando en cuenta el tamaño de la pantalla. Por ejemplo, podemos minimizar el uso de shortcuts si encontramos que una pantalla es pequeña (320px wide), porque es de asumirse que una pantalla pequeña no va a tener teclado. Determinar el input de acuerdo al tamaño de la pantalla no es la gran solución, pero es con lo que contamos por el momento.

LukeW también propone el uso de media queries nivel 4 como una alternativa a explorar:

@media (pointer:coarse) { input[type="checkbox"] { 
            min-width: 30px; 
            min-height: 40px; }} 

Postura

La Postura trata acerca de cómo interactuamos con las pantallas y el contexto de cómo las utilizamos en el mundo real. Los factores principales que afectan la postura son:

Distancia

Es muy diferente utilizar un servicio como Netflix desde un teléfono que desde una televisión. El teléfono lo utilizamos a 30 cm de distancia mientras que ocupamos más de 2 metros para ver una tele. En vez de diseñar para los dispositivos, debemos diseñar en base a cómo la gente utiliza esos dispositivos. Diseñar en base al tamaño de la pantalla no es una solución sustentable porque hay demasiados tamaños y la app puede utilizarse en un reducido espacio dentro de una pantalla grande.

Nuevamente LukeW nos ejemplifica con Polar, cómo es una mejor solución diseñar en base a la distancia que al tamaño de la pantalla. En el primer ejemplo, se encuentra Polar en una pantalla de televisión a través de XboxOne. El tamaño que ocupa en la televisión es la misma que en el teléfono (320px), sin embargo no quiere decir que el UI deba ser el mismo. El texto no se alcanza a leer por la distancia desde la cual se ve la tele.

UI del teléfono en Televisión
Si se utiliza el mismo UI del teléfono en la televisión, será difícil leer el texto por la distancia.

En el siguiente ejemplo, el factor distancia se ha tomado en cuenta y se ha cambiado el UI. Se incrementó el tamaño de la tipografía y el contraste. Notamos que ahora sí se puede leer y ofrece una mejor experiencia al interactuar con él.

UI de Polar en la televisión
AL tomar en cuenta la distancia se pueden hacer ajustes en el UI

Ergonomía

¿Cómo sostienen las personas su teléfono o tablet?¿Con una mano, con ambas?¿Cuántos dedos utilizan para navegar?. También es importante tomar en cuenta la manera en la que las personas utilizan sus manos para navegar en internet desde sus dispositivos, así lograremos hacer diseños más accesibles y ergonómicos.

Forma en la que se toman los dispositivos.
Hay que tomar en cuenta cómo los usuarios toman los dispositivos.

Ambiente

El ambiente trata sobre las características del lugar donde utilizamos nuestros dispositivos. ¿Es un lugar iluminado, es oscuro?. Actualmente nuestros dispositivos ya tienen sensores que pueden detectar la iluminación y eso nos permite hacer que el software reaccione para dar una experiencia más óptima.

El uso de media queries nivel 4 también nos ayudan en este aspecto.

@media (light-level:washed){
     body {
            background:#fff;}}

Con una reflexión LukeW finalizó su plática. Una reflexión acerca de qué será lo nuevo que vendrá a cambiar lo que conocemos. ¿Será acaso el nuevo vidrio flexible de Corning, el zafiro? o acaso los wearables (como smartwatches) cambiarán la forma en la que interactuamos con nuestros dispositivos. Lo importante es mantener la mente abierta, seguir explorando y no limitarnos por lo que todavía no se puede hacer.