Cómo impulsar la experiencia de usuario con la narración interactiva
Algunas historias simplemente no se pueden transmitir completamente a través de imágenes estáticas. En estos casos, puede ser útil encontrar una forma de involucrar directamente al usuario en la historia.
En este resumen de diseño, hemos dado un vistazo especial a la narración interactiva: la forma en que los sitios web pueden llevarlo a su mundo y transmitir su mensaje a través del poder de la tecnología dinámica e interactiva y las características de diseño.
Solo eche un vistazo a los ejemplos a continuación y experimente cómo su uso de la interactividad visual lo obliga a usted, como usuario, a continuar desplazándose o realizar una acción específica.
El Monstruo: venciendo al monstruo con un texto
El Monstruo es una asociación entre UNICEF e ING Direct para promover donaciones a escuelas en países en desarrollo. El sitio lo lleva en un viaje animado a la vida de un grupo de escolares, que están siendo expulsados de su escuela por un monstruo feroz. Mientras El Monstruo te persigue hasta el precipicio de un acantilado, entra la narración interactiva.
En la pantalla aparece una opción para donar 1,20 € a los escolares (es decir, UNICEF) a través de SMS. Si eliges donar, la animación continúa con un final feliz; si no, bueno …
El monstruo es una metáfora simple que representa las barreras que enfrentan muchos escolares para obtener su educación, e involucrar al visitante del sitio de esta manera les da una recompensa más inmediata por su generosidad. Está utilizando el diseño interactivo de una manera que realmente llega al sentido de empatía de las personas.
Huella de esclavitud: siga los pasos
¿Cuántos esclavos trabajan para ti? Esta simple pregunta es el comienzo de un viaje a través de la cadena de suministro y trabajo forzoso en el mundo moderno. Slavery Footprint le explica cómo podría apoyar la esclavitud, incluso sin comprar directamente a empresas que utilizan talleres clandestinos. Explican esta cadena de trabajo a través de infografías interactivas de desplazamiento.
Pero en lugar de simplemente explicar este proceso en teoría, Slavery Footprints ejecuta una encuesta rápida que calcula cuánto usted dependen del trabajo esclavo, en función de factores como la comida que come, la propiedad en la que vive y el país de donde proviene.
Slavery Footprint no solo te cuenta una historia sobre el estado moderno del trabajo esclavo, sino que utilizan el diseño interactivo, el análisis de datos y la topografía para llevarte a la historia como factor contribuyente. Es una forma fantástica de llegar a cada visitante del sitio a nivel individual.
Flexible: SEO tiene y no tiene
Flexible es una agencia de marketing digital que ayuda a las empresas a posicionarse mejor en Google a través de la optimización de motores de búsqueda. De ello se deduce que su página que explica el SEO debe ser lo más atractiva posible para los clientes potenciales.
Mediante el uso inteligente de puntos calientes iluminados, en los que los visitantes pueden hacer clic para revelar información clave sobre ciertos aspectos de las imágenes e infografías de la página, el sitio invita a los visitantes a profundizar un poco más en el mundo del SEO. Hay una animación SVG para darle vitalidad dinámica a la página y una barra deslizante sobre algunas imágenes que le permite echar un vistazo al HTML. detrás un sitio optimizado.
Inception Explicado
Lo primero es lo primero: Inception ES una gran película. Pero también es confuso como el infierno. Afortunadamente este sitio web lo guía a través de la trama con una narración sencilla e interactiva. El sitio codifica con colores cada carácter clave y, a medida que se desplaza hacia abajo en la página, las capas de los sueños dentro de los sueños se representan una encima de la otra.
Aparecen subtítulos que explican cada nivel, los personajes de los sueños y otra información necesaria. Este es un ejemplo muy simple de narración interactiva: el sitio le permite moverse a través de la historia a su propio ritmo. ¡Lo que realmente ayuda con una película tan confusa como Inception!
Moneda: una carta para gobernarlos a todos
¿Su billetera está llena de tarjetas de crédito? Moneda es una sola tarjeta en la que puede cargar y almacenar todas sus tarjetas de crédito. Simplemente desplácese por las tarjetas almacenadas, seleccione una y luego deslice, inserte tap-n-go como lo haría con cualquier otra tarjeta.
Todo el razonamiento detrás del producto es fusionar todas sus tarjetas en un lugar conveniente, y ese es un mensaje simple que se representa visualmente en un aun mas simple camino. A medida que se desplaza hacia abajo en la página, un montón de tarjetas se apilan y se transforman en monedas. Es una narración ordenada, minimalista y muy convincente.
Bellroy: adelgaza la cintura de tu billetera
Ya que estamos en el tema de adelgazar la billetera, es posible que desee considerar adelgazar la billetera sí mismo y no solo su contenido. Carteras Bellroy están especialmente diseñadas para ocupar menos espacio, incluso cuando están llenas de la misma cantidad de tarjetas que otras carteras.
Para mostrar esto, el sitio web de Bellroy ofrece a los visitantes de su sitio una escala móvil, de cero tarjetas a diez, que ofrece una comparación en paralelo entre Bellroy y sus competidores. Junto con un puñado de otras fantásticas animaciones interactivas, el sitio de Bellroy aporta un poco de participación de los visitantes en lo que suele ser una demostración muy aburrida de Nosotros contra los competidores.
Babel the King: llueven gatos
Babel el Rey es una historia interactiva disponible a través de las tiendas iTunes. Combinando texto, audio, animación y elementos interactivos, el juego lleva a los niños de 2 a 8 años al maravilloso mundo de Babel, un gato que está celoso de las nubes y pasa sus días tratando de molestarlas.
El sitio web de la historia / juego ofrece una muestra de lo que está disponible en la descarga. A medida que se desplaza hacia abajo en la página, Babel cae por el cielo a su lado y las ovejas caminan ingrávidas por las nubes.
El sitio web está lleno de movimiento y vida, y ofrece un gran estudio de caso para sincronizar realmente su sitio web con el producto que está vendiendo.
Buen viaje: Akita nos muestra Cómo viajan los datos por el mundo
Un correo electrónico puede parecer enviado de forma bastante instantánea, pero ¿cómo funciona? Realmente pasar de la computadora de una persona a otra? El servicio de soporte de TI Akita ha desarrollado un viaje paso a paso para explicar cómo viajan los datos por el mundo.
El sitio le permite desplazarse horizontalmente a través del viaje de un correo electrónico, lo que lo lleva de la computadora a la línea telefónica, a la centralita telefónica al centro de datos, ¡y más! Es una explicación interactiva y sin esfuerzo de los movimientos que atraviesan los datos para viajar por todo el mundo.
Ben el guardaespaldas
Ben el guardaespaldas es una aplicación para iPhone que le ayuda a cifrar y proteger información privada en su dispositivo. La marca de la aplicación se centra en el personaje de «Ben», un guardaespaldas con un historial inmejorable en la protección de las personas.
Mientras se desplaza hacia abajo en la página, Ben camina por una calle oscura (y de aspecto poco fiable) mientras explica los peligros de dejar que su información privada caiga en las manos equivocadas. Es una gran narración, con una premisa simple (una aplicación de privacidad personificada como un guardaespaldas) con desplazamiento interactivo para ofrecer el tono de la aplicación.
Nissan nota
Para vender su nuevo modelo de coche, el Nissan Note, Nissan ha empleado una animación de desplazamiento hacia abajo, que recuerda a un libro animado antiguo. En lugar de ejecutar un video, el sitio muestra una cuadrícula de paneles que muestran imágenes que cambian ligeramente a medida que se desplaza hacia abajo.
El efecto es que los visitantes del sitio pueden crear una película a su propio ritmo. Es una historia interactiva sobre las características del automóvil y una familia que viaja por el campo hasta la ciudad. ¡Juega con él y mira lo que piensas!
Every Last Drop: una historia sobre el desperdicio de agua
El sitio web lo lleva a través de un solo día de uso de agua, desde el agua que usa en la ducha hasta el agua total utilizada en la producción de su ropa y alimentos. ¡Es una historia simple que se despliega hacia abajo que lo lleva en un viaje informativo hasta el espacio exterior!
Con tanta agua consumida en un día, la historia termina con una nota conmovedora de que más de mil millones de personas no tienen acceso diario a agua potable limpia. El uso de la narración interactiva para transmitir un mensaje poderoso es un gran ejemplo de lo que el buen diseño puede enseñarnos.
The Boat: una desgarradora historia de escape y refugio
Colección de cuentos aclamados de Nam Le El barco se ha transformado en un novela gráfica interactiva a sbs.com.au, arrojándote al mundo de un barco desvencijado que lucha con toda la fuerza del océano mientras escapa de los horrores de la guerra de Vietnam.
Haciendo uso de texto, diseño de sonido, ilustración y animación, es un testimonio de lo que puede lograr la narración interactiva. Un momento memorable implica que el texto y las ilustraciones se muevan hacia arriba y hacia abajo en la página mientras los personajes que aparecen en ellos hacen lo mismo en un viaje por el océano.
Inmersiva y emotiva, esta historia de supervivencia simplemente debe experimentarse.
