{"id":13746,"date":"2020-05-21T12:46:48","date_gmt":"2020-05-21T10:46:48","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=13746"},"modified":"2023-11-28T11:12:49","modified_gmt":"2023-11-28T10:12:49","slug":"como-disenar-interfaces-de-usuario-por-voz","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/como-disenar-interfaces-de-usuario-por-voz\/","title":{"rendered":"\u00bfC\u00f3mo dise\u00f1ar interfaces de usuario por voz?"},"content":{"rendered":"

Seg\u00fan los datos que revela Google en <\/span>este art\u00edculo<\/span><\/a>, el 52% de las personas que tienen un asistente de voz en casa<\/strong> lo mantienen una zona com\u00fan y el 62%, de los que lo usan regularmente, afirman que comprar\u00e1n algo a trav\u00e9s de \u00e9l<\/strong> en el pr\u00f3ximo mes.<\/span><\/p>\n

 <\/p>\n

\u00bfQu\u00e9 es una interfaz por voz?<\/b><\/h2>\n

Las interfaces de usuario por voz (en ingl\u00e9s VUI, Voice User Interface<\/em>)\u00a0<\/span>son las que permiten interactuar a trav\u00e9s de comandos de voz<\/strong> como por ejemplo los\u00a0asistentes virtuales: Siri, Alexa o Google Assistant. Los que no requieren ni contacto visual ni manual.<\/strong><\/span><\/p>\n

Estos asistentes virtuales est\u00e1n presentes en aparatos que hoy en d\u00eda est\u00e1n muy de moda y adem\u00e1s, son muy accesibles dado que se pueden adquirir en cualquier comercio a un precio muy razonable. Teniendo en cuenta estos factores,\u00a0 la tendencia del mercado es favorable y todo apunta a que esta tecnolog\u00eda seguir\u00e1 creciendo y evolucionando. Dado que adem\u00e1s de por s\u00ed mismos, tambi\u00e9n est\u00e1n presentes en otros dispositivos tecnol\u00f3gicos como m\u00f3viles, televisiones, relojes digitales o aparatos de limpieza.<\/span><\/p>\n

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

Ejemplo de un asistente de voz integrado en un smartphone. De @Hero en Dribbble<\/a>.<\/em><\/p>\n

<\/h2>\n

\u00bfQu\u00e9 esperan los usuarios de de las interfaces por voz?\u00a0<\/b><\/h2>\n

Los humanos como seres sociales que son, muestran\u00a0cierto inter\u00e9s en comunicarse con este tipo de interfaces<\/strong>. No obstante, la comunicaci\u00f3n con la tecnolog\u00eda no es la misma que la interpersonal. Por ello, es l\u00f3gico que surja la duda de hasta d\u00f3nde ser\u00e1n capaces de comprendernos.<\/span><\/p>\n

Para que estos dispositivos funcionen correctamente, deben\u00a0ofrecer respuestas naturales.<\/strong> No obstante, todav\u00eda es complicado que puedan desenvolverse ante excesos de informaci\u00f3n o con di\u00e1logos demasiados escuetos.<\/span><\/p>\n

Es habitual que los usuarios que interact\u00faen con estos dispositivos esperen o pretendan superar sus expectativas. Pero, es importante explicar que las interfaces por voz est\u00e1n dise\u00f1adas para resolver tareas cortas y espec\u00edficas<\/strong>. Claros ejemplos de esto son: pedir comida a domicilio, llamar a alguien por tel\u00e9fono, preguntar sobre el tiempo o una ubicaci\u00f3n, conocer la noticias, escuchar una canci\u00f3n o la radio o programar una alarma y largo etc\u00e9tera.<\/span><\/p>\n

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

Ejemplo de un usuario haciendo un pedido por voz. De @Bernadetta Pastuszka en Dribbble<\/a>.<\/em><\/p>\n

<\/h2>\n

\u00bfC\u00f3mo dise\u00f1ar una interfaz por voz?<\/h2>\n

A la hora de dise\u00f1ar una experiencia para los usuarios es imposible seguir las mismas pautas que se aplican a las interfaces gr\u00e1ficas<\/strong> dado que carecen de recursos visuales. Esto impide que los usuarios puedan navegar y reconocer por s\u00ed mismos sus opciones. Por ello es importante que el dispositivo explique a los usuarios sus posibilidades a trav\u00e9s de un di\u00e1logo constante. Sin embargo, la informaci\u00f3n que se aporte debe estar bien medida, dado que debe poder ser recordada con facilidad.<\/p>\n

Informar a los usuarios sobre las funcionalidades disponibles<\/h3>\n

A pesar de que los usuarios desconocen todas las posibilidades que brindan estos dispositivos es com\u00fan que se lancen a hacer preguntar o peticiones. En esos momentos, es cuando la interfaz debe brindar a los usuarios las diferentes opciones. Por ejemplo, hablando sobre una aplicaci\u00f3n meteorol\u00f3gica se podr\u00eda mencionar: \u201cPuede solicitar el tiempo para hoy o un pron\u00f3stico semanal\u201d. O en una aplicaci\u00f3n de mapas se podr\u00eda decir: \u201cPuedo encontrar la peluquer\u00eda m\u00e1s cercana o trazar una ruta hasta el trabajo\u201d.<\/p>\n

De este modo, el dispositivo confirma que ha entendido la petici\u00f3n del usuario y proporciona diferentes opciones finales mediante una respuesta r\u00e1pida.<\/strong><\/p>\n

 <\/p>\n

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

Ejemplo de una conversaci\u00f3n con un asistente de @Dannniel en Dribbble<\/a><\/em><\/p>\n

Ubicar a los usuarios<\/h3>\n

En las interfaces visuales se utilizan muchos recursos para ubicar al usuario, explicar d\u00f3nde se encuentra y el camino que ha realizado hasta llegar ah\u00ed. Un claro ejemplo de esto son las breadcrumbs<\/em> o migas de pan. Este mismo recurso debe estar presente en las interfaces por voz. Porque no solo se indica al usuario donde se encuentra sino que tambi\u00e9n se informa de la funcionalidad que est\u00e1 utilizando.<\/strong><\/p>\n

Un ejemplo de esto ser\u00eda ante una pregunta sobre el tiempo responder no solo la temperatura y las condiciones climatol\u00f3gicas, sino dar un contexto m\u00e1s global al usuario: \u201cEl pron\u00f3stico de tiempo para hoy es soleado, hasta 24\u00baC\u201d.<\/p>\n

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

Animaci\u00f3n de @DenisChikita en Dribble<\/a><\/em><\/p>\n

<\/h3>\n

Limitar la informaci\u00f3n proporcionada<\/h3>\n

Como se ha comentado anteriormente, la cantidad de informaci\u00f3n que los usuarios son capaces de comprender y recordar es limitada<\/strong>. Por ello, los dise\u00f1adores del asistente Alexa de Amazon no recomiendan ofrecer m\u00e1s de tres opciones diferentes en una interacci\u00f3n. Adem\u00e1s, comentan que si se dispone de una lista larga de opciones, es recomendable agruparlas y proporcionar al usuario las m\u00e1s populares. No obstante, tambi\u00e9n se puede comunicar al usuario que hay m\u00e1s opciones disponibles y que puede preguntar por ellas. Los expertos destacan que no son partidarios de enumerar una lista de opciones como por ejemplo: los robots de los contestadores autom\u00e1ticos.<\/p>\n

<\/h3>\n

Utilizar se\u00f1ales visuales<\/h3>\n

Siempre que sea posible, es recomendable indicar al usuario de alguna manera visual que est\u00e1 siendo escuchado.<\/strong> Dado que si \u00fanicamente el sistema se comunica con el usuario por su voz, hasta que este no haya terminado de hablar no sabr\u00e1 si va a recibir una respuesta por parte del dispositivo. Los indicativos visuales como las luces leds permiten al usuario saber que su mensaje est\u00e1 siendo registrado.<\/p>\n

 <\/p>\n

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

Animaci\u00f3n de @RockEagle en Dribbble<\/a><\/em><\/p>\n

<\/h3>\n

Dar un giro a tus prototipos<\/h3>\n

Los wireframes tal y como se conocen no tienen sentido para las interfaces por voz<\/strong> y deben reinventarse. En los prototipos se debe configurar conversaciones de prueba para diferentes roles hasta dar con la mayor\u00eda de posibilidades. Adem\u00e1s, en este tipo de dise\u00f1os conversacionales<\/strong> el objetivo principal es crear interacciones basadas en la forma en la que las personas hablan y no en c\u00f3mo escriben. Por ello es recomendable comenzar dise\u00f1ando historias de usuario as\u00ed como elaborar conversaciones de prueba entre los usuarios y el sistema para diferentes escenarios.<\/p>\n

Adem\u00e1s, es importante tener en cuenta posibles interrupciones que a los usuarios les puede suceder mientras est\u00e9n interact\u00faando con el dispositivo. Del mismo modo que en el dise\u00f1o de interfaces visuales, el testing sigue siendo una herramienta clave dado que permite<\/strong>:<\/p>\n

    \n
  • Recoger diferentes formas de hablar y de expresarse.<\/li>\n
  • Detectar los problemas m\u00e1s relevantes.<\/li>\n
  • Identificar las conversaciones o comportamientos m\u00e1s habituales.<\/li>\n<\/ul>\n

    <\/h3>\n

    Sorprender a los usuarios<\/h3>\n

    Ante mensajes complicados de entender, los dispositivos pueden no funcionar correctamente. Por ello, tanto en la resoluci\u00f3n de errores como en la proporci\u00f3n de ayuda a los usuarios es interesante lanzar mensajes con cierta elegancia y sorprendiendo al usuario<\/strong>. Para tratar de guiarlo hacia una funcionalidad que s\u00ed pueda realizarse y conseguir que el usuario la solicite.<\/p>\n

     <\/p>\n

    Todav\u00eda hay muchas maneras de dise\u00f1ar una buena experiencia de usuario para una interfaz por voz. Aunque, como en las interfaces gr\u00e1ficas, el usuario final debe prevalecer como pieza central del dise\u00f1o<\/strong>. No obstante, en este \u00e1mbito no solo hay que pensar en cu\u00e1les son sus necesidades sino tambi\u00e9n en su contexto social y su manera de expresarse para que nos ayuden a elaborar conversaciones y di\u00e1logos naturales.<\/span><\/p>\n

    \n
    \n
    \n
    \n

    \u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de UX\/UI?<\/p>\n

    Contacta con nuestro equipo de User Research, User Experience y User Interface<\/p>\n <\/div>\n

    \n \n
    \n

    <\/p>

      <\/ul><\/div>\n
      \n
      \n<\/fieldset>\n
      \n\t
      \n\t\t
      \n\t\t\t

      <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

      \n\t\t\t

      <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

      \n\t\t
      \n\t\t\t

      <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

      \n\t\t\t

      <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

      \n\t\t
      \n\t\t\t

      <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

      \n\t\t
      \n\t\t\t