Ampliando la interacción con dispositivos: iWatches

A estas alturas supongo que ya conoces el último iPod nano, el pequeño reproductor multimedia de Apple que ha marcado un nuevo avance en los dispositivos del mercado, en este caso reproductores MP3 y MP4.

Si has observado cómo la gente hace uso de este nuevo iPod en diferentes lugares o transportes, habrás podido apreciar que todo se reduce a un manejo endiablado del dispositivo con un solo dedo. Suficiente para pasar canciones, reproducirlas, visualizar albumes o realizar una búsqueda en un listado infinito.

Del “multi-touch”, muy útil en ciertos contextos, hemos pasado al “touch,tap,double tap, drag, flick…”, conceptos inherentes al uso de este nuevo dispositivo. En definitiva, interacción rápida y efectiva ajustada a las necesidades del usuario y a las prestaciones de esta minipantalla.

iWatch

De todo esto se deduce que muchos de nosotros manejaremos pronto este tipo de pantallas, ya que la evolución tecnológica se ha convertido en una montaña rusa de tamaños.

Las últimas propuestas de gente como adr-studio (con un curioso y singular portfolio) o Sony Ericsson parecen mas consistentes y nos alumbran un camino que pronto podría convertirse en realidad. Incluso es un camino que muchos otros estudios, empresas y grandes compañías ya han estado probando, bien como opción complementaria a un producto ya existente o como introducción de un nuevo concepto.

Smartwatch

Imagen de previsualización de YouTube

iWatch

Imagen de previsualización de YouTube

Tecnología táctil y multitáctil en nuestra muñeca con propósitos y contextos muy definidos pero con un potencial de posibilidades infinito.

Si en el caso de grandes pantallas veo inconvenientes demasiado evidentes para hablar de progreso en esta línea, para pequeñas pantallas el futuro más cercano parece claro que se viste de iWatch, smartwatch o,simplemente, de reloj táctil/multitáctil.

 

Evolución del diseño de interacción en apps. El caso Clear

Francisco Inchauste (getfinch) hablaba hace un par de días del futuro de las interfaces y lo hacía tomando como ejemplo el último trabajo de Phill Ryu y David Lanham en Impending. Este estudio prepara el lanzamiento de Clear, una nueva to-do app que presenta interesantes novedades.

Sus creadores se han esforzado por salirse de las convenciones, reglas y principios ya establecidos en interfaces, interacción y uso de apps.

“I think the important thing is to never take anything for granted and question everything — all the known interface design conventions, the clichés and rules of the genre.” said Ryu. “These are formulas, and to us formulas are just a fancy way of describing the rut you’re stuck in.”

Siguiendo la línea del Getting things Done (GTD) de David Allen, presentan un diseño y desarrollo que, en su opinión, le da una vuelta mas al lenguaje visual e interacción sobre pantallas táctiles.

Clear App

Clear App

Claridad, simplicidad, orden, además del manejo y gestión del contenido y la navegación a partir de una definida colección de gestos multitáctiles.  Como ha sucedido en todas las areas, ha llegado el momento de comenzar la reducción razonada de elementos y aprovechar  la combinación de principios de diseño para garantizar la máxima funcionalidad de los productos y servicios que entregamos. No lo llamaría futuro todavía. Lo llamaría “gestión y optimización de la experiencia de uso atendiendo a los detalles”.

There´s nothing bigger than the little things (Milen Dzhumerov)

Tendremos que esperar a mediados de febrero para descargar Clear desde la App Store que, en principio será gratuita, aunque contará con funcionalidades añadidas para cuentas Pro.

 

Abandonemos la noción de "página web"

Disculpen el extremismo manifiesto de esta frase pero no estoy intentando hundir ningún barco. Aligero la carga que llevamos a nuestras espaldas desde hace años y con la que, a estas alturas, yo me siento algo incómodo.

Cuando pensamos en “páginas web” establecemos criterios de definición, arquitectura, composición, maquetación… que parten de la idea “página en blanco” para crear y construir. Pero ¿qué pasa cuando, de repente, el ancho de tu página no es fijo?. ¿Qué pasa cuando los contextos de uso de una supuesta página se amplían?. ¿Qué pasa cuando la interactividad adquiere mayor relevancia?. El concepto “página” comienza a difuminarse, pierde su sentido pero, sin embargo, lo seguimos utilizando de la misma forma que “colgamos el teléfono” o “tiramos de la cadena”. Con el añadido que en nuestro caso condiciona nuestro trabajo.

