web-dev-qa-db-ja.com

方向パッドナビゲーションを既存のWebアプリケーションに追加する:リソース?

私はGoogleでうまく機能するWebアプリケーション(HTML5)を持っていますChromeマウスナビゲーションで、そして d-pad ナビゲーションサポートを追加しています。

StackOverflowで質問しました Dパッドサポートのプログラミングモデルについて。私はここのUX関係者がd-padサポートの追加に関するベストプラクティスを指摘できることを望んでいます。私が持っている質問の種類は次のとおりです。

  1. 仮想ポインターを提供する方がいいですか、それとも現在アクション可能なアイテムにフォーカスがあるかについてユーザーに手がかりを提供する方が良いですか?仮想ポインタは実装が簡単ですが、ユーザーはさらにクリックして正しい場所に移動し、クリックする必要があります。また、選択したクリックで何も実行されない場所に移動することもできます。
  2. アクションアイテム(ボタンなど)のレイアウトで一番右のボタンにいる場合、右矢印で何をすればよいですか?次に、一番左にジャンプしますか?
  3. 画面を変更していて、左上に「戻る」ボタンがある場合、そこにフォーカスを置くべきですか、それとも最初の非戻るボタンに置​​くべきですか?
  4. モーダルおよび非モーダルの新しいウィンドウの場合、新しく表示される要素に焦点を合わせる必要があるかどうかをどのように判断しますか?
  5. コンテンツが現在表示されていないスクロール可能なコンテナーの場合、下に移動すると、常にスクロール可能であれば、次のアイテムにフォーカス(現在はWebTVスタイルのフォーカスアウトラインを使用)を配置するだけで十分です。

これは、発生する問題の選択です。この問題に関するリソースは大歓迎です。

[〜#〜]更新[〜#〜]:この問題に関する一般的なリソースがない場合は、サブ質問のみに自由に回答してください。最近、多くのデバイスで直接操作/タッチが利用できるようになっているため、d-padナビゲーションの注意が減っていると感じています。ゲームやテレビのデバイスにd-padを実装するためのリソースはあるのでしょうか。

5
artlung

#1の場合: フィッツの法則 は、どのタイプの入力が単純​​でエラーが発生しにくいかに関するヒントを提供します。ここでのあなたの仮説は正しいです:仮想ポインターは、さまざまなアクションにナビゲートするためにより多くの努力を必要とします。ユーザーが方向パッドを使用してオプションを「タブ」で移動できるように制限すると、アクションアイテムの移動が方向パッドの1フリックになります。覚えておくべきことは、アクションアイテムのレイアウトを直感的に保つことです。次のアクションアイテムは、ヒットまたはダウンしたときに直感的に到達しますか?

#2:この質問に答える最良の方法は、両方の方法を試して、どちらがより直感的に感じるかを判断することです。ただし、循環的なナビゲーション構造が有害であることは想像できません(おそらく、より専門的なユーザーのためのナビゲーション機能として使用されると思います)。

#3:これらのページの主なアクションは何ですか?おそらくページが純粋に情報である場合、アクションは戻るだけなので、これらのケースではデフォルトで[戻る]ボタンにフォーカスすることが適切です。それ以外の場合は、デフォルトをユーザーの目標のサポートに集中させます。

これが役に立つスタートになることを願っています。

5
Empy

1
dpadでポインターを使用するのは難しいため、「タブのような」ナビゲーションに移動します。
ここにナビゲーションの良い指針としてのGoogle TV:
http://code.google.com/tv/Android/docs/gtv_Android_patterns.html
TV用UXデザインの良い例はBoxeeです。
http://whitneyhess.com/blog/2010/01/27/the-ux-design-process-for-the-boxee-beta/

4
適切なデフォルトとして、メイン/最も一般的なタスクに焦点を当てます。 Boxeeの例を使用して再生する映画を選択すると、いくつかのタスク(再生、監視済みにするなど)を持つモーダルが開きます。ここでは、最も一般的なタスクが再生であるため、モーダルを開くときに焦点が当てられます。

2
herkulano

仮想ポインターを提供する方がいいですか、それとも現在アクション可能なアイテムにフォーカスがあるかについてユーザーに手がかりを提供する方が良いですか?仮想ポインタは実装が簡単ですが、ユーザーはさらにクリックして正しい場所に移動し、クリックする必要があります。また、選択したクリックで何も実行されない場所に移動することもできます。

TVのようなインターフェイスでは、ポインタはリモートで制御するのが難しいため、またTVインターフェイスが非常に遅いため(速度の違いが倍増するため)、TVビューポートの解像度が低いため、TVインターフェイスにはいくつかのボタン。ボタンはいくつかのコントロールで操作できます。私はGoogleTVをよく知りませんが、ほとんどのアプリケーションは仮想ポインターを使用していないようです。そのため、親しみによってポインターが勝つこともありません。

アクションアイテム(ボタンなど)のレイアウトで一番右のボタンにいる場合、右矢印で何をすればよいですか?次に、一番左にジャンプしますか?

このコンテキストでは、右矢印が「選択」として機能することをお勧めします。どうして?

  • ほとんどのTVのようなインターフェイスでは、ボタンを選択せず​​にボタンにカーソルを合わせる必要はありません。右を押したユーザーは右に行きたい
  • リモコンにはレイテンシがあり、ユーザーが右を1回以上押す可能性がありますが、正しい選択のみが必要です。
  • ポインタがない場合、左に行きたいユーザーは左を1回押すだけで済みます。ユーザーが左側に「ロールオーバー」できるようにするための特別な効率はありません

画面を変更していて、左上に「戻る」ボタンがある場合、そこにフォーカスを置くべきですか、それとも最初の非戻るボタンに置​​くべきですか?

それは各「画面」の機能に依存しますが、通常はそうではありません-ユーザーがページXにアクセスしていることを期待する必要がありますXを実行したいため。それらに追加の障壁を追加すると、欲求不満が追加されます。ユーザーが誤ってページXにアクセスできる場合は、Xの前にあるページのナビゲーションを修正してください。X自体を不自由にしないでください。

モーダルおよび非モーダルの新しいウィンドウの場合、新しく表示される要素に焦点を合わせる必要があるかどうかをどのように判断しますか?

低解像度のTVインターフェイスの場合、私はそもそも子ウィンドウを避けます。いずれにせよ、私は新しい要素に集中します。不明瞭なページに焦点を合わせるのは非常に奇妙です。ユーザーがそのコンテンツを要求したために新しいウィンドウが開いているか、何か重要なものがあります。新しいウィンドウしないに重要なコンテンツまたは要求されたコンテンツがある場合、そもそもそこにあるべきではありません。

コンテンツが現在表示されていないスクロール可能なコンテナーの場合、下に移動すると、常にスクロール可能であれば、次のアイテムにフォーカス(現在はWebTVスタイルのフォーカスアウトラインを使用)を配置するだけで十分です。

ユーザーが最初のページの一番下のアイテムを操作したい場合は、それに集中するだけで済みます。新しいアイテムに焦点を当てないことは、ページの残りの部分とやり取りしたい人々への障壁を作成し、おそらく他の要素をすでに評価していて、ネイティブのみを使用することに興味がないことに気付いているユーザーに少し余分を追加します上にスクロールするのではなく、「戻る」または「終了」コントロール。唯一の例外は、ユーザーが前の質問を理解するために前向きに見たい場合があるフォームですが、そのようなフォームはおそらく不十分に設計されています。

1