Le meilleur modèle / solution pour une page de détail
J'ai un système où nous avons une structure hiérarchique d'articles (x nr d'articles enfants) où les données du parent sont affichées comme un "en-tête" et les articles enfants (et les données qui leur sont associées) sont affichés dans un tableau ci-dessous. Lors de la sélection d'un élément enfant, le motif est répété, il monte donc en tant que parent (avec un fil d'Ariane ajouté pour accéder au premier parent) et ses nœuds enfants dans un tableau ci-dessous.
Pour chaque article, il y a des informations détaillées associées qui seront essentiellement les mêmes pour chaque article. Ce sera beaucoup d'informations, donc cela peut nécessiter beaucoup d'espace. La question est de savoir comment résoudre le modèle pour cela? Existe-t-il un moyen intelligent d'accéder aux détails? Doit-il s'agir d'une nouvelle page et dans ce cas, comment devez-vous naviguer entre les pages? Doit-il s'agir d'une grande fenêtre modale? D'autres idées?
Reconnaissant pour toute contribution
Un précédent qui me vient à l'esprit est l'interface d'édition des métadonnées de piste dans iTunes. Si vous sélectionnez une piste individuelle, vous obtenez une boîte de dialogue avec les différents champs, et si vous sélectionnez plusieurs pistes, vous obtenez une boîte de dialogue très similaire, mais les champs individuels s'appliquent désormais à plusieurs pistes au lieu d'une seule. Si vous ne visualisez que des informations et n'avez pas besoin de les modifier, il y a beaucoup de possibilités pour étendre cette idée.
Si votre vue de table ressemble à ceci: 
puis sélectionner un élément individuel (et, disons, en appuyant sur un bouton "détails") vous donnerait ceci: 
- visuellement, un popup couvre tout le tableau d'origine à l'exception de la première colonne. En termes d'implémentation, c'est une toute autre vue, mais l'important est qu'il ressemble à une fenêtre temporaire apparue devant la table ( la présentation de la "bulle de dialogue" dans mon croquis est délibérée). L'utilisateur a probablement l'intention de revenir à la table une fois qu'il a terminé, et cela garde cette option clairement en vue.
Si l'utilisateur sélectionne plusieurs éléments, vous pouvez ensuite afficher une version agrégée de la vue détaillée: 
(J'espère que les croquis montrent clairement à quoi je veux en venir). Le fonctionnement exact de la vue agrégée dépendrait de ce qui est logique pour vos données particulières; peut-être que le champ "prix" affiche un prix moyen, tandis que le champ "poids" affiche un total, et le champ "couleur" montre une plage sous la forme d'un petit graphique. Combiné avec des idées comme sparklines , cela pourrait être un modèle très efficace pour afficher des données complexes dans une interface simple.
Vous avez beaucoup d'options, mais elles dépendent fortement des données que vous devez afficher.
Nouvelle page + fil d'Ariane
Il s'agit d'une approche assez courante. Vous dirigez vos utilisateurs vers une nouvelle page, mais vous laissez le fil d'Ariane pour qu'ils puissent retrouver leur chemin. Cela préserve la structure parent -> enfant et vous donne tous les biens immobiliers dont vous avez besoin.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Panneau latéral défilant ou modal
Je risque généralement de ne pas utiliser de modaux, mais leurs nouveaux cousins (panneaux latéraux déroulants) se révèlent beaucoup plus conviviaux pour l'UX. Après avoir cliqué sur une ligne enfant dans le tableau, vos yeux sont immédiatement attirés par le volet lorsqu'il glisse:
- La navigation n'est pas une préoccupation, car il est facile de revenir à l'état précédent
- Vous avez beaucoup plus de biens immobiliers à votre disposition et le résultat est plus facile à rendre mobile friendly
- Selon la taille de l'écran, certaines données de l'état précédent sont toujours visibles
Lignes de table extensibles
Comme l'a souligné @Shivam Pandya, les "lignes de tableau extensibles" (apparaît après avoir cliqué sur une ligne de tableau) sont idéales pour fournir des instantanés d'informations supplémentaires. W Il existe plusieurs façons de les implémenter, les suivantes étant les plus populaires:
- Une vue "Détail rapide" qui fournit les informations qui intéressent votre utilisateur final dans 90% des cas lorsqu'il a besoin de plus d'informations. Vous pouvez incorporer plus d'actions dans cette vue développée comme:
- Opérations CRUD de base (modifier/supprimer/afficher tous les détails)
- Courriel, impression ou autres éléments de logique utilitaire/métier
- Autoriser le développement de lignes supplémentaires en même temps
- Une vue "Full Detail" qui fournit toutes les informations supplémentaires associées à la ligne du tableau. Essentiellement, une version plus grande du "Détail rapide" qui supprime la nécessité de naviguer vers une nouvelle page. Le plus grand changement ici est que vous ne devez autoriser qu'une seule ligne développée à la fois si vous adoptez cette approche.
Refere My Image, je n'obtiens pas clairement ce que vous voulez dire mais pour autant que je comprends. Je crée cette maquette. Vous pouvez utiliser Expander dans pour la page de détails. Dans cet afficheur, affichez la vue d'ensemble de la page de détails. c'est-à-dire Nom, Numéro, Qté. etc. et y mettre l'option "View Detail" ou "Read More". Vous pouvez également ajouter cette fonction au clic sur le titre.
Si l'utilisateur veut en savoir plus après avoir lu l'aperçu, il/elle lira certainement plus et visitera la page de détails.
Il est également judicieux de créer une page de détails séparément. Mais n'oubliez pas d'ajouter RETOUR lien/bouton là-bas.
