👧🏼 🔠 👂🏼 BBCのデザインとウェブサイトのデザイン 🍞 💥 🔘

Tammy Gurによる「 BBC World Serviceでのユーザーエクスペリエンスとニュースのデザイン」というタイトルの記事の翻訳を紹介します。 BBCとJohny Holland Magazineの承認を得て、特にHabrahabrユーザー向けにUXDepotに移行。

ニュースWebサイトを絶えず通過する情報の急速な流れのための環境を設計することは、他とは異なり挑戦です。 BBCワールドサービスのUXデザイナーとスペシャリストのチームは、27か国語でデスクトップブラウザーとモバイルブラウザーのニュースサイトを作成し、世界中のさまざまな視聴者に提供しています。この記事では、この経験を皆さんと共有します。

BBCワールドサービスのニュースサイトの一部は、ロシア語、アラビア語、中国語、ブラジル語です。

ニュース項目のデジタル設計

デジタル形式でニュースを公開するサイクルは速すぎて、各素材に特化したデザインを開発できません。新聞紙を作成するデザイナーは、毎日外観を変えます。オンラインメディアを作成するデザイナーは、コンテンツに依存しないレイアウトを作成します。これは、情報の更新が非常に高速であるためです。これは、ウェブサイトのデザインを一度だけ作成し、ジャーナリストがそのデザインを使用してコンテンツでウェブサイトを埋めることを意味します。

各問題専用に設計された新聞紙のレイアウトの例。 2011年6月26、27、28日にイスラエルの新聞Yediot Achronotの表紙。

設計チームの作業の結果は、一連のモジュールとその動作です。すべてのサイトを持つすべてのデザイナーがこれを行うことに反対することができます。これは事実ですが、違いは1日を通していつでも表示できるコンテンツの量と種類にあります。マテリアルは1つのテキストで構成でき、画像または画像ギャラリー全体、およびビデオまたはオーディオを含めることができます。重要な緊急メッセージは、編集委員会が興味深い記事のリストに掲載した記事とはまったく異なるように見える場合があります。メインページにはいくつかのスタイルオプションがあります。1つは平日用、もう1つは週末用です（コンテンツの量とコンテンツ自体が異なります）。考えられるすべてのケースは、設計の一部として考慮および検討されます。

ニュースサイトは弁当ボクシングに似ています

ニュースサイトと日本のお弁当箱を比較するのが好きです。トレイの端の内側には、さまざまな組み合わせで配置できるさまざまな形状とサイズの小さな皿があります。私たちのデザインでも同じことが起こります。小さなプレートに含まれる食べ物は、サイトのニュースコンテンツの変化です。料理とボクシングの調和は、私たちが食べ物で感じる感覚を決定します。

伝統的なお弁当箱。

食べるように頼むかのように、食べ物は魅力的に見えます。しかし、すべての料理をトレイに積み重ねて、食欲をそそらない大きな1つの山にすると、とても魅力的でしょうか？この効果を達成するために、Bentoを調理する人は、食事（内容）と夕食を食べたい人の味（ユーザーの行動）を理解する必要があります。

コンテンツについて：階層、ボリューム、トーン

デザインに関する作業の最初から、ジャーナリストと密接に協力してきました。将来のコンテンツに精通し、編集者にコンテンツタイプを重要度で並べ替えるよう依頼します。したがって、コンテンツの階層を取得します。

また、1日にメインページを通過するコンテンツの量をジャーナリストから学びます。たとえば、編集者によって最も興味深いものとして選択された記事の数、主題の記事および地域の記事の数に興味があります。ほとんどの国では、資料の読みやすさのピークは朝と昼休みに発生し、その時点でチームは最大数の記事を執筆します。

ジャーナリストとのコミュニケーションは、デザインに反映できるコンテンツのトーンを理解するのに役立ちます。トーンは単なる書き方ではなく、会社の原則、ユーザーの期待、そしてBBCワールドサービスの場合は文化の違いにも関連しています。

私たちが長年にわたって行ったユーザーオーディエンスの調査と競合他社の分析により、当社が事業を展開している市場に関する興味深い事実が明らかになりました。たとえば、ロシア市場および中東の市場の読者は、主に重要な政治ニュースを見たいと考えていることがわかりました。ブラジル人は興味深いが、それほど重要ではないさまざまな事実を読むことを好む。これを反映するために、ロシアのウェブサイトのメインページの最初の2つの画面にはより政治的なニュースが表示され、ブラジルのウェブサイトには世界中の写真ギャラリーと興味深い物語が点在しています。

ユーザーの行動と好みを理解する

