どこでもラベルを使用せずに、2つの異なるタイプのボタンを区別するにはどうすればよいですか？
交差点の交通量をカウントするアプリケーションを開発しています。ボタンには2つの異なるタイプがあります。
- 1つはトラックを数える（ "lkw"はトラックのドイツ語の省略形）
- 1つは車を数える（ "pkw"は車のドイツ語の省略形）
ご覧のとおり、私は現在、すべてのボタングループにユーザーラベルを表示しています。問題は、これらのボタンを非表示にできるため、それに応じてラベルを非表示にする必要があり、メッセージを伝えるためだけに8つのラベルを使用したくないということです。
どのようにボタンをデザインできますか
- 車が進む方向を表します
- 車かトラックかを表しますか？
私は緑色の（トラック）矢印をトラックシンボルに置き換えることを考えていましたが、それはどこにでもあるトラックシンボルです！
何か提案はありますか？
ここでの重要な要素は、タスクが反復的であることです。そのため、ターゲット領域を大きくして、できるだけシンプルかつ迅速にする必要があります。たくさんのボタンを使うのはいい考えだと思います。 1台の車両で1つのアクション-シンプルでシンプル。
誤ってボタンを誤って押すのを避け、ボタンを大きくするためにボタンを少し離して、エラーの余地を少なくし、ボタン領域の混み具合や圧迫感を減らします。
ボタン自体のデザインがノイズを増やすと思います。現時点では、すべての矢は同じ色です。車両と方向をより適切に関連付けるには、矢印自体に色を付ける方が良いと思います。また、ボタンのブロックパターンのようなグリッドは、パターンがコンテンツの邪魔になるため、削除してみます。おそらく、「まっすぐ」の矢印が付いたボタンを少し前に動かし、ボタンが正方形ではなく円形になっているので、現時点では直線のエッジが多すぎます。
次のようなもの：
Matt's「レーン」のアイデアもいい感じで、きれいに整理されています。
[編集]矢印、丸いボタン、レーンを使用して複数の変更を行った後、ボタンを上部で水平に、側面で垂直に再配置しても、それほど悪くはありません。以下を参照してください。また、ボタンの背景を少しだけ色付けしました。
ボタンの背景はまだ少し多いというVitalyに同意しますが、完全に削除するわけではありません。タッチスクリーンデバイスの見栄えが良いものを試してみますが、それらが明確なターゲット境界領域を提供する一方で、それ自体が侵襲的でないように最小限に抑えています。例えば：
私の提案は、各交差点に緑のトラックと青い車を置くことです。マウスで各アイコンにカーソルを合わせると、矢印に展開されます。これにより、画面上に常に1セットの矢印のみが表示され、レイアウトが簡略化されます。
代わりに、これがタッチスクリーンの工夫である場合、ユーザーにトラックまたは車のボタンをクリックして適切な方向にスワイプさせることができます（ボタンに触れるとオプションに視覚的なヒントが表示されます）。
編集：これは、ジェスチャーを発生させたくないタッチスクリーン用なので、クリックするだけで、交差点を可能な方向に分割するパスがあり、車/トラックのシンボルを正しい位置に配置できるとしたらどうでしょうか。適切な場合のパス。 
Uxの観点からのあなたのデザインは素晴らしく、使いやすくなりました、子供でさえ何をすべきか理解するでしょう。タッチジェスチャーや実世界の矢印で複雑にしないでください。
「lkw」と「pkv」のラベルを車とトラックのアイコン、または「車」と「トラック」の言葉に置き換えることが、この問題に対処する最良の方法だと思います。それらを正しく配置してください—上部と下部の矢印グループの場合は左側に、左側と右側の矢印グループの場合は上部に配置します。
ロジャーのモックアップは素晴らしいですが、私はまだいくつか変更します。
矢印のデザインは、それを乱雑にしすぎます。私は背景を失うでしょう。ターゲットサイズはロジャーのモックアップと同じにする必要がありますが、視覚的なサイズはそれほど大きくする必要はありません。背景はクリック可能であるというメッセージを伝えるのに役立ちますが、矢印自体をより3Dで表示すると、同様に機能します（モックアップではそうではありません）。
これは重要です-道路には、トラックの数倍の数の車があります。したがって、ほとんどの場合、ユーザーは車のボタンを切り替えます。したがって、車のボタンは互いに近く、中央（内側のレイヤー）に近く、トラックのボタンは画面の端に近い必要があります。
ボタンをまったく使用しないのはどうですか？ボタンは絶対に使ってはいけないと思います。代わりに、車とトラックのオブジェクトを使用してください。
どの通りにも、交差点に面してトラックと車を1台ずつ配置します。したがって、合計4台のトラックと4台の車があります。
画像は上から見た車やトラックの画像を使用！このようにして、ユーザーは写真を見るだけで車から方向を導き出すことができます。
ユーザーは、トラックまたは車を、車またはトラックが行く通りにドラッグする必要があります。 （通常、ドラッグ中にさらに2つのことを行うことができます。
- 他のすべての車とトラックは、マウスボタンを押すとすぐに消えます
- 各通りに3つの矢印が表示されます（左、右、直線）。
- マウスボタンを離すと、車またはトラックがその通りにさらに移動するアニメーションが表示されます。画面を出るとすぐに+1が表示されます（ユーザーが正しいことをしていることをユーザーにフィードバックするために、非常に重要です！
ドラッグアンドドロップが気に入らない場合は、結構です。車を1回タップすると、他のすべての車が消え、3つの矢印が表示されます。キャンセルするには、もう一度車をタップします。代わりに、3つの矢印のいずれかをタップして方向を選択します。トラックは画面のその通りに入り、+ 1がその通りに表示されます。もう楽しそうですね！
これは最も自然なことだと思います。おもちゃの車で遊ぶのと比べてみてください。車またはトラックを選択し、移動する必要がある場所にドラッグまたは選択します。
あなたがiphoneゲームを作ると想像してみてください。ボタンをまったく使用せず、オブジェクトを必要な場所にドラッグするだけです。
少なくとも私はそう思っています。
エマニュエル、
24個のボタンは絶対に必要ではありません。
まず、インタラクションをモーダルにし、ボタンの数を半分にします（両側に3つだけ）。これは、車モードとトラックモードを切り替える「トグル」を持つことを意味します。したがって、車モードでボタンを押すと車が通り過ぎ、トラックでボタンを押すとトラックが通り過ぎたことを意味します。ほとんどの場合、車が通り過ぎると想定できる場合は、矢印キーを押すたびに（トラックモードでも）、デフォルトでカードモードに戻ることができます。多くのUXデザイナーはモードレスな対話を好みます（そして正当な理由で）が、2つの異なる動作モードがまさに必要な場合があります。
もちろん、誤った入力を防ぐために、車モードとトラックモードでは非常に明確でなければなりません。
初心者向けです。たとえば、入力を2つのアクションに分割することで、視覚的な混乱をさらに簡素化できます。最初のステップ：車両がまっすぐ進んだか、左折したか、右折したかを選択します。 2番目のステップ：どの方向から来たかを選択します。その場合、アクションごとに3〜4個のボタンしか使用できません。ほんの一例...それはあなたの特定のケースのための最良の解決策かもしれないしそうでないかもしれません。
いつものように、すべては誰がアプリを使用するかによって異なります。子供対大人。初心者対テクノロジーなどに詳しい人々...
「直感」ではなく「効率」を重視したい
直感は新規ユーザー向けですが、それを使用する人は何時間もアプリケーションを使用し、そのシナリオを想像するだけです。 10分までに彼らはシステムを学ぶことができるはずです。そして、今後数時間、私がユーザーであれば、これは私の仕事を簡単にするためにこれを好むでしょう。
効率の例としては、中央に2つのボタンがある場合があります。車用。トラック用。それぞれが上、下、右、左の矢印の付いた円形になります。 （ボタンごとに8つの矢印が必要ない理由は、考えてみると、すべての車がいずれかの時点で中央に移動するためです。その場合、中央からの4つのアクションだけが上下左右です。 、左）ロックバンドのボタンが円形ではないことを除いて、アイデアはロックバンドゲームに似ています。この場合、車が来ると、ユーザーはそれに応じて方向を押すことができます。
また、矢印を近づけすぎると、長期間使用すると間違いが発生する可能性があります。
非常に多くのボタンがあると、完全に混乱します。
私の答えは、すべてのオプションを一度に提示してインターフェースを混乱させるのではなく、アクションを単純化することです。インタラクティブなインターフェースなので、各車両用の2タップシステムにしてみませんか？
したがって、状態1では、ジャンクションへの4つのエントリのそれぞれに、シンプルで明確な（ラベルのない）車+トラックのアイコンが表示されます。エントリポイントと車両タイプをタップすると、表示が4つの矢印に切り替わり、矢印は交差点の外側を指します。出口の場所をタップすると、進行方向が保存され、表示が元の車/トラックアイコンの状態に戻ります。
これにより、一度に最大8個のボタンを画面に表示できるようになり、完全に直感的になります。