logo
Contar historias se trata de que lo desconocido se haga conocido. Pero los diseñadores no son narradores de historias y los destinos que diseñan siempre deben ser claros para el usuario. Al insertar pequeños spoilers en nuestros diseños de interfaz de usuario y estropear la sorpresa, diseñamos para experiencias de usuario mucho mejores.
Los fanáticos de la sabiduría popular han afirmado a menudo que hay solo dos parcelas distintas en toda la cultura occidental: una persona se va de viaje y un extraño llega a la ciudad.
Una breve ojeada en su biblioteca refutará la regla, a menos que permita viajes metafóricos, en los que todo encaja, pero la frecuencia con la que se repite la idea y el sentido que parece tener dice mucho sobre la centralidad de el desconocido en las ideas occidentales de narrativa.
En ambas tramas, a una persona se le presenta algo nuevo e inesperado, la única variación es el punto de vista desde el cual habla la narración; en ambos casos, el arco de la historia es el desconocido convirtiéndose el conocido. Cuando Clint Eastwood llega a una ciudad en ruinas en el Idaho de 1800, nuestra curiosidad por su identidad es lo que impulsa nuestro compromiso. Cuando leemos la de Tolkien señor de los Anillos trilogía, nunca tenemos ninguna duda de que Frodo eventualmente llegará a Mt Doom, el interés está en lo que sucede en el camino.
La clave para contar historias es que hay algo desconocido y que lo desconocido se conocerá.
Los diseñadores no son narradores de historias
Numerosos diseñadores se han referido a sí mismos como narradores de historias, pero esta es simplemente una forma kitsch de referirse a la comunicación. Para contar una historia, tenemos que fomentar lo desconocido en preparación para una gran revelación, y el principal obstáculo para este enfoque es que las experiencias web, y yo diría que la mayoría de los encuentros con el diseño, son no lineales y de final abierto.
De hecho, el diseño está mucho más cerca de la poesía. La poesía suele existir en trozos pequeños y en los que se exploran temas que están abiertos a la interpretación.
Lejos de construir una historia, el trabajo de un diseñador es aclarar de la manera más discreta posible.
Uso de spoilers en microinteracciones
¿Cuál es el elemento más atractivo en Mandíbulas? ¿Brody está discutiendo con el alcalde? ¿Quint está contando la historia de Indianápolis? ¿Es el asunto de Hooper con Ellen Brody (sí, de verdad, lee el libro!)? No. Es la música. Tan pronto como ese tiburón comience a tocar el violonchelo, saber está llegando, su llegada es literalmente anunciada. [Incidentally, Jaws is an interesting example of a film in which both a stranger (the shark) comes to town, and then a man goes on a journey (to sea).]
Podemos crear compromiso en el diseño dejando caer continuamente spoilers, insinuando lo que se avecina, con nuestra propia música de violonchelo. Para hacerlo, utilizamos microinteracciones: componentes simples de la interfaz de usuario, que incluyen un disparador y comentarios. La parte de retroalimentación de la microinteracción es el lugar para insertar su spoiler.
Funciona al obtener una vista previa de los datos que, en una experiencia lineal, se introducirían en una etapa posterior. La clave es hacer avanzar los datos.
Miniaturas
Comencemos con algo familiar: el ejemplo clásico de presentar información es la miniatura. Una miniatura es una vista previa de un elemento más grande, una guía visual de qué esperar en el otro extremo de un enlace.
Jacky Winter es una agencia de talentos para artistas, ilustradores y animadores. Con una amplia gama de talentos, la mejor manera de explorar el trabajo es con miniaturas tradicionales.
Las miniaturas no tienen por qué ser tradicionales. Alexandre Nacache es un director de arte y diseñador interactivo cuyo sitio utiliza vistas previas de los elementos del proyecto, en lugar de reproducciones de un diseño en miniatura.
Bao es un restaurante taiwanés con tres ubicaciones en Londres. Sus ilustraciones de ubicación actúan como miniaturas, sugiriendo no solo una apariencia del restaurante, sino una posible experiencia.
Un dia libre es un estudio de diseño con sede en Glasgow. Las miniaturas en su sitio forman un componente importante de la dirección de arte y establecen su propia estética de marca.
La lectura de 5 minutos
En el pasado, la única forma de saber cuánto tiempo tomaría leer un artículo como este era verificar la hora, leer el artículo y verificar la hora nuevamente.
Según su aceptación, uno de los elementos de la interfaz de usuario más exitosos de los últimos años es el pequeño indicador útil que nos dice cuánto tiempo tomará leer un artículo. Popularizado por sitios como Medium, no hay seguimiento ocular ni se calcula la velocidad de lectura, la estimación de «lectura de 5 minutos» se basa en el recuento de palabras: 125 palabras es se espera que se lea en 30 segundos o alrededor. Pero incluso estos datos extremadamente generalizados son suficientes para permitir a los usuarios tomar decisiones informadas sobre su compromiso con un sitio, artículo o producto.
El monótono de Radio de diseño australiano se interrumpe solo por el rojo contrastante que se usa para los estados de desplazamiento. ¿El único elemento que emplea el rojo sin interacción? El cabezal de reproducción que presenta la posición y la longitud total.
Secoya es una empresa de capital de riesgo con sede en California. Los perfiles de las empresas de tecnología ocupan su página de destino. Cada perfil presenta una posición numerada, y el temporizador animado del control deslizante llama su atención exactamente hacia dónde se encuentra en el proceso.
Vimeo presenta algunos de los mejores videos de la web. Podrían haber mostrado cualquier información que quisieran (productor, tema, título) al pasar el cursor sobre sus miniaturas. Eligieron la duración.
Cinelli es la marca de bicicletas más cool de Italia. Su control deslizante de producto presenta botones numerados ‘siguiente’ y ‘anterior’. Las flechas por sí solas serían suficientes para transmitir significado, pero los diseñadores presentaron datos con una simple adición a los botones.
Datos calificativos
Una de las formas más sencillas de mejorar una interfaz es calificar los datos con un contexto significativo. La clave para esto es no entregar demasiada información, solo un simple resumen que se puede leer de un vistazo.
Ayuda Scout es un SaaS de servicio al cliente. Su tablero muestra métricas clave como conversaciones totales, que no tendrían sentido sin la adición de una flecha y un porcentaje que indique si eso es una mejora o un revés.
Reservar un billete de Lyon a Burdeos es más sencillo cuando Linea de tren muestra una barra debajo del tiempo de viaje, para dar una indicación visual de la duración y el número de cambios.
Mapas y tranquilidad
Cuando anticipamos viajes, especialmente un viaje hacia lo desconocido, a menudo desmitificamos la experiencia con un mapa. En el mundo real, un mapa es muy parecido a una miniatura de un destino. En el diseño de la interfaz de usuario, los mapas que utilizamos aclaran la arquitectura de la información.
Las etiquetas son una de las áreas más complejas de la arquitectura de la información porque tienden a la jerga, a menudo jerga exclusiva de la empresa. La adición de microcopia sin jerga permite obtener una vista previa del destino para los usuarios y les ayuda a encontrar la información correcta.
Enrejado es un SaaS de gestión del rendimiento, pero sus productos están muy centrados en la empresa. Resuelven este problema señalando la característica clave de cada producto en su menú.
Thriva le ayuda a controlar su salud con análisis de sangre que puede hacerse en casa. Tienen tres niveles de producto que se explican claramente en su menú.
Las transacciones financieras son técnicamente complejas. Tartán ofrece una variedad de productos API para desarrolladores. Su menú no solo explica la característica clave de cada producto, sino que ofrece una vista previa de dos posibles soluciones basadas en combinaciones de productos.
La clave para un diseño de interfaz de usuario eficaz son los spoilers
Contar historias es la antítesis del diseño efectivo, porque las historias, por su naturaleza, complacen los elementos desconocidos de una experiencia. El diseño, por el contrario, busca eliminar lo desconocido aclarando.
Cuando presentamos datos en un diseño, generalmente lo hacemos de una manera simple. Una sola pieza de datos bien seleccionados puede aclarar todo un proceso. Las microinteracciones son la forma ideal de insertar estos ‘spoilers’, que permiten a los usuarios crear su propia experiencia, sabiendo siempre con precisión dónde se encuentran dentro del contexto más amplio.
Al revelar más de lo que lo haría una historia lineal, involucramos a los usuarios de manera mucho más efectiva y diseñamos experiencias que son sólidas y agradables de usar.
