web-dev-qa-db-ja.com

階層コメントのユーザビリティの問題

ブログの場合、トピックの階層コメントを実装するためのベストプラクティスは何ですか？

ツリーのどこかに表示される可能性のある未読のコメントをユーザーが見つけられるようにするにはどうすればよいですか？長いディスカッションツリーの画面に表示されない場合に、親のコメントを表示するにはどうすればよいですか？

アイデアと実例（より良い）を歓迎します。

hierarchycomments
13
Nikita Prokopov

Redditのケーススタディ

Reddit などの一般的なスレッド化コメントシステムを見てみましょう。次の問題があります。

  • ツリーが非常に深い場合、コメントの親が何であるかを見分けるのは困難です。
  • ツリーが完全に展開されている場合、親コメントが画面から消えることがあります。
  • どのコメントが新しいかを示すものはありません。

Reddit old

次に、3つの問題すべてに対処するための推奨設計を見てみましょう。

reddit improved

親のコメントを見つける

Redditのかすかな灰色の縦線は、子コメントを親コメントと照合するには不十分です。目は線を上下にスキャンする多くの仕事をしなければなりません。かすかな線に加えて、コメントの各レベルを異なる色で色分けすることをお勧めします。レインボー（ROYGBIV）の色を使用します。赤は最初のレベル、紫は最大許容レベルです。空間的なキューに加えて別の視覚的なキューがあるので、親のコメントを見つけるのは簡単です。たとえば、青いコメントの親を見つけるには、最も近い緑のコメントまで上方にスキャンします。

保護者のコメントが画面から消えています

会話が長くなると、親のコメントが画面から外れる場合があります。これは+ /-ボタンで解決できます。親が表示されるまで、より多くのブランチを縮小できます。 Redditの+ /-ボタンのデザインを変更することにしました。なぜなら、ポスターの名前の横にそれらを配置するのがおかしいからです。ボタンは、ユーザーに対してアクションを実行するのではなく、ブランチに対して機能することになっています。また、ボタンは実際にはボタンではありません。アンカータグ内の単なるテキストです。見た目が悪く、グラフィカルなボタンほどクリックできるようには見えません。

新しいコメント

新しいコメントを黄色の背景と「新しい」ラベルで強調表示できます。新規として強調する内容は、ポリシーによって異なります。おそらく1〜2時間前のコメントのみを強調表示します。

10
JoJo

未読のコメント-未読のコメントの数を含むフローティング要素を持つことができ、クリックすると次のコメントに移動します（Wordの[検索]ダイアログの機能と同様）。フローティングする必要はありません。コメントにカーソルを合わせると表示されます。既存のコメントの横に表示される場合もあります（「次の未読コメントに移動する」アイコン）。

保護者の表示について-Gmailと同じようにできます-長いメールのディスカッションを表示しているとき、画面の右下隅の隣に、次のコメントの作成者の小さな表示があります。また、上にスクロールすると、右上隅の横に同様の表示があります。

これは、小さなインデントと、親から下がる微妙な垂直線で示すこともできます。また、親コメントのテキストをオンデマンドで利用できます（ここでも、ホバー付きのアイコン）。

4
Vitaly Mijiritsky

スレッド化された階層スタイルを使用しないでください。単純なリストがあります。これはユーザーにとってはるかに優れています。あなたはあなたがあなたがスレッドスタイルを必要としていると思うが、あなたは必要ではない。

3
Pete

私のWebアプリでは、階層ビュー（幅広いディスカッション用）から日付順（最後の投稿を見つけるため）に切り替えるだけです。あなたは私のウェブサイトでこの解決策を見つけることができます http://chemica.r -すみません、それはロシア語のみです。必要に応じて、翻訳したスクリーンショットを投稿することもできます:)

2
user3988