web-dev-qa-db-fra.com

Meilleur design pour afficher la liste sous une liste d'articles?

J'ai une liste d'articles dans une base de données et j'affiche 10 articles avec quelques détails supplémentaires à la fois (sous forme de lignes de tableau). J'utilise les boutons suivant et précédent pour récupérer les éléments restants.

Cette partie a été implémentée.

Mais maintenant, pour chaque élément que j'affiche, je dois afficher 10 lignes supplémentaires qui contiennent des détails supplémentaires/spécifiques sur les éléments.

Par exemple, l'un des éléments que j'affiche est "Bière". Sous "Bière", j'ai différentes marques de bières, je dois donc afficher la liste des marques lorsque l'utilisateur sélectionne/clique sur la bière (ligne).

De même, si l'utilisateur sélectionne (ou clique) sur un autre élément comme le whisky, la liste des marques de bière ne doit pas être affichée et seule la liste des marques de whisky doit être affichée.

Quelle pourrait être la meilleure conception pour afficher la deuxième liste en réponse à l'action de l'utilisateur?

**BEER AVGPRICE:$3 
--KINGFISHER $4 HAYWARDS $3 
**WHISKEY AVGPRICE
website-designliststreemaster-detailsjavascript
11
Bharat Chowdary

Décomposons vos options:

  1. Montrez toujours les articles "enfants".
    • L'imbrication visuelle sera importante ici, en utilisant le contraste pour séparer visuellement les éléments du parent et l'alignement et la proximité pour les grouper visuellement. Par exemple, voyez cette capture d'écran de logiciel Rally , et remarquez comment les tâches (TA *) sont visuellement distinctes des histoires:
      Table with child rows that are indented and have a different background color
      Notez que vous n'aurez peut-être pas besoin de répertorier les éléments enfants sur leurs propres lignes, comme ci-dessus; peut-être qu'une simple liste délimitée par des virgules d'informations sur les enfants suffira.
    • Avantages : évident pour l'utilisateur; facile à numériser et à comparer les enfants à travers différents éléments sans autre interaction.
      Inconvénients : Selon la quantité d'informations par enfant, peut occuper une grande partie de l'écran immobilier.
  2. Affichez conditionnellement les éléments "enfant" basés sur un clic de souris ou un événement "focus" logique, comme une arborescence. (C'est en fait ce que fait Rallye, en utilisant le _ plutôt standard [+] et [-] icônes pour développer et réduire les lignes.)
    Table with + and - icons on parent rows for showing and hiding children
    • Avantages : Ne prend pas d'espace à moins que l'utilisateur ne le demande; quelque peu évident pour l'utilisateur
      Inconvénients : Nécessite beaucoup d'interaction avec l'utilisateur pour analyser différents niveaux; Les éléments de l'interface utilisateur se déplacent lorsque l'utilisateur interagit avec la page.
  3. Affichez sous condition les éléments "enfant" basés sur le survol/survol de la souris, comme une info-bulle. Par exemple, consultez cet exemple de "Data Tips" de Visual Studio, où le survol d'une variable dans le code affiche des informations à son sujet, et l'utilisateur peut continuer hiérarchiquement à plonger dans des détails progressivement plus profonds avec des info-bulles plus flottantes.
    Hierarchical Visual Studio "Data Tip"
    • Avantages : ne prend aucun espace dans l'interface utilisateur; plus rapide pour l'utilisateur de naviguer que de cliquer sur des éléments; plus facile de naviguer d'un élément à l'autre, car la disposition de la page ne change pas.
      Inconvénients : nécessite toujours que l'utilisateur examine chaque élément individuellement pour numériser les enfants; pas évident, ni très découvrable.

Le choix à utiliser dépend des besoins de vos utilisateurs:

  • Si vos utilisateurs sont des novices, ou sont susceptibles de vouloir numériser ou comparer des articles enfants de plusieurs parents à la fois, je suggérerais # 1.
  • Si vos utilisateurs sont plus à l'aise avec les ordinateurs, mais les utilisateurs peu fréquents de votre application, je suggère # 2.
  • Si vos utilisateurs utiliseront votre application fréquemment (et n'ont pas besoin de comparer souvent les éléments enfants, ou si les informations qu'ils doivent comparer sont suffisamment petites pour que voir une info-bulle puis une autre soit assez bonne), je suggérerais # 3.
9
Phrogz

Si vous n'avez que deux niveaux, vous pouvez utiliser une approche de détail maître ordinaire.
Voir # 1 ici: http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

Si plus de niveaux sont nécessaires, vous pouvez opter pour le modèle de conception d'exploration.
Par exemple: http://quince.infragistics.com/Patterns/Cascading%20Lists.aspx

Si vous voulez garder tout dans la même liste, vous devez opter pour une sorte de liste arborescente où vous réduisez automatiquement les éléments non sélectionnés.
Par exemple http://quince.infragistics.com/Patterns/Tree-Table.aspx

9
Jørn E. Angeltveit

Vous voudrez peut-être envisager une sorte de "contrôle d'accordéon" où vous cliquez sur un en-tête de section comme Beer ou Whisky et il montre les enfants de l'en-tête de section sur lequel vous cliquez (et réduit toutes les autres sections).

Voir des exemples ici: http://docs.jquery.com/UI/Accordion

0
Brennen Walsh