Minority Report y otros interfaces futuristas. Mi artículo para Xataka.com

Me lo he pasado en grande con la idea que llegó desde la gente de Xataka.com para desarrollar un análisis de las interfaces futuristas que solemos ver en las pelis de ficción. Desde aquí va agradecimiento. (Artículo original).

--

Probablemente a muchos de los que estéis leyendo este artículo el nombre de John Underkoffler o el de Mark Coleran no os suene a nada pero seguro que casi todos recordáis la impresionante escena futurista donde Tom Cruise se enfrenta a una pantalla gigante a través de unos guantes especiales, moviéndose como pez en el agua a través de los contenidos.

El responsable de esta escena es precisamente John Underkoffler, a quien se le encargó la tarea de asegurar la consistencia de las interfaces que aparecen a lo largo de toda la película y, sobre todo, de trabajar en todos los aspectos gestuales específicos de esta escena.

El trabajo de Coleran a nivel de interfaces futuristas es más amplio, casi tanto como su anonimato - al menos en nuestro país - y se ve reflejado en películas como la trilogía de Bourne, 'Alien vs Depredador', 'Misión Imposible', 'Blade' o incluso en videojuegos como 'Call of Duty'.

La idea detrás de este texto es comentar desde la perspectiva de la Experiencia de Usuario algunas de estas escenas digitales diseñadas por gente como Underkoffler o Coleran. Por supuesto, desde el profundo respeto y admiración al impecable trabajo realizado.

'Minority Report'

Si hay algo que llama la atención en la escena de 'Minority Report' es cómo Tom Cruise se mueve a través de los contenidos en un espacio tridimensional.

Sólo existen dos formas de moverse a través de contenidos digitales (bidimensional o tridimensional, da igual): navegando a través por categorías por diferentes niveles de navegación (browsing lo llaman en inglés) o buscando por palabras clave (searching). Y lo que Cruise hace en este caso es lo más sencillo (e impactante para el espectador): navegar en un entorno tridimensional, seleccionando contenidos y arratrándolos hacia otro sitio.

Imaginaos por un momento que Cruise necesitara introducir una palabra clave para encontrar algo concreto. Tendríamos necesariamente que pasar por una de estas dos opciones de input: voz o teclado.

Creo que ambas opciones estarían brillantemente implementadas en la película, sobre todo la voz (porque detectaría la petición de Tom Cruise a la primera, obviamente), pero por desgracia sería más complicado que el sistema entendiera nuestra petición a la primera en nuestro mundo real. El teclado en una escena tan futurista estaría completamente descartado desde mi punto de vista.

Otro aspecto a destacar desde el punto de vista UX que recoge esta escena es el modelo de interacción elegido: 100% gestual (algunos lo llaman Organic User Interface).

En lugar de usar modelos ya conocidos que como el Graphical User Interface(utilizando un ratón) o incluso Natural User Interface (el modelo de interacción touch que usamos en los móviles a través de nuestro dedo), se apuesta por algo mucho más evocativo, más natural y fluído. Un modelo de interacción que, aunque aún se encuentra en evolución, ya está dando pasos notables.

Sin ir más lejos esta escena de 'Minority Report' es un trabajo de investigación del MIT que ya funciona en el mundo real (lo podéis ver en esta TED Talk que dio John hace unos años).

'La Isla'

La interfaz sobre la que gira gran parte de la película 'La Isla' está planteada sobre un espacio bidimensional y, en lugar de utilizar los clásicos elementos de input, como puede ser un teclado o el ratón, aquí se emplea una figura geométrica como elemento base entre la interacción humano - máquina. Una pirámide que selecciona contenidos, los arrastra, comparte...

La pirámide empleada como elemento de interacción en la película La Isla

La pirámide empleada como elemento de interacción en la película La Isla

En realidad esta pirámide no es más que un forma original de llamar la atención sobre el espectador (una vez más, el famoso efecto Wow). Si lo pensamos desde una perspectiva más pragmática estamos ante un modelo interacción que podría prescindir fácilmente de dicho elemento geométrico y ser reemplazo por la propia mano (touch), donde los dedos podrían arrastrar o girar los mismos objetos.

La única pega sería la de “lanzar” dicha pirámide sobre la propia interfaz a modo de “testigo" a otro usuario, algo que se ve reflejado en la película y que sin duda le da un aura futurista realmente conseguido.

