Predicción de escritura

Descripción general

El patrón de predicción de escritura proporciona sugerencias de texto predictivo a medida que los usuarios escriben. Esta función mejora la velocidad, la precisión y la eficiencia durante el ingreso de datos. También reduce los errores al ingresar expresiones complejas o código, ya que muestra una lista de sugerencias relevantes. La funcionalidad de predicción de escritura es versátil y admite varios campos y entornos de programación. Como resultado, la predicción de escritura es adecuada para diferentes situaciones de desarrollo e ingreso de información.

Cuándo se debe utilizar

• Entradas complejas: Para ingresar expresiones complejas, fórmulas o fragmentos de código en editores de código, consultas de datos o funciones matemáticas.
• Términos o comandos de uso frecuente: En casos con ingresos de información frecuente, como acciones de flujo de trabajo o reglas de tasación, para agilizar el proceso mediante sugerencias predefinidas.
• Mejora de la precisión: Cuando la precisión del ingreso de información es fundamental, como con las expresiones JMESPath o la sintaxis de programación, para garantizar la selección correcta de términos sin necesidad de memorizarlos.
• Entornos de múltiples lenguajes: Para aplicaciones que admiten varios lenguajes o sistemas de programación (por ejemplo, Python, JavaScript, JMESPath), para ayudar a administrar sugerencias entre lenguajes y facilitar el cambio de contexto.

Cuándo no se debe utilizar

• Entradas simples: Si en el campo de entrada se prevén respuestas simples de una palabra (por ejemplo, un nombre de usuario, una dirección de correo electrónico o una entrada de formulario básico), la implementación de la predicción de escritura puede complicar la experiencia del usuario y es innecesaria.
• Datos demasiado dinámicos o impredecibles: Cuando la entrada del usuario es única o muy impredecible, como en campos de texto de forma libre o comentarios, ofrecer sugerencias puede conducir a resultados irrelevantes o distraer.
• Casos de velocidad crítica: Cuando se prioriza la velocidad sobre la precisión y los usuarios están familiarizados con las entradas (por ejemplo, barras de búsqueda rápida), la predicción de escritura puede ralentizar la interacción en lugar de mejorarla.
• Conjuntos de datos limitados: Si el conjunto de datos utilizado para generar sugerencias es demasiado pequeño o estático, es posible que la función de predicción de escritura no proporcione un valor significativo y sature la interfaz de usuario con opciones irrelevantes o innecesarias.

Anatomía

1. Menú desplegable desde un campo

Esta versión de la función de predicción de escritura se implementa en campos de entrada estándares donde los usuarios deben ingresar términos predefinidos o de uso frecuente. A medida que el usuario escribe, aparece una lista desplegable que se completa con sugerencias que coinciden con los caracteres ingresados. Características clave:

• Sugerencias en tiempo real a medida que el usuario escribe.
• Biblioteca predefinida de términos para sugerencias.
• Opciones de navegación y selección mediante la entrada del teclado o el ratón.
• Capacidad de categorizar visualmente o diferenciar sugerencias mediante íconos.

2. Desplegable desde un editor de código (IDE)

Esta versión se integra con editores de código (IDE) para ayudar a los desarrolladores a escribir código con mayor eficiencia. A medida que el usuario escribe, el patrón de predicción de escritura sugiere fragmentos de código, funciones o variables relevantes, según el lenguaje y el contexto. Características clave:

• Sugerencias sensibles al contexto que se basan en el lenguaje de programación utilizado.
• Acceso rápido a funciones, variables y elementos de sintaxis.
• Compatibilidad con entornos de múltiples lenguajes.
• Opciones de autorrelleno que pueden reducir significativamente el tiempo de programación.
• Íconos para funciones, clases o variables para proporcionar indicaciones visuales rápidas.

Búsqueda

Búsqueda estándar

La búsqueda estándar ofrece sugerencias basadas en un conjunto de datos estático predefinido o en un conjunto de términos de uso frecuente. El usuario comienza a escribir y el sistema ofrece opciones de este conjunto de datos limitado. Esto es útil para casos en los que es poco probable que los datos cambien con frecuencia, como flujos de trabajo predefinidos, expresiones de programación comunes o campos de datos guardados anteriormente. Características clave:

