El elemento de interacción más pequeño del mundo

Probablemente sea el elemento de interacción más ignorado del mundo tecnológico (no me extraña: son como mucho 20 píxeles). Sin embargo, a pesar del paso del tiempo, continua presente en la mayoría de apps y herramientas de software que utilizamos hoy en día. Hoy os presento a Caret.

Caret_UI_Comportamiento.png

Caret es ese pequeño elemento intermitente que vemos en la mayoría de los editores de texto actuales o en el interior de los campos te texto. Con la evolución en los modelos de interacción Caret también ha ido adaptando ligeramente su forma. No olvidéis que este elemento lleva  a nuestro lado desde antes de que existiera el ratón en nuestros ordenadores:

- En los famosos terminales de fondo negro y tipografía fósforo verde Caret era representado como un bloque de píxeles. Los que tengáis MacOS y hayais abierto alguna vez Terminal sabréis de qué os hablo.

- Conforme fue evolucionando la tecnología, Caret pasó de ser un bloque a ser un guión bajo. Se usaba en entornos como el del MS-DOS.

- Poco a poco Caret pasó a transformarse en una simple línea vertical, pero con más vida, intermitente. Y personalmente creo que ese simple detalle, la intermitencia, ofrece una información tremenda al usuario sobre el estado del sistema en ese momento: Estoy esperando a que me digas qué poner aquí. 

- En algunos editores de texto Caret la forma de I-beam, también llamado I-cursor, el objetivo de este último era el de informar al usuario que el texto resaltado también podía ser destacado, movido o editado. Como curiosidad el nombre de la forma que tiene una viga de metal al ser cortada transversalmente.

Al final Caret es una adaptación del propio cursor a los sistemas basados en inputs de entradas de texto. Gran parte de la culpa de estas múltiples personalidades de nuestro cursor la tiene Susan Kare, responsable de la creación de los elementos de interfaz de los primeros Macintosh en la época de los 80 (tipografía e iconografía sobre todo). Pero el trabajo de Susan se merece sin duda un post aparte.

Siempre he creído que conocer estos pequeños detalles sobre nuestra relación con la tecnología, aparentemente sin importancia, ayuda a entender mejor la profesión y son la base de muchas decisiones de diseño que se toman a día de hoy.

Por cierto "Caret" viene del Latín y viene a decir "necesidad de inserción".  "Cursor" también viene del Latin y significa "Corredor".

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 :)