'Lara Croft: Tomb Raider'

Otra de las características de este tipo de interfaces futuristas es el movimiento, o para ser más exactos el micromovimiento, prácticamente todas las interfaces que aparecen en las películas tienen vida, se mueven: o apareciendo un texto en cascada, o un pequeño icono notificando de forma intermitente de algo, o varias barras / gráficos moviéndose a la vez, todo tiene algún tic digital.

Interfaz de consulta en la película "Lara Croft:Tomb Raider"

Interfaz de consulta en la película "Lara Croft:Tomb Raider"

El movimiento en este tipo de trabajos resulta clave para transmitir que algo importante está ocurriendo mientras el actor o los actores están en la escena. Incluso en interfaces tan “tontas” como puede ser una columna de datos a la izquierda y un gráfico a la derecha, representando dichos datos, existe movimiento.

Un ejemplo lo tenemos en la escena de la imagen inferior, de la película 'Lara Croft: Tomb Raider', donde el gráfico de la derecha tiene un movimiento tan atractivo que la información o el propio dato en sí pasa completamente desapercibido.

El movimiento nos deja maravillados, olvidando la utilidad de los datos que tenemos delante. En la vida real probablemente sería difícil sacar provecho a semejante animación ya que no se aprecia correlación alguna (al menos a simple vista) entre el dato destacado en la columna de la izquierda y el gráfico animado en el área principal.

'La Identidad de Bourne'

Secuencia de la película 'La Identidad de Bourne', con los ordenadores trabajando a todo gas

Secuencia de la película 'La Identidad de Bourne', con los ordenadores trabajando a todo gas

El detalle del movimiento también se puede apreciar en 'La Identidad de Bourne', donde en las escenas donde aparecen ordenadores muestran en sus pantallas una actividad frenética.

Este detalle va muchas acompañado de otro aspecto que considero fundamental en este tipo de interfaces futurísticas: yo los denomino chirridos tecnológicos. Son pequeños chasquidos o ruidos que aparecen cuando la interfaz muestra un resultado importante que necesita ser destacado sobre todo lo demás. O cuando nos quieren transmitir que el ordenador está “a tope”, trabajando para tratar de encontrar el dato que resolverá por fin el caso en cuestión.

Estos sonidos, combinados con el movimiento, resultan agradables y enriquecen el aura futurista que ya trae de por sí la propia interfaz, a pesar de que dichos chirridos no son nada innovadores, tienden a ser los clásicos bips y clicks de toda la vida, pero van tan bien sincronizados con lo que aparece en pantalla que enriquecen sustancialmente lo que tenemos delante.

'Deja Vu'

Otro aspecto a destacar de este tipo de escenas es la ausencia, por lo general, del ratón en mesas o de cursores en las pantallas de los ordenadores, incluso teclados. Sería demasiado “casposo" para este tipo de secuencias (curioso: la mayoría de los cursores y teclados que veo aparecen en escenas de cine tipo comedia o similar).

A cambio, el ratón se sustituye por elementos de input que dan un paso atrás en la línea del tiempo, basándose en interruptores, botones y diales de los de toda la vida, pero aplicados a una interfaz futurista. Una suerte de Mad Max digital, donde lo moderno y lo clásico conviven en una armonía maravillosa.

Ejemplo extraído de la película 'Deja Vu' donde podemos observar este tipo de inputs clásicos

Ejemplo extraído de la película 'Deja Vu' donde podemos observar este tipo de inputs clásicos

En una de las secuencias de la película 'Deja Vu', podemos ver una sala abarrotada de pantallas (todas por supuesto analizando datos, en constante movimiento) y las órdenes que se mandan a estas pantallas proceden de este tipo de interruptores que menciono anteriormente.

Personalmente me parece una decisión acertadísima: al ser humano le encanta accionar este tipo de elementos por el simple hecho del sonido que evocan, cuanto más si encima generan acciones sobre una interfaz terriblemente futurista.

'El Coche Fantástico'

Interfaz de la serie 'El Coche Fantástico'

Interfaz de la serie 'El Coche Fantástico'

