Quelle est la bonne façon d'afficher des commentaires imbriqués à l'infini?
Existe-t-il un moyen de faire des fils de commentaires imbriqués infinis d'une manière qui ne semble pas horrible? Je me rends compte que l'on pourrait simplement restreindre les niveaux d'imbrication, mais il y a peut-être une meilleure façon d'indiquer que certains commentaires sont des réponses à d'autres commentaires que de simplement indenter les commentaires. Après un certain niveau d'imbrication, le retrait échoue.
Quelques idées avec lesquelles jouer: couleur, taille, divulgation progressive, nombres (1.1, 1.2, 1.2.1, etc.), fenêtres modales, un flux de réponse aux commentaires (comme Facebook ou Twitter), quelque chose comme SeaDragon , etc.
Quelqu'un a-t-il résolu ce problème? Qu'est-ce que tu as fait? Les suggestions et les exemples visuels prêts à l'emploi sont également les bienvenus.
Ce n'est pas si difficile si vous traitez les "commentaires imbriqués infinis" comme une autre dimension dans votre conception. La plupart des fils de commentaires n'ont que deux dimensions: le commentaire (X = 1) et le nombre de commentaires (Y = N). Mais maintenant, vous avez des commentaires imbriqués, en ajoutant Z = M au mélange.
Du point de vue de la conception de l'interface utilisateur, cela ne devrait pas représenter beaucoup de défi car il existe de nombreux paradigmes pour gérer les dimensions supplémentaires, telles que celles décrites par Pam, ainsi que les onglets, les panneaux, etc. Le problème que nous rencontrons dans le monde réel est qu'il n'y a pas d'espace d'écran infini ou de richesse infinie disponible. C'est là que les choses se compliquent: l'internaute ne veut pas faire défiler vers la droite, et la plupart des zones de commentaires sont soumises à la barre de défilement de la page parent sans être autonomes.
Twitter pour iPad
Twitter pour iPad m'a récemment donné une inspiration dans ce domaine. Là, la dimension Z est présentée de manière interactive comme un volet superposé au-dessus de X, Y:
Étant donné que vous utilisez un iPad, vous avez le contrôle total de savoir si vous souhaitez ou non afficher ce volet supplémentaire pour un affichage complet ou le supprimer. La lecture de tweets (une liste bidimensionnelle X, Y) est très bien: faites simplement défiler vers le haut et vers le bas. La plupart des applications Twitter trébuchent en essayant d'ajouter la 3e dimension, qui consiste à zoomer sur un Tweet pour voir son contexte.
Par exemple, un Tweet peut être une réponse à quelqu'un d'autre, et dans ces cas, vous voulez voir la conversation complète. La plupart des clients Twitter basés sur le Web chargeront une nouvelle page. La plupart des applications ne le prennent pas vraiment en charge. Mais Twitter pour iPad fait à nouveau apparaître ce volet de droite et met en surbrillance le Tweet sélectionné dans le volet d'origine. Vous pouvez maintenant lire une liste déroulante verticalement de tout ce qui est dans le contexte. À ce stade, Z = 1. Si vous cliquez sur un élément de cette liste, un autre volet vient de la droite et vous êtes en Z = 2.
Cela peut théoriquement continuer pour Z = M, bien que je ne sois pas sûr de ce que fait le client Twitter lui-même (se bloque probablement!). Ce modèle semble toutefois attrayant.
Vous avez raison, l'indentation échoue après un certain nombre de niveaux, mais vous pouvez toujours opter pour une solution comme ce que deviantArt fait (après environ 10 niveaux, ils vous redirigent vers une page différente avec l'ensemble flux de réponses).
Je préfère toutefois opter pour des changements de taille de police ou de regroupement des panneaux. Voici une image de ce dont je parle. C'est plus simple et je pense que cela fait le travail. Facebook fait en fait un mélange des deux sur la page du fil d'actualité. L'idée principale est de les montrer clairement et de montrer en même temps quel était le principal commentaire qui a déclenché la chaîne de réponses. 
En élargissant le sujet des panneaux (car je pense que vous avez raison sur le problème de la taille de la police), vous pouvez différencier les groupes de commentaires par la couleur. Il a encore besoin d'être mis en retrait, mais il en a besoin de beaucoup moins, ce qui vous donne de la place pour beaucoup plus de niveaux d'imbrication et le maintient toujours clair. Vous voudrez peut-être repenser ce lien menant à une page différente après environ 6 niveaux, cependant.
L'UE en moi doit se demander: quel type de conversation nécessite des commentaires imbriqués à l'infini?
Doivent-ils vraiment être imbriqués à l'infini? Considérez le mode de conversation de Gmail - il regroupe simplement toutes les réponses à la conversation par ordre chronologique. Semble assez bien fonctionner - cela n'a pas changé depuis des années. La seule plainte des gens est que certains veulent une "vue sans fil", mais c'est encore plus loin de ce que vous suggérez.
J'ai abordé ce problème, en ne mettant pas en retrait, dans certaines situations, et en utilisant des flèches pour indiquer quel commentaire répond à quel commentaire.
Voici un exemple, tiré de n système de discussion open source je développe:
Voici un lien vers l'exemple ci-dessus, dans la vraie vie: http://www.debiki.com/-71cs1#post-116979
(J'ai également écrit un article de blog à ce sujet: http://www.debiki.com/-01jn7-solving-problem-nested-replies-indentation )
J'ai pensé à un peu inspiré par MS Outlook 2010 - regrouper les conversations:
Afficher uniquement les commentaires "LEAF", chacun contenant tous les commentaires précédents dans cette ligne de conversation.
Par exemple, considérons la structure "réelle" suivante:
Post
- Comment1
- Comment2
- Comment2.1
- Comment2.2
- Comment2.2.1
Ce que l'utilisateur verrait, c'est:
Post
- Comment1
- Comment2.1
- Comment2.2.1
En regardant le commentaire 2.2.1, par exemple, l'utilisateur verrait:
Comment2.2.1 by UserX
I agree!
Comment2.2 by UserY
I think this should be done so and so
Comment2 by UserZ
This post has a call for action, what do you think?
(Bien que Commentaire2.1 contiendrait également Commentaire2)
Je pense que la suggestion de @ Dan de ne montrer qu'un seul commentaire et ses ancêtres a beaucoup de sens. Il permet de voir un message dans le contexte de la conversation qui y mène sans la distraction de branches non pertinentes.
Initialement, un message peut s'afficher comme ceci:
+-------------------------------+
| The Design of Everyday Things |
| by Don Norman |
| |
| [3 comments]|
+-------------------------------+
Cliquer sur [3 commentaires] ou appuyer sur la touche fléchée vers le bas ouvrirait le premier commentaire sous le message.
+-------------------------------+
| The Design of Everyday Things |
| by Don Norman |
| |
| |
+-------------------------------+
| 1 of 3 [x]|
| |
|< That's a great book! >|
| |
+-------------------------------+
À partir de ce point, vous pouvez parcourir tous les commentaires qui ont été écrits sur le message, en utilisant les boutons fléchés ou les touches fléchées droite et gauche. (BTW, chaque fois que je dis des touches fléchées, il est facile d'imaginer la même chose avec un balayage de l'écran tactile, l'inclinaison de l'accéléromètre, un joystick, un trackball, etc.)
Disons que vous allez à droite pour lire le commentaire suivant:
+-------------------------------+
| The Design of Everyday Things |
| by Don Norman |
| |
| |
+-------------------------------+
| 2 of 3 [x]|
| |
| I want to read this one. |
|< I've read his other two. >|
| |
| [8 comments]|
+-------------------------------+
À ce stade, vous êtes sur un commentaire qui comporte lui-même huit commentaires. Vous pouvez descendre d'un niveau et lire ces commentaires.
+-------------------------------+
| The Design of Everyday Things |
| by Don Norman |
| |
| |
+-------------------------------+
| 2 of 3 [x]|
| |
| I want to read this one. |
| I've read his other two. |
| |
+-------------------------------+
| 1 of 8 [x]|
| |
| I enjoyed this one and |
|< Emotional Design. I didn't >|
| know there was a third. |
| |
| [2 comments]|
+-------------------------------+
Etc. En théorie, il serait facile de suivre toutes les branches (ou juste les plus intéressantes) sans manquer d'espace, faire un zoom avant ou arrière comme un yo-yo, essayer de garder la pile de conversations dans votre tête, ou oublier quelles branches ont déjà été visités.
Il serait également trivial d'enregistrer, de mettre en signet ou d'imprimer un commentaire particulier; son contexte serait automatiquement inclus.
À un moment donné, vous devez limiter les utilisateurs à un niveau d'imbrication. Si vous autorisez les utilisateurs à s'imbriquer à l'infini, à un certain point (généralement environ 3-4 niveaux), le contenu du commentaire d'origine n'est plus pertinent pour ce qui se passe aux niveaux les plus profondément imbriqués.
Il convient également de noter que si l'imbrication est limitée manuellement à un certain nombre de niveaux, les utilisateurs trouveront toujours des moyens d'imbriquer artificiellement, tels que l'utilisation de @replies et la citation de personnes plus haut dans la chaîne de conversation.
Regardez slashdot.org. Reddit.com également. Leur système de commentaires est assez profond (une fois que vous avez supprimé le filtrage).
Comment? Je suppose que ce serait quelque chose dans la même approche que lors de l'expansion d'un système de dossiers dans un système d'exploitation. Relations parents-> enfants. Je n'ai pas traversé de limite sur la profondeur de la structure des dossiers dans Windows, mais ce n'est pas vraiment compliqué quand vous y pensez.
Afficher la "réponse la plus élevée" (d'abord, la plus récente, la mieux notée, peu importe). Afficher la réponse à Top. Répondre en haut a-t-il une réponse?
Je pense aussi que Phonescoop.com (Cliquez par exemple avec des réponses) a un modèle intéressant: les réponses se cachent après un certain point, mais vous pouvez approfondir les conversations et garder la hiérarchie.
Lorsque vous comparez Slashdot à Phonescoop, il est plus facile de perdre de vue la hiérarchie sur Slashdot, mais vous devez faire beaucoup plus en cliquant sur Phonescoop. Slashdot utilise également de moins en moins d'espace à mesure que vous approfondissez (je suis sûr que cela s'arrête à un moment donné et qu'ils se serrent tous ensemble ou s'alignent simplement).
Certains sites n'ont pas besoin d'une imbrication profonde. Ce site par exemple. La mise en page le nie. Les sites qui s'appuient sur des commentaires sur d'autres commentaires le supplient. La question est de savoir combien d'activité prévoyez-vous honnêtement? Et comment pouvez-vous le présenter de manière significative.
C'est un problème difficile à résoudre, ce qui rend également un puzzle intéressant. Si vous ne limitez pas les niveaux d'imbrication, vous avez besoin de quelque chose qui bouclera sans interrompre l'imbrication. Le positionnement (retrait) en boucle perturbera le contexte de la hiérarchie.
J'ai expérimenté la couleur et je pense qu'une solution doit être trouvée là-bas, peut-être.
C'est difficile, car la solution de bouclage ne peut pas avoir de statut de hiérarchie, car lorsqu'elle est bouclée, elle "se réinitialise" et vous perdez le contexte. La solution devra donc avoir un statut temporairement hiérarchique.
N'importe quels preneurs?
C'est un problème NP-difficile.
Vous pouvez résoudre ce problème, mais vous ne pouvez jamais savoir (ou dire) avec certitude que s'il est efficace ou non.