web-dev-qa-db-ja.com

スマートTVリモコン用の人間工学に基づいたトラックパッド+ボタンレイアウト

スマートTV内で実行されているWebブラウザーを制御するために使用されるリモートコントロールiOSアプリを開発しています。 繰り返し使用しても直感的で人間工学に配慮した方法でコントロールを配置する方法に興味があります。

必須機能:

  • トラックパッド(Macのように-カーソルを移動、タップしてクリック、2本指でスクロール)
  • Remote keyboard-デバイスのキーボードを使用して、リモートフィールドにテキストを入力します
  • コントローラを閉じるための閉じるボタン

あった方がよい:

  • アドレスバーバックとリロードあり
  • 画面上のスマートTVを開く機能メニュー

私はこの機能のすべてを可変スペース内に配置しようとしています(5から6までのiPhoneファミリー、縦向きと横向き)。


これまでの私の試み:

  1. 最もクリーンなデザインですが、機能が最小限で、「戻る」またはメニューを開くオプションはありません。これにより、デザイン検索が促されました
  2. 完全な機能、レイアウトは直感的です(模倣Chromeブラウザ)。トップコントロールに到達するのは非常に困難です
  3. #2と同じ機能の一部は、戻って再ロードされます
  4. 部分的な機能、アドレスバーなし、ユーザーはブラウザーの戻るボタンとXボタンを混同してコントローラーを非表示にします。

大きな電話画面に人間工学的かつ直感的にボタンを配置するためのより良い方法はありますか?

Mockups 1–4


モバイルタッチスクリーンの人間工学の参考ヒートマップ:

Thumb area, different holding positions

Thumb area, different device and screen sizes

7
Alex Stone

素早い批評:

  • 機能の豊富さと人間工学に基づいたミニマリズムは、ここで重要なトレードオフです。リモコンの機能をフルにしたいが、威圧的ではないことを使用するのに十分なほどシンプルにしたい。これは、ほとんどのリモコンが正しく機能しないバランスです。

  • ここでは円形の形状に問題があります。円形状が「親しみやすい」ので、なぜそれを使用するのか理解しました。しかし、画面上に複数の円を配置すると、通常は通常のグリッド構造で円を非常に注意深く配置しない限り、実際に乱雑に感じ始めます。

    • 非グリッドレイアウトでは、レイアウトに異なるサイズの円と四分円が含まれているため、見当識のないインターフェースにつながります。たとえば、レイアウトのマイナス(白い)スペースを見てください。これは、レイアウトがどれほど混乱しているのかを簡単に知る方法です。
  • ボタンを表示または非表示にしますか?ユーザーごとに専門知識やニーズが異なるため、ボタンを表示または非表示にするかどうかを判断するのは困難です(例:レイアウト#1と# 4)

  • ハイコントラストのパープルオンホワイトは、境界が非常にはっきりしているため、インターフェイスが少し不快になります。


設計されたアプローチ(クリックして拡大):

remote

注:

  • 長方形のボタンを使用してグリッドの配置を改善し、スペースをより有効に使用します。垂直方向の対称性とコントラストの少ない単調なパレットは、インターフェイスをさらに落ち着かせます。
  • 大きな正方形のトラックパッドを作成します。これは設計上の優先事項です。
  • ユーザーは、専門知識のレベルに応じて、追加のボタンを表示または非表示できます(-===-)。これは、SamsungのTouchWizインターフェイスから借用したアプローチです。

    • ボタンは「スティッキー」なので、ユーザーがボタンを展開または非表示にすると、次にリモートにアクセスしたときもボタンはそのまま残ります。これは、ユーザーがインターフェイスをカスタマイズする簡単な方法です。
  • 慣れ親しんだブラウザバーを提供します。これは、ユーザーがすでに慣れているブラウザ(Chrom、FF、Safari)に慣用的に従います。

  • あなたが設計しようとした親指に優しいレイアウトに準拠します。


ところで、私は左のアプローチが右のアプローチよりもずっと好きです(邪魔にならない、トラックパッド領域をより尊重するなど)が、2つの選択肢を与えると思いました。

2
tohster

頻繁に使用されるブラウザー機能をキャプチャする必要性について言及しているコメントに同意しますが、モックアップに表示されているコントロール(7〜8項目)を考えると、可能な解決策は以下に焦点を当てることができると思います。

1。コントロールを1つの場所にグループ化する:そうすることで、混乱を取り除き、追加の機能を含める必要がある場合は、拡大する余地を確保して、次のことが可能になります。

2。ユーザーへのコントロールの引き渡し: 1つの場所にコントロールを配置すると、ユーザーが希望する順序でアイテムを注文することで、リモートをどの程度正確に使用するかをユーザーが決定できるようになります。

以下のモックアップには、これらの考えが組み込まれています。

enter image description here

3
Okavango