web-dev-qa-db-ja.com

無限にネストされたコメントを表示する良い方法は何ですか?

ひどく見えない方法で無限にネストされたコメントスレッドを実行する方法はありますか?入れ子のレベルを単純に制限できることは理解していますが、コメントをインデントするだけではなく、他のコメントへの返信であることを示すより良い方法があるかもしれません。一定レベルのネストの後、インデントは失敗します。

色、サイズ、段階的開示、数字(1.1、1.2、1.2.1など)、モーダルウィンドウ、コメント返信ストリーム(FacebookやTwitterなど)、 SeaDragon など。 、など.

誰かがこの問題を解決しましたか?あなたは何をした?すぐに使える提案や視覚的な例も大歓迎です。

34
Virtuosi Media

「無限にネストされたコメント」をデザインの別の次元として扱うことはそれほど難しくありません。ほとんどのコメントスレッドには、コメント(X = 1)とコメントの数(Y = N)の2つの次元があります。しかし、これでコメントがネストされ、ミックスにZ = Mが追加されました。

UIデザインの観点から見ると、Pamが説明するものや、タブ、パネルなどの追加のディメンションを処理するためのパラダイムがたくさんあるため、これは大きな課題にはなりません。私たちが遭遇する問題現実には、無限の画面スペースや無限の豊かさを利用することはできません。ここで状況が複雑になります。Webユーザーは右にスクロールしたくないので、ほとんどのコメントボックスは自己完結型ではなく、親ページのスクロールバーの影響を受けます。

IPad用Twitter

最近、iPad for Twitterからこの分野にインスピレーションを得ました。そこで、ZディメンションはX、Yの上にオーバーレイされたペインとしてインタラクティブに表示されます。

Twitter for iPad

IPadを使用しているので、その余分なペインを表示してフルビューにするか、フリックするかを完全に制御できます。したがって、ツイート(2次元のX、Yリスト)を読むのは問題ありません。上下にスクロールするだけです。ほとんどのTwitterアプリは、3番目のディメンションを追加しようとするとつまずきます。これは、ツイートにズームインしてそのコンテキストを確認することです。

たとえば、ツイートは他の誰かへの返信である可能性があり、そのような場合は、会話全体を確認したいとします。ほとんどのWebベースのTwitterクライアントは新しいページをロードします。ほとんどのアプリは実際にはサポートしていません。しかし、Twitter for iPadはその右側のペインを再び表示し、選択されたツイートを元のペインで強調表示します。これで、コンテキスト内にあるものを縦にスクロールしたリストを読むことができます。この時点で、Z = 1です。このリストの項目をクリックすると、右側から別のペインが表示され、Z = 2になります。

理論的には、これはZ = Mでも継続できますが、Twitterクライアント自体の動作(おそらくクラッシュする!)はわかりません。ただし、このモデルは魅力的です。

15
Rahul

あなたが正しい、インデントは特定のレベルの後に失敗しますが、 deviantArt がするように常に解決策をとることができます(約10レベルの後、それらはあなたを全体の異なるページにリダイレクトします返信ストリーム)。

ただし、フォントサイズやグループ化パネルの変更を希望します。これが私が話していることのイメージです。それはより簡単で、私はそれが仕事を成し遂げると思います。 Facebookは実際にはニュースフィードページで両方の機能を組み合わせています。主なアイデアは、それらを明確に区別して示すことであり、同時に、一連の返信を開始した主なコメントを示します。 alt text

パネルの主題を広げると(フォントサイズの問題は正しいと思うので)、コメントのグループを色で区別できます。それでもインデントは必要ですが、必要なインデントははるかに少ないので、より多くのレベルのネストが可能であり、明確に保たれます。ただし、6レベル程度経過した後、別のページにリンクを再検討する必要があるかもしれません。

alt text

14
Pam Rdz

私のUEは質問する必要があります。どのような種類の会話には、無限にネストされたコメントが必要ですか?

本当に無限にネストする必要がありますか? Gmailの会話モードを検討してください-会話へのすべての返信を日付順にグループ化するだけです。かなりうまく機能しているようです-何年も変更されていません。人々が持っている唯一の不満は「スレッド化されていないビュー」を望んでいる人ですが、これはあなたが提案するものからさらに離れています。

8
Julian H

状況によってはインデントせず、矢印を使用してどのコメントがどのコメントに返信するかを示すことで、この問題に取り組みました。

以下は、私が開発している オープンソースディスカッションシステム の例です。


Indicating which comment replies to which comment, via arrows


