Remplacement de toutes les interactions dans une interface utilisateur complexe par un seul champ de saisie: des implémentations réussies existent-elles?

Question

Questions principales

Pouvez-vous fournir des exemples d'implémentations qui implémentent la solution suggérée ci-dessous?
Si oui, quels sont les avantages et les inconvénients, en particulier tels que rapportés par les utilisateurs ?

Comme l'indique SE directives , veuillez sauvegarder vos opinions avec des faits.

Contexte

J'ai plusieurs clients qui ont des interfaces existantes qui sont fondamentalement des formes très complexes. Les gens qui n'utilisent pas ces interfaces tous les jours en sont intimidés. Ces clients sont en train de déplacer leurs interfaces vers le navigateur, et nous en profitons pour repenser les interfaces en général.

Fortement inspiré par Google.com, j'ai suggéré la solution ci-dessous, qui est essentiellement une "ligne de commande apparaissant comme une boîte de dialogue de recherche conviviale". Cependant, le concept est un grand écart par rapport aux interfaces graphiques existantes. Certains clients perçoivent le risque comme trop élevé, même si les tests internes avec d'autres clients ont été très positifs, y compris des phrases telles que "oh mon dieu, ma mâchoire a frappé le sol". Pour pouvoir continuer, je dois donc démontrer qu'elle a été mise en œuvre avec succès ailleurs. D'où ma demande d'exemples d'implémentations.

Les utilisateurs finaux sont des avocats, des économistes, des ingénieurs, des commis, etc. qui reçoivent une formation sur les logiciels. Cependant, certaines des applications ont des centaines de champs, ce qui rend les applications déconcertantes pour les utilisateurs non quotidiens.

Solution suggérée

Voir également les illustrations ci-dessous.

