Comment avoir une bonne UX avec ces relations maître-détail?
Je travaille sur une application web où les utilisateurs doivent créer et gérer leurs projets.
Chaque projet est défini entre autres par une liste de sous-projets, qui est définie par une liste de tâches, qui est définie par une liste de ressources.
J'ai ce problème maître-détail, je ne sais pas comment créer une interface utilisateur intuitive afin de permettre à l'utilisateur de créer des sous-projets par projet, d'ajouter des tâches dans ces sous-projets, puis d'affecter des ressources à ces tâches.
Malgré ces relations parent-enfant, il existe d'autres informations obligatoires liées à chaque "sujet".
- Projet : nom, code, budget, catégorie, liste des sous-projets
- Sous-projet : Nom, ID, Liste des tâches
- Tâche : nom, catégorie, liste des ressources
- Ressources : nom, date de début, date de fin
J'ai pensé à une grille de détails maîtres comme celle-ci .
Combien de niveaux sont acceptables dans ce type de grille? Je pense que deux niveaux, c'est déjà trop.
Quelqu'un peut-il recommander de bonnes pratiques UX pour créer une interface utilisateur solide avec cette fonctionnalité de gestion de projet?
Dois-je éviter le panneau de dialogue? Dois-je ouvrir de nouvelles pages pour chaque objet et afficher un fil d'Ariane?
C'est une excellente question. En tant que PM qui a utilisé Jira et Asana, c'est un problème avec lequel je me bats pour cette dernière, principalement parce que pour moi, il y a vraiment quatre couches:
- Produit
- Projet
- Tâche
- Sous-tâche
En d'autres termes, trois couches d'éléments exploitables, mais seulement deux sont vraiment critiques. En règle générale, deux couches sont le maximum pour les affichages visuels, bien que je pense que cela est purement une limitation d'entreprise, car tout le monde n'a pas au moins 1650 px de biens immobiliers pour son outil de gestion de projet. Jira contourne cela en ajoutant plusieurs types de filtres, indicateurs et en s'appuyant sur la recherche. Asana n'a tout simplement pas plus de deux couches et ajoute également des types de filtres.
En regardant votre grille, je pense que c'est bien et certainement compréhensible. En théorie, vous pouvez cliquer plus loin et voir plus de détails, mais à un troisième niveau visible sur la même page, je me demande quelles données précieuses pourraient réellement être affichées à ce stade. Cela dépend également de la façon dont l'utilisateur utilisera réellement cette page. Quelles sont les précieuses informations?
De plus, afficher tous les niveaux de la grille permet également à l'utilisateur de savoir exactement où ils se trouvent, ce qui est extrêmement utile (que je ne vois nulle part dans une manière facile à digérer sur la page). Si je sais comment j'y suis arrivé après une heure sur la page, vous avez bien fait.
La meilleure métaphore que j'ai utilisée pour ce type de panne de gestion de projet est la métaphore pages en couches.
Basecamp l'utilise à bon escient. Lorsque vous vous déplacez dans un projet, le niveau plus profond apparaît sous la forme d'un calque de page flottant au-dessus du dernier niveau.
De cette façon, vous conservez un sens de la profondeur et de l'emplacement, et les titres des couches plus profondes deviennent des liens là-bas, offrant une fonctionnalité de chapelure empilée.
Je pense que cet effet skeuomorphique léger, en supposant que vous pouvez le faire fonctionner avec les données que vous devez représenter, donne une expérience beaucoup moins intense que de cliquer dans de vastes tableaux coulissants.
Même si vous n'utilisez pas cette technique, il semble que vous pourriez bénéficier d'un essai gratuit sur Basecamp.com et de jouer. Ils font vraiment un excellent travail pour garder les choses simples.
Vous avez une application assez chargée d'informations. Cela pourrait affecter négativement l'utilisateur et entraîner une mauvaise utilisation.
Je recommanderais d'utiliser un modèle de divulgation progressive, d'une manière définie dans l'article: Divulgation progressive - la meilleure technique de conception d'interaction?
La divulgation progressive est une technique de conception d'interaction qui séquence les informations et les actions sur plusieurs écrans afin de réduire les sentiments de submerger pour l'utilisateur. En divulguant progressivement les informations, vous ne révélez que l'essentiel et aidez l'utilisateur à gérer la complexité des sites ou des applications riches en fonctionnalités.
La grille maître-détail que vous avez mentionnée n'est pas une solution parfaite, car l'utilisateur voit de toute façon trop d'informations. Cela ne permet pas de concentrer leur attention sur la tâche en cours.
Vous pourriez probablement rester avec une hiérarchie à deux niveaux: Projet - Sous-projet. Ce dernier niveau offre une bonne vue d'ensemble du sous-projet, car vous pouvez observer les tâches et leur coordination. Il est également bon d'utiliser le menu secondaire comme moyen de navigation et en observant la liste globale des sous-projets.
Faites également attention aux rôles des utilisateurs et à leurs objectifs et tâches. Différents utilisateurs ont besoin de différents niveaux d'abstraction pour la prise de décision. Et encore une fois, c'est ce que la technique de divulgation progressive fait bien.