El auge de las interfaces conversacionales está aumentando año tras año debido los grandes avances en el reconocimiento por voz y a las APIs que permiten a los desarrolladores integrar de manera sencilla estas funcionalidades dentro de las distintas aplicaciones, por ejemplo en la búsqueda de contenidos usando la voz.
Con la introducción por parte de Chrome y Firefox de la API «Web Speech» de HTML5 se abre un mundo de posibilidades en la interacción de los usuarios con la web pero no olvidemos además la importancia en cuanto a mejora en «accesibilidad» para personas con ciertas discapacidades.
Actualmente, el uso a nivel global de navegadores que soportan esta API es de un 61%
y un 73% en España (fuente: https://caniuse.com/#feat=speech-recognition). En
Chrome esta API viene disponible por defecto aunque bajo protocolo HTTPS mientras que en
Firefox es necesario habilitarla en la configuración. Safari u otros navegadores en iOS no la
admiten por el momento.
¿Por qué implementar esta API?
A continuación se indican algunos de los beneficios del uso de la API de reconocimiento de voz en una web/ecommerce de cara a los visitantes/clientes:
Usabilidad:
- Interacciones más rápidas con los formularios.
- Mayor facilidad en la navegación entre las secciones de un site.
- Pequeña curva de aprendizaje en la forma de interacción, hablamos desde muy temprana edad.
Accesibilidad: (bajo la perspectiva de accesibilidad de la W3C)
- Personas que podrían depender de esta característica:
- Las personas con discapacidades físicas que no pueden usar el teclado o el ratón.
- Las personas con enfermedades crónicas, como las lesiones por estrés repetitivo, que necesitan limitar o evitar el uso del teclado o el ratón.
- Las personas con discapacidades cognoscitivas y de aprendizaje que necesitan usar la voz en lugar de escribir.
- Beneficios adicionales para personas en situaciones especiales:
- Personas con limitaciones temporales, como un brazo roto.
- Personas que prefieren hablar en lugar de escribir, por ejemplo, mientras realizan múltiples tareas.
Ejemplo de implementación en Magento 2
A continuación vamos a ver un ejemplo práctico de implementación de esta API y así poder buscar vía voz en Magento 2.
Para ello crearemos un módulo: Magevoice_SearchByVoiceBasic.
Imagen de ejemplo con el módulo ya montado para que os hagáis una mejor idea de la funcionalidad a implantar: (se incluirá el icono de un micrófono para activar la búsqueda por voz)
Pasos principales para la creación del módulo (más adelante se facilita el código completo):
1. Creación de estructura del módulo a partir del directorio en donde tengamos instalado Magento 2.
app/code/Magevoice/SearchByVoiceBasic.
2. Ficheros de registro del módulo: registration.php, composer.json, /etc/module.xml.
3. A continuación montaremos la estructura necesaria para sobrescribir la plantilla con el formulario de búsqueda que viene por defecto en el theme de Magento 2: form.mini.phtml , es aquí donde incluiremos una capa con un icono de un micrófono para poder inicializar la acción de la búsqueda por voz.
- app/code/Magevoice/SearchByVoiceBasic/view/frontend/
- requirejs-config.js
- templates/searchbyvoice_js.phtml
- templates/form.mini.phtml
- layout/default.xml
- web/
- js/searchbyvoicebasic.js
- css/source/_module.less
- images/ mic_red_light.gif
- images/ mic_gray_light.gif
4. De los anteriores ficheros comentamos los 2 que principalmente van a llevar «el peso» de la integración con la API Web Speeh: form.mini.phtml y searchbyvoicebasic.js.
En form.mini.phtml ubicamos las capas que nos permitirán mostrar el icono tanto para desktop y tablet como para mobile. (clases: searchbyvoice_mic)
En searchbyvoicebasic.js preparamos la función de Javascript que nos permitirá usar la API Web Speech cuando los usuarios pulsen en el icono del micro, se ha añadido la sentencia de envío de formulario (document.getElementById(‘search_mini_form’).submit();) después de que se produzca el reconocimiento de las palabras pronunciadas (por defecto el idioma a reconocer es en inglés: en-US, aunque se puede configurar con distintos valores como por ejemplo: es-AR ó es-ES).
Asignamos al evento de pulsar la capa con el icono del micrófono la función que hemos preparado anteriormente: startDictation().
El módulo completo de ejemplo está disponible en la siguiente url: https://github.com/abenedi/m2_search_by_voice_basic o también puedes descargarlo desde el Marketplace de Magento: https://marketplace.magento.com/abenedi-searchbyvoice.html
Ejemplo online: https://searchbyvoice.aureliobenedi.com/ (algunas búsquedas de ejemplo: Jacket, T-Shirt, Water Bottle, Leggings).
Mejora de la compatibilidad de esta API
Existen otras APIs que permiten conseguir una mayor compatibilidad entre navegadores y versiones.
Personalmente he testado la API WATSON de IBM consiguiendo muy buenos resultados aunque tiene un coste ‘pequeño’ el cual depende del número de minutos de voz reconocidos al mes. Disponen de una versión de prueba de un mes. En este enlace se puede interactuar con demos y testar los diferentes usos de esta API: https://speech-to-text-demo.ng.bluemix.net/
Otras APIs:
Aquí hay un buen artículo donde comparan estos tres servicios de reconocimiento de voz de: IBM Watson, Google Speech y Nuance.
Conclusiones
La «búsqueda por voz» es tan sólo un ejemplo de uso de la API «Web Speech», se podrían realizar otras funcionalidades como por ejemplo: implementar comandos para la navegación, hacer el proceso de checkout más cómodo al no tener que escribir la dirección de entrega desde un Smartphone (sino dictándola), conectar la API a un Chatbot experimentando con un asistente conversacional… Se abre un abanico de posibilidades para crear nuevas funcionalidades que mejoren tanto la accesibilidad como la usabilidad de la web.
Por otro lado hay un hándicap importante a superar y es que el resto de navegadores vayan incorporando este servicio de API. Veremos cuál es la evolución en este sentido aunque las aplicaciones de tipo conversacional han venido para quedarse. 😉