上記の例へのリンクは次のとおりです: http://www.debiki.com/-71cs1#post-116979

(これについてもブログ記事を書きました: http://www.debiki.com/-01jn7-solving-problem-nested-replies-indentation

8
KajMagnus

MS Outlook 2010に触発されたものについて考えました-会話のグループ化:

「会話」行の前のすべてのコメントを含む「リーフ」コメントのみを表示します。

たとえば、次の「実際の」構造について考えてみます。

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

ユーザーに表示されるものは次のとおりです。

Post
  - Comment1
  - Comment2.1
  - Comment2.2.1

たとえば、Comment2.2.1を見ると、ユーザーには次のように表示されます。

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?

(Comment2.1にはComment2も含まれます)

5
Dan Barak

@Danのコメントとその祖先を1つだけ表示するという提案は、非常に理にかなっていると思います。それは関係のないブランチの気を散らすことなくそれにつながる会話の文脈でメッセージを見ることができます。

最初、投稿は次のように表示されます。

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

[3件のコメント]をクリックするか下矢印キーを押すと、投稿の下に最初のコメントが表示されます。

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

この時点から、矢印ボタンまたは左右の矢印キーを使用して、投稿について書かれたすべてのコメントを循環させることができます。 (ところで、私が矢印キーを言うときはいつでも、タッチスクリーンのスワイプ、加速度計の傾き、ジョイスティック、トラックボールなどで同じことを想像するのは簡単です。)

次のコメントを読むために右に行くとしましょう:

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

この時点で、コメントが8件あります。レベルを下げて、それらのコメントを読むことができます。

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

等々。理論的には、スペースが足りなくなったり、ヨーヨーのようにズームインまたはズームアウトしたり、会話スタックを頭に置いたり、どのブランチを忘れたりせずに、すべてのブランチ(または興味深いブランチ)をたどるのは簡単です。すでに訪問されています。

特定のコメントを保存、ブックマーク、または印刷することも簡単です。そのコンテキストは自動的に含まれます。

5

ある時点で、ユーザーをネストレベルに制限する必要があります。ユーザーが特定の時点(通常は約3〜4レベル)で無限にネストできるようにすると、元のコメントの内容は、より深くネストされたレベルで行われていることとは無関係になります。

ネスティングが手動で特定のレベル数に制限されている場合でも、@ repliesを使用したり、会話チェーンのさらに上の方で引用したりするなど、人為的にネストする方法がわかることにも注意してください。

1
Jason

Slashdot.orgを見てください。 Reddit.comも同様です。彼らのコメントシステムは非常に深くなります(フィルタリングを削除すると)。

どうやって?私は、OSでフォルダーシステムを拡張するときと同じアプローチに沿ったものになると思います。親->子の関係。私は、ウィンドウのフォルダ構造がどのくらい深くなることができるかという制限に出くわしていませんが、それについて考えても、それほど複雑ではありません。

「トップリプライ」を表示します(最初、最新、最高の評価など)。トップへの返信を表示します。トップへの返信には返信がありますか?

Phonescoop.com (たとえば、返信をクリックすると)には興味深いモデルがあると思います。返信は特定のポイントの後で非表示になりますが、会話をより深く掘り下げて階層を維持できます。

SlashdotとPhonescoopを比較すると、Slashdotの階層を見失う可能性が高くなりますが、Phonescoopをさらにクリックする必要があります。 Slashdotは、深くなるにつれて使用するスペースも少なくなります(ある時点で停止し、すべてがつぶれるか、単純に並ぶと確信しています)。

一部のサイトは深い入れ子を必要としません。たとえばこのサイト。レイアウトはそれを無効にします。他のコメントへのコメントに依存するサイトはそれを懇願します。問題は、正直にどのくらいの活動を予測するかということです。そして、どうすればそれを有意義な方法で提示することができますか。

1
WernerCD

これは解決するのが難しい問題で、面白いパズルにもなります。入れ子のレベルを制限しない場合は、入れ子を壊さずにループするものが必要です。ループ時に配置(インデント)すると、階層のコンテキストが台無しになります。

私は色を試してみましたが、おそらくそこに解決策が見つかると思います。

ループソリューションは階層のステータスを持つことができないため、ループが「リセット」されてコンテキストが失われるため、これは困難です。したがって、ソリューションは一時的に階層的なステータスを持つ必要があります。

テイカーはいますか?

1
Løvskogen

これはNP難しい問題です。

あなたはこの問題を解決できますが、それが効率的であるかどうかを確実に知る(または言う)ことはできません。

0
kmonsoor