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 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».
Suelo pasar con frecuencia por este tramo de la A7, justo donde se bifurca con su variante de peaje. Como suele ocurrir con muchos tramos de peaje, nos ahorran tiempo de desplazamiento para llegar al mismo destino que la vía convencional. Obviamente a un precio…
Lo que me llama la atención de los paneles que se sitúan por encima es que no mencionan justo la gran ventaja de estos tramos: el tiempo de viaje que nos ahorramos. Se limitan simplemente a replicar el destino final, lo que provoca confusión entre muchos conductores, nada más que hay que ver cómo pisan el freno cuando llegan a estos paneles para intentar leer lo que pone.
Hay casos en los que estos paneles vienen acompañados de otros más grandes, luminosos, donde tratan de convencerte de que coger la variante de peaje es mejor «por tu seguridad», pero es algo tan obvio que me parece un despropósito tener un panel luminoso sólo para este fin, es al menos el mensaje que más aparece a no ser que haya un accidente en los alrededores.
En general, la información de la red de carreteras es fría, poco cercana, destinada a interpretar en un cortísimo espacio de tiempo lo que tenemos por delante en la carretera. Soy consciente de que cambiar los mensajes a algo más cercano y empático es una batalla perdida, pero sí que creo que pequeñísimos detalles pueden ayudar a tener una conducción más placentera.
La imagen que acompaña este post está ligeramente retocada. En el panel de peaje, al lado de las poblaciones, he incluido el tiempo de ahorro medio que supondría si el conductor cogiera la variante de pago. No es nada del otro mundo, pero creo que el tiempo medio de ahorro es un dato que sí que ayuda al conductor a decidir cuál es la vía que más le conviene. Pequeños grandes detalles.
Seguro que alguien tiene más ideas en la cabeza relacionadas con este tema. ¿Lo compartes?
I love selling. But I’ve always been suspicious of marketing, at least the way it seems to be practiced by most companies. It seems to me that a lot of marketing is often deployed to cover up a product’s deficiencies rather than point out what makes it great, to confuse as much as to illuminate.
Hacía tiempo que andaba buscando un motivo que me animara a escribir sobre este asunto – pelín sensible – y este viejo artículo de Fried me lo ha puesto a tiro.
Siempre he/hemos sido partidario del «no-marketing», de hacer el ruido justo sobre lo tu producto o servicio de una manera natural y orgánica. De escaso bombo y platillo.
Personalmente creo que el mejor marketing es el resultado precisamente de invertir poco o nada en esa palabra, aquel que se genera «simplemente» con el boca a boca, el que se genera de manera honesta y natural tras un servicio o un producto bien hecho. Con una buena experiencia de principio a fin. El «simplemente» lo pongo entre comillas porque no es tan simple como parece.
Por eso suspiro cuando leo tanto parole en blogs, actualizaciones de Twitter y publicidad en resultados de búsqueda, porque lo único que persiguen – como bien señala Fried – es «confundir» al usuario incauto para que saque su tarjeta. Recogiendo peras del famoso long tail.
Hablando de este tema con Isabel Inés, sí que es cierto que en numerosas ocasiones el objetivo no es ni natural ni orgánico. Cuando empiezas a necesitar aumentar la masa crítica de usuarios un 20% al mes (por poner un ejemplo cualquiera), en el lateral de tu sombrero empieza a leerse la palabra Marketing.
También es cierto que esta filosofía puede parecer más válida para servicios como formación o consultoría y menos para productos. Pero el propio producto de Fried tira por tierra esta forma de pensar: Basecamp.
En Basecamp, en lugar de centrar sus esfuerzos en atraer nuevos usuarios, pusieron toda su energía y recursos en ayudar a los ya existentes para mejorarles lo que tenían (también decidieron dejar de parecer cools frente a los medios de comunicación, por cierto).
El resultado muchos de vosotros lo conoceréis: una herramienta de gestión de proyectos simplemente brillante, usada por miles de usuarios y sin aceptar inversión externa (tan sólo una «contribución de Jeff Bezos»).
Volviendo a la Tierra, y evitando cualquier tipo de comparación, en esta casa (Seisdeagosto.com) nunca se ha puesto un duro en marketing, como tampoco lo hemos hecho en Ilios.org, ni en Lanavenodriza.com (todavía hay gente que no se acaba de creer que no tenemos equipo comercial, por cierto).
A lo mejor estamos equivocados y deberíamos rascarnos el bolsillo y empezar a mover la manivela del Marketing y seguir creciendo y creciendo. Pero lo cierto es que bajo esta filosofía nos va la mar de bien. Y de paso somos bastante felices, que también es importante.
Cerca de donde vivo han terminado unas obras de bastante calado, de esas que ponen la calle al revés, con nuevas canalizaciones, asfaltado, alumbrado, acerado… Hasta árboles a estrenar.
Tuve la oportunidad de echarle un vistazo a la infografía que ilustraba el proyecto cuando todo estuviera acabado, lo típico: un prototipo 3D con figuras de personas paseando, árboles frondosos y asfaltado impoluto.
Cuando veo este tipo de propuestas me suelo fijar en detalles como hasta dónde llegarán las sombras, por dónde circularán las personas o cómo serán las papeleras, me gusta recrearme en cómo se sentirán las personas que estrenan un espacio nuevo. En este caso, aparte de los árboles a estrenar (por aquello de las sombras), me llamaron la atención las papeleras: se salían del típico modelo forjado en hierro o las de plástico de toda la vida, es el modelo que encabeza este post.
El día que las colocaron, aunque aún faltaban cosas por acabar, me gustó confirmar lo que la infografía ilustraba en su momento. Pero días más tarde, con la calle abierta al público, me hizo volver a recordar el país en el que vivimos: la papelera en cuestión aparecía rodeada de una bolsa de basura atada a su perímetro, ocupando casi un 1/4 de la altura de la misma. Y así, toda la calle abajo…
Y es este 1/4 de realidad el que le hace falta a la mayoría de los proyectos que circulan por nuestro territorio: nos centramos únicamente en ponerlo bonito en la maldita infografía para ganar el proyecto, y dejamos de lado la capa de realidad, a la que se enfrenta el ser humano en su día a día frente a este tipo de objetos y entornos.
Obviamente, las responsabilidades se diluyen entre el diseñador de la papelera, quien diseñó el proyecto, quien lo aprobó e incluso quien se encarga de limpiar las calles. Pero ya da igual, lo único cierto es que estrenamos una calle más con papeleras impolutas y una bolsa a su alrededor. Bien atadas y en amarillo. Touché.
El Aeropuerto de Aalborg, en Dinamarca, tiene frente a su entrada algo bastante insólito: una señal de tráfico que «habla» como los humanos. Y precisamente por este detalle aparentemente tan poco relevante, se ha hecho bastante conocido en el hiperespacio.
Es curioso ver cómo nos sorprendemos ante este tipo de cosas que supuestamente deberían ser cotidianas, porque estamos acostumbrados precisamente a todo lo contrario: a señales de tráfico que nos dan órdenes, a emails de hacienda ininteligibles, a bancos con posiciones globales y así sucesivamente.
Por eso me levanto y aplaudo ante este tipo de iniciativas, porque generan algo de arcoíris ante un mundo repleto de palabras grises, un mundo de Administración. Como si estuviese comprobado empíricamente que esta forma de dirigirse a las personas funcionase.
Para mi, la señal en cuestión no puede ser más ilustrativa en cuanto al mensaje que pretende transmitir, pero además se toma la molestia de añadirle un guiño emocional (la segunda línea) que hace una prohibición deje de ser percibida como tal y que, además funcione mejor que una señal clásica, de las de toda la vida (igual no estáis de acuerdo, pero personalmente respetaría más esta señal que la de un prohibido parar y estacionar).
No me extraña que la gente se haga fotos frente a esta señal, a mi me están entrando ganas de volver a Dinamarca, para hacer lo mismo.
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‘:
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.
