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:

La ‘curiosidad’ del viernes – Tipografías audibles, imágenes libres y frameworks

Una semana más empezamos el fin de la jornada laboral con un poco de inspiración:

TYPATONE

Últimamente estamos muy musicales, ya os enseñé qué divertido podía ser jugar con unas formas y unos cuantos sonidos en YUME en la entrada del viernes anterior.

Y ahora con TypaTone puedes convertir las letras en sonidos. Es muy creativo y siempre salen sonidos armónicos, por mucho que te empeñes en hacer cosas extrañas con las letras. Os animo a que lo probéis.

TYPASOUND

CODEPLY

¿Alguna vez has sentido deseos de poder acceder a diferentes Frameworks para elegir el mejor código para tu página sin tener que ir uno a uno? Pues bien, esto es exactamente lo que puedes conseguir con Codeply. Accedes a diferentes Frameworks a través de la página, y coges la parte que más te convenga: menús, acordeones, botones…

Lo bueno, es que el editor te deja copiar HTML, CSS, JS y es muy visual. Así que es bastante intuitivo.

codeply

En un principio tus búsquedas pueden ser algo erráticas. Pero, dadle una oportunidad, es una herramienta con potencial.

LIBRE STOCK

Como ya he visto que nadie se ha animado a tener unos cuantos “freebies” de ‘Halloween’ (cuanta animosidad contra esta fiesta) he tenido que cambiar el recurso gratuito que os quería aportar por este otro: ‘Libre Stock’.

Libre Stock‘ es una herramienta para buscar imágenes de stock gratuitas por la web. Te devuelve resultados en diferentes páginas de recursos de fotografía. Ahorraréis algo de tiempo. Me parece completa, aunque no vais a encontrar todas las que queráis. Algunas búsquedas tendrán que ser un poco más exhaustivas.

freestock

 

TIPOGRAFÍA Y MÁS TIPOGRAFÍA

Este viernes os estoy dejando recursos a mansalva ¿no?.

Si la tipografía es lo tuyo, te sonará la página Type Detail. Si no recuerdas haberla oído nombrar, tampoco te preocupes, ahora sí la conoces. Si utilizas su apartado de Recursos, tendrás acceso a cientos de recursos online, blogs y foros, que discuten, respiran y viven sólo para la tipografía. Qué ¿te das un vuelta?

type

PORTADAS ANIMADAS

Y por último y con esto os dejo ya, una curiosidad desde Vimeo. Portadas de libros clásicos, ilustradas y animadas. Muy trabajadas y muy ‘resultonas’ ¿cuál os gusta más?

vimeo

La ‘curiosidad’ del viernes – Aprende jugando y otros recursos animales

Cuándo te toca investigar durante muchas horas un tema que requiere código y más código, acabas exhausto. Si encuentras la respuesta fácilmente, te sientes poderoso. Pero si no das con ella tan rápidamente puedes: desesperarte, aburrirte, frustrarte o hundirte en la miseria.

Así que es de agradecer, cuándo se está comenzando a aprender alguna destreza nueva, que haya oportunidad de hacerlo de manera entretenida.

Y eso os presento hoy, aprender código con 5 juegos. Es cierto, queridos diseñadores, que son juego orientados a desarrolladores, si bien hay algunos que utilizan J-Query, así que… ahí lo dejo si queréis dedicarle un rato:

5 JUEGOS PARA APRENDER CÓDIGO.

code-combat

 

ANIMALES CON PURO CSS

Y para que no penséis, maquetadores del mundo, que me he olvidado de vosotros, os dejo un enlace a unas bonitas animaciones de animales solo con CSS. ¿No son motivadoras?

css-animales

 

 

365 PSD

Y como hoy es viernes, y en viernes siempre se agradecen los “Freebies” he aquí un recurso estupendo que me han pasado de archivos PSD.

Algunos gratuitos… otros no tanto. Pero buen recurso.

PSD

 

 

Nos vemos el próximo viernes.

La ‘curiosidad’ del viernes – Parallax y otras historias

Septiembre nos ha traído el recuerdo de que se acaba el verano, la jornada intensiva (para los afortunados que la hayan disfrutado)… pero para evitar que la tristeza nos sobrecoja, aquí un poco de inspiración “viernera”.

PARALLAX – STORY TELLING

Primero, en “Line25” han creado esta recopilación de 15 webs que usando Parallax te cuentan una historia.
Estas página llevan años circulando por la web, pero nunca está de más refrescarnos la memoria. Si sólo tenéis tiempo para ver alguna, os recomiendo encarecidamente “The hybrid graphic novel”. La propuesta gráfica es… en una palabra, brutal. Y otra que es muy diferente :”How far is it to Mars“, también es muy divertida.

pantallas-parallax

CARTAS 

Cambiando el tercio y volviendo a HTML5 y CSS3 ¿jugamos una partida de cartas?
El código de esta baraja de cartas está en Github.
Si, ya sé que sacar cartas una de tras de otra, puede parecer poco emocionante pero ¿qué queréis que os diga? Es muy entretenido. También se puede barajar automáticamente, distribuir las cartas…

baraja-cartas

CÍRCULOS CSS

Y por último, pero no por ello menos importante, Codepen. Ya sabéis, un clásico:
Círculos hipnóticos, ¡sólo con CSS! 

circulos-hipnoticos

¿Algún ruego, petición, pregunta? ¿No?… ¿Seguro? Bueno, pues hasta el próximo viernes.