it-swarm-es.com

¿Cuál es una buena manera de mostrar comentarios anidados infinitos?

¿Hay alguna manera de hacer hilos de comentarios anidados infinitos de una manera que no se vea horrible? Me doy cuenta de que uno simplemente podría restringir los niveles de anidación, pero tal vez haya una mejor manera de indicar que algunos comentarios son respuestas a otros comentarios que simplemente sangrar los comentarios. Después de un cierto nivel de anidamiento, la sangría falla.

Algunas ideas para jugar: color, tamaño, divulgación progresiva, números (1.1, 1.2, 1.2.1, etc.), ventanas modales, una secuencia de respuesta de comentarios (como Facebook o Twitter), algo así como SeaDragon etc.

Ha resuelto alguien este problema? ¿Qué hiciste? También se aceptan sugerencias y ejemplos visuales listos para usar.

34
Virtuosi Media

No es tan difícil si trata los "comentarios anidados infinitos" como otra dimensión en su diseño. La mayoría de los hilos de comentarios solo tienen dos dimensiones: el comentario (X = 1) y el número de comentarios (Y = N). Pero ahora tiene comentarios anidados, agregando Z = M a la mezcla.

Desde el punto de vista del diseño de la interfaz de usuario, esto no debería representar un gran desafío, ya que hay muchos paradigmas para tratar con dimensiones adicionales, como las que Pam describe, así como las pestañas, paneles, etc. El problema con el que nos encontramos El mundo real es que no hay espacio de pantalla infinito o riqueza infinita disponible. Ahí es donde las cosas se complican: el usuario web no quiere desplazarse hacia la derecha, y la mayoría de los cuadros de comentarios están sujetos a la barra de desplazamiento de la página principal sin ser independientes.

Twitter para iPad

Twitter para iPad recientemente me dio algo de inspiración en esta área. Allí, la dimensión Z se presenta interactivamente como un panel superpuesto en la parte superior de X, Y:

Twitter for iPad

Debido a que está utilizando un iPad, tiene control total sobre si traer o no ese panel adicional para una vista completa o alejarlo. Entonces, leer tweets (una lista bidimensional de X, Y) está bien: solo desplácese hacia arriba y hacia abajo. La mayoría de las aplicaciones de Twitter tropiezan cuando intentan agregar la tercera dimensión, que se está ampliando a un Tweet para ver su contexto.

Por ejemplo, un Tweet podría ser una respuesta a otra persona y, en esos casos, desea ver la conversación completa. La mayoría de los clientes de Twitter basados ​​en la web cargarán una nueva página. La mayoría de las aplicaciones no lo admitirán realmente. Pero Twitter para iPad solo vuelve a mostrar ese panel de la derecha y resalta el Tweet seleccionado en el panel original. Ahora puede leer una lista desplazada verticalmente de lo que esté en el contexto. En este punto, Z = 1. Si hace clic en un elemento de esta lista, aparece otro panel desde la derecha y está en Z = 2.

En teoría, esto puede continuar para Z = M, aunque no estoy seguro de lo que hace el cliente de Twitter (¡probablemente se bloquea!). Sin embargo, este modelo parece atractivo.

15
Rahul

Tiene razón, la sangría falla después de una cierta cantidad de niveles, pero siempre puede buscar una solución como lo que deviantArt hace (después de aproximadamente 10 niveles, lo redirigen a una página diferente con el conjunto flujo de respuesta).

Sin embargo, prefiero realizar cambios en el tamaño de fuente o paneles de agrupación. Aquí hay una imagen de lo que estoy hablando. Es más simple y creo que hace el trabajo. Facebook en realidad hace una mezcla de ambos en la página de Noticias. La idea principal es mostrarlos claramente, y al mismo tiempo mostrar cuál fue el comentario principal que inició la cadena de respuestas. alt text

Ampliando el tema de los paneles (ya que creo que tiene razón sobre el problema del tamaño de fuente), puede diferenciar los grupos de comentarios con color. Todavía necesita sangría, pero necesita mucho menos, lo que le da espacio para muchos más niveles de anidación y aún lo mantiene despejado. Sin embargo, es posible que desee repensar ese enlace que conduce a una página diferente después de 6 niveles.

alt text

14
Pam Rdz

El UE en mí tiene que preguntar: ¿qué tipo de conversación requiere comentarios infinitamente anidados?

¿Realmente necesitan estar anidados infinitamente? Considere el modo de conversación de Gmail: simplemente agrupa todas las respuestas a la conversación en orden cronológico. Parece funcionar bastante bien, no ha cambiado en años. La única queja que tiene la gente es que algunos quieren una 'vista sin hilos', pero esto está aún más lejos de lo que sugieres.

8
Julian H

He abordado este problema, sin sangría, en algunas situaciones, y usando flechas para indicar qué comentario responde a qué comentario.

Aquí hay un ejemplo, de n sistema de discusión de código abierto Estoy desarrollando:


Indicating which comment replies to which comment, via arrows


Aquí hay un enlace al ejemplo anterior, en la vida real: http://www.debiki.com/-71cs1#post-116979

