ニュースソーシャルネットワークの設計のベストプラクティス

最近の毎日のニュースをどのように入手できますか？ まあ...それはあなたのお気に入りのサイトやブログへの訪問かもしれませんが、これらのブログには更新の厳密な並べ替えがないため、これは非効率的です。 RSSを使用して購読することもできます。RSSはすべての新しい記事を直接配信しますが、この場合、自分が興味のあるものを見つけるためにすべての新しい記事を自分で処理する必要があります。 今日の別の選択肢は、ニュースソーシャルネットワークにアクセスすることです。



主な機能が興味深いリンクを収集して共有することであるソーシャルニュースサイトのリンクアグリゲーター。 これは、ユーザーがリンクを送信するか、システムで自動的に送信することで実行できます。 集約の側面はその一部にすぎませんが、この側面もリンクを並べ替えます。 繰り返しますが、これは投票ユーザーと一部の機械的アルゴリズムによって実行できます（ただし、この場合、これを実際に「ソーシャル」ニュースサイトと呼ぶことはできますか？）。 最終的な結果は同じですが、最も興味深いリンクが一番上に表示され、この機能によりソーシャルニュースサイトがRSSの優れた代替手段になります。



この記事では、現在のソーシャルニュースサイトのいくつかのショーケースを設計し、デザインの傾向とパターンを決定し、そのようなサイトの設計に必要なベストプラクティスを提供します。 4つの人気のあるソーシャルニュースサイトを見て、これらのサンプルの比較を見てみましょう。

ディグ

Diggは、特に多くの競合他社が採用しているデザインを使用した、最も人気のあるソーシャルニュースネットワークです。 Diggは2つのレイアウト列を使用します。左側の記事のリストと右側の主題に関する追加資料（10記事のフィールドなど）です。 Diggのヘッダーには、ストーリーのカテゴリのリストが表示され、下部はそれらのソートに専念しています。 したがって、ユーザーは「...」などのカテゴリを選択し、「ニュース」で並べ替えて最新の資料をすべて表示できます。

プロペラ

Propellerは、WebサイトがDiggスキームに非常に厳密に従っていることを示す良い例です。 これらは、コンテンツの左側と中央にある記事のリスト、Propellerの近くの最後のツイート、または最もコメントの多い記事のリストを含む2つの列です。

Diggとは異なり、Propellerは各ストーリーの間に水平線の区切り線を使用し、リストの下にストライプの背景を表示して見やすくしています。 これは役立つ場合がありますが、テーブルの複数の列、特に多数の列での読み取りを容易にするためにシマウマが伝統的に使用されていることに注意する必要があります。 これは、元のセルから遠く離れたデータを読み取り、ゼブラストライプをガイドラインとして使用して、行の制御を失うことなく目を動かすのに役立つためです。 本質的に1列のデータのみであるPropellerの場合、ゼブラ効果は疑わしいです。

Reddit

Redditは、Diggのようなデザインの例です。 特にRedditを使用すると、ニュースのコンテンツに集中できます。 主な注意は非常に集中しているため、見出し以外はすべて最小化され、主な情報を最初に見ることができます。 このミニマリスト設計により、訪問者は情報をすばやく消費でき、ユーザーは多くの見出しをすばやく参照して、興味のあるものを見つけることができます。 Redditにはフィールドの制限がないため、各ストーリーが占めるスペースが少なくなり、より多くの見出しを画面に表示できます。

Redditの最初のページのヘッダーには、ストーリーのランダム出力というユニークな要素もあります。 他のソーシャルニュースサイトと同様に、最新の記事は次のセクションに掲載されます。 このセクションはカバーページよりもトラフィックが少なく、興味深いストーリーが失われる可能性があります。 これを修正するために、Redditはメインページのこのセクションからランダムなストーリータイトルを表示し、短い露出時間を与えて人気を高めます。

ニュースバイン

