Wizard split step VS big step in application B2B
Nous re-développons une application B2B pour la rendre plus conviviale, mais la garder robuste.
L'une des fonctionnalités comprend un assistant contextuel en 3 étapes.
À l'étape 2, nous aurons besoin d'une grille d'éléments à cocher/sélectionner pour passer à l'étape 3.
Le hic est que pour que la grille apparaisse, un utilisateur devra rechercher certains critères CSV (nous avons 4 critères par lesquels les utilisateurs peuvent rechercher). Lorsque le critère est rempli et appliqué, l'étape s'efface/se charge (voir ci-dessous les étapes 1.2 et 2.2) et la grille de résultats avec ces critères apparaît.
C'est là que les avis sont partagés:
- avoir une approche en "étapes séparées" (voir les écrans 1.x ci-joints): avoir un écran de 4 zones de saisie + bouton appliquer les critères;
- OU adoptez une approche par étapes (voir les écrans 2.x ci-joints): mettez tout sur un seul écran et utilisez un collapser pour les critères.
Voici nos réflexions:
l'étape fractionnée offre une interface utilisateur plus propre et moins de gaspillage de biens immobiliers lorsque nos utilisateurs regardent le réseau et peuvent toujours revenir en arrière et réappliquer des critères différents. (s'ils veulent changer les critères, cliquez en arrière? les utilisateurs vont-ils paniquer?)
l'étape complète fournit aux utilisateurs l'écran tout-en-un et les critères peuvent être réduits (initialement ou après? mais l'utilisateur ne paniquera-t-il pas avec `` où est passé mon panneau de critères? '', nous ne sommes pas sûrs)
la grille peut être énorme ... et tout rentrer dans une seule grande étape ... pourrait faire exploser un navigateur ou provoquer beaucoup de défilement - tout aussi mauvais que d'aller et venir.
Les deux approches sont tout aussi folles avec des `` clics '' (l'une a un effondrement ou un défilement de gros morceaux ou l'autre, mais l'autre n'a pas vu la grille), mais les applications B2B ne sont pas les plus belles de ce que nous avons vu.
Les deux approches auront la question de "appliquer les critères" et de recharger la grille entière.
PS: certains d'entre vous remarqueront peut-être que notre pagination est folle. C'est parce que ça l'est. Je t'entends.
Merci pour toute aide :)
Essayez de mettre la navigation pas à pas en haut. Permettez-leur de voir les valeurs des critères et actualisez-les si nécessaire.
Étant donné que la qualité de la liste dépend des critères, vous pouvez essayer une barre latérale persistante, similaire au filtrage dans le commerce électronique.
La conception matérielle a quelques modèles simples pour steppers. Cela vous donnera un espace horizontal pour travailler avec.
Pouvez-vous passer en plein écran? Maximisez l'immobilier.
En supposant qu'il s'agit d'un bureau, si vous allez utiliser une boîte de dialogue, pouvez-vous la développer en plein écran? Cela vous donnera plus de biens immobiliers et vous permettra de placer des filtres toujours visibles à gauche.
Si vous le pouvez, affichez les résultats et les filtres ensemble.
D'après Edward Tufte, un principe clé de la conception de l'information:
Permet d'effectuer une analyse visuelle importante adjacente dans l'espace, et non empilée dans le temps.
Si vous pouvez délimiter les sections de la page, vous pouvez profiter du modèle commun de filtres à gauche, les résultats à droite.
Ne leur faites pas mémoriser les filtres qu'ils ont appliqués pour obtenir les résultats.
En voyant les deux ensemble, vous évitez une taxe mémoire sur l'utilisateur, et ils n'ont pas à ouvrir et fermer des filtres qui vivraient soit à une étape précédente, soit au-dessus du tableau des résultats.
C'est là que adjacent dans l'espace entre en jeu.
MISE À JOUR: Vous pouvez séparer les critères (BIG STEP), mais pas les punir de vouloir afficher/modifier en contexte si besoin est.
La flexibilité peut aider ceux qui ne sont pas sûrs de leurs choix ou qui ont besoin de voir et de filtrer les données en contexte.
Bien que je trouve v1 Big Step très utile pour aider à se concentrer sur une seule tâche, pourriez-vous créer de la flexibilité pour ceux qui ont besoin d'être rappelé ou modifier leurs choix dans le contexte?
Si vous autorisez une autre façon de modifier, vous ne punirez pas les utilisateurs qui doivent afficher (et peut-être modifier) les critères.
Le pire des cas est qu'ils ne voient pas l'option d'affichage/modification des critères et reviennent en arrière d'une étape.
Je suis tombé sur ce modèle depuis la plateforme de trading Kraken, où vous avez un tableau, et pouvez afficher et modifier les filtres sous forme de popover au-dessus du tableau:
le coin supérieur droit montre que les filtres sont engagés:
avec un popover, je peux voir les valeurs du tableau: 
Bien que je trouve certains des choix de conception graphique un peu distrayants (l'épais violet foncé), j'ai trouvé utile de filtrer les données.
Dans votre cas, vous pouvez placer un bouton ou un lien "Afficher/modifier les critères", suffisamment visible pour ne pas être distrayant.
Je suis tombé sur une exigence similaire où nous devions intégrer des comptes de médias sociaux d'entreprise qui avaient plus de 40 pages Facebook. Nous étions une entreprise de technologie publicitaire et notre USP était de consolider vos différents canaux de médias sociaux en une seule plate-forme. Auparavant, nous avions un employé dévoué qui s'occupait de l'intégration avec ces clients car ils étaient de grandes baleines.
Voici mes 2 cents
- l'étape fractionnée fournit une interface utilisateur plus propre , et moins de gaspillage de biens immobiliers lorsque nos utilisateurs regardent la grille et peuvent toujours revenir en arrière et réappliquer des critères différents. (s'ils veulent changer les critères, cliquez en arrière? les utilisateurs vont-ils paniquer?)
- Les deux approches sont aussi folles avec des `` clics '' (l'une a des allers-retours effondrés ou défilant, l'autre a reculé mais ne voit pas la grille), mais les applications B2B ne sont pas les plus jolies d'après ce que nous avons vu
Je pense que les utilisateurs ici sont du personnel formé avec des connaissances de l'industrie où ils savent quels critères CSV ils recherchent. Nous pouvons donc appeler ces Utilisateurs avec pouvoir. En conséquence, je me concentrerai certainement sur l'efficacité de l'utilisateur tout en maintenant l'efficacité . Ma priorité sur l'apparence de l'interface utilisateur est secondaire.
D'après les informations pertinentes ci-dessus, mon argent ira aux options 2.x. Voici les raisons pour lesquelles:
- Toutes les informations peuvent être consultées au même endroit pour porter des jugements efficaces.
- Puisqu'ils n'ont pas à faire des allers-retours, cela rend le processus plus efficace.
- la grille peut être énorme ... et tout rentrer dans une seule grande étape ... pourrait faire exploser un navigateur ou provoquer beaucoup de défilement - tout aussi mauvais que d'aller et venir.
Je pense que l'affichage de données denses peut être géré plus gracieusement. Si vous voulez de l'inspiration, regardez autour de ces tableaux de données ???????? https://ant.design/components/table/
Je travaille beaucoup sur des projets .GOV ici au Royaume-Uni. Nous conseillons de diviser les tâches en petits composants, car nous constatons que cela concentre l'attention des utilisateurs sur une chose spécifique. Ergo, l'approche par étapes est toujours la voie à suivre.
Il semble qu'avec des interactions plus complexes, vous essayez d'en faire trop sur un seul écran. Cela rendra l'apprentissage plus difficile.
Et une autre chose que vous devez considérer: à quelle fréquence cet outil sera-t-il utilisé? Du quotidien? Mensuel? Une fois que? Cela affecte également le type d'interaction. S'il est rarement utilisé, il est encore plus probable que vous ayez besoin d'une approche progressive par étapes.
Résumé
Pas à pas, c'est bien, car cela décompose la tâche
Il concentre l'attention des utilisateurs
C'est plus facile à apprendre
Mais peut ne pas être aussi rapide pour les utilisateurs experts et fréquents
L'astuce consiste, bien sûr, à tester votre travail auprès des utilisateurs.