ニュースサイトへの訪問者の行動は、通常2つの異なる方法で説明できます。ユーザーは記事をざっと目を通すか、全文を読みます。または、彼は気分や自由な時間があるかどうかに応じて、交互に行います。午前中、営業日の開始前に、ユーザーは最新のニュース速報を勉強する時間がほとんどなく、夕方または昼休み中に、彼は記事を完全に読むだけでなく、それに関連する他の記事を読む余裕さえあります。

ニュースサイトにはどのような品質が必要ですか？サイトでユーザーが解決したいタスクは何ですか？ユーザーの行動の統計と分析は、訪問者が次のことを好むことを示しています。

最新のニュースの見出しをすばやく表示します。
さまざまなコンテンツを見る
すべての情報が可能な限り新鮮であることを知ってください。
サイトが重要な情報のみを提供するようにしてください。
特定のトピックに関するニュース（技術ニュースなど）を読む機会があります。
ソースを比較-最新ニュースでさまざまな視点を参照してください。
快適な読書のために整頓された環境を用意してください。
彼らが読んでいるニュースは信頼できる情報源によって提供されていることを知ってください。

ユーザーの行動とコンテンツに合わせたデザインを作成する

Bentoボックスの効果を作成するツールのセットがあります。それらのいくつかを見てみましょう。

。

モジュラーグリッド

優れたサイトのデザインスケルトンは、モジュラーグリッドです。サイトで視覚的な順序を作成するのに役立ちます。すべてのBBCサイトは1つのユニバーサルグリッドを使用します。これは、最近委託されたBBC Global Experience Language ガイドラインのコンポーネントです。このグリッドは、BBCサイトの標準的な画像およびビデオプレーヤーのサイズに合わせて61 x 16ピクセルの列に分割されています。グリッドは、同じ幅の2つの列と、もう少し広い3番目の列に分割できます（以下を参照）。一方で、このグリッドは柔軟性があり、エンターテイメントニュースから本格的な分析ニュースまで、サイト上のさまざまな情報をすべて表示できます。一方、それはすべてのBBCサイトに存在し、ブランドの要素である視覚的アイデンティティを作成します。また、すべてのサイトの広告ユニットのサイズを標準化します。

グローバルエクスペリエンス言語からのグリッド。 3つの可能な組み合わせのうち2つ。

。

情報とブロック名の配布

上記のように、高次のコンテンツブロックの場所を定義することから始めます。次に、1レベル下に移動して、グリッドに特定のブロックを配置します。現時点では、編集者とのディスカッション中にコンテンツに与えられた優先順位に基づいています。さらに、ユーザーの期待を考慮し、競合他社によって導入されたモデルを繰り返し使用したり、元の読者に特別な注意を払ったりすることもあります。

BBCヒスパニックのWebサイトのコンテンツの階層とグループ化。

各コンテンツグループには名前があり（トップニュースブロックを除く）、ナビゲーションメニューのカテゴリに反映されます。ブロックの名前は、私たちのサイトで二重の役割を果たします：一方では、この記事またはその記事がどの種類の資料に属しているかを明確に示し、他方では、サイトをすばやくナビゲートするための視覚的なアンカーとして機能します。

BBCヒスパニックおよび中国のWebサイトのトピックグループ名の例。

グリッド内のコンテンツの場所、コンテンツ内の名前へのアプローチ、ブロック間の間隔、さまざまな画像の組み合わせにより、ページ上の視覚的なリズムが決まります。

。

サイト構造

ユーザーが探しているものをすばやく見つけられるようにする必要性と、サイト上のさまざまな資料を表示する必要性との間には摩擦があります。国際的な通信社としてもう1つ問題があります。ほとんどの場合、当社のニュースサイトは地元の大手通信社と競合しています。したがって、ユーザーに表示するカテゴリを慎重に検討して、サイトがユーザーに関連し、ユーザーが関心のあるトピックに関する資料を見つけられるようにする必要があります。

これをよりよく説明するために、サイトを使用するための2つのシナリオについて説明します。マリアはテクノロジーニュースを読みたいと考えています。彼女はそのような資料を直感的に見つける必要があります。ロドリゲスは、ヒューゴチャベスの最新のふざけた態度について知りたいと思っています。サイト構造は、これらの両方の特性を満たす必要があります。

Maryには、テクノロジーなどのトップレベルのカテゴリがいくつかあります。カテゴリは、ナビゲーションであってもページ上のコンテンツがあるエリアであっても、常に同じ場所に配置されます。

ロドリゲスには、チャベスのようなトピックがあります。任意の記事にトピックを割り当てることができます-これはブログのタグと同様に機能します。空軍ジャーナリストはこれらのタグを記事に割り当てる機会がありますが、それらは管理された辞書に制限されています-それは少数の記事のみを含むものではないように必要です。また、エディターはトピックのリストを制御できます。

