web-dev-qa-db-ja.com

物理的なボタンを使用するようにユーザーに指示する

物理的なロボットを制御するためのタッチスクリーンユーザーインターフェイスを設計しています。インターフェイスには、携帯電話のタッチスクリーン要素や物理的なホームボタンと同様の物理ボタンも含まれますが、これはカスタムデバイスです。

安全上の理由から、物理的なボタンのみを使用してロボットを動作させることができます。画面上のタッチ可能な要素は、UIナビゲーションとパラメーターの変更のみを目的としています。

画面上のテキストプロンプトがある領域を押すのではなく、物理的なボタンを押すようにユーザーに指示する良い方法を知りたいです。

私のデザインは静的要素のみに制限されているため、指でボタンを押すなどのアニメーションを表示できません。


ロボットの動作に物理的なボタンを使用するようにユーザーに促す画面上の要素での私の概念を次に示します。この例では、ロボットの動きを引き起こす可能性のある3つの物理ボタンがあります。左矢印、チェック、右矢印ボタン(すべて画面の右側に配置)です。ロボットの現在の状態では、右矢印のみが何もしないため、他のボタンはグレー表示されます。画面上のスペースを押しても何も起こりません。矢印のオレンジは、物理的なボタンのオレンジ色と一致します。

Example of UI element

ユーザーがロボットを次の状態にするために物理的な右ボタンを押した場合、その要素は次のようになります。

Example of UI element この状態では、右と左の両方の物理ボタンが動きます。

これは、ハンドヘルドデバイスがどのように見えるかのアイデアです。 UIがどのように見えるかという考えを重ね合わせました。このプロトタイプでは、物理的なボタンには矢印アイコンや完成したボタンの色はありません。また、ボタンの後ろにある個々のLEDを制御できないため、ボタンなどを点滅させることができません。 Prototype UI


最初のテストでは、新しいユーザーが最初に画面上のテキストスペースを押してから、物理的なボタンを使用するように指示しました。その時点から、ユーザーは物理的なボタンの使用に問題がないようでした。これが、ユーザーインターフェイスに慣れていない新しいユーザーにとっての不満の原因になるのではないかと心配しています。

8
jekso

UIでコントロールパッドのミニチュアを使用し、ミニチュアでボタンを強調表示してアニメーション化することにより、使用するボタンを示します。

1つのボタンだけではなく、コントロールパッド全体を表示することで、ユーザーはそれをよりすばやく見つけて混乱を避けることができます。そうしないと、右上と左下の円形ボタンを区別するのが難しくなります。ボタンの形状と色は同じで、場所が視覚的に異なるだけです。

5
celinelenoble

ビデオゲームコンソールと同様に、物理的なボタンに(理想的には色分けして)一意のアイコンまたはラベルを追加することを検討してください。

A photo of an Xbox One and a PlayStation 4 controller, showing their face buttons with prominent, colour-coded icons on each
写真 BGR.com から

次に、ビデオゲームデザイナーがしばらく使用してきたいくつかの規則を利用できます(各インターフェイスの下部を参照)。

Xbox 360 dashboard interface showing button icons in the corner
PlayStation 4 interact showing button icons in the corner
Nintendo Switch keyboard interface showing button icons along the bottom

4
Kit Grose