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
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”
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
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
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’
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‘:
Y esta segunda de ‘Señor y Señora Smith‘:
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
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
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
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.
