Micro-interacciones multimedia. La diferencia está en los detalles

Podríamos definir a las micro-interacciones como acciones simples y pequeños momentos de intercambio entre el usuario y la interfaz. Provocan en el usuario una respuesta inesperada, poco intrusiva, le sorprenden, facilitan la comprensión y, en conjunto, mejoran su experiencia.

Beneficios:

  • Son útiles, funcionales. Es su objetivo principal, de no ser así, es mejor prescindir de ellas.
  • Sorprenden al usuario. Le tiene que producir una sensación agradable, nada molesto.
  • Mejoran el uso de la interfaz.
  • Animan al usuario a seguir navegando.
  • Deben de ser intuitivas y de fácil comprensión.

Su uso debe ser elegante, moderado y armonioso. No consiste en subir al usuario en una montaña rusa. Hay que concebirlas en conjunto, es decir, como pequeños elementos que funcionan en grupo y que buscan una experiencia de navegación optimizada y “diferente”.

Gracias a ellas podemos aportar el elemento diferenciador a nuestras aplicaciones y crear un vínculo con el usuario más allá de la utilidad.

“La diferencia entre un buen producto y un gran producto, son sus detalles”

Existe diferentes tipos de micro-interacciones: Gestuales, de navegación, de lectura, de conexión con el usuario, sociales, para formularios, persuasivos, hover, multimedia….

A continuación, podemos ver unos ejemplos de micro-interacciones multimedia, en los que el usuario descubrirá más información (texto, redes sociales, formatos para descarga, compartir) con un simple “hover” sobre la imagenUtilizando el mismo patrón para un elemento común, el usuario sabrá como proceder cada vez que vuelva a ver una imagen dentro de un mismo site.

Son micro-interacciones sutiles, sencillas, limpias y elegantes que aportan un plus al usuario. “Menos, es más” 

 

 

 

 

 

 

 

En los siguientes enlaces podemos ver recursos similares para inspirarnos:

Cinemagraph – Fotografiando el movimiento

Las imágenes son potentes recursos gráficos que nos permiten marcar la distinción en nuestros diseños. Pero a veces no es suficiente. Un vídeo también ayuda pero pueden llegar a pesar mucho y ralentizar la carga.

¿Qué podemos hacer entonces? Pues un híbrido. Un vídeo que se al mismo tiempo sea una foto. Esta técnica se llama: Cinemagraph.

¿En qué consiste Cinemagraph?

Usaremos un vídeo, del que sacaremos una imagen fija y a la que luego dotaremos a uno de sus elementos de movimiento.
Por ejemplo, una foto de una modelo a la que solo se le mueve el pelo.

¿Qué necesitamos para hacerlo?

Básicamente: un vídeo. Pero no sirve cualquiera. Dependerá de qué es lo que queramos que conserve el movimiento.

Bueno, os explico el proceso y así entenderéis mejor las limitaciones.

Utilizando Photoshop:

– Abrimos el vídeo que hemos elegido (Abrir > Archivo)

– Se nos abre como si fuera una imagen normal. Pero si nos fijamos en la capa, vemos que aparece un icono de película.

pantallazo1

– Vamos al menú Ventana > Animación, para abrir la línea de tiempo y poner trabajar con el vídeo.

– Nos ponemos sobre el vídeo hasta que encontremos un frame que nos guste para ser nuestra imagen fija.

– Duplicamos capa y la rasterizamos.

pantallazo3

– Ahora ya podemos manejar esta capa cómo una capa de imagen normal.

– Hacemos una máscara de capa de lo que queremos que se mueva. Por ejemplo, en nuestro vídeo queremos que se vea movimiento sólo en el ojo del perro.

pantallazo4

– Y ya sólo queda guardarlo como GIF, con la opción de Animación > INFINITO (quitar la opción: SOLO UNA VEZ). Y ya tenemos nuestro Cinemagraph creado.
perro-ojo

La ‘curiosidad’ del viernes – Infografías del pasado y otras novedades

El viernes nos ha dejado un puente muy codiciado a nuestros pies. Pero no podemos irnos a disfrutar de nuestro festivo sin un breve repaso a algunos recursos que hemos encontrado navegando por Internet.

INFOGRAFÍAS

Hoy es un gran día para la nostalgia. ¿Cómo eran las infografías antes de los ordenadores? Esta es la pregunta que ha decidido contestar ‘The wired’. Después de leer el artículo, nuestra conclusión: eran un poco más difíciles de llevar a cabo y dignas de admiración.

infografias

RECURSOS DESDE FACEBOOK

El equipo de diseñadores de Facebook ha decidido compartir con nosotros algunas páginas de recursos muy útiles: mock-ups, herramientas de diseño y prototipado y alguna sorpresa más. Os dejo el enlace para que le echéis un ojo. Pueden ser muy útiles. Si eres usuario de Mac, con más motivo. recursos-fb

CODEPEN

Y cómo no podía faltar en este pequeño espacio a la curiosidad del viernes, un gracioso efecto desde Codepen. Un cable que se enrolla, así de sencillo, sin más. Y qué espectacular.

codepen

Hasta el próximo viernes.