vue maître / détail vue vide état / détail quand rien n'est sélectionné

Question

J'ai une vue/forme suivante:

^{télécharger la source bmml - Wireframes créés avec Balsamiq Mockups}

Fondamentalement, c'est un formulaire où je peux remplir des informations pour un nouveau dossier.
Lorsque l'utilisateur sélectionne une catégorie dans le ComboBox je souhaite afficher une liste d'éléments sur le côté droit et un PieChart sur le côté gauche. Cependant, au départ, rien n'est sélectionné, je dois donc remplir l'espace vide et faire face à l'état vide respectivement.
Je peux penser à deux solutions:

1. Au lieu du PieChart et du List je montre l'espace blanc avec une superposition de texte qui dit quelque chose comme: " Sélectionnez une catégorie pour afficher les informations".
2. Je pourrais avoir un PieChart vide et quelques exemples d'entrées dans le List, mettre une superposition grise dessus et mettre le texte ci-dessus dessus (voir la maquette).

La solution 1 est plus facile à mettre en œuvre mais j'ai beaucoup d'espace blanc. La solution 2 est plus difficile à mettre en œuvre mais donne à l'utilisateur une idée du type d'informations qui seront affichées.

Bien sûr, je pourrais présélectionner une catégorie et remplir le blanc au départ, mais je préfère la laisser vide car je veux que l'utilisateur prenne une décision consciente sur la catégorie.

Existe-t-il une autre solution à ce problème? J'ai essayé de rechercher des exemples du monde réel mais je n'en ai pas trouvé de bons. Peut-être que quelqu'un a des exemples qui fournissent une certaine inspiration, en particulier du point de vue design/interface utilisateur/style (typographie, quelle couleur pour la superposition, etc.).

Answer 1

Je pense que je comprends votre question, mais veuillez me clarifier si je me trompe. Je crois que cela a à voir avec quoi faire avec l'ardoise vierge sans la laisser ennuyeuse ou peu motivante pour l'utilisateur? Je crois que cela se résume à votre but/objectif sur la peur. Je vais aller avec la solution 1. Diriger l'utilisateur visuellement plutôt qu'avec des instructeurs directs, à mon avis, diminue la poussée et augmente la traction. La même technique est utilisée dans les jeux télévisés lorsque l'hôte montre le prix au participant avant de choisir la réponse. Ceci est un exemple approximatif mais je suis d'accord avec la solution 1. Il y a un certain nombre de façons de le faire en fonction de ce que j'essayais d'accomplir ou d'aider l'utilisateur à accomplir.

Voici un excellent article à ce sujet: http://ui-patterns.com/patterns/BlankSlate

Si vous ne voulez pas qu'ils voient du contenu ou un échantillon de contenu, j'utiliserais simplement un graphique symbolisant chaque zone résultante et montrerais peut-être une ligne pointillée claire à la place de la bordure de chaque zone résultante. Voici un échantillon que j'ai jeté ensemble dans Axure. Le texte peut être un peu léger et vous pouvez faire preuve de créativité et utiliser une icône de couleur et une flèche, mais dans tous les cas, l'utilisateur est dirigé visuellement.

Autres suggestions:

1) Remplissez complètement le contenu aux deux endroits et placez un flou qui brouille complètement les données mais donne à l'utilisateur une compréhension claire de sa composition.

2) Ajoutez une catégorie par défaut à la liste déroulante qui inclut ou affiche TOUTES les catégories initialement et placez le champ de catégorie à proximité des résultats de la liste de catégories (ex. Au-dessus du conteneur de liste) avec une étiquette claire (ex. "Choisissez une catégorie à filtrer ") ou (ex." Catégories de filtres "). les options de la langue sont illimitées et doivent être basées sur votre utilisateur défini.

Answer 2

En tant qu'approche générale du processus de conception, commencez par la plus simple et ajoutez de la complexité uniquement si cela est indiqué par la recherche des utilisateurs.

Si vous n'avez rien, ne montrez rien