A veces rellenamos espacios que creemos controlar pero el futuro no lo podemos pintar así. El futuro se viste de contenido adaptable, modificable, flexible, que se acomoda a diferentes espacios, que podemos seguir integrando en un documento llamado página (definición de la RAE: Documento situado en una red informática, al que se accede mediante enlaces de hipertexto) o web pero que ya no trabaja con esa noción original.

Insisto. No estoy cuestionando el concepto que utilicemos. Eso tiene fácil solución. El problema es el enfoque que damos a nuestros productos o servicios interactivos a partir de la definición formal y del modelo mental que todos manejamos.

Buscando “aliados” que defiendan argumentos sobre esta idea he dado con Mark Boulton, cofundador de Five Simple Steps y autor de Designing for the web. Sus explicaciones en este sentido son muy claras:

Binding content to the book is what all good book designers do. To do this, they use Canons of Page Construction, or other principles to design grid systems that, when populated by content, create that connection. But with all paper-based design, they start with paper. Paper that has edges, ratios that can be repeated. A canvas. And here’s the thing. Creating layouts on the web has to be different because there are no edges. There are no ‘pages’. We’ve made them up.

Quizás sea necesario profundizar mas en estos argumentos y dedicar mas reflexiones digitales pero como dice Boulton, el momento es ahora. Tenemos que empezar a librarnos de ciertas ataduras que condicionan nuestros proyectos.

Todo esto creo que enlaza muy bien con un post que dejé por aquí hace un tiempo sobre la simplicidad y la curación de contenido. En aquel momento se insistía en la necesidad de dar máximo sentido a nuestro contenido. Ahora el objetivo vuelve a ser el mismo y se refuerza con una nueva idea:

Don’t start from an imaginary page

Responsive Web Design o Diseño web sensible

Hay que reconocer que la traducción de Responsive Web Design como diseño web sensible no parece la mas apropiada pero es la que ya está mas extendida. El concepto, creado por Ethan Marcotte (@beep) y publicado por primera vez en su artículo de A List Apart, ya está en plena expansión y supone el pistoletazo de salida a una nueva etapa de nuestra evolución digital.

Hubiera preferido diseño web adaptativo, adaptable, escalable o incluso flexible pero, sea cual sea su denominación, anticipa una nueva y potente forma de crear, diseñar y desarrollar sitios web. Si seguimos por esta línea las cosas van a cambiar mucho y los diseñadores ya están ampliando su horizonte de posibilidades, perspectivas y oportunidades.

Responsive Web Design by Ethan Marcotte

Algunos comienzan a ofrecer diseño sensible y otros lo demandan con urgencia para no morir atrapados en una constante adaptación de sitios a dispositivos, plataformas, formatos… Veremos éxitos indiscutibles, desastres naturales y chapuzas solidarias.

Las empresas e instituciones lucharan nuevamente por renovar sus espacios pero la transición será lenta y dolorosa, especialmente si las decisiones las toma el directivo, jefe o mandamás de turno convertido en “experto-opinador en desarrollo web y redes sociales varias”. Incluso presupuestos enormes y cuentas gestionadas por vendehúmos harán las delicias del futuro online de nuestros gobernantes, que no de los gobernados.

Pero hasta que todo esto llegue disfrutaremos con los buenos ejemplos que ya pueblan la red y seguiremos trabajando por optimizar y mejorar experiencias visuales. Es todo un reto y, en este caso, creo que volverá a merecer la pena porque el concepto como tal, sea cual sea su nombre, es bueno, muy bueno. Aumenta la utilidad y funcionalidad de los sitios que visitamos generando a su vez nuevas tendencias en diseño y nuevos  estándares que nos obligarán a ponernos las pilas para saber qué ofrecer y cómo ofrecerlo.

Si quieres saber mas tienes el libro Responsive Web Design, escrito por Marcotte y publicado hace unos meses. Pero también comienzan a publicarse interesantes entradas y artículos en diferentes lugares. En Fuse Interactive tenemos un buen ejemplo. Niall Morgan habla de Responsive Web Design y describe de forma resumida el funcionamiento:

