Cómo estropear el final mejora UX
La narración de historias es acerca de lo desconocido que se conoce. Pero los diseñadores no son narradores, y los destinos que diseñan siempre deben ser claros para el usuario. Al insertar spoilers pequeños en nuestros diseños de interfaz de usuario y arruinar la sorpresa, diseñamos para experiencias de usuario mucho mejores.
A menudo los fanáticos de la sabiduría popular afirman que hay solo dos parcelas distintas en toda la cultura occidental: una persona emprende un viaje y un extraño viene a la ciudad.
Un breve vistazo a su librería desmentirá 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 lo desconocido en occidente. ideas 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 lo desconocido convirtiéndose en lo conocido . Cuando Clint Eastwood monta en una ciudad destruida en el año 1800 en Idaho, nuestra curiosidad sobre su identidad es lo que impulsa nuestro compromiso. Cuando leemos la trilogía El Señor de los Anillos de Tolkien , nunca dudamos 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 un desconocido, y que lo desconocido se conocerá.
Los diseñadores no son narradores de cuentos
Numerosos diseñadores se han referido a sí mismos como cuentacuentos, pero esto 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 abiertas.
El diseño está, de hecho, más cerca de la poesía. La poesía suele existir en trozos del tamaño de un bocado, y en la que se exploran temas abiertos a la interpretación.
Lejos de construir una historia, el trabajo de un diseñador es aclarar lo menos intromisión posible.
Uso de Spoilers en Microinteracciones
¿Cuál es el elemento más atractivo en Jaws ? ¿Está Brody discutiendo con el alcalde? ¿Quint está contando la historia de Indianápolis? ¿Es 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 sabemos que viene, su llegada es literalmente anunciada. [Por cierto, Jaws es un ejemplo interesante de una película en la que un extraño (el tiburón) llega a la ciudad, y luego un hombre emprende un viaje (hacia el mar).]
Podemos crear compromiso en el diseño al dejar caer spoilers continuamente, haciendo alusión a lo que viene, con la música de chelo propia. Para hacerlo, usamos microinteracciones, componentes de interfaz de usuario simples, que incluyen un disparador y una retroalimentación. La parte de retroalimentación de la microinteracción es el lugar para insertar su alerón.
Funciona mediante la vista previa de datos que, en una experiencia lineal, se introducirían en una etapa posterior. La clave es adelantar los datos.
Miniaturas
Comencemos con algo familiar: el ejemplo clásico de llevar adelante la 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 forma de navegar es con las miniaturas tradicionales.
Las miniaturas no tienen que ser tradicionales. Alexandre Nacache es un director de arte y diseñador interactivo cuyo sitio utiliza vista previa 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, lo que sugiere no solo una mirada hacia el restaurante, sino también una posible experiencia.
Un dia libre es un estudio de diseño con sede en Glasgow. Las miniaturas en su sitio forman un componente principal de la dirección de arte y establece su propia estética de marca.
La lectura de 5 minutos
De vuelta en el día, la única manera 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.
En función de su aceptación, uno de los elementos de UI más exitosos de los últimos años es el pequeño indicador útil que nos dice cuánto tardará en leer un artículo. Popularizado por sitios como Medium, no hay seguimiento de ojos involucrado, o la velocidad de lectura calculada, el cálculo de "5 minutos de lectura" se basa en el conteo de palabras-125 palabras es Se espera que se lea en 30 segundos o por los alrededores. Pero incluso estos datos groseramente 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 Australian Design Radio solo se rompe por el contraste rojo utilizado para los estados de vuelo estacionario. ¿El único elemento que emplea el rojo sin interacción? La cabeza lectora que presenta la posición y la longitud total.
Secoya es una firma de capital de riesgo con sede en California. Los perfiles de las empresas tecnológicas ocupan su página de destino. Cada perfil tiene una posición numerada, y el temporizador animado del control deslizante llama su atención sobre dónde se encuentra exactamente en el proceso.
Vimeo presenta algunos de los mejores videos en la web. Podrían haber mostrado la información que deseaban (productor, tema, título) al pasar el cursor sobre sus miniaturas. Ellos eligieron la duración.
Cinelli es la marca de bicicletas más cool de Italia. Su control deslizante de productos cuenta con los botones numerados 'siguiente' y 'anterior'. Las flechas por sí solas serían suficientes para transmitir el significado, pero los diseñadores hicieron avanzar los datos con una simple adición a los botones.
Datos calificativos
Una de las formas más simples de mejorar una interfaz es calificar los datos con un contexto significativo. La clave para esto no es brindar demasiada información, solo un resumen simple que se puede leer de un vistazo.
Ayuda Scout es un servicio al cliente SaaS. Su tablero de instrumentos muestra métricas clave como conversaciones totales, lo que no tendría sentido sin la adición de una flecha y un porcentaje que indica si es una mejora o un retroceso.
Reservar un boleto de Lyon a Burdeos se simplifica 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 a lo desconocido, a menudo desmitificamos la experiencia con un mapa. En el mundo real, un mapa se parece mucho 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 la jerga exclusiva de la empresa. La adición de una microcopia sin jerga anticipa el 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 compañía. Resuelven este problema señalando la característica clave de cada producto en su menú.
Thriva lo ayuda a seguir su salud con análisis de sangre que puede tomar 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 muestra dos posibles soluciones basadas en combinaciones de productos.
La clave del diseño efectivo de la interfaz de usuario es spoilers
Contar historias es la antítesis del diseño eficaz, porque las historias, por su naturaleza, se relacionan con los elementos desconocidos en una experiencia. El diseño, por el contrario, busca eliminar lo desconocido mediante la clarificación.
Cuando traemos los datos hacia adelante en un diseño, generalmente lo hacemos de 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, mientras que siempre saben con precisión dónde se encuentran dentro del contexto más amplio.
Al revelar más que una historia lineal, involucramos a los usuarios de forma mucho más efectiva y diseñamos experiencias que son sólidas y agradables de usar.