よつくらのブログ

ui designer no blog

なぜApple TV/Android TVのアプリはメニューを開いた状態で起動するかのデザイン的な考察

tvOS アドベントカレンダーの14日目の記事です。qiita.com

f:id:syotsukura:20171211105932p:plain

経緯

ちょうど昨年在籍していた会社でめちゃ忙しかったのにアドベントカレンダーの担当にされ、当時やっていたtvOS/Android TVのデザインについての記事を書いたのですが、マニアックな内容だったため全く反響がなかったのですごい無駄無駄に終わった記憶があります。 超勿体無いので、新しく始めた自分のブログに転記して、2017年のアドベントカレンダーに再掲します。

Apple TV/Android TVのアプリは、なぜメニューを開いた状態で起動する?

f:id:syotsukura:20171211110049p:plain

Apple TV/Android TVともに、標準的なUIでは、メニューを開いた状態で起動します。 これはスマートフォンでは普通ないUIなので、クライアントもしくはプロダクトオーナーに「なんで最初メニュー開いてるの?閉じてよ」と言われがちです。でも結論から言うと『絶対に開いた状態で起動するべきです!!!!1』 (デザインガイドラインに従わない、特殊なUIを除く)

結論: メニューを開いた状態で起動するから、リモコンがスマート

f:id:syotsukura:20171211110137p:plain

この「メニューを開いた状態で起動するUI」について、色々考えた結果「リモコンのボタン数を減らすためにこうなっているんだな」という結論に至りました。

どうしてもメニューを開かない状態から起動したい!

例えばApple TVのリモコンは基本 - Touch Surface(グリグリできるところ)で選択して、クリックして決定 - MENUボタンを押して戻る というUIで構成されています。 メニューを開かない状態から起動し、メニューが必要なアプリケーションのとき、どんなUIが考えられるでしょうか。

案1: 画面内に[メニュー]ボタンを設置する

セットトップボックス(Apple TVとかAndroid TVみたいなやつのこと、以下STB)の場合、画面をタッチして操作するのではなく、リモコンで操作します。画面内に設置したボタンにフォーカスをあわせるのは、スマートフォンに比べ非常に面倒です。 f:id:syotsukura:20171211110312p:plain

また、Android TV の Browse View(メニューのことです) や Apple TV の Tab Bars(メニューのことです) は非常に控えめなデザインになっていて、一度見なければどこにあるか分からないようになっています。ここに初見で分かるような「メニュー」をデカデカと載せるのは Android TV/Apple TV のデザイン原理にそぐわないと考えることもできます。 f:id:syotsukura:20171211110330p:plain

案2: MENUボタンを追加する

今「決定ボタン」と「BACKボタン」しかないリモコンに「MENUボタン」を追加することを検討します。 今までは「決定」「BACK」しか無かったユーザーの選択に、新たな選択肢が1つ増えて、判断に時間がかかります。ユーザー・エクスペリエンスを損ないます。 f:id:syotsukura:20171211110137p:plain

ほら、最初にメニュー開いとくとめっちゃ便利!

ここでもう一度、純正アプリの遷移をおさらいしてみましょう。 アプリはメニューを開いた状態で起動し、1クリックでメニューを閉じます。 その後は動画コンテンツを選んで、1クリックで再生します。 もう一度 OS ホームに戻るのにも、バック・ボタン/メニュー・ボタンを3クリックするだけでフォーカスを操作する必要はありません。 f:id:syotsukura:20171211110049p:plain

デザインガイドラインを確認

途中さらっと書きましたが、デザインガイドラインを確認しましょう。 f:id:syotsukura:20171211110422p:plain

tvOS Human Interface Guidelines (抜粋+意訳)

  • デザイン原理(Design principles)
    • クリア (Clear)
    • 没入感 (Immersive)
  • メニュー・ボタン
    • メニューボタンを押したら、前のビューに戻ること。

Android TV のデザインガイドライン (抜粋+意訳)

  • デザイン原理(Design principles)
    • カジュアルに消費(Casual consumption)
    • 映画(館?)のような体験 (Cinematic experience)
    • インタラクションは軽く(Lightweight interaction)
  • バック・ボタン
    • バックボタンを押したら、前のビューに戻ること。

どちらのデザインガイドラインも、主張しないUI、インタラクションを求めているので、バックボタンとは別の「メニューボタン」は求められていなさそうですね。

結論

Apple TVもAndroid TVも、デザインシステムは非常によく考えられている。

(が、情報があまりにも少ない)