Saisie semi-automatique
Présentation
Le modèle de saisie semi-automatique propose des suggestions de texte prédictives à mesure que les utilisateurs saisissent des textes. Cette fonction améliore la vitesse, la précision et l'efficacité lors de la saisie. Il réduit également les erreurs lors de la saisie d'expressions ou de codes complexes en affichant une liste de suggestions pertinentes. La fonctionnalité de saisie semi-automatique est polyvalente et prend en charge divers champs et environnements de codage. Par conséquent, la saisie semi-automatique convient à différents scénarios de saisie et de développement.
Quand l'utiliser
- Entrées complexes : permet de saisir des expressions, des formules ou des extraits de code complexes dans les éditeurs de code, les requêtes de données ou les fonctions mathématiques.
- Termes ou commandes fréquemment utilisés : dans des scénarios avec des saisies courantes, telles que des actions de workflow ou des règles de tarification, pour rationaliser le processus avec des suggestions prédéfinies.
- Amélioration de la précision : lorsque la précision de la saisie est essentielle, comme avec les expressions JMESPath ou la syntaxe de programmation, pour garantir une sélection correcte des termes sans mémorisation.
- Environnements multilingues : pour les applications prenant en charge plusieurs langages ou systèmes de programmation (par exemple, Python, JavaScript, JMESPath), pour faciliter la gestion des suggestions entre les langages et faciliter le changement de contexte.
Quand ne pas l'utiliser
- Entrées simples : si le champ de saisie attend des réponses simples d'un seul mot (par exemple, un nom d'utilisateur, une adresse e-mail ou une entrée de formulaire de base), l'implémentation de la saisie automatique peut compliquer l'expérience utilisateur et est inutile.
- Données trop dynamiques ou imprévisibles : lorsque la saisie utilisateur est unique ou imprévisible, par exemple dans les champs de texte de forme libre ou que les commentaires proposant des suggestions dans ces situations peuvent conduire à des résultats non pertinents ou distrayants.
- Scénarios critiques pour la vitesse : dans les scénarios où la vitesse prime sur la précision et où les utilisateurs connaissent les entrées (par exemple, les barres de recherche rapide), la saisie automatique peut ralentir l'interaction au lieu de l'améliorer.
- Ensembles de données limités : si l'ensemble de données utilisé pour générer des suggestions est trop petit ou statique, la fonction de saisie semi-automatique peut ne pas fournir de valeur significative et peut encombrer l'interface utilisateur avec des options non pertinentes ou inutiles.
Structure
1. Liste déroulante à partir d'un champ
Cette version de la fonctionnalité de saisie semi-automatique est implémentée dans des champs de saisie standard dans lesquels les utilisateurs doivent saisir des termes prédéfinis ou fréquemment utilisés. Au fur et à mesure de la saisie de l'utilisateur, une liste déroulante s'affiche, remplie de suggestions correspondant aux caractères saisis. Les principales caractéristiques sont les suivantes :
- Suggestions en temps réel au fur et à mesure de la saisie de l'utilisateur
- Une bibliothèque prédéfinie de termes pour les suggestions
- Options de navigation et de sélection à l'aide du clavier ou de la souris
- Possibilité de catégoriser ou de différencier visuellement les suggestions à l'aide d'icônes
2. Liste déroulante à partir d'un éditeur de code (IDE)
Cette version s'intègre aux éditeurs de code (IDE) pour aider les développeurs à écrire du code avec plus d'efficacité. Au fur et à mesure que l'utilisateur saisit du texte, le modèle de saisie semi-automatique suggère des extraits de code, des fonctions ou des variables pertinents, en fonction du langage et du contexte. Les principales caractéristiques sont les suivantes :
- Suggestions contextuelles basées sur le langage de codage utilisé
- Accès rapide aux fonctions, variables et éléments de syntaxe
- Prise en charge des environnements multilingues
- Options de saisie automatique qui peuvent réduire considérablement le temps de codage
- Icônes de fonctions, de classes ou de variables afin de fournir des repères visuels rapides
Recherche
Recherche standard
La recherche standard propose des suggestions basées sur un ensemble de données prédéfini et statique ou sur un ensemble de termes fréquemment utilisés. L'utilisateur commence à saisir des données et le système propose des options à partir de cet ensemble de données limité. Ceci est utile pour les scénarios où les données sont peu susceptibles de changer souvent, comme les workflows prédéfinis, les expressions de programmation communes ou les champs de données précédemment enregistrés. Les principales caractéristiques sont les suivantes :
- Suggestions basées sur une bibliothèque fixe ou des termes fréquemment utilisés
- Résultats plus rapides, car l'ensemble de données est généralement plus petit
Ce type de recherche convient aux environnements où les entrées sont cohérentes et connues. Il est idéal pour les entrées de formulaires simples ou les workflows avec une variation de données limitée.
Recherche active
La recherche active met à jour dynamiquement ses suggestions en fonction d'un ensemble de données plus vaste et évolutif. Au fur et à mesure que les utilisateurs saisissent des lettres, le système interroge activement les données en temps réel, proposant les options les plus pertinentes et les plus récentes. C'est la solution idéale pour les environnements complexes ou dynamiques, tels que les éditeurs de code ou les générateurs de requêtes, où les données changent fréquemment et nécessitent un accès en temps réel. Les principales caractéristiques sont les suivantes :
- Suggestions dynamiques en temps réel basées sur des interrogations actives d'ensembles de données volumineux ou en constante évolution
- Options contextuelles en fonction de la saisie utilisateur et de l'environnement
Ce type de recherche nécessite plus de puissance de traitement, mais fournit des suggestions plus pertinentes et actuelles. Il convient aux environnements où les données sont fréquemment mises à jour ou nécessitent des ajustements en temps réel.
Langages pris en charge
La fonction de saisie semi-automatique est conçue pour prendre en charge plusieurs langages de programmation et de requête, ce qui la rend adaptable à divers cas d'utilisation, des scripts aux calculs mathématiques :
- Python : suggère des fonctions, des bibliothèques et des éléments de syntaxe spécifiques à Python.
- JavaScript : inclut la prise en charge des fonctions JavaScript intégrées, de la syntaxe ES6+ et des bibliothèques fréquemment utilisées.
- C/C++ : aide l'utilisateur avec les fonctions de bibliothèque standard, les classes et la syntaxe couramment utilisée en C/C++.
- Ruby : propose des fonctions, des modules et une syntaxe Ruby pertinents.
- JMESPath : fournit des suggestions pour les expressions JMESPath, qui sont utiles pour interroger et manipuler des données JSON.
- Fonctions mathématiques : prend en charge les fonctions mathématiques standard, telles que SUM, AVERAGE, COUNT, MIN, MAX
Icônes et balises
Pour améliorer la convivialité et l'esthétique de la liste déroulante de saisie semi-automatique, des éléments supplémentaires sont incorporés :
- Icônes : les icônes sont utilisées pour représenter différents types ou catégories de suggestions. Ces icônes fournissent un repère visuel rapide pour aider les utilisateurs à différencier les types de suggestions en un coup d'œil.
- Étiquettes : les balises sont des identifiants supplémentaires qui peuvent être affichés à côté de chaque suggestion. Ces balises offrent des informations contextuelles, telles que la langue ou la catégorie de fonction, ce qui permet aux utilisateurs de comprendre rapidement la pertinence de chaque suggestion.
Interactions
Les utilisateurs peuvent interagir avec le modèle de saisie semi-automatique des façons suivantes :
- Saisie au clavier : les utilisateurs peuvent saisir des données dans le champ ou dans l'éditeur de code pour déclencher la liste déroulante et parcourir les suggestions à l'aide des touches fléchées.
- Saisie à l'aide de la souris : les utilisateurs peuvent cliquer directement sur une suggestion pour la sélectionner dans la liste déroulante.
- Sélection de la balise : il est également possible de cliquer sur les balises, ce qui permet aux utilisateurs de filtrer les suggestions en fonction de critères ou de catégories spécifiques.
Création de thèmes
Par défaut, le thème et la marque correspondent à ceux de l'application, sauf s'ils sont remplacés.
Il est possible de donner un thème aux modèles pour répondre à des exigences spécifiques en matière de valorisation de la marque et aux besoins des clients. Cela inclut des éléments visuels tels que les couleurs, la typographie, les icônes, les boutons et d'autres composants et éléments graphiques.
En savoir plus sur les thèmes avec les jetons de conception
Prise en charge de la recherche
La recherche de ce modèle a consisté en une analyse concurrentielle. L'analyse concurrentielle est une technique de recherche que vous pouvez utiliser pour comparer et comprendre ce sur quoi les autres travaillent dans le même domaine. Les concepteurs d'expérience utilisateur ont analysé les modèles de sept autres bibliothèques de conception. Ils ont recherché les forces et les faiblesses relatives, les tendances et les différences. Les concepteurs ont pris ces informations, trouvé des points communs et créé un modèle basé sur ces pratiques.
Ressources
Téléchargez un fichier ZIP contenant tous les derniers modèles Jutro et commencez à concevoir des expériences.