Latest evidence-based health information
Vision

アプリを設計する際にしてはいけないこと(Netflix さん、ごめんなさい)

アプリを設計する際にしてはいけないこと(Netflix さん、ごめんなさい)
アプリを設計する際にしてはいけないこと(Netflix さん、ごめんなさい)

先日、iPhone 4でNetflixアプリを使っていたのですが、衝撃的な事実に気づきました。これは今まで見た中で最悪のデザインの「プロ仕様」アプリの一つだ、と。確かに3Gで動画をストリーミングすることはできます。映画を検索したり、キューを管理したりもできます。iPhone版Netflixは、ほとんどの機能面で期待に応えています。まだ比較的新しいアプリなので、開発はまだまだこれからでしょうが、現バージョンはiOSアプリのデザインにおいて「やってはいけないこと」の典型例と言えるでしょう。その理由をいくつか挙げてみます。

1) 車輪の再発明

iOS SDKには、膨大なUI要素のライブラリが含まれています。まれに独自のUIオブジェクトを一から作成する必要がある場合もありますが、ほとんどの場合、ボタン、ダイアログ、スライダー、テーブルなどは、既存のオブジェクトを使用して外観をカスタマイズしたり、サブクラス化して機能を拡張したりするだけで作成できます。

Netflixアプリの例では、「ホーム」タブに「おすすめ」と最近視聴した作品に似たタイトルの表が表示されています。映画をタップすると、詳細な説明が表示されます。これは文字通り何千ものiOSアプリで採用されているデザインパラダイムです。

ここでの明らかな設計上の選択(そしてAppleのドキュメントで推奨されている選択)は、UINavigationController内で高度にカスタマイズ可能なUITableViewを使用することです。しかし、私には理解できない理由で、Netflixは独自のテーブルとナビゲーションを完全に作成したようです。後者は、詳細ビューを開いたときに発生するぎこちないアニメーションから明らかです。前者は、セクションヘッダーの不適切な動作(次のヘッダーが表示されるまで画面上部に留まらず、テーブルの残りの部分と一緒に上方向にスクロールし続けます)から明らかです。Retinaディスプレイ上でピクセル化されたナビゲーショングラフィック(「戻る」ボタンやテーブルセルの詳細表示インジケーターなど)を見ると、この点が本当によくわかります。本来であればRetinaディスプレイ対応であるはずです。ややこしいのは、これらのUIの例がすべて、ストックのものと同じように見えるようにモデル化されているにもかかわらず、ぎこちなく素人っぽく感じられることです。

2) 低解像度グラフィックの使用

iPhone 4と新しいiPod Touchが美しいRetinaディスプレイを搭載していることから、アプリで高解像度のグラフィックを使用することはこれまで以上に重要になっています。場合によってはグラフィックを完全に作り直す必要があるかもしれませんが、デザイナーが少しでも注意を払っていれば、解像度を2倍にしたファイルをエクスポートするだけで済むでしょう。

Netflixアプリでは、UIグラフィックと映画のサムネイルの大部分が非常にピクセル化されています。多くの場合、既存のUI要素(カスタマイズされたUI要素はそもそもそれを模倣していました)を使用するだけで、この問題は回避できたはずです。映画のサムネイルは、サーバーから高解像度のグラフィックを取得しているだけです。そのようなものが存在することは知っていますし、デスクトップサイトで使用されています。また、読み込み画面のロゴは非常に鮮明ですが、上部のナビゲーションバーにある小さなロゴは角ばっています。なぜ両方に同じグラフィックを使用しないのでしょうか。細部への配慮の欠如は驚くべきものです。

3) オーバー/アンダーアニメーション

アニメーションを多用するとリソースを大量に消費し、ユーザーのアプリ操作を遅くする可能性があります。しかし、ユーザーに微妙な視覚的なヒントを伝えるためには、ある程度のアニメーションは必要です。

Netflixアプリでは、ボタンによっては押すとアニメーションするところと、しないところがあります。ボタンのデフォルトの動作は押すと暗くなることなので、これは奇妙で混乱を招きます。表のセルも同様で、「選択されている」ように見えることもあれば、そうでないこともあります。小さな画面では、このような小さな視覚的な表示は、ユーザーの選択が正確であることを確認するために必要です。

4) マルチタスクを期待しない

マルチタスクの到来は予想されていました。そして、もうしばらく経ちました。アプリは何をすべきか理解しているはずです。ほとんどの場合、実際に何も変更する必要はありませんが、それでもアプリの動作をテストすることは重要です。

実際、今回のケースではNetflixはマルチタスクに対応する対策を講じたようです。しかし、またしても奇妙で煩わしい設計上の選択をしました。アプリを中断したり戻ったりするたびに、(全画面の)ロード中を示すスプラッシュが表示されます。なぜこのような設計が必要とされたのでしょうか?OSは既にアプリの状態をキャッシュしており、読み込み速度から判断すると、現在使用しているアプリを思い出させる以外には実際には何もしていないと考えられます。これは、Netflixアプリを「完全に機能する悪い設計」の例として挙げる、パズルのもう一つの小さなピースです。

結論は

誤解しないでください。Netflixは大好きです。ほぼ毎日使っています。しかし、最先端技術を駆使する大企業として、モバイルアプリのデザインのまずさには、本当に驚かされます。UIの不統一は、複数のモバイルプラットフォームに同時にアプリをリリースするためにサードパーティの開発ツールを使ったせいかもしれないと想像していました。しかし、Windows Phone 7が今月リリースされたばかりで、Androidアプリがまだ入手困難という現状では、何が起こったのか正確には分かりません。アプリデザイナーの皆さん、あなたたちはこんなことするべきではない、ということだけは確かです。

Twitter で Mike Keller と GeekTech をフォローしてください。

Otpoo

Health writer and researcher with expertise in evidence-based medicine and healthcare information.