{"id":26368,"date":"2022-07-28T11:04:09","date_gmt":"2022-07-28T09:04:09","guid":{"rendered":"https:\/\/www.makingscience.com\/?p=26368"},"modified":"2022-07-28T11:04:09","modified_gmt":"2022-07-28T09:04:09","slug":"que-son-las-microinteracciones-y-como-pueden-mejorar-la-experiencia-de-tus-usuarios","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/que-son-las-microinteracciones-y-como-pueden-mejorar-la-experiencia-de-tus-usuarios\/","title":{"rendered":"Qu\u00e9 son las microinteracciones y c\u00f3mo pueden mejorar la experiencia de tus usuarios"},"content":{"rendered":"

Cada ma\u00f1ana meto una rebanada de pan en el tostador. Mientras que se tuesta aprovecho para hacerme un caf\u00e9. El sonido de las tostadora es lo que me avisa de que es hora de ir a por mi pan reci\u00e9n tostado. Sin embargo esta ma\u00f1ana sucedi\u00f3 algo diferente, el tostador tard\u00f3 m\u00e1s en saltar, y se me quemaron las tostadas. El sonido del tostador es la interacci\u00f3n que hace que yo pare de beber mi caf\u00e9 y vaya al tostador, y si esto no pasa en el momento adecuado, pues todo sale mal.<\/span><\/p>\n

\u00bfY por qu\u00e9 cuento todo esto? Porque <\/span>nuestro d\u00eda a d\u00eda est\u00e1 lleno de microinteracciones que nos hacen la vida m\u00e1s sencilla, y en tu web no deber\u00eda ser menos.\u00a0<\/b><\/p>\n

 <\/p>\n

\u00bfQu\u00e9 es una microinteracci\u00f3n?\u00a0<\/strong><\/h3>\n

Las microinteracciones son eventos que tienen un objetivo:<\/span> dar <\/b>feedback <\/i><\/b>al usuario,<\/b> bien sobre una acci\u00f3n que ha realizado, o bien sobre el estado del sistema, q<\/strong><\/span>ue se comunica a trav\u00e9s de cambios visuales en la interfaz.\u00a0<\/b><\/p>\n

Pero una buena microinteracci\u00f3n debe tener otro prop\u00f3sito m\u00e1s, <\/span>el de \u201centretener\u201d al usuario<\/b>. Esto es, adem\u00e1s de informar al usuario, la interacci\u00f3n debe crear un momento que potencie el <\/span>engagement <\/span><\/i>y refuerce los valores de marca.<\/span><\/p>\n

Un ejemplo pr\u00e1ctico: \u00bfqu\u00e9 ocurre cuando damos like a un post de Instagram?<\/strong> Pues bien ocurren dos cosas: por un lado, el coraz\u00f3n que aparece abajo a la izquierda se colorea para informarnos de que la acci\u00f3n que pretend\u00edamos se ha realizado. Esta microinteracci\u00f3n cumple el prop\u00f3sito principal de dar feedback. Pero por otro lado nos aparece en la pantalla una peque\u00f1a animaci\u00f3n de un coraz\u00f3n que aparece y desaparece encima de la foto y notaremos que nuestro tel\u00e9fono hace una peque\u00f1a vibraci\u00f3n. Esta segunda parte de la microinteracci\u00f3n es la que hace que la experiencia de dar un like sea \u00fanica (diferenci\u00e1ndose de otras apps) y que queramos repetir.<\/span><\/p>\n

\"\"<\/p>\n

<\/h3>\n

\u00bfPor qu\u00e9 las microinteracciones son importantes?<\/strong><\/h3>\n

Desafortunadamente, <\/span>en muchas ocasiones no se presta la suficiente atenci\u00f3n a las microinteracciones y se las considera meras florituras de dise\u00f1o<\/b>. Sin embargo, estas son algunas de las razones por las que a\u00f1adiendo microinteracciones una web puede pasar de ser una m\u00e1s, a una que deje huella en el usuario:\u00a0<\/span><\/p>\n

    \n
  • Mejoran la <\/span>navegaci\u00f3n<\/b>.<\/span><\/li>\n
  • Dirigen la <\/span>atenci\u00f3n <\/b>de los usuarios.<\/span><\/li>\n
  • Proporcionan <\/span>informaci\u00f3n instant\u00e1nea y relevante<\/b> sobre una acci\u00f3n completada por el usuario.<\/span><\/li>\n
  • Facilitan la <\/span>interacci\u00f3n<\/b> de los usuarios.<\/span><\/li>\n
  • Hacen que la experiencia del usuario sea mucho m\u00e1s <\/span>gratificante<\/b>.<\/span><\/li>\n
  • Proporcionan <\/span>consejos<\/b> a los usuarios.<\/span><\/li>\n
  • Comunican<\/span> informaci\u00f3n <\/b>sobre ciertos elementos, por ejemplo si dicho elemento es o no interactivo.<\/span><\/li>\n
  • Animan a <\/span>compartir, dar <\/b>like<\/i><\/b> y comentar<\/b> el contenido.<\/span><\/li>\n
  • Y, por \u00faltimo, simplemente hacen que la interfaz <\/span>emocione <\/b>al usuario.<\/span><\/li>\n<\/ul>\n

     <\/p>\n

    Algunos ejemplos de microinteracciones<\/strong><\/h3>\n

    Swipe:<\/i><\/b> la acci\u00f3n de <\/span>swipe<\/span><\/i> elimina el tapping (tocar con el dedo) en los dispositivos m\u00f3viles, y es mucho m\u00e1s interactiva y suave. Ayuda al usuario a pasar r\u00e1pidamente de una pesta\u00f1a a otra y a obtener m\u00e1s informaci\u00f3n sobre el producto. Adem\u00e1s, el <\/span>swipe<\/span><\/i> es un gesto muy com\u00fan y gu\u00eda a los usuarios de forma subconsciente sin hacerles pensar. Y adem\u00e1s incre\u00edblemente divertido y adictivo.<\/span><\/p>\n

    \"\"<\/strong><\/p>\n

    I<\/strong>ntroducci\u00f3n de datos:<\/b> algunas interacciones en el momento de la entrada de datos mantienen a los usuarios comprometidos con el proceso y ayudan a lograr el objetivo. Un ejemplo cl\u00e1sico son las animaciones sobre los requisitos y la fuerza al establecer una nueva contrase\u00f1a, que facilitan al usuario seguir adelante.<\/span><\/p>\n

    \"\"<\/b><\/p>\n

    Estado actual del sistema:<\/b> Es esencial mantener al usuario informado sobre el estado actual de una web o aplicaci\u00f3n. Si los usuarios no est\u00e1n informados, lo m\u00e1s probable es que se frustren y abandonen. Las microinteracciones permiten al usuario saber exactamente qu\u00e9 est\u00e1 pasando, cu\u00e1nto tiempo tardar\u00e1 el proceso en completarse, etc.\u00a0<\/span><\/p>\n

    \"\"<\/i><\/b><\/p>\n

    Standby: <\/i><\/b>a veces puede ser \u00fatil comunicar al usuario que la web est\u00e1 esperando m\u00e1s informaci\u00f3n. Este tipo de microinteracci\u00f3n anima al usuario a seguir interactuando con un producto. Por ejemplo, en iOS, cuando se mantiene pulsado el icono de una aplicaci\u00f3n en la pantalla de inicio del dispositivo, el sistema responde agitando ligeramente todas las aplicaciones. Este movimiento comunica que el sistema est\u00e1 esperando una acci\u00f3n posterior (es decir, tocar la \u00abX\u00bb en la esquina superior izquierda de la app para eliminarla o arrastrar el icono a una posici\u00f3n diferente en la pantalla para moverlo).<\/span><\/i><\/b><\/p>\n

    \"\"<\/i><\/b><\/p>\n

    Call to action: <\/i><\/b>Las microinteracciones en el CTA empujan esencialmente al usuario a interactuar con una aplicaci\u00f3n o sitio web. La llamada a la acci\u00f3n infunde una sensaci\u00f3n de logro y tambi\u00e9n un factor de empat\u00eda en el comportamiento del usuario y la mejor manera de hacer que su usuario interact\u00fae con un CTA es hacerlo atractivo para despertar el inter\u00e9s del usuario.<\/span><\/p>\n

    \"\"<\/h2>\n

     <\/p>\n

    En conclusi\u00f3n…<\/strong><\/h3>\n

    Las microinteracciones <\/span>bien dise\u00f1adas pueden tener un gran impacto en la experiencia del usuario<\/b>. Aportan valor, proporcionan informaci\u00f3n visual \u00fatil e incluso ayudan a los usuarios a evitar errores. Adem\u00e1s, <\/span>las microinteracciones pueden enriquecer un producto fortaleciendo los valores de marca,<\/b> lo que anima a los usuarios a elegir un producto frente a su competencia. En resumen, estos peque\u00f1os detalles pueden transformar un buen producto en un gran producto, y a un usuario desconectado en un usuario comprometido.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

    Cada ma\u00f1ana meto una rebanada de pan en el tostador. Mientras que se tuesta aprovecho para hacerme un caf\u00e9. El sonido de las tostadora es lo que me avisa de que es hora de ir a por mi pan reci\u00e9n tostado. Sin embargo esta ma\u00f1ana sucedi\u00f3 algo diferente, el tostador tard\u00f3 m\u00e1s en saltar, y […]<\/p>\n","protected":false},"author":40,"featured_media":26592,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[27,34],"tags":[339,179],"class_list":["post-26368","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advertising","category-technology-ai","tag-experiencia-de-usuario","tag-ux"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/26368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=26368"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/26368\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/26592"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=26368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=26368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=26368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}