Comment combiner la recherche et l'édition dans un widget?
Supposons une application dans laquelle vous travaillez avec des extraits de texte. Vous pouvez rechercher et réutiliser des extraits de code existants, ainsi que créer et modifier de nouveaux extraits de code.
Ainsi, nous avons essentiellement deux modes:
- Un mode de recherche et
- Un mode édition/création
Cela pourrait ressembler à cette maquette:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Un peu plus de détails:
- Toutes ces interactions ont lieu dans une boîte de dialogue positionnée au-dessus d'un document d'édition de texte principal ( pas affiché dans la maquette).
- Vous pouvez rechercher à la fois le contenu des extraits de texte et leurs clés. Cependant, seul le contenu est affiché dans le champ Texte (voir la maquette ci-dessus - ici le champ clé de texte est pas affiché).
- De nouveaux extraits sont enregistrés lorsque le bouton " Créer un nouveau texte" est cliqué.
- Si une suggestion est sélectionnée, l'utilisateur peut réutiliser ce texte avec le bouton " Réutiliser le texte. De plus, l'utilisateur peut retourner dans le champ de recherche et entrer une nouvelle requête - ou choisir de créer un nouveau , texte modifié
- (Évidemment) toutes les requêtes de recherche ne correspondent pas.
- Le formatage ne doit pas être perdu lors du basculement entre les modes
- De préférence, il devrait y avoir aucun mode du tout: Peut-être en étant capable d'appuyer simplement sur la touche Entrée pour ajouter une nouvelle ligne. Cependant, un champ d'édition de texte multiligne avec les suggestions de recherche est un nouveau type de widget inconnu, probablement difficile à comprendre
- La recherche comprend la mise en forme du texte. Ainsi, plus le texte est long et plus formaté, moins il y a de chances de trouver des correspondances de suggestions de recherche.
L'énigme de conception d'interaction qui en résulte est:
- Comment combiner/basculer entre ces deux modes: rechercher et éditer?
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Vous recherchez et les extraits qui contiennent le terme de recherche s'affichent. Vous pouvez voir un aperçu de leur contenu. Vous pouvez les copier dans votre presse-papiers en appuyant sur le premier bouton, les modifier avec le second et les supprimer avec le troisième. Le bouton dans le coin supérieur droit vous permet de créer un nouvel extrait.
Si vous cliquez sur le bouton Créer ou sur un bouton Modifier, la fenêtre se transforme en maquette de droite. Si vous avez terminé et cliquez sur le bouton créer/mettre à jour ou si vous cliquez sur le bouton annuler, vous revenez à la fenêtre précédente.
L'outil que vous proposez me rappelle légèrement la palette de styles de Word.
La similitude est qu'il existe un mode "recherche" (la possibilité de sélectionner un style préexistant) et un mode "édition" (la possibilité d'ajouter votre propre style, ou de personnaliser un style existant et de l'enregistrer en tant que nouveau style.
Si vous utilisez la palette des styles Word comme modèle de conception, cela pourrait peut-être vous aider, car elle passe assez facilement du mode de recherche au mode d'édition.
Lorsque vous cliquez sur "Enregistrer la sélection en tant que nouveau style rapide", il vous donne la possibilité de la modifier. 
Vous pouvez donc commencer par une palette d'extraits (peut-être avec des icônes pour une liste à puces, une liste numérotée, etc.) ou une liste d'extraits si une palette n'est pas réalisable, et offrir la possibilité de créer un nouvel extrait basé sur un existant une.
Première situation: Vous ne pouvez pas à la fois rechercher et éditer en même temps. Le premier utilisateur peut rechercher et ensuite cet utilisateur peut le modifier.
Situation deux: L'utilisateur est déjà en train de modifier et en attendant l'utilisateur veut rechercher quelque chose et éditer à nouveau.
Afficher certains extraits de texte avec une barre de recherche. L'utilisateur peut rechercher et saisir du texte. Les icônes de fichiers sont filtrées et l'utilisateur peut cliquer dessus. Les fonctions d'édition peuvent être visibles. Lorsque vous n'avez aucune requête correspondante, la création d'une nouvelle peut être promue.
Vous pouvez afficher les extraits pertinents avec une métaphore de fichier. Comme:
Pour la deuxième situation, vous pouvez placer le champ de recherche en haut à droite de votre solution.J'espère que cela vous aidera.