ブログコミュニティでは、主に１つのテーマに特化して書かれた記事が多く、UXデザインについてもその一部だけを取り上げた記事ばかりにりがちです。そこで、CodalのUXケーススタディでは、UXを総合的に検証し、ユーザー体験全体がどのように機能しているのか追及することを目的としています。
これまで私たちは、DuolingoやBumble、ESPNのモバイルアプリについてUXケーススタディを行ってきました。
今回もまたケーススタディを行いますが、このコラムではまだ取り扱ったことのない領域を探りたいと思います。それはメディアです。メディアをテーマとして取り上げるのには、いくつか理由がありますが、その主たる理由としてUXの視点からニュースアプリを検証すること自体が非常によい学びになるからです。
メディアのケーススタディは、UXデザイナーにとってまたとない挑戦となるでしょう。「つねに変化し続ける膨大な量のコンテンツをベースとしたプラットフォームを、どのようにデザインするのか？」デザイナーが考えるべき問いはまだまだあります。「人々はどのようにニュースを読むのか？」「情報処理にもっとも適した方法はどのようなものか？」
これらの質問は、通常デザイナーの職務内容では見かけないようなものばかりです。しかし、そうであったとしても、これらの質問はニュースメディアのプラットフォームを作成するUXデザイナーにとっては重要なものです。
メディアのUXを追及するために、私たちが対象として選んだのはCNNです。CNNは世界でもっとも人気のあるニュース組織の１つです。すべてのデバイスを合計して1,000万ダウンロード以上を記録しており、現在アメリカにおける社会政治的風潮の最前線にいます。アプリでもほとんど同様の影響力を有しているため、UXケーススタディにとって完璧な候補でしょう。
オンボーディング
まずはじめに、CNNはマルチアプリ戦略を採用しています。マルチアプリ戦略とは、あらゆるモバイルのプラットフォームに対して、それぞれに完全に対応しているアプリを提供する戦略です。このケーススタディでは、CNNの主要なニュースアプリであるiOS版を対象に検証を行います。
アプリを開くと、浮かない顔のAnderson Cooper氏とアラートを有効にするリクエストが表示されます。最初にアプリの価値を示さずに通知のリクエストから始まるようなアプリのユーザー体験に、私はいつもうんざりします。しかし、CNNが提供しているものは周知の事実です。そのため、ニュース速報のチャンネルが、ユーザーに対して最新のニュースを入手できることを確かめていることがわかります。
下のドットの列は、アプリを使い始める前にあと２つの画面とインタラクションしなければならないことを知らせています。ただ、オンボーディングとしては悪いものではありません。むしろ長ったらしいフォーム入力を繰り返すような、うんざりするアカウント作成は必要ないことを伝える素晴らしいサインです。「あとで（Not Right Now）」をタップして、２番目の画面に進みます。
３番目の画面でしょうか？ 最後のドットが光っています。つまり、オンボーディングの最終ステップにいるということです。恐らくアラートを受け取らない選択をしたので、２番目の画面を丸ごとスキップしたのでしょう。これは残念です。CNNアプリにあるすべての情報を伝えるための重要な画面だったはずなので後悔が残ります。
ご覧の通り、画面は窮屈なものとなっています。テキストの一番上の行は、私のiPhone上部のステータスバーと重なっていると言っていいでしょう。コンテンツ自体はわかります。アメリカのニュースに注目できるようにアプリのコンテンツを最適化したいので、位置情報の共有を受け入れました。しかし、すべての要素を１つの画面内に詰め込んだゴチャゴチャした画面は、優れているとは言えません。
ただし、私はiPhone 5 SEで閲覧しています。もしかしたらこのページは、より大きな画面のモバイルデバイスに最適化されているのかもしれません。しかし、この画面がモバイルレスポンシブデザインと呼ばれているのには理由があります。時代遅れなデバイスなのは認めますが、私のデバイスにも対応させる必要があるでしょう。
選択をして、CNNの非常に簡単なオンボーディングのプロセスを終了します。
ホーム画面
CNNのホーム画面は、現在のトップニュースの見出しとその画像で占められています。下の画像の場合は、ハリケーン「マリア」の衛星画像です。その下には２つのサブ見出しが、アイコンとともに表示されています。１つのアイコンは動画を表し、もう１つは文章による記事です。
まず、この画面はフィード形式のインターフェイスを示しているように見えません。CNNにはハリケーンのほかにもニュースがあることを想像しなくてはいけないのです。スクロールをしてみると、確かにほかの話題を目にすることができました。
CNNのアプリは、ユーザーの興味を引くために、かなり画像に頼っています。スクリーンの面積の大半は、高解像度の画像とそれにかぶさった見出しに費やされています。
この戦略は、モバイルユーザーの注意が続く時間が非常に短いという前提に基づいています。トップページにたくさんの見出しを表示するよりも１度に表示する話題を２つに絞ったほうが、ユーザーのエンゲージメントが高いとCNNは信じているのです。これは堅実なプランですが、欠点もあります。
個人的な見解ですが、CNNのホームフィードをスクロールしているとき、私はまるで出会い系アプリを使っているような気がしました。１度に１つか２つの話題を見て、興味がなければ次の２つの話題までスクロールダウンするという流れは、どことなく魅力的な写真と簡潔なコピーから成るTinderやBumbleのカードデザインに似ています。自撮り写真や名前の代わりに、関連する画像と見出しになっているようなものです。
ホーム画面の右上には、CNNのライブストリーミングを見られるアイコンがあります。画面下にはナビゲーションバーがあり、３つの選択肢が表示されています。現在位置であることを示す赤い下線が引かれたトップニュース（TOP NEWS）、タップできることが確実にわかるCNNのロゴ、そして注目記事（WATCH NOW）です。
ナビゲーションバー
まずCNNを褒めたいのは、ナビゲーションバーにおいて、選択肢がぎゅうぎゅう詰めになっていたり、意味のわかりにくいアイコンが散らばっていたりしないことです。シンプルな３つの選択肢があるだけで、その内２つにははっきりとラベルが付けられています。そのため、ユーザーが機能を間違うことは恐らくあり得ないでしょう。
残りの１つの選択肢はCNNのロゴです。タップすると、一般的な新聞のセクションが表示されます。これと同じ選択肢が、メディア系のWebサイトのナビゲーションバーでは見られるかもしれません。モバイルのナビゲーションバーにWebサイトの選択肢をすべて詰め込まなかったUXデザイナーに対しても賞賛を送りたいと思います。もし全部詰め込んでいたら、悪夢のようなナビゲーションバーになっていたでしょう。
また、このポップアップのオーバーレイも上手にデザインされています。選択肢はわかりやすくラベリングされていて、適切な余白があり、シンプルですっきりしたフォントで書かれています。その他の選択肢は、標準的なアイコンで表示されています。設定を表す歯車と、保存したい話題を表すブックマークです。
最後に３つ目のオプションの「注目記事」をタップします。これをナビゲーションバーに含んだのは余計だったかもしれません。なぜなら、ホーム画面右上のTV再生アイコンをタップしても、同じ場所に到達してしまうからです。
注目記事
「注目記事」の主な機能は、CNNのライブストリームを無料で10分間プレビューできるものです。スクロールダウンをすると画面が小さくなり、別の動画の列が表示され、水平方向にスクロールをすることができます。
デスクトップアプリケーションでは、ほとんどの場合横スクロールは推奨されません。ユーザーが嫌うことが実証されています。しかしモバイルインターフェイスでは、横スクロールは効果的です。CNNのアプリは、特に膨大な量のコンテンツを提供しているとき、スクリーンの面積を上手に節約できることを実証しています。
しかし、スクロールの構造自体は許容できますが、私はこの構図はあまり良くないと思います。コンテンツは「おもしろ動画」や「人気動画」などのカテゴリーに区分されているものの、あまりカスタマイズはできません。CNNロゴを押して、オーバーレイで表示されるカテゴリーから動画コンテンツをフィルタリングしようとしましたが、トップニュースに戻っただけでした。
最後に本筋から逸れますが、注目記事を見ている間も、ページ画面右上にはアイコンが残っています。私が観察した範囲では、これをタップしても何も起こりません。なぜあるのかよくわかりませんでした。
まとめ
CNNは、窮屈な画面でユーザーを困らせることなく、膨大な量のコンテンツをモバイルに移行させることが概ねできているでしょう。１度に表示する話題を１つか２つだけにする代わりに、高解像度の画像を表示することによって、ニュースフィードデザイン戦略をモバイルユーザーに対応させています。
また、CNNの主要なナビゲーションバーは優れています。モバイルアプリの中でも珍しい成功例でしょう。わかりづらいアイコンが散らばったナビゲーションバーは多く存在します。しかし、「注目記事」は雑然としていて、操作もしにくい上に、フィルタリングもできません。
私にとっては、これらの欠点は致命的ではありません。これらの欠点はすべて、UXデザインの制作会社によって比較的簡単に修復できるだからです。ニュースを読むのが好きな私の好みから言うと、CNNのコンテンツは動画に偏りすぎています。しかし、それ程不満を感じないプラットフォームでアメリカ人がニュースを入手できていることがわかって、私は安心しました。
＊この記事のすべての画像はCNNのアプリを使用中に撮影したスクリーンショットです。