Newsvineは開発に対して別のアプローチを取りました。 見出しリストのように見える他のソーシャルニュースサイトとは異なり、Newsvineは雑誌/新聞のスキームを使用しています。 ストーリーには説明付きの大きな写真が付いており、場合によってはコンテンツに記事の詳細が表示されることがあります。



Newsvineの興味深い要素の1つは、ヒートマップアクションです。



チャートには、最も投票された記事と最も話題になった記事の2つのバーが表示されます。 それぞれが一連のブロックで、すべて異なる色とサイズで表示されます。 大きなブロックは、スケジュールに応じて、追加または最大投票数の存在を意味し、記事の年齢を示します：緑-新鮮、赤-後で。 この視覚化は、Newsvineのコンテンツを表示するユニークな方法を提供します。





それでは、ソーシャルニュースサイトにある一般的なインターフェイス要素を見てみましょう。

投票箱

すべてのソーシャルニュースサイトには、自動ソートアルゴリズムを使用するオブジェクトを除き、記事に投票する方法があります。 投票エリアは非常に重要です。 読者が不足しないように十分に表示したいのですが、同時に、ヘッダーのリストを表示するときの注意散漫を避けるために、それを非表示にし、十分なインターフェースを使用する必要があります。



人気のあるニュースサイトの投票ボックスの例を次に示します。



各フィールドは、出版物の評価、総投票、アップグレード評価リンク、評価ダウンリンクリンクの4つ以下の要素で構成されます。 ほとんどのサイトはランキングを表示せず、単純に合計ポイント、つまり賛成票と反対票の合計を表示します。 音声といえば、ほとんどのソーシャルニュースサイトにはダウングレードする方法があり、ボタンを1つだけ選択して評価を上げることができます。 これらの場合、増加ボタンのみが表示されている場合、パブリケーションを「埋める」（またはダウングレードする）リンクは別の場所にあります。

ストーリーの詳細

各ストーリーには、記事のタイトルとテキストだけではありません。 ストーリー全体が表示されます：日付、著者、短い説明、コメントセクションへのリンク、そして場合によっては画像。



このようなニュースブロックが人気のあるニュースサイトにどのように表示されるかの例を次に示します。















多くの場合、投票フィールドは画面の左側にあります。 これにより、各ストーリーの一貫性を保つことができます。 コメントへのリンク、および「このストーリーをフォローする」などの他の追加サービスは、説明（ある場合）または見出しの下にあります。 見出しの周りにテキストの詳細を配置してグレーにすることで、注意をそらすことなく、記事の見出しに集中することができます。その結果、ストーリーのリストを表示するのがはるかに簡単になり、目がすぐに移動します。

ほとんどのソーシャルニュースサイトでは、時間は相対時間で表示されます（たとえば、10時間前）。 これは理にかなっています。なぜなら、人々は物語がどれだけ新鮮かを見たいのであり、それが投稿された正確な日時に特に興味がないからです。

また、いくつかのサイトでは、見出しが表示されるリンクが角かっこで囲まれた後、原則として表示されるドメインが表示されます。 これは、訪問者が期待するコンテンツの種類を理解できるため便利です。 たとえば、「youtube.com」がソースとして表示されている場合、この動画を知っています。 「nytimes.com」などのよく知られている情報源も、ストーリーの質と持続時間の指標の1つです。 ユーザーがタイトルを見ながらソースを見ることができるという事実にもかかわらず、すべての場合にそれを表示することはヘッダーを素早く見ることを妨げません。

ページネーション

ソーシャルニュースサイトには、ユーザーが送信したリンクが数千、場合によっては数百万あります。 これらのリンクをすべて一度に表示することはできません。もちろん、ユーザーがすべてのリンクを表示できるようにする小さなツールを表示する必要があります。 リンクは通常、ページネーションを使用してページネーションされます。 ページネーションは、情報のコンテンツを複数のページに分割する方法です。通常、ページの下部または上部でページネーションリンクコンプレックスの出力を確認できます。これにより、次または前のページに移動したり、手動でページ番号を選択したりできます。