(También escribí un artículo de blog sobre esto: http://www.debiki.com/-01jn7-solving-problem-nested-replies-indentation )

8
KajMagnus

Pensé en uno inspirado en MS Outlook 2010: agrupar conversaciones:

Mostrar solo los comentarios "LEAF", cada uno con todos los comentarios anteriores en esa línea de conversación

Por ejemplo, considere la siguiente estructura de la "vida real":

Post
 - Comment1
 - Comment2
   - Comment2.1
   - Comment2.2
     - Comment2.2.1

Lo que el usuario vería es:

Post
  - Comment1
  - Comment2.1
  - Comment2.2.1

Al mirar Comment2.2.1, por ejemplo, el usuario vería:

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?

(Mientras que Comment2.1 también contendría Comment2)

5
Dan Barak

Creo que la sugerencia de @ Dan de mostrar solo un comentario y sus antepasados ​​tiene mucho sentido. Le permite a uno ver un mensaje en el contexto de la conversación que conduce a él sin la distracción de ramas irrelevantes.

Inicialmente, una publicación puede mostrarse así:

+-------------------------------+
| The Design of Everyday Things |
| by Don Norman                 |
|                               | 
|                   [3 comments]| 
+-------------------------------+

Al hacer clic en [3 comentarios] o al presionar la tecla de flecha hacia abajo, se abrirá el primer comentario debajo de la publicación.

+-------------------------------+
| The Design of Everyday Things |
| by Don Norman                 |
|                               |
|                               | 
+-------------------------------+
|                     1 of 3 [x]| 
|                               |
|< That's a great book!        >|     
|                               |
+-------------------------------+                     

Desde este punto, puede recorrer todos los comentarios que se escribieron sobre la publicación, utilizando los botones de flecha o las teclas de flecha derecha e izquierda. (Por cierto, cada vez que digo teclas de flecha, es fácil imaginar lo mismo con un deslizamiento de la pantalla táctil, inclinación del acelerómetro, joystick, trackball, etc.)

Digamos que vas a la derecha para leer el siguiente comentario:

+-------------------------------+
| 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]|
+-------------------------------+  

En este punto, estás en un comentario que tiene ocho comentarios. Puedes bajar un nivel y leer esos comentarios.

+-------------------------------+
| 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]|
+-------------------------------+

Y así. En teoría, sería fácil seguir todas las ramas (o solo las interesantes) sin quedarse sin espacio, acercándose y alejándose como un yoyo, tratando de mantener la conversación en su cabeza u olvidando qué ramas Ya han sido visitados.

También sería trivial guardar, marcar o imprimir un comentario en particular; su contexto se incluiría automáticamente.

5
Patrick McElhaney

En algún momento, debe limitar los usuarios a un nivel de anidación. Si permite a los usuarios anidar infinitamente, en un cierto punto (generalmente alrededor de 3-4 niveles), el contenido del comentario original ya no es relevante para lo que está sucediendo en los niveles más profundamente anidados.

También vale la pena señalar que si la anidación se restringe manualmente a un cierto número de niveles, las personas aún encontrarán formas de anidar artificialmente, como usar @replies y citar a las personas más arriba en la cadena de conversación.

1
Jason

Mira slashdot.org. Reddit.com también. Su sistema de comentarios es bastante profundo (una vez que eliminas el filtrado).

¿Cómo? Supongo que sería algo similar al enfoque adoptado al expandir un sistema de carpetas en un sistema operativo. Relaciones padre-> Hijo. No he encontrado un límite sobre cuán profunda puede ser la estructura de carpetas en Windows, pero no es realmente complicado cuando lo piensas.

Mostrar "respuesta superior" (Primero, más reciente, mejor calificado, lo que sea). Mostrar respuesta al principio. ¿Reply to top tiene una respuesta?

También creo que Phonescoop.com (Haga clic, por ejemplo, con respuestas) tiene un modelo interesante: las respuestas se ocultan después de cierto punto, pero puede profundizar en las conversaciones y mantener la jerarquía.

Cuando compara Slashdot con Phonescoop, es más fácil perder de vista la jerarquía en Slashdot, pero debe hacer mucho más clic en Phonescoop. Slashdot también usa cada vez menos espacio a medida que profundizas (estoy seguro de que se detiene en algún momento y todos se apiñan o simplemente se alinean).

Algunos sitios no necesitan anidamiento profundo. Este sitio por ejemplo. El diseño lo niega. Los sitios que confían en comentar sobre otros comentarios lo piden. La pregunta es, ¿cuánta actividad prevees honestamente? ¿Y cómo puedes presentarlo de manera significativa?.

1
WernerCD

Este es un problema difícil de resolver, que también lo convierte en un rompecabezas interesante. Si no está limitando los niveles de anidación, necesita algo que se repita sin romper la anidación. El posicionamiento (sangría) cuando se realiza un bucle dañará el contexto de la jerarquía.

He experimentado con el color, y creo que allí se puede encontrar una solución.

Es difícil, porque la solución de bucle no puede tener ningún estado de jerarquía, porque cuando se enlaza se 'restablecerá' y perderá contexto. Por lo tanto, la solución deberá tener un estado jerárquico temporal.

¿Ningún arrendatario?

1
Løvskogen

Es un problema NP-difícil.

Puede resolver este problema, pero nunca puede saberlo (o decirlo) con certeza si es eficiente o no.

0
kmonsoor