Qual é uma boa maneira de exibir infinitos comentários aninhados?
Existe uma maneira de fazer infinitos threads de comentários aninhados de uma maneira que não pareça horrível? Sei que alguém poderia simplesmente restringir os níveis de aninhamento, mas talvez haja uma maneira melhor de indicar que alguns comentários são respostas a outros comentários do que simplesmente recuar os comentários. Após um certo nível de aninhamento, o recuo falha.
Algumas idéias para brincar: cor, tamanho, divulgação progressiva, números (1.1, 1.2, 1.2.1, etc), janelas modais, um fluxo de resposta de comentários (como Facebook ou Twitter), algo como SeaDragon , etc.
Alguém solucionou este problema? O que você fez? Sugestões e exemplos visuais prontos para o uso também são bem-vindos.
Não é tão difícil se você tratar os "comentários aninhados infinitos" como outra dimensão em seu design. A maioria dos threads de comentários possui apenas duas dimensões: o comentário (X = 1) e o número de comentários (Y = N). Mas agora você aninhou comentários, adicionando Z = M à mistura.
Do ponto de vista do design da interface do usuário, isso não deve representar um grande desafio, pois há muitos paradigmas para lidar com dimensões extras, como as que Pam descreve, além de guias, painéis etc. O problema que encontramos o mundo real é que não há espaço infinito na tela ou riqueza infinita disponível. É aí que as coisas se complicam: o usuário da web não deseja rolar para a direita e a maioria das caixas de comentários é sujeita à barra de rolagem da página pai sem ser independente.
Twitter para iPad
O Twitter para iPad recentemente me deu alguma inspiração nessa área. Lá, a dimensão Z é apresentada interativamente como um painel sobreposto em cima de X, Y:
Como você está usando um iPad, você tem controle total sobre a possibilidade de trazer ou não esse painel extra para visualização completa ou movê-lo para longe. Portanto, ler tweets (uma lista X, Y bidimensional) é bom: basta rolar para cima e para baixo. A maioria dos aplicativos do Twitter tropeça ao tentar adicionar a terceira dimensão, que é ampliada em um Tweet para ver seu contexto.
Por exemplo, um Tweet pode ser uma resposta para outra pessoa e, nesses casos, você deseja ver a conversa completa. A maioria dos clientes do Twitter baseados na Web carregará uma nova página. A maioria dos aplicativos não suporta realmente. Mas o Twitter para iPad apenas traz o painel direito novamente e destaca o Tweet selecionado no painel original. Agora você pode ler uma lista rolada verticalmente do que estiver no contexto. Neste ponto, Z = 1. Se você clicar em um item desta lista, outro painel será exibido à direita e você estará em Z = 2.
Teoricamente, isso pode continuar para Z = M, embora eu não tenha certeza do que o próprio cliente do Twitter faz (provavelmente trava!). Este modelo parece convidativo, no entanto.
Você está certo, o recuo falha após uma certa quantidade de níveis, mas você sempre pode buscar uma solução como o que deviantArt faz (após cerca de 10 níveis, eles o redirecionam para uma página diferente com todo o conjunto fluxo de resposta).
Eu prefiro fazer alterações no tamanho da fonte ou nos painéis de agrupamento. Aqui está uma imagem sobre o que estou falando. É mais simples e acho que faz o trabalho. O Facebook faz uma mistura de ambos na página do Feed de notícias. A idéia principal é separá-los claramente e, ao mesmo tempo, mostrar qual foi o principal comentário que deu início à cadeia de respostas. 
Ampliando o assunto dos painéis (como acho que você está certo sobre a questão do tamanho da fonte), é possível diferenciar os grupos de comentários com cores. Ele ainda precisa ser recuado, mas precisa de muito menos, o que oferece espaço para muito mais níveis de aninhamento e ainda o mantém claro. Você pode repensar o link que leva a uma página diferente após 6 níveis, aproximadamente.
O UE em mim precisa perguntar: que tipo de conversa requer comentários infinitamente aninhados?
Eles realmente precisam estar infinitamente aninhados? Considere o modo de conversa do Gmail - ele simplesmente agrupa todas as respostas à conversa em ordem cronológica. Parece funcionar muito bem - não muda há anos. A única reclamação que as pessoas têm é que alguns desejam uma "visão sem fio", mas isso fica ainda mais longe do que você sugere.
Abordei esse problema, não recuando, em algumas situações, e usando setas para indicar qual comentário responde a qual comentário.
Aqui está um exemplo, de m sistema de discussão de código aberto Estou desenvolvendo:
Aqui está um link para o exemplo acima, na vida real: http://www.debiki.com/-71cs1#post-116979
(Também escrevi um artigo de blog sobre isso: http://www.debiki.com/-01jn7-solving-problem-nested-replies-indentation )
Pensei em um pouco inspirado pelo MS Outlook 2010 - agrupando conversas:
Mostre apenas os comentários "FOLHA", cada um contendo todos os comentários anteriores nessa linha de conversa.
Por exemplo, considere a seguinte estrutura da "vida real":
Post
- Comment1
- Comment2
- Comment2.1
- Comment2.2
- Comment2.2.1
O que o usuário veria é:
Post
- Comment1
- Comment2.1
- Comment2.2.1
Ao analisar o Comment2.2.1, por exemplo, o usuário veria:
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?
(Embora o Comment2.1 também contenha Comment2)
Acho que a sugestão de @ Dan de mostrar apenas um comentário e seus ancestrais faz muito sentido. Ele permite ver uma mensagem no contexto da conversa que a leva sem a distração de ramos irrelevantes.
Inicialmente, uma postagem pode ser exibida assim:
+-------------------------------+
| The Design of Everyday Things |
| by Don Norman |
| |
| [3 comments]|
+-------------------------------+
Clicar em [3 comentários] ou pressionar a tecla de seta para baixo abriria o primeiro comentário abaixo da postagem.
+-------------------------------+
| The Design of Everyday Things |
| by Don Norman |
| |
| |
+-------------------------------+
| 1 of 3 [x]|
| |
|< That's a great book! >|
| |
+-------------------------------+
A partir deste ponto, você pode percorrer todos os comentários que foram escritos sobre a postagem, usando os botões de seta ou as teclas de seta direita e esquerda. (BTW, sempre que digo teclas de seta, é fácil imaginar o mesmo com um toque na tela sensível ao toque, inclinação do acelerômetro, joystick, trackball etc.)
Digamos que você vá direto para ler o próximo comentário:
+-------------------------------+
| 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]|
+-------------------------------+
Neste ponto, você está em um comentário que possui oito comentários. Você pode descer um nível e ler esses comentários.
+-------------------------------+
| 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]|
+-------------------------------+
E assim por diante. Em teoria, seria fácil seguir todos os ramos (ou apenas os interessantes) sem ficar sem espaço, aumentar e diminuir o zoom como um ioiô, tentando manter a pilha de conversas em sua cabeça ou esquecer quais ramos já foram visitados.
Também seria trivial salvar, marcar como favorito ou imprimir um comentário específico; seu contexto seria incluído automaticamente.
Em algum momento, você deve limitar os usuários a um nível de aninhamento. Se você permitir que os usuários aninhem infinitamente, em um determinado momento (geralmente de 3 a 4 níveis), o conteúdo do comentário original não será mais relevante para o que está acontecendo nos níveis mais profundamente aninhados.
Também vale a pena notar que, se o aninhamento for restrito manualmente a um certo número de níveis, as pessoas ainda descobrirão maneiras de aninhar artificialmente, como usar as respostas @ e citar as pessoas na cadeia de conversas.
Veja slashdot.org. Reddit.com também. O sistema de comentários deles é bastante profundo (depois que você remove a filtragem).
Quão? Suponho que seria algo da mesma maneira adotada ao expandir um sistema de pastas em um sistema operacional. Pai-> Relacionamentos filho. Eu não atravessei um limite para a profundidade da estrutura de pastas do Windows, mas não é realmente complicado quando você pensa sobre isso.
Exibir "resposta principal" (primeiro, mais recente, melhor classificado, qualquer que seja). Exibir resposta para o topo. Responder ao topo tem uma resposta?
Também acho que Phonescoop.com (clique por exemplo com respostas) tem um modelo interessante: as respostas ficam ocultas após um certo ponto, mas você pode se aprofundar nas conversas e manter a hierarquia.
Quando você compara o Slashdot ao Phonescoop, é mais fácil perder de vista a hierarquia no Slashdot, mas é necessário fazer muito mais cliques no Phonescoop. O Slashdot também usa cada vez menos espaço à medida que você se aprofunda (tenho certeza de que para em algum momento e todos eles se juntam ou se alinham) ..
Alguns sites não precisam de aninhamento profundo. Este site, por exemplo. O layout nega isso. Sites que se baseiam em comentar outros comentários imploram por isso. A questão é: quanta atividade você honestamente prevê? E como você pode apresentá-lo de maneira significativa.
Este é um problema difícil de resolver, o que também contribui para um quebra-cabeça interessante. Se você não está limitando os níveis de aninhamento, precisa de algo que faça um loop sem interromper o aninhamento. O posicionamento (recuo) quando em loop atrapalha o contexto da hierarquia.
Eu experimentei cores, e acho que talvez haja uma solução lá.
É difícil, porque a solução de loop não pode ter nenhum status de hierarquia, porque quando colocada em loop será redefinida e você perderá o contexto. Portanto, a solução precisará ter um status hierárquico temporário.
Algum comprador?
É um problema difícil de NP.
Você pode resolver esse problema, mas nunca pode saber (ou dizer) com certeza se é eficiente ou não.