Un grand espace vide est généralement un assez bon indice que vous n'avez rien à montrer et une entrée est nécessaire, comme un formulaire avec une zone de texte vide. Tant que l'espace vide est visuellement associé à la liste déroulante Catégorie (par exemple, un cadre comprend les deux) et que l'étiquette déroulante Catégorie communique suffisamment ce que l'utilisateur obtient (par exemple, "Performances de la catégorie de produit: _ “), aucune autre invite n'est nécessaire.

Un simple espace vide réduit la quantité de lecture et de réflexion que l'utilisateur doit faire (votre option 1), et évite à l'utilisateur de confondre les fausses données de liste pour de vrai (votre option 2, deuxième moitié). Les utilisateurs ne sauront pas nécessairement que le gris ou un autre fondu signifie "exemple" ou "faux". Ils pourraient penser que cela signifie seulement "désactivé" (c'est-à-dire que les valeurs sont réelles mais ne peuvent pas être modifiées), ou peut-être pensent-ils que c'est juste une conception graphique statique, car le gris sur gris est une mode récente dans les sites Web et l'utilisateur peut-être jamais vu la zone quand il a des données réelles.

Une grande zone vide peut même motiver l'utilisateur à sélectionner une catégorie précisément parce que l'espace vide "ne semble pas correct" et l'utilisateur cherchera à équilibrer. Si vous souhaitez fournir une indication plus précise de ce que la zone vide affiche et que vous ne pouvez pas afficher une valeur de catégorie par défaut à cette fin (voir ci-dessous), affichez des graphiques et des champs vides. Autrement dit, affichez l'axe et les titres des graphiques, mais aucune donnée (par exemple, un cercle blanc pour le graphique circulaire comme vous le suggérez), et affichez les étiquettes de colonne et/ou de ligne dans la liste, mais les éléments de liste vides.

Évitez d'avoir rien - choisissez une valeur par défaut

Cependant, à moins que les tests d'utilisabilité n'aient montré que les utilisateurs ignorent la liste déroulante Catégorie, ne présumez pas qu'ils le feront et créeront une interface utilisateur de qualité inférieure qui ne soulève que de nouveaux problèmes tels que ceux que vous décrivez, ainsi que ceux que j'énumère dans mon commentaire.

Il semble y avoir ce mythe dans la conception d'applications Web selon lequel la défaillance contribue à plus d'erreurs que la non-défaillance. Je ne pense pas qu'il y ait de preuve de cela, sauf peut-être pour certaines situations très spécifiques (par exemple, les boutons radio Likert dans les sondages d'opinion). Il est probablement vrai que plus d'utilisateurs confrontés à une valeur par défaut laissent le contrôle sur cette valeur que les utilisateurs sélectionnent cette valeur lorsqu'ils sont obligés de choisir, mais cela ne signifie pas nécessairement que les utilisateurs font une erreur; cela peut seulement signifier que les utilisateurs ne se soucient pas beaucoup de leur valeur.

Même si les tests montrent que les utilisateurs ignorent par erreur la catégorie, recherchez d'autres solutions au problème avant d'opter pour une solution qui contribue à l'effort, aux erreurs et à la confusion des utilisateurs. Ce remède peut être pire que la maladie. Par exemple, vous devrez peut-être améliorer la connexion graphique entre la catégorie et les régions de détail (c'est assez faible dans votre filaire). Ou peut-être avez-vous besoin d'un meilleur nom pour les options de catégorie afin que les utilisateurs sachent ce qu'ils veulent dire et ce qu'ils veulent.

Votre solution pourrait donc être la troisième. Définissez la liste déroulante Catégorie sur le premier élément de la liste, qui devrait probablement être le choix le plus fréquent, le plus important ou le plus illustratif (même s'il n'est que légèrement plus que les autres).

BTW Je ne suppose pas que la solution Gmail est une bonne solution, même pour Gmail. Beaucoup de grandes entreprises qui, selon vous, seraient mieux informées ne le font pas.