The magic of responsive web design is the use of media queries. Media queries are something that has been around since CSS 2.1 in the form of media types but was limited to declaring things like stylesheets for print. When the W3C began working on CSS3 they created the @media query to take it to the next level. In CSS3 media queries allow you to get specific properties of the users browser and operating system such as screen width and screen orientation. With that information we can dynamically change the layout of the site for anything from a 24 inch monitor all the way down to a smart phone.

Actualización 02/01/2012

Dos interesantes referencias que nos hablan de los problemas e inconvenientes del Responsive Web Design:
Responsive Web es un técnica incompleta por César Soplín (via UXLearn)
-Desde el post de César…  Responsive Design is Irresponsible por Kevin John Gallagher.

Estoy de acuerdo con algunos de sus planteamientos y entiendo que no es posible considerar el Responsive Web Design como la solución definitiva, única y final de cualquier site. Valoro esta innovación y su posible evolución ya que ofrece nuevas oportunidades y deja atrás prácticas tremendamente complicadas, poco eficientes.

 

Hábitos y comportamientos convertidos en mapas de calor

En la evaluación de interfaces web los heatmaps o mapas de calor son representaciones que nos muestran patrones de exploración visual y nos ayudan a detallar donde han centrado su atención los usuarios. Su utilidad está muy asociada con el eye-tracking ya que constituye una de las posibles representaciones del conjunto de datos que esta tecnología es capaz de recoger.

Sin embargo su alcance como forma de representación y visualización de datos es mayor y así nos lo demuestra el programador alemán Martin Dittus. Su colección de heatmaps estructurados, construidos a partir de la actividad individual de usuarios de last.fm, nos descubre posibles patrones en los hábitos de escucha.

Heatmaps by Martin Dittus

Cada mapa se construye a partir de la periodicidad en la escucha de música. El año, mes, día de la semana, horas del día… Un año completo de datos se organiza a partir de una fila, agrupada en 12 bloques horizontales, una para cada mes. A su vez cada mes se organiza a partir de un mosaico de 7 columnas para los días de la semana y 24 filas para las horas del día.

El código de colores muestra la medida de la intensidad relativa. A partir de un número determinado (Gris – verde – amarillo – rojo) se resalta la actividad mantenida durante todo el día. Así, una tira de luz gris resalta las horas más activas del día durante todo el período.

Cualquier cambio o cese de la actividad queda registrado y si se suceden regularmente pueden interpretarse patrones en los hábitos y comportamientos de los usuarios.

Frequently people’s graphs are detailed enough to provide a fairly good summary of big life changes. New jobs, busy weekends, holidays, the month when they bought an iPod, or picked up running again, or moved to a different timezone, … I found that showing these graphs to the people portrayed often stimulated interesting conversation about their habits and their choices.

David Singleton, amigo de Dittus y participante en el experimento, publicó en su blog una explicación a los mapas que él mismo generó.

Mid-2005 to 2006 – Finished Uni, got a job and spent the first 6+ months comuting without an iPod after moving to London was still missing a laptop for a long time.
Late 2007 – An increase in evening listening, a sign of joining the Last.fm team and getting stuck in to startup culture of late nights.
Early 2008 – Evening listening, but with more separation from daytime listening. I suspect this was nights spent playing albums with my flatmate Ben Ward.
2009 – Less evening music, which I think stems from different flat mates, a different flat and starting (an unscrobbled) vinyl collection.
February 2010 – A quiet month for scrobbling, most of which on holiday in New York, little time for digital music.

underpangs

Touch Vision Interface

Desde el blog de la empresa canadiense Teehan+Lax nos muestran un interesante sistema llamado Touch Vision Interface capaz de facilitar la interacción con varias pantallas a partir de un sólo dispositivo, en este caso a partir de la cámara de un teléfono.

El vídeo muestra un sencillo ejemplo que, como bien dicen, puede extenderse a otros usos que explotarían aun más la riqueza de las pantallas touch o multi-touch.

Me quedo igualmente con la valiosa frase que recogen en su post de August de los Reyes, director de diseño de Microsoft Surface:

The perception of system output must be greater than the perceived user input, and within that range there is a sweet spot where [user experience] is delightful and magical.