{"id":10272,"date":"2019-02-28T14:05:15","date_gmt":"2019-02-28T12:05:15","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=10272"},"modified":"2023-11-28T12:15:16","modified_gmt":"2023-11-28T11:15:16","slug":"como-las-microinteracciones-mejoran-la-ux","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/como-las-microinteracciones-mejoran-la-ux\/","title":{"rendered":"C\u00f3mo las microinteracciones mejoran la UX"},"content":{"rendered":"

\u00bfQu\u00e9 son las microinteracciones?<\/h2>\n

Las microinteracciones son elementos sutiles de dise\u00f1o que transmiten el estado de un producto digital<\/strong>. Su prop\u00f3sito principal es proporcionar una respuesta visual e instant\u00e1nea creando as\u00ed, un momento agradable y sorprendente para el usuario. Es habitual que las microinteracciones funcionen siguiendo los siguientes pasos:<\/p>\n

    \n
  1. Se inician mediante un disparador o trigger<\/em>.<\/li>\n
  2. Se ponen en marcha una vez que se cumplen ciertos requisitos predeterminados.<\/li>\n
  3. Proporcionan un feedback <\/em>al usuario sobre qu\u00e9 est\u00e1 sucediendo.<\/li>\n<\/ol>\n

    En t\u00e9rminos de UX, el uso de microinteracciones proporcionan una experiencia m\u00e1s comprensible y visual<\/strong>, contribuyendo positivamente a la apariencia del producto o servicio. Las principales ventajas<\/strong> de las microinteracciones son:<\/p>\n

      \n
    1. Aumentan el engagement.<\/em><\/li>\n
    2. Muestran el estado del sistema.<\/li>\n
    3. Previenen posibles errores.<\/li>\n
    4. Comunican el valor de la marca.<\/li>\n<\/ol>\n

      Adem\u00e1s, el reducido tama\u00f1o de los elementos hace que los tiempos de carga no sufran y permiten que el usuario se sienta emocionalmente conectado<\/strong> con la interfaz. Puedes aprender a detectar los posibles problemas de carga en tu producto digital leyendo este post.<\/p>\n

      Ejemplos de microinteracciones<\/h2>\n

      A continuaci\u00f3n, se muestran y explican algunos ejemplos de microinteracciones:<\/p>\n

      El primero de ellos est\u00e1 relacionado con el proceso de carga y descarga de archivos. Es interesante hacer uso de las microinteracciones para alentar al usuario de que permanezca a la espera<\/strong>. De este modo, el elemento podr\u00eda mostrar al usuario el tiempo que durar\u00e1 el proceso o, como vemos en este ejemplo, la progresi\u00f3n del mismo y una se\u00f1al de confirmaci\u00f3n cuando se ha completado apropiadamente.<\/p>\n

       <\/p>\n

      \"Elemento<\/p>\n

      Fuente: codemyui.com <\/a><\/p>\n

       <\/p>\n

      Como se ha comentado, las microinteracciones proporcionan un mensaje al usuario en el momento en el que \u00e9ste realiza una acci\u00f3n. Un gesto muy com\u00fan en dispositivos m\u00f3viles es deslizar una p\u00e1gina hacia abajo para refrescarla. Como respuesta del sistema, se puede implementar una microinteracci\u00f3n que comunique al usuario que ha reconocido el gesto<\/strong> y que est\u00e1 actualizando los resultados.<\/p>\n

      Tambi\u00e9n es posible utilizar microinteracciones en los elementos de b\u00fasqueda. Como es el caso del siguiente ejemplo en el que el usuario introduce un t\u00e9rmino que desea buscar y como respuesta, el sistema hace girar el campo de b\u00fasqueda indicando que se ha accionado la tarea<\/strong>. Tras esto, y como buena pr\u00e1ctica a se\u00f1alar, se despliegan los resultados agilizando la navegaci\u00f3n del usuario.<\/p>\n

      As\u00ed mismo, se puede hacer uso de las microinteracciones en t\u00e9rminos de accesibilidad<\/strong><\/a>. Como se puede apreciar en el ejemplo, mientras el usuario rellena los diferentes campos de texto, el rotulado de los mismos se desplaza a una zona superior cambiando ligeramente su apariencia, pero sin desaparecer. Lo cual mejorar\u00e1 sustancialmente la experiencia de uso.<\/p>\n


      \n<\/a>      \"Accesibity\"<\/a><\/p>\n

      Fuente: dribbble.com<\/a><\/p>\n

       <\/p>\n

      Por otro lado, las microinteracciones pueden ser \u00fatiles para facilitar algunas tareas<\/strong> que sean poco estimulantes como la configuraci\u00f3n de una contrase\u00f1a. Implementando peque\u00f1os cambios como los mostrados en el siguiente ejemplo, se podr\u00e1 simplificar el trabajo al usuario. Dado que se le indica de manera sencilla los estados en los que se encuentra la contrase\u00f1a que est\u00e1 creando hasta llegar al m\u00e1s adecuado.<\/p>\n

      \"password\"<\/a><\/p>\n

      Fuente: dribble.com<\/a><\/p>\n

       <\/p>\n

      Igualmente, las microinteracciones pueden usarse en ecommerce<\/strong>\u00a0para mostrar de manera visual una ficha de producto. Esto es una buena pr\u00e1ctica sabiendo que es esencial mostrar en todo momento el producto final que adquirir\u00e1 el usuario. Como se puede observar en el ejemplo, el producto va cambiando de color en funci\u00f3n del escogido por el cliente.<\/p>\n

       <\/p>\n

      \"ecommerce<\/a><\/p>\n

      Fuente: dribbble.com<\/a><\/p>\n

       <\/p>\n

      Concluimos con otro ejemplo para ecommerces en un paso clave de las compras online: introducir los art\u00edculos al carrito. Como podemos observar, la microinteracci\u00f3n permite apreciar al usuario que los art\u00edculos que desea se han desplazado hasta el carrito<\/strong>, en la esquina superior derecha, modificando tambi\u00e9n el precio y la cantidad.<\/p>\n

       <\/p>\n

      \"add<\/a><\/p>\n

      Fuente: dribbble.com<\/a><\/p>\n

      <\/h2>\n

      \u00bfQu\u00e9 se debe tener en cuenta cu\u00e1ndo se dise\u00f1an microinteracciones?<\/h2>\n

      Como ya se ha mencionado anteriormente, estos peque\u00f1os elementos ofrecen numerosas ventajas en la experiencia de usuario y, adem\u00e1s, en cierta manera permiten a los dise\u00f1adores dejar volar su imaginaci\u00f3n buscando nuevas formas de sorprender a los usuarios finales. No obstante, para dise\u00f1ar microinteracciones es conveniente<\/strong>:<\/p>\n