La serie 'El coche Fantástico' también merece mención por esos ruidos que emiten estos interruptores al ser pulsados. Sobre todo en el momento clave de la escena. Quién no recuerda cuando Michael Knight pulsaba el botón Turbo Boost para que el coche pegara aquellos saltos imposibles, por poner un ejemplo.

Ahora que están tan en boga los modelos de interacción conversacionales (aunque más enfocados a Chatbots), resulta también interesante tocar este tema, donde el protagonista es la propia conversación (hablada o escrita).

En el caso de KITT, podemos ver que no falla en ningún momento a la hora de comunicarse con Michael, incluso en numerosas ocasiones se anticipa a los deseos del protagonista y es capaz de transmitir e identificar emociones.

Curiosamente, hace unos días Toyota lanzaba “Concept - i”, un vehículo capaz precisamente de eso: de reconocer las necesidades del conductor y sus emociones. La ficción en este caso nos llevaba años de ventajas con respecto al mundo real.

Otra característica interesante de este tipo de modelos conversacionales es la voz robotizada que suelen emplear. Si os fijáis en el mundo real Siri, de Apple, o el “Ok Google” de Android tienden a adoptar voces suaves, casi humanas, mientras que en películas o series futuristas suelen adoptar una voz sintetizada, casi parecida a la que escuchamos cuando hablamos por teléfono.

'Señor y Señora Smith' / 'Misión Imposible 2'

Ahora fijaos en las siguientes escenas. La primera de 'Misión Imposible 2':

1366_2000 (4).png

 

Y esta segunda de 'Señor y Señora Smith':

1366_2000 (5).png

En ambos casos la paleta de colores tiende a ser uniforme, constante, con escasa variedad cromática. En muchos casos existe además un elemento principal sobre el que se disponen el resto de elementos o, como alternativa, figuras humanas (rostros, cuerpos) siendo escaneados o mostrando capas de información sobre dichas formas humanas (o extraterrestres).

'Estado de Emergencia'

Hay un detalle no tan relacionado con el Diseño Visual, sino con algo un poco más profundo: se trata del Diseño de Información, de cómo se diseñan los datos que aparecen en la pantalla.

Existe una clara tendencia a sobrecargar las interfaces de consulta de este tipo de secuencias, sin plantearnos si de verdad esos datos sirven o no al actor que se encuentra frente a la pantalla. Veamos un ejemplo sobre este asunto en la peli 'Estado de Emergencia', con Samuel L. Jackson:

Fotograma de la película 'Estado de Emergencia' donde podemos apreciar la sobrecarga de información en pantalla

Fotograma de la película 'Estado de Emergencia' donde podemos apreciar la sobrecarga de información en pantalla

Podemos apreciar, una vez más, la presencia de un elemento principal, destacando sobre todo lo demás (y en movimiento, por supuesto), pero repasando el resto de elementos que componen la interfaz podemos ver que no nos dicen nada (algo por otra parte obvio, al tratarse de ficción).

Pero, más allá de dicha utilidad, si nos ceñimos a cómo se diseña la información que aparece en pantalla, podemos observar que los datos se muestran sobrecargados, con fondos evidentes, iconografía inteligible y textos de tamaño prácticamente ilegible.

El Data-Ink ratio, un término acuñado en 1983 por Edward Tufte, es la parte que no podemos eliminar de un gráfico o columna de datos para la representación del dato que pretende comunicar. Se trata de una suerte de higiene (en tinta, si es sobre un papel y pixels, si es sobre pantalla) para que los datos se representen debidamente, pero de una manera limpia, clara y, también aséptica, que no dé lugar a malinterpretaciones.

En el caso del fotograma de 'Estado de Emergencia', resulta evidente que existen muchas oportunidades a la hora de eliminar aspectos que ayudarían a entender y asimilar mejor la representación de los datos que aparecen en pantalla.

Otro aspecto que considero fundamental en cualquier interfaz digital que se preste: se trata de la visibilidad del estado del sistema, de cómo la máquina informa al usuario sobre el estado en el que se encuentra. En este tópico hay que levantarse y aplaudir por lo que hacen en la ficción cinematográfica: los mensajes sobre lo que ocurre en la interfaz son por regla general extraordinariamente claros, evidentes, con textos bien legibles y claros, al grano.

Fotograma de la película 'Estado de Emergencia' con mensajes claros y evidente