要するに、情報の提示の厳格さと柔軟性の間の妥協点を見つけようとしています。記事はさまざまな基準に従って自動的に分類され、トピックとカテゴリによって異なります。これは、彼らが迷子にならず、彼らだけを読みたがっている人々のためにテーブルに着くのを助けます-そのようなシステムは、メアリーとロドリゲスの両方にとって便利です。

トピックを含むモジュールは、サイト上の記事のより詳細な分類を明らかにします。

。

タイポグラフィ

フォントの作業は、多くのテキストを含むサイトの最も重要な要素の1つです。技術の開発により、Web上のフォントをこれまで達成できなかった程度に制御することが可能になりました。 Global Experience Languageには、タイポグラフィの役割をデザインの最も重要な場所に戻すという野心的なガイドラインが含まれています。ヘッドセットとそのサイズ、狭い追跡とリーディング、および太字ヘッダーの使用に関する決定：これらはすべて、BBCサイトの視覚言語の一部になりました。フォント行の使用は、要素の整列と入力の制御に役立ちます。これらすべての詳細への注意は、より明確な視覚的階層を達成し、テキストの読みやすさを改善することを目的としています。

ビルマ語のアルファベットの活版印刷の階層を定義します。

大量の情報と、チームが8つの異なるサインシステムを使用する必要があるため、各サイトのフォントを使用して作業をさらにカスタマイズする必要があります。ヘッダー、ブリーフ、リストなどを明示的に表示する一貫した階層を作成するために、フォントのサイズとスタイルについて細心の注意を払っています。設計者は、各標識システムの追跡と指導を慎重に行います。次に、表示されたガイドが各フォームの各モジュールに適用されます。サイズの異なる画像、画像なし、関連記事のリスト、コメントやビデオを示すアイコンなどの追加要素が含まれます。可能なオプションを含むモジュールリポジトリを作成しました。（私たちが行ったフォント作業に関する追加の詳細はここにあります。）

記事のモジュールの例：ビデオプレーヤー（左側）とテキスト（右側）を使用します。

。

ニュースタイム

記事の公開時間は非常に重要です-ニュースサイトに対するユーザーの信頼はそれに依存します。これを理解して、「スクロールニュース」と呼ぶサイトに要素を追加しました。このブロックでは、ニュースの見出しがニュースが表示された時間とともにリアルタイムで自動的に表示されます。見出しをクリックすると、ユーザーはイベントを説明する短い記事に移動します。このブロックは、メインページの上部、今日の主要なニュースのブロックの横にあり、各記事のページにもあります。

タイムリーなニュースの更新は、「ニュースのスクロール」ブロックで強調表示されます。

さらに、追加の瞬間から1時間が経過するまで、メインニュースを追加する時間とともに顕著なブロックを表示します。

。

サイトをさらに旅行する

多数のユーザーが、サイトのメインページからではなく、特定の記事からすぐにサイトにアクセスします。そのため、メインページとサイト全体の最も重要なコンテンツ専用に各記事のページにスペースを割り当て、各ページに全幅のサイトを表示しました。したがって、訪問者がサイトをさらに読むことをお勧めします。これは最近のアイデアです。以前は、ユーザーが読んでいる記事に関連する記事のみを表示しようとしました。デザイナーは、ページに多くの追加情報が表示されているにもかかわらず、サイトがまだ読みやすいように試行する必要がありました。

メインページのミニバージョンとしての記事ページ：右の列には、メインページとサイト全体のコンテンツが表示されます。

そして、これはすべて1つの目的のために

ニュースサイトを作成するデザイナーの主な目標は、サイトに対する信頼を高めることです。ニュースとは、ジャーナリストの言葉で語られた現実の物語です。尊敬されるブランドである空軍は、あまり知られていない客観的な出版社の資料よりも、その資料の価値を高めるために多くの努力をしました。骨の折れる努力は、BBCオンラインリソース（コンテンツデザイナーと読者による理解、および情報を提示するための適切なアプローチ）に費やされました。これはすべて、私たちのおいしそうなBentoボックスの絶え間ない設計と再設計の一部です。

。

翻訳者からのPS： この記事を楽しんでください。 翻訳の誤りをご指摘いただければ、喜んで訂正いたします。 午後に私に書いてください:)

BBCのデザインとウェブサイトのデザイン

Tammy Gurによる「 BBC World Serviceでのユーザーエクスペリエンスとニュースのデザイン 」というタイトルの記事の翻訳を紹介します。 BBCとJohny Holland Magazineの承認を得て、特にHabrahabrユーザー向けにUXDepotに移行。