web-dev-qa-db-fra.com

Où mettre des "totaux" avec un assistant en plusieurs étapes

Je crée un outil de devis en ligne pour des produits assez détaillés (appelés modèles). Chaque modèle a beaucoup d'options différentes. Le devis sera rempli à l'aide d'un assistant. Chaque modèle sur le devis reçoit son propre onglet où l'utilisateur sélectionne les options sur le modèle. Un utilisateur peut ajouter plusieurs produits à un devis en cliquant sur l'onglet + (ou en cliquant sur le bouton Ajouter un modèle au bas de n'importe quel onglet de modèle).

Ma question concerne les totaux des devis. Les utilisateurs peuvent souhaiter voir les totaux pour l'ensemble du devis et/ou simplement un modèle spécifique. Actuellement, je prévois de les afficher sous forme de totaux flottants au-dessus des onglets, mais je ne suis pas sûr que ce soit la meilleure façon. J'ai pensé à les mettre dans une barre latérale droite (peut-être pliable?) Je cherche des commentaires UX sur cette conception.

enter image description here

Sur la base de suggestions, j'ai déplacé les totaux dans leur nouvelle fenêtre (une boîte de dialogue) et n'affiche que le grand total à l'écran. En cliquant sur le grand total, vous obtenez la fenêtre modale avec la répartition des prix pour chaque modèle ainsi que les totaux généraux. Est-ce un pas dans la bonne direction?

enter image description here

2
Ryan Langton

Peut-être qu'en regardant cela pour la première fois, l'écran semble écrasant. Sans vraiment savoir ce que vous vendez, je suggérerais de regarder les sites de voitures pour ce genre de chose. Si vous créez votre propre site Web comme Chevrolet.com, vous devriez certainement pouvoir trouver une bien meilleure expérience utilisateur.

Cependant, si vous voulez travailler avec quelque chose comme ça, je suggérerais ce qui suit:

  • Faites flotter les totaux à droite ou peut-être au-dessus. Ne montrez pas les détails, montrez simplement le total. Autorisez l'utilisateur à cliquer sur l'objet flottant pour voir les détails.
  • Améliorez le flux d'ajout/suppression de modèle. Utilisez cet écran actuel pour afficher la liste de tous les modèles ajoutés avec les totaux à droite (qui inclut les options), puis en bas de la liste, affichez le total pour toute la commande. S'ils veulent mettre à jour les options, ils peuvent cliquer sur chaque modèle pour les mettre à jour.

L'idée est de limiter ce que les utilisateurs peuvent voir et interagir à la fois. Vous pouvez afficher tous les détails et les options lorsqu'ils sont sur les étapes de confirmation. J'ai constaté que la meilleure expérience utilisateur provient des services qui limitent le nombre d'interactions à quelques éléments sur chaque écran. Bien sûr, vous ne voulez pas bombarder l'utilisateur avec des étapes supplémentaires. Quelques étapes supplémentaires amélioreront l'UX et dans de nombreux cas l'interface utilisateur pour en faire un bien plus propre et plus facile à utiliser.

2
Francis Pelland