TV ブラウジング用に空間ナビゲーションを調整する

By Go Uehiro

TV 向けコンテンツのデザインにあたり、最大の難題の一つとなるのはナビゲーションです。ページのナビゲーションにはいくつかの異なるメソッド(方式)が存在するだけでなく、そのうちのどれも、完璧な利便性と実用性を備えているとは言い難いからです。現時点においては、ユーザーは以下のデバイスを使って、TV 上のブラウジング操作を行っていると想定できます:

  • 十字キー付きのリモコン（キーパッド付き）
  • タッチパッド、または同等の入力デバイスを備えたリモコン (フルキーボード付き)
  • ジャイロマウス
  • 赤外線ポインター
  • 携帯電話やタブレットのタッチスクリーン

現状では通常のリモコンによる、基本的な上下左右、および選択ボタンが圧倒的に広く使用されています。このような方向キーによるコントロールは 空間ナビゲーション と呼ばれ、TV 上での優れたユーザー体験の実現に当たり、正しい理解が不可欠となります。これはキーバッドを利用した携帯電話や、Amazon の Kindle のような非タッチ型デバイスにおけるナビゲージョンメソッドにも適用できます。

空間ナビゲージョンのテスト

空間ナビゲージョンは TV または同様のコネクティッドデバイス上のブラウザだけでなく、 Opera の他のプラットフォーム上でも利用できます。それで開発者はデスクトップマシンを使って、簡単に空間ナビゲーションのテストが行えます:

いくつかのサイトを空間ナビゲーションだけを使ってブラウジングしてみることは、この機能を理解する上で、優れたエクササイズとなるでしょう。ナビゲーションが全く不可能というわけではないものの、カーソルが要素間をランダムに移動する状況は、ユーザーにフラストレーションを感じさせることになります。テレビでは、さらにユーザーがフラストレーションを感じる要素として、赤外線によるリモコンと TV 間の通信があります。リモコンのボタンを押してから、スクリーンのカーソルが実際に動くまでに、ユーザーが認知可能な程 (最大 0.5 秒程度) の遅延が生じます。結果として時間の消費という観点から見ると、ユーザーの操作ミスや意図しないカーソルの動きが、非常にインパクトを与えるものになります。幸いにも CSS3 を使うことで、これらの問題の多くを軽減することができます。

CSS3 を使ってナビゲーションを操作する

フォーカス移動の方向を規定した仕様 CSS3 Basic User Interface は解説、実装方法の両面において非常に簡潔になっています。これは Web 製作者が、ユーザーが方向キーを押した際にどの要素にフォーカスをあてるべきかを指定するために規定されています。たとえば、ユーザーがあなたのページの下部にある著作権情報 (Copyright) にフォーカスしていて、 下矢印キーを押した場合、ページ上部にあるロゴにフォーカスを移動するといったことが可能になります。実際の CSS コードは以下のようになります:


/* CSS */
#copyright {
    nav-down: #logo;
}

これはどの CSS セレクタにも適用可能ですが、プロパティーの値は要素の ID (例: 先頭に # )である必要があります。簡単に予想できることですが、利用可能な他のプロパティー名は nav-up, nav-left and nav-right です。ご覧の通り、これは実装に当たり非常に明快な拡張であり、デスクトップやタッチスクリーン環境には全く影響を与えずに、十字キーによるナビゲーションを行うユーザーに対して、ユーザー体験を格段に向上させることができます。ユーザーを酷く驚かせてしまうことを避けるために、公開前に動作を完全にテストするようにしましょう。

例

ここに CSS と空間ナビゲージョンの例があります。ページ内には、同じ内容の写真グループが二つあります - 右、左キーを使って写真間の移動をお試しください。初めのグループはブラウザの空間ナビゲージョンのアルゴリズムを利用している一方、2番目のグループは CSS ナビゲーションを利用しており、ユーザーが写真間を簡単にスクロールできるように設計されています。

結論

シンプルな方向キーの持つデバイスでは特に、単純な '次の / 前のリンクへジャンプする' というナビゲーションのアプローチよりも、空間ナビゲーションがより自然な方式であるといえます。これに CSS の機能を追加することで、開発者はどの要素がフォーカスを受けるべきかの順番を細かく調整することができます。

This article is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported license.

Comments

No new comments accepted.