人気のあるニュースサイトのページネーションの例を次に示します。





もちろん、ページネーションに代わるものがあります。 Redditは、次のページと前のページのみを表示します。





この方法により移行が簡単になるため、どのページに移動するかを考える必要はなく、「次へ」リンクをクリックするだけです。 リンクは2つしかないため、ほとんどの場合、次のページに移動します。 このような方法を作成すると、現在どのページにいるかを判断できないため、混乱します。



Slashdotは、オンデマンドでより多くのニュースをダウンロードします。 [詳細設定]ボタンをクリックすると、AJAXを使用して以下の記事が読み込まれます。



AJAXを使用してヘッダーをダウンロードすると、上部と下部にすばやく移行するため、「最初のページ」の存在がなくなります。



ページネーションの種類を選択する必要がありますが、インターフェイス要素が使用されることを覚えておく必要があります。 ページへのリンクは大きく、ページ番号の形式だけでなく、各要素にCSSを使用してリンクにボタンの外観を与える必要があります。 現在のページのリンクの外観を定義して、ユーザーが現在の場所を向くようにします。 最後に、「前の」および「次の」ページへのリンクを作成します。 ほとんどの場合、ゲストは次のページの記事を表示するので、これらのリンクを介して他の情報に簡単にアクセスできます。

コメント

研究の最後のポイントはコメントです。 コメントはソーシャルニュースネットワークの重要な要素であり、コメントを使用して各ストーリーについて議論することができます。 ストーリーにコメントする機能を持たないサイトは、それ以上開発されていません;ディスカッションの可能性は、ソーシャルニュースサイトの不可欠な部分です。



Diggのコメントは次のとおりです。



解説には、投票機能と別のストーリーがあります。 投票コントロールは各コメントの右側にあり、上または下の指はトグルスイッチとして機能します。 最も評価の高いコメントはリストの一番上にあります。つまり、質の高いディスカッションは常に一番上にあり、無駄なコメントは拒否されます。



Diggには、コメントを改善する別の機能が導入されています。それはツリーです。 各ユーザーは、独自のディスカッションスレッドを開始したり、既存のコメントに返信したりできます。 コメントツリーは最小化されて表示されます。ルートコメントのテキストの下にあるリンクをクリックすると、ブランチ全体を展開できます。 すべての回答はルートコメントブランチに保存されます。投票することも投票することもできます。 これにより、興味深い回答により、解説への関心を高めることができます。



Redditに関するコメントは次のとおりです。



ここで同様の機能：投票とツリー。 投票コントロールは各コメントの左側にあり、上下に矢印のように機能します。 Redditを使用すると、深い分岐を行うことができます。つまり、コメントへの返信でも、コメントに関連する独自の応答を投稿できます。 さらに、これはコメントツリーを作成します。これは、あなた自身の議論での意見に対する非常に多くのオプションのように。



最後に、Newsvineのコメントを見てみましょう。



Newsvineは、Diggと同じ構造で登場します。 各コメントは多くの回答につながる場合がありますが、回答自体に応答機能がない場合があります。 とてもきれいに見えますが、議論が難しくなっています。良いかどうかは、どのような議論をしたいかによって決まります。



外観は少し異なります。 Newsvineは、コメントごとに左側に関数フィールドを追加する代わりに、コメントをブロックに入れました。 応答もブロックにパッケージ化され、親ウィンドウ内に配置されます。 これにより、明確な関係が提供されます。 Newsvineでは、ルートコメントに投票することもできます。



これら2つの要素、投票能力とコメントツリーは、ソーシャルニュースサイトでの良い議論を確保するための重要な要素だと思います。 投票はフィルターとして機能し、上部にある興味のないコメントやスパムを排除し、さらにそれらを閉じます（一部のサイトは負のスコアでコメントを非表示にします）。 このような議論には、1つのコメントトピックに関する厳格なポリシーがあり、これはより詳細なコメントツリーを提供することはできません。