Cómo impulsar UX con narración interactiva
Algunas historias simplemente no se pueden transmitir completamente a través de imágenes fijas. En estos casos, puede ser útil encontrar una manera de involucrar directamente al usuario en la historia. En este resumen de diseño, echamos un vistazo especial a la narración interactiva: cómo los sitios web pueden atraerlo a su mundo y entregar su mensaje a través del poder de la tecnología dinámica e interactiva y las características de diseño. Eche un vistazo a los ejemplos a continuación y experimente cómo su uso de la interactividad visual lo obliga a usted, el usuario, a continuar desplazándose o realizar una acción específica.
El Monstruo: derrotar al monstruo con un texto
es una sociedad entre UNICEF y ing Directamente para promover las donaciones a las escuelas en los países en desarrollo. El sitio lo lleva en un viaje animado a la vida de un grupo de niños en edad escolar, que son expulsados de su escuela por un monstruo feroz. Mientras El Monstruo te persigue hasta el precipicio de un acantilado, comienza la narración interactiva. Una opción para donar €1.20 en escolares (ej. UNICEF) a través de SMS aparece en la pantalla. Si elige 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 niños en edad escolar en el proceso educativo, e involucrar al visitante del sitio de esta manera le da una recompensa más inmediata por su generosidad. Utiliza un diseño interactivo de una manera que realmente aprovecha el sentido de empatía de las personas.
Huella de la Esclavitud: Sigue 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 el trabajo forzoso en el mundo moderno. La Huella de la Esclavitud le muestra cómo puede apoyar la esclavitud, incluso sin comprar directamente a empresas que utilizan talleres clandestinos. Explican este flujo de trabajo a través de infografías interactivas y desplazables. Pero en lugar de simplemente explicar este proceso en teoría, Slavery Footprints realiza una encuesta rápida que calcula cuánto tú confiar en el trabajo esclavo en función de factores como los alimentos que come, la propiedad en la que vive y el país del que proviene. Footprint of Slavery no solo le cuenta una historia sobre el estado moderno del trabajo esclavo, sino que utiliza un diseño interactivo, análisis de datos y encuestas para traerlo a la historia como un factor contribuyente. Es una forma fantástica de llegar a cada visitante del sitio web a nivel individual.
Flexible: SEO tener y no tener
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. Resulta que su página explica SEO debe ser lo más interesante posible para los clientes potenciales. A través del uso inteligente de puntos de acceso 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. SEO. Hay SVG animación para darle a la página un ambiente dinámico y un control deslizante sobre algunas imágenes que le permite echar un vistazo HTML detrás un sitio optimizado.
El principio explicado
Lo primero es lo primero: el principio ES una buena pelicula. Pero tambien es confundido como el infierno. Afortunadamente este sitio web lo guía a través de la trama con una historia simple 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 sueños dentro de los sueños se trazan una encima de la otra. Subtítulos emergentes que explican cada nivel, de quién son los personajes soñados y otra información necesaria. Este es un ejemplo muy simple de narración interactiva: el sitio le permite recorrer la historia a su propio ritmo. ¡Lo que realmente ayuda con una película tan confusa como Origen!
Moneda: una carta para gobernarlos a todos
¿Tu billetera está repleta de tarjetas de crédito? Divisa es una sola tarjeta en la que puede cargar y almacenar todas sus tarjetas de crédito. Simplemente desplácese por sus tarjetas almacenadas, seleccione una y luego deslícela, inserte el botón «tocar y listo» como lo haría con cualquier otra tarjeta. Todo el razonamiento detrás del producto es fusionar todas las tarjetas en un lugar conveniente, y este es un mensaje simple que se representa visualmente en un aún más simple forma. A medida que se desplaza hacia abajo en la página, muchas cartas se apilan y se convierten en monedas. Es una historia ordenada, minimalista y muy convincente.
Bellroy: Adelgaza la cintura de tu billetera
Mientras estamos en el tema de adelgazar su billetera, es posible que desee considerar adelgazar su billetera per se y no solo su contenido. carteras Bellroy están especialmente diseñados para ocupar menos espacio, incluso cuando se llenan con la misma cantidad de tarjetas que otras carteras. Para mostrar esto, el sitio web de Bellroy ofrece a los visitantes de su sitio web una escala móvil, de cero a diez tarjetas, que ofrece una comparación lado a lado entre Bellroy y sus competidores. Junto con un puñado de otras animaciones interactivas fantásticas, el sitio de Bellroy trae un poco de participación de los visitantes a lo que suele ser un juego muy aburrido de Us vs. Competidores.
Babel el rey: está lloviendo gatos
es una historia interactiva disponible a través de las tiendas de iTunes. Combinando texto, audio, animación y elementos interactivos, el juego lleva a los niños por edades. 2 –8 en el maravilloso mundo de Babel, un gato celoso de las nubes y que se pasa el día intentando fastidiarlas. El sitio web de la historia/juego ofrece una muestra de lo que está disponible a partir de la descarga. A medida que te desplazas hacia abajo en la página, Babel cae del cielo a tu lado y las ovejas viajan ingrávidas a través de las nubes. El sitio web está lleno de movimiento y vida y proporciona un excelente caso de estudio para sincronizar realmente su sitio web con el producto que vende.
Buen viaje: Akita nos muestra Cómo viajan los datos alrededor del mundo
Un correo electrónico puede parecer que se envió instantáneamente, pero ¿cómo sucede? de hecho cambiar de la computadora de una persona a otra? ÉSTEEl servicio de soporte de Akita ha desarrollado un viaje paso a paso para explicar cómo fluyen los datos en todo el mundo. El sitio le permite desplazarse horizontalmente a través del viaje de un correo electrónico, llevándolo de la computadora a la línea telefónica, al panel de control, al centro de datos y más. Es una explicación interactiva y sencilla de los movimientos que atraviesan los datos para viajar alrededor del mundo.
Ben Guardaespaldas
es una aplicación para iPhone que lo ayuda a cifrar y proteger la información privada en su dispositivo. La marca de la aplicación se centra en el personaje. « Ben», un guardaespaldas con un historial inmejorable de protección de personas. A medida que se desplaza hacia abajo en la página, Ben camina por una calle oscura (y desconcertada) 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 disfrazada de guardaespaldas) con desplazamiento interactivo para transmitir el tono de la aplicación.
nissan nota
Para vender su nuevo modelo de coche, nissan nota, Nissan usó una animación de desplazamiento hacia abajo que recuerda a un flipbook antiguo. En lugar de reproducir 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 de un automóvil y una familia que viaja del campo a la ciudad. ¡Juega con él y mira lo que piensas!
Hasta la última gota: una historia de fugas de desperdicio de agua
lo lleva a través de un solo día de uso de agua, desde el agua que usa en su ducha hasta el total de agua utilizada para producir su ropa y alimentos. ¡Es una historia simple que te lleva a un viaje informativo al espacio exterior! Con tanta agua utilizada en un día, la historia termina con una nota conmovedora de que más de mil millones de personas no tienen acceso a agua potable limpia todos los días. El uso de narraciones interactivas para transmitir un mensaje poderoso es un gran ejemplo de lo que un buen diseño puede enseñarnos.
El barco: una historia desgarradora de escape y refugio
La aclamada colección de cuentos de Nam Le Bote se convirtió en un novela gráfica interactiva A sbs.com.au, sumergiéndote en el mundo de un impactante barco que lucha contra toda la fuerza del océano mientras escapa de los horrores de la Guerra de Vietnam. Usando 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 arrojen de un lado a otro de la página mientras los personajes representados en ellos hacen lo mismo en un viaje por el océano. Cautivadora y conmovedora, esta historia de supervivencia simplemente debe ser experimentada.