Rendre la ou les interfaces en lecture seule (tout en prenant en charge la sélection de texte).
Introduisez un grand champ de saisie de style Google convivial en haut.
Lors du remplissage key-value pairs (un cas d'utilisation majeur), permet à l'utilisateur d'entrer le value d'abord .
- Dérivez automatiquement le keys possible en fonction de plusieurs facteurs, y compris le contenu de la valeur (en utilisant des expressions régulières et des dictionnaires) et le cas d'utilisation actuel supposé. Présentez keys comme options de saisie semi-automatique.
Lorsque vous soumettez des commandes, autorisez cela également dans le champ de saisie, en utilisant la saisie semi-automatique et les synonymes.
- Facultatif: Lorsqu'une commande est sélectionnée, transformez la vue d'entrée en un "assistant de commande" simplifié, aidant le remplissage des paramètres de commande. Détails ci-dessous.
Fournissez aux utilisateurs expérimentés la possibilité d'effectuer des modifications toutes dans cette case.
- Offrez aux débutants la possibilité de modifier directement les champs individuels (par exemple avec une icône de crayon apparaissant lors du survol) tout en informant simultanément et discrètement comment cette action peut également être effectuée par le champ de saisie principal.

Avantages escomptés

Familiarité: L'interface est aussi similaire à Google.com que possible.
Lisibilité améliorée, intimidation réduite: Les interfaces existantes ont jusqu'à 70 éléments de formulaire par modèle. Un de mes clients a une vue en lecture seule correspondante, et les utilisateurs plus occasionnels ont tendance à privilégier celui-ci. Interrogés, ils déclarent franchement que le modèle basé sur un formulaire est intimidant.
Plus efficace, moins de tension: L'utilisateur n'a pas besoin d'utiliser la souris.
Focus sur le contenu: Lors de la saisie de valeurs, l'utilisateur n'a souvent pas à spécifier l'attribut.
- Entrée de lot: L'utilisateur peut coller plusieurs lignes de texte dans le formulaire à la fois, et chaque ligne/paragraphe sera miné pour key-value pairs (active la boîte de dialogue dédiée).
Flux de travail d'enregistrement amélioré: Certains modèles existants prennent en charge plusieurs scénarios d'enregistrement. Les modèles d'enregistrement dédiés ont été considérés comme trop coûteux en termes de développement et de maintenance. Cette interface devrait résoudre des problèmes tels que l'ordre de tabulation pour ces scénarios de conflit d'intérêts.
Langage naturel: À l'aide de synonymes, les utilisateurs peuvent lancer des commandes en utilisant leur vocabulaire personnel, tout en étant informés de la nomenclature préférée de l'entreprise.
- Processus guidé: L '"assistant de commande" optionnel prend en charge une saisie semi-automatique par dictionnaire, guidant l'utilisateur lors de la saisie des paramètres. Voir l'illustration ci-dessous. De plus, l'assistant simplifie davantage les actions par lots.
Intégrable: Comme Fantastical's Mini Window, le champ de saisie minuscule peut être intégré dans d'autres produits. Outlook aurait été un candidat pour l'un de mes clients (cependant, ils ne sont pas disposés à faire tout type d'intégration avec Office en raison d'une dette technique).

Cas d'utilisation simplifiés

Population de valeurs

Cas d'utilisation: L'utilisateur souhaite remplir le Number plate champ avec la valeur "DD12345".
Solution:
- Le focus du clavier est déjà dans le champ de saisie.
- L'utilisateur tape (ou colle) "DD12345".
- Plusieurs lignes de "saisie semi-automatique", de style Google, apparaissent sous le champ de saisie. L'élément supérieur est populate Number plate with DD12345.
- L'utilisateur appuie sur arrow down et Enter, en sélectionnant la saisie semi-automatique.
- La valeur est correctement remplie dans la vue en lecture seule. Un reflet apparaît et disparaît.

Soumettre des commandes

Cas d'utilisation: L'utilisateur souhaite approuver une plaque d'immatriculation.
Solution:
- Le focus du clavier est déjà dans le champ de saisie.
- L'utilisateur tape "app".
- Plusieurs lignes de "saisie semi-automatique", de style Google, apparaissent sous le champ de saisie. L'élément supérieur est Approve vehicle DD12345.
- L'utilisateur appuie sur arrow down et Enter, en sélectionnant la saisie semi-automatique.
- Le système fournit une confirmation dans un champ de rétroaction dédié (pas une fenêtre contextuelle). L'état du véhicule est correctement mis à jour dans la vue en lecture seule. Un reflet apparaît et disparaît.

Captures d'écran

Interface existante - 1^st sur des dizaines de modèles, plusieurs tout aussi compliqués:

Interface proposée - L'utilisateur émet une commande dans le champ de saisie (appuie sur p puis arrow down):

Interface proposée - Lors de l'émission des commandes, l '"assistant de commande" facultatif fournit de l'aide pour entrer les paramètres:

Kristiyan Lukanov · Answer

Je pense que votre idée ne fonctionnera pas bien . Principalement parce que si je me retrouve dans une interface où je m'attends à remplir des formulaires et à voir une barre de recherche, ma première pensée sera que je suis au mauvais endroit, je m'attends à des champs de formulaire où je peux entrer mes données. Les utilisateurs ne sauront pas comment soumettre leurs données en utilisant votre approche. Ils devront être instruits ou guidés, ce qui est un non non en termes d'utilisation. Pour le dire autrement, cette approche viole la heuristique d'utilisation de cohérence . Lorsque la cohérence avec d'autres interfaces similaires est violée, les utilisateurs commencent à poser des questions comme: puis-je entrer toutes mes données à partir d'un seul champ de recherche, où je peux entrer ma valeur X, où dois-je entrer mes données, etc.

Vous supposez que parce qu'il est facile pour vous d'interagir avec une interface de type console, ce sera facile pour tout le monde. C'est une erreur typique des programmeurs lorsqu'ils développent l'interface utilisateur. Vous savez comment interagir avec lui alors que les utilisateurs ne le font pas , et c'est la grande différence. Les interfaces utilisateur ne sont pas utilisées par les développeurs, mais par les utilisateurs. Sinon, ils seraient nommés Developer Interfaces (DI).

Si les utilisateurs savaient déjà comment utiliser votre barre de recherche, il serait probablement plus facile d'interagir avec. Cependant, le problème est qu'ils ne sauront pas comment l'utiliser.

Au lieu de créer une barre de recherche complexe, vous devez utiliser les champs de formulaire de saisie standard et prendre soin de les optimiser (supprimer les champs inutiles, tirer parti des valeurs par défaut, saisie semi-automatique et autres).