Donc, vous souhaitez créer une fonctionnalité d'observation automatique @EMTION?

La saisie semi-automatique est une fonctionnalité familière: saisissez une zone de recherche et des suggestions apparaissent. Bien que commun dans le commerce électronique, son utilisation comme amélioration de la frappe est souvent négligée.

Les applications Web modernes vont au-delà des zones de texte simples. Les plateformes sociales et de productivité comme Twitter, Slack et Notion utilisent le modèle "@mention", permettant aux utilisateurs de référencer d'autres personnes en utilisant des déclencheurs comme "@" ou "#". Cela améliore l'expérience de frappe en fournissant un panneau de suggestion, permettant un référence rapide sans quitter le clavier.

Ce modèle augmente la cohérence du contenu généré par l'utilisateur. Les hashtags, par exemple, créent des données semi-structurées dans le texte de forme libre, aidant la catégorisation de contenu. Mentions Créer des graphiques de connexion sur les ressources de l'application, simplifier les recommandations de contenu et l'analyse du comportement des utilisateurs.

Voir la démo en direct Voir comment nous l'avons construite ### Crafting efficace @Ementions

Une saisie automatique réussie de @mention devrait être transparente. Il agit comme un assistant utile, apprenant que vous tapez, mais sachant quand se retirer. Les utilisateurs peuvent ignorer les suggestions ou les utiliser facilement pour terminer leur entrée.

L'implémentation de Twitter ferme le panneau lorsque le mot typé n'est plus un jeton valide (par exemple, après un espace, car les poignées ne contiennent pas d'espaces). L'approche de Slack est plus flexible, permettant des espaces pour les recherches de nom complètes, en utilisant différentes heuristiques pour détecter l'intention des utilisateurs.

Après sélection, Twitter ferme le panneau, insère la mention et ajoute un espace pour la saisie continue. Ce détail apparemment petit contribue à une expérience utilisateur fluide.

Les mentions, une fois ajoutées, deviennent interactives. Sur Twitter, cliquer ou utiliser des touches Arrow pour sélectionner une mention rouvre le panneau, permettant l'édition et garantissant une notification correcte lors de l'envoi.

La bibliothèque d'observation automatique open source simplifie ce processus. Bien que idéalement adapté à l'algolie, il fonctionne avec toute source de données et facilite la création de fonctionnalités de saisie semi-automatique multi-source et accessibles.

Combiner les types de suggestions

L'utilisation de symboles distincts (par exemple, "@" pour les gens ", #" pour les hashtags) fonctionne bien avec quelques types clairement définis. Cependant, avec des types plus nombreux ou moins distincts, les utilisateurs peuvent avoir du mal à se souvenir de tous les symboles.

La recherche fédérée (multi-source) permet d'attribuer plusieurs types par symbole, améliorant la découverte sans les utilisateurs écrasants avec de nombreux modèles.

Slack mélange les suggestions, les différenciant visuellement (icônes, badges). Les groupes de notion suggèrent les suggestions par type (dates, personnes, liens), favorisant la cohérence et la mémoire des muscles utilisateur. Ce regroupement peut être réalisé via des requêtes ou des outils multi-source comme l'API Reshape de la saisie semi-automatique.

La notion utilise également des espaces réservés dynamiques, des suggestions prédictives qui mettent à jour lorsque l'utilisateur navigue, clarifiant l'action associée à chaque suggestion. Ils utilisent intelligemment les propriétés personnalisées CSS et JavaScript pour y parvenir.

La gestion du nombre de résultats de plusieurs sources peut être difficile. Un panneau de hauteur fixe avec une barre de défilement ou une utilisation de mécanismes de combinaison / limitation (comme l'API Reshape de la saisie semi-automatique) peut en résoudre.

Expansion au-delà de la recherche de base

La polyvalence du modèle @mention s'étend au-delà de sa mise en œuvre typique. La recherche Emoji de Slack (en utilisant ":") et l'insertion d'action de Notion ("/") utilisent des mécanismes similaires: un caractère spécial ouvre un panneau de suggestion, permettant la sélection et l'application.

L'approche de la notion met en évidence l'adaptabilité du modèle à travers des modèles d'articles personnalisés et du style. Cela crée une expérience familière et fluide sur diverses applications.

Voir démo ### au-delà de l'achèvement de type

Bien que les mentions améliorent la frappe, les boîtes de composition peuvent fonctionner comme des interfaces conversationnelles. Le raccourci "/" de la notion déclenche l'insertion d'action, créant de nouveaux blocs d'un type spécifique.

Ce modèle "Slash Command", popularisé dans les jeux, est désormais standard dans des applications comme Slack et Discord. Il centralise les tâches communes, réduisant la friction et la charge cognitive. Par exemple, une commande "/ zoom" simplifie l'initiation et le partage des réunions de zoom.

Auparavant limité aux utilisateurs de puissance, les commandes de slash deviennent plus répandues et conviviales. L'augmentation de l'expérience de frappe ne consiste pas à ajouter des fonctionnalités complexes, mais à fournir les bonnes informations au bon moment, à réduire la charge cognitive et à améliorer l'expérience utilisateur.

Voir la démo

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!