• Sugerencias basadas en una biblioteca fija o en términos de uso frecuente.
• Resultados más rápidos, ya que el conjunto de datos suele ser más pequeño.

Este tipo de búsqueda es adecuado para entornos en los que las entradas son coherentes y bien conocidas. Es ideal para entradas de formularios simples o flujos de trabajo con pocas variaciones de datos.

Búsqueda activa

La búsqueda activa actualiza dinámicamente sus sugerencias en función de un conjunto de datos más grande y evolutivo. A medida que los usuarios escriben, el sistema consulta activamente los datos en tiempo real y proporciona las opciones más relevantes y actualizadas. Esto es ideal para entornos complejos o dinámicos, como editores de código o generadores de consultas, donde los datos cambian con frecuencia y requieren acceso en tiempo real. Características clave:

• Sugerencias dinámicas en tiempo real basadas en la consulta activa de conjuntos de datos grandes o en constante cambio.
• Opciones sensibles al contexto según la entrada del usuario y el entorno.

Este tipo de búsqueda requiere más potencia de procesamiento, pero proporciona sugerencias más relevantes y actualizadas. Es adecuado para entornos en los que los datos se actualizan con frecuencia o requieren ajustes en tiempo real.

Lenguajes compatibles

La función de predicción de escritura es compatible con múltiples lenguajes de programación y consulta, lo que la hace adaptable a varios casos de uso, desde secuencias de comandos hasta cálculos matemáticos:

• Python: Sugiere funciones, bibliotecas y elementos de sintaxis específicos de Python.
• JavaScript: Incluye compatibilidad con funciones JavaScript integradas, sintaxis ES6+ y bibliotecas de uso frecuente.
• C/C++: Ayuda con las funciones, las clases y la sintaxis de biblioteca estándar de uso frecuente en C/C++.
• Ruby: Ofrece funciones, módulos y sintaxis relevantes de Ruby.
• JMESPath: Proporciona sugerencias para expresiones JMESPath, que son útiles en la consulta y manipulación de datos JSON.
• Funciones matemáticas: Admite funciones matemáticas estándares, como SUM, AVERAGE, COUNT, MIN, MAX.

Íconos y etiquetas

Para mejorar la facilidad de uso y la estética del menú desplegable de predicción de escritura, se incorporaron elementos adicionales:

• Íconos: Los íconos se utilizan para representar diferentes categorías o tipos de sugerencias. Estos íconos proporcionan una indicación visual rápida para ayudar a los usuarios a diferenciar entre tipos de sugerencias a simple vista.
• Etiquetas: Las etiquetas son identificadores adicionales que se pueden mostrar junto con cada sugerencia. Estas etiquetas ofrecen información contextual, como el lenguaje o la categoría de función, lo que ayuda a los usuarios a entender rápidamente la relevancia de cada sugerencia.

Interacciones

Los usuarios pueden interactuar con el patrón de predicción de escritura de las siguientes maneras:

• Entrada de teclado: Los usuarios pueden escribir en el editor de campo o código para activar el menú desplegable y navegar por las sugerencias mediante las teclas de flecha.
• Entrada del ratón: Los usuarios pueden hacer clic directamente en una sugerencia para seleccionarla en el menú desplegable.
• Selección de etiquetas: También se puede hacer clic en las etiquetas, lo que permite a los usuarios filtrar las sugerencias en función de criterios o categorías específicos.

Tematización

De forma predeterminada, los temas y la marca coinciden con los de la aplicación, a menos que se invaliden.

Los patrones pueden adoptar ciertos temas para cumplir con los requisitos específicos de la marca y las necesidades del cliente. Esto incluye elementos visuales como colores, tipografía, íconos, botones y otros componentes o elementos gráficos.

Más información sobre la tematización con tokens de diseño

Investigación que lo avala

La investigación para este patrón consistió en un análisis competitivo. El análisis competitivo es una técnica de investigación que se utiliza para comparar y entender en qué están trabajando otros en el mismo campo. Los diseñadores de UX analizaron los patrones de otras 7 bibliotecas de diseño. Buscaron fortalezas y debilidades relativas, tendencias y diferencias. Los diseñadores utilizaron esa información, encontraron puntos en común y crearon un patrón basado en esas prácticas frecuentes.

Recursos

Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.

Biblioteca de patrones de Jutro (19.6 MB)