Fotograma de la película 'Estado de Emergencia' con mensajes claros y evidente

Este detalle choca frontalmente con el mundo real, donde los mensajes de error, por poner un ejemplo concreto, suelen acampar en las interfaces como orcos del pleistoceno, sin criterio, sin copy amigable, sin cuidar el aspecto visual. Qué os voy a contar que no sepáis ya, queridos lectores:

Año 2017 (casi el futuro). Esta es la cruda realidad del ciudadano de a pi

Año 2017 (casi el futuro). Esta es la cruda realidad del ciudadano de a pi

Conclusiones

No resulta fácil establecer cuál de las dos corrientes va por delante: si la ficción o la realidad. La ficción tiene, por su propia naturaleza, más encanto por las emociones que logran transmitir sus interfaces. Pero no hay duda de que en un mundo real lo que veríamos sería bien distinto, entre otras razones porque cuando usamos un producto de forma recurrente, en nuestra oficina por ejemplo, acaba por perder el encanto de los primeros días.

Además las interfaces futuristas que vemos en el cine o televisión no podemos tocarlas, sólo verlas a través de otra pantalla: la del propio cine o televisión, y recrearnos en la sensaciones que el actor trata de transmitirnos. Un hándicap importante.

Después de este análisis (me lo he pasado en grande) me quedo sin duda con la armonía con la que conviven en algunas películas elementos clásicos de interacción (botones, interruptores) con las interfaces futuristas. Creo que en el mundo real tendemos a crear productos digitales que no saben aprovechar el potencial que ofrecen elementos clásicos del diseño de interfaz que han sobrevivido con una dignidad suprema el paso del tiempo.

En cualquier caso creo que por su propia esencia, en constante evolución, no existe el producto digital perfecto, al menos yo no lo conozco (y me dedico a ello en mi día a día). Creo precisamente que la imperfección es algo innato en el mundo digital, siempre evolucionando.

Futuro perfecto: Google ATAP

Uno de los aspectos que estamos viendo pasar a velocidad de vértigo en el mundo tecnológico (y del que apenas nos estamos dando cuenta) es el cambio de paradigma en cuanto al modelo de interacción tecnológica que usamos con los aparatos que nos rodean: hemos pasado de convivir una larga temporada bajo un modelo de interacción GUI (Graphical User Interface), basado en el cursor y el ratón, a un modelo más liviano denominado NUI (Natural User Interface), que es en el que basan todas las tablets y móviles que funcionan hoy en día y cuyos protagonistas indiscutibles son nuestros dedos.

Pensaba que la evolución de este modelo NUI me cogería ya mayor. Pero después de ver el trabajo de Ivan Poupyrev creo me equivoco... Iván es el director técnico de Google ATAP (Google's Advanced Technology and Projects) y trabaja precisamente en la definición de los nuevos modelos de interacción que están por venir (lo llaman OUI: Organic User Interface). 

El proyecto Jacquard que dirige Iván en colaboración con la factoría Levi's es un claro ejemplo del fascinante "no tan futuro" que está por llegar. Tecnología integrada perfectamente en nuestro cuerpo formando una extensión del mismo, en nuestras prendas de vestir. Prefiero no adelantar nada más y presentaros el siguiente vídeo (para los que tienen prisa ir directamente al 4:15):

Soli es otro de los proyectos que me ha dejado con la boca abierta. Y tiene algo buenísimo: hereda los gestos a los que estamos acostumbrados los humanos a la hora de relacionarnos con la tecnología (girar un dial, o apretar un botón, por ejemplo) pero sin tener ningún elemento frente a nosotros. El vídeo lo explica mejor que yo:

La gran limitación de este tipo de proyectos desde mi punto de vista es la falta de Affordance, no existen pistas visuales que nos indiquen que lo que tenemos delante porta interacción, pero quizás es tan sólo cuestión de un cambio de hábitos.

El amigo Carlos Antón hablaba con más detalle sobre qué es lo que está por venir en cuanto a experiencias digitales y modelos de interacción. Yo creo Carlos que lo veremos muy pronto :)

 

 

 

La importancia de un simple botón en tu móvil

