Traductor web online – Talkao

Diseño UI/UX Traductor online

Sobre el proyecto

Cliente: Talkao – URL: talkao.com/translator

Descripción del proyecto: El desarrollo del traductor online de Talkao nace de la idea de ofrecer una herramienta web tan potente y fluida como su app móvil: Talkao Translate, por lo que su interfaz se diseñó siguiendo las directrices de diseño ya establecidas en app, manteniendo una coherencia visual y funcional entre ambos productos digitales, priorizando la claridad, la accesibilidad y una experiencia fluida en cualquier resolución.

Planteamos el proyecto en 3 etapas, habilitando una función de traducción en cada una de ellas (Traductor de texto – Agentes de traducción con IA y Traductor de documentos)

Diseño UI - Traductor textos online

Diseño del traductor de texto

La primera fase consistió en diseñar un traductor de texto clásico, capaz de traducir tanto palabras individuales como textos extensos en tiempo real, mientras el usuario escribe. El objetivo es reproducir una experiencia similar a la de herramientas líderes como DeepL, priorizando la velocidad de respuesta, la legibilidad y una interfaz limpia que facilite la atención en el texto.

Traductor online - Diseño UI

Traducción por voz con STT

Para ampliar la accesibilidad y comodidad del usuario, se incorpora la funcionalidad de traducción por voz mediante STT (Speech to Text). Esto permite al usuario dictar palabras o frases y recibir la traducción de manera inmediata, ofreciendo una experiencia más natural y fluida, especialmente en dispositivos móviles o entornos donde escribir no resulta una tarea fácil ni práctica.

Diseño UI - Speech to text

Enriquecimiento del contenido con IA

A diferencia de otros traductores, este proyecto destaca por incorporar una capa de contenido dinámico generado por inteligencia artificial. Cuando el usuario traduce una palabra, el sistema ofrece información contextual adicional como:

  • Definición del término
  • Frases de ejemplo
  • Sinónimos
  • Conjugaciones verbales (en caso de verbos)

Este enfoque amplía el valor educativo y convierte el traductor en una herramienta más completa para el aprendizaje de idiomas.

Diseño UI - Pestañas traductor online
Diseño traductor online - mockup

Diseño del traductor de documentos

Además del traductor clásico, desarrollamos una función específica para traducir documentos compatibles con los formatos de texto más utilizados en el entorno profesional (DOC, TXT y PDF).

Traductor Online -  Diseño UI
Traductor Online - Diseño UI

Flujo de uso simplificado

Reducimos el flujo a lo más básico y sencillo:

  1. El usuario selecciona un archivo.
  2. Indica el idioma al que desea traducir.
  3. En la siguiente pantalla, puede añadir más documentos antes de proceder a la traducción.

Este enfoque escalonado evita confusiones, mejora la usabilidad y permite traducir uno o varios archivos en una sola sesión. Una vez completado el proceso, el usuario obtiene un archivo Word (DOC) con el texto completamente traducido, listo para editar, revisar o compartir.

Diseño UI UX - Traductor de documentos

Diseño de agentes de traducción IA

La funcionalidad de agentes de inteligencia artificial enfocados en la traducción ha sido diseñado para ofrecer al usuario la posibilidad de resolver dudas relacionadas con la traducción y aspectos culturales de otros idiomas haciendo uso de la inteligencia artificial conversacional.

Para agilizar el uso y cubrir necesidades frecuentes, se han incorporado un conjunto de accesos directos a prompts predefinidos, como: Traducir un email, revisar y corregir la gramática, conjugar un verbo, Buscar sinónimo o preparar frases útiles para un viaje. Estos accesos permiten al usuario obtener resultados precisos y contextualizados con solo un clic, sin necesidad de redactar instrucciones complejas.

Traductor online - Agente Inteligencia artificial

El sistema utiliza el modelo de inteligencia artificial de OpenAI, lo que garantiza traducciones de alta calidad, respuestas contextuales y conocimiento actualizado sobre aspectos culturales de distintos idiomas.

Además, el sistema incluye un historial de conversaciones, de modo que el usuario puede consultar interacciones previas, revisar traducciones anteriores o retomar dudas pendientes en cualquier momento. Esto garantiza continuidad y facilita el aprendizaje o la referencia rápida, mejorando significativamente la experiencia de uso.

El diseño se centra en la simplicidad, claridad y accesibilidad, asegurando que tanto usuarios novatos como avanzados puedan aprovechar al máximo la inteligencia artificial para sus necesidades lingüísticas y culturales.

Traductor con Inteligencia artificial - Chat

Diseño de componentes

Tras plantear propuestas en la fase inicial nos dimos cuenta de la necesidad de añadir nuevos componentes al sistema de diseño creado para la web de Talkao para mejorar la experiencia del usuario.

Estados de cada item para el selector de idioma (Por defecto – Idioma con STT – Seleccionado y Hover)
Extensión del botón secundario
Tooltips
Estados de tarjetas con acceso directo a funciones IA
Estados de feedback para la traducción de documentos
Componente UI - Mensajes
Estados de mensajes enviados por el usuario y por la IA

Adaptación responsive

En versión responsive redujimos la información de las funcionalidades del traductor , mostrando solo el icono. El resto de elementos siguen una estructura en cascada. Las pestañas de los resultados cargados mediante la IA son accesible a través de un sencillo scroll lateral.

Traductor web - responsive