web-dev-qa-db-fra.com

Avez-vous de bons exemples de la façon d'afficher un aperçu de l'état de plusieurs éléments se déplaçant dans un processus?

Je travaille avec un client sur la conception d'un outil exécute une analyse des données scolaires et présente à l'utilisateur des rapports qui les aident à soutenir leurs écoles.C'est le processus par lequel un utilisateur passe:

  1. Un utilisateur télécharge des données sur ses écoles.
  2. Si les données d'une école dépassent une certaine limite de qualité des données, ils peuvent voir des "rapports préliminaires" (les rapports qui n'ont pas été examinés pour l'exactitude, mais si leurs données sont vérifiées, devraient être aussi de bons rapports finaux - essentiellement des projets de rapports). Ces rapports préliminaires sont accompagnés de rapports sur la qualité des données qui aident les utilisateurs à corriger les erreurs de données les empêchant de respecter la limite. Si les données d'une école tombent en dessous d'une limite, cette école n'apparaîtra pas dans les rapports préliminaires, seulement dans les rapports sur la qualité des données.
  3. À ce stade, l'utilisateur peut utiliser les rapports préliminaires pour soutenir son travail, ou il peut passer du temps à corriger les erreurs de données, afin de rendre ses rapports plus utilisables. Dans l'intervalle, le client a du personnel qui examine une école à la fois, ajoutant une couche supplémentaire d'évaluation/analyse afin de fournir des rapports finaux.
  4. Quelques semaines plus tard, lorsque le personnel a terminé son évaluation, l'utilisateur est informé que ses rapports finaux sont prêts et il peut retourner sur le site pour utiliser ses rapports finaux.

Au cours de ce processus, les écoles peuvent être dans ces différents états:

  1. Données manquantes: Si l'utilisateur n'a pas téléchargé de données pour cette école
  2. Inférieur à la limite de qualité des données: Si les données pour cette école tombent en dessous de la limite et n'apparaissent donc pas dans les rapports préliminaires
  3. A des rapports préliminaires: Si les données de l'école ont dépassé la limite de qualité des données et qu'il existe des rapports préliminaires disponibles pour examen
  4. Possède des rapports finaux: Si les données de l'école ont fait l'objet d'une évaluation par le personnel et qu'il existe des rapports finaux prêts à être examinés

Lorsqu'un utilisateur examine son rapport, il est utile de savoir que ses écoles sont dans des catégories différentes, car certaines de leurs écoles n'apparaîtront pas dans les rapports et certaines écoles apparaîtront dans certains rapports mais pas dans d'autres.

Pour cette raison, je veux donner à l'utilisateur un aperçu de l'endroit où se situent leurs écoles dans ce processus. Vous trouverez ci-dessous ma conception d'origine: si un utilisateur clique sur la barre d'état bleue, il accède à un tableau contenant plus de détails sur les écoles dans chacun des compartiments.

report page with blue status bar

Je ne suis pas vraiment satisfait de cette conception, j'espérais donc obtenir des commentaires. J'ai également reçu les commentaires suivants:

  • Il doit être plus clair qu'il s'agit d'un processus
  • Il devrait être plus clair que le total est séparé et que les chiffres dans les seaux représentent les écoles (j'avais envie de dire que l'école dans le titre semble redondant, car le tout fait référence aux écoles)
  • Il pourrait être utile de rappeler que les données manquantes et le fait d'avoir des données en dessous de la limite sont une mauvaise chose.

Voici quelques itérations que j'ai considérées. Merci d'avance pour l'aide! explorations

7
mlveg

Je recommande définitivement d'utiliser des couleurs et éventuellement des icônes pour les différentes étapes de votre flux de travail, surtout si vous allez faire référence à ces mêmes états/étapes sur plusieurs écrans de votre application.

Par exemple, si vous souhaitez répertorier toutes les écoles ainsi que leurs États respectifs, vous pouvez envisager une interface comme celle-ci, nous avons créé notre application de gestion de contenu de médias sociaux. enter image description here

Ici, nous avons essayé de capturer le flux de travail d'un article de Non écrit (U) à Écrit (W) à Modéré (M) à Planifié (S) à Approuvé (A) et enfin à Publié (P). Je sais que cela peut vous sembler exagéré à ce stade, mais cela aide à planifier exactement où vous allez vous référer à ces états/étapes dans votre application, afin que vous puissiez en conséquence décider de la quantité de biens immobiliers dont elle a besoin et si c'est un appareil toujours présent dans votre en-tête ou quelque part.

J'espère que cela t'aides. J'ai aimé votre 5ème version, mais je pense que vous allez vouloir signifier la positivité/négativité relative de chaque état. Partagez ce que vous avez finalement trouvé si possible :)

1
karanbir88

Il existe quelques plates-formes/services de gestion "pipeline" ou "entonnoir de vente" qui méritent probablement d'être examinés en ce qui concerne leur interface utilisateur et leur expérience utilisateur.

Pipe Drive - https://www.pipedrive.com/en/features

Salesboard - http://www.salesboard.com/tour/

Pipeliner - http://www.pipelinersales.com/learn-crm/pipeline-management/

Bien que leur objectif final et leur contenu puissent être différents, la façon dont ils affichent ce qui est dans le "pipeline" et donne des statistiques de présentation peut être appliquée à la plupart des occasions de gestion de processus.

J'aime le design que vous avez déjà, peut-être que l'ajout de couleurs pour mettre en évidence la gravité de chaque étape (rouge, ambre et vert) aiderait à mettre en évidence.

1
Stephen Keable