Hace unos cuantos años tomé la decisión personal de mentorizar a startups bajo el paraguas de distinas organizaciones (Business Booster, Google Developers Launchpad...) y también a nivel más personal. Me apetecía por un lado echar una mano a la comunidad y, por otro, aprender y estar al día sobre lo que se mueve fuera de la pantalla de mi portátil. Tengo que reconocer que, aunque en la mayoría de las ocasiones todo esto es pro bono, la satisfacción personal que me proporciona compensa el esfuerzo.

En todo este tiempo uno ve de todo, bueno y malo (aquí hablo sólo desde el punto de vista de interfaz, que es de lo que suelo escribir), y hay que reconocer que a nivel de interfaz desktop se nota una importante mejoría en cuanto a la preocupación de las startups por hacer algo humanamente amigable.

Pero en móvil no ocurre lo mismo.

Sorprende la cantidad de ocasiones en las que uno se encuentra con aberraciones que a veces hasta da apuros mencionar. Lo más básico de una interfaz móvil, un simple botón, por regla general se diseña pronto y mal, sin pensar ni analizar la repercusión que tiene este elemento.

He preferido no incluir ejemplos reales, no quiero que nadie se sienta ofendido por ser mencionado, y en lugar de eso compartir aquí cuáles son algunos de los aspectos fundamentales que hay que tener en cuenta a la hora de diseñar eso: un simple botón. Prometo que nunca pensé que un elemento tan simple diera para escribir tantos párrafos, pero tengo la sensación de que ayudará a más de uno:

1. Lo primero es el tamaño. Tener en cuenta que en un botón en móvil se pulsa por regla general con el dedo índice (si estás parado, sentado o de pie) o con el pulgar (si vas andando):

Foto: Lukew.com

Foto: Lukew.com

Este detalle, traducido al mundo píxel, anda alrededor de unos 44px, un botón con esa altura. Windows sugiere un tamaño de 34px. Pero en la medida de lo posible sé generoso con los botones, al menos con los principales, los dan de comer a tu startup. Parece fácil, pero no lo es.

2. Lo segundo es la ubicación del botón. No me canso de enseñar esta imagen cada vez que hablo de este punto. Pura Ergonomía:

En este ejemplo siempre surge la cuestión de la gente que no es diestra. Y yo siempre respondo lo mismo: diseña para lo más probable, no para todo lo posible. Si crees que la mayoría de tus usuarios van a ser zurdos invierte este planteamiento, pero dudo que sea el caso.

Ni que decir tiene que la recomendación es colocar los botones principales en las áreas donde el alcance del dedo llega con más facilidad. Por si acaso no es lo suficientemente evidente.

3. Microcopy: el literal que lleva dentro el botón en cuestión. Ya hemos hablando largo y tendido sobre la importancia del copy a la hora de convertir. Una cosa que últimamente me llama la atención es que hay gente que incluye el literal en forma de pregunta.

Personalmente creo que cuando incluyes una pregunta en un botón de forma automática surge una respuesta, aunque sea de forma inconsciente, es un tiempo de indecisión que te puedes ahorrar colocando el microcopy en imperativo ("¿Vemos los precios?" vs "Ver precios ahora", por ejemplo. He ido sacando esta conclusión a través de mis propios errores.

4. El cuarto punto puede parecer poco importante, pero que considero que le da tu aplicación un toque de confort adicional, de comodidad con respecto a tu competencia: se trata del estado ontouch. Básicamente consiste en que, al pulsar ese botón, tengas la sensación de que lo estás pulsando, ya sea a través de un cambio de textura de color, o con sensación de profundidad, que se hunda al pincharlo. Se trata de un detalle que dura microsegundos, y probablemente pase desapercibido para la mayoría de tus usuarios. Pero ayuda a incrementar la seguridad de que estamos pulsando el elemento que queremos. Feedback, feedback y más feedback.

5. El último punto es un error clásico: pero se sigue viendo con frecuencia tanto en desktop como en móvil. No coloques botones que generan acciones opuestas demasiado unidos, uno junto al otro. Si no te queda más remedio condiciona el diseño y deja el más importante en forma de botón (si no lo tienes claro piensa en cuál de las dos opciones le beneficia más a tu startup). Y el otro en forma de enlace, que tenga menos relevancia.

Me quedo aquí. Seguro que hay más puntos interesantes que compartir y si tienes ganas de compartirlo comentar es bienvenido, en esta casa siempre lo ha sido.