オブジェクトをドラッグ可能に見えるようにする
背景に浮かぶ選択オブジェクト（テキストSELECTED）があります。選択オブジェクトはドラッグ可能で、家具にドラッグして選択を行うために使用されます。ユーザーは、オブジェクトをソファなどにドラッグして選択できると想定されています。モックアップ画像では、円卓が選択されています。
これまでのところ：
- 背景の上に浮かせるように背後に影を追加しました
- 左右に6つのドットを追加して、見やすくしました
- 選択オブジェクトにカーソルを合わせるとカーソルが手の形に変わりました
オブジェクトをクリックすることには別の機能があるため、ソファをクリックして選択するという明白な方法は、この場合のオプションではありません。
主な問題は、それが実世界のオブジェクトの上にあるフローティングオブジェクトであることです。そのため、アニメーションを使用して、選択オブジェクトを（バルーンのように）フローティングのように見せて、移動可能に感じられるようにすることを考えました。ただし、オブジェクトが絶えず動き回っている場合は、これにより刺激が生じる可能性があります。
ドラッグ可能な選択オブジェクトの認知度を上げるにはどうすればよいですか。浮いているし、バックグラウンドで動けない。
標識をドラッグする場合は、オブジェクトが移動することを示す別の種類の指示を追加できます。
ただし、ユーザーが標識をドラッグするのは不自然に感じるかもしれません。オブジェクトをクリックして、標識を新しいオブジェクトに移動させると、ユーザーにとってより自然な動作になります。
ユーザーは常に、オブジェクトがドラッグ可能なオブジェクトであると想定します。
選択したオブジェクトを強調表示したいので。以下の提案を検討しましたか？
オブジェクトが選択されたときの画面の残りは、たとえば50％の黒の不透明度になります。
点線の輪郭
オブジェクトの周りで光る
このような問題については、他のインターフェースがそれをどのように処理するかを調べるのが最善です。このようにして、ユーザートレーニングの一部はすでに行われています。車輪を再発明する必要はありません。
この場合、最初に頭に浮かんだのは、Googleマップストリートビュー向けのペグマンです。
Googleは、まず、ドラッグ可能なインジケーターを別のツールバー「マップ外」に配置してこの問題を処理します。ツールバーは既にユーザーの意識の中にあり、対話してそのバーに関連付けられたコンテンツに影響を与えることができます。
ペグマンにもマウスオーバーの状態があります。ペグマンの上にカーソルを合わせると、ペグマンが飛び出し、カーソルが掴む手に変わります。操作できるフィードバックが増えます。
ここから、ペグマンを手に取ったときにマップの状態を変更して、ペグマンをつかんだときに何ができるかを示します。
ドロップできる場所を強調表示するマップへのこの視覚的な変更は、ユーザーへの追加のフィードバックであり、インジケーターを取得すると、指示された領域のいずれかに置くことができます。これは彼らにとって貴重なフィードバックです。
したがって、Googleはこの問題を次の3つの方法で処理します。
- スポイトを別のツールバーに追加する
- マウスカーソルの変更に関連するホバーオーバー状態を提供する
- このツールを使い始めたら、マップで何ができるかについてマップ自体にフィードバックを提供します。
だから、あなたのインターフェースでこれらのテクニックを使ってみてください。 Googleはすでに、このようなインターフェースを操作する方法をユーザーに部分的にトレーニングしています。そのため、ユーザーの知識を目的に使用してください。
SELECTEDオブジェクトは、ツールチップまたはラベルのように見えます。ポインタは、コントロールとして使用されているため、オブジェクトのようなものである必要があると思います。 SELECTEDの過度の概念がなくてもポインタを使用できると思います。それでもツールチップを使用できます。
ポインタの相互作用能力（「活性」）を示すには、かなり長い「定常」状態で目立たないアニメーションを使用できます。下の画像を参照してください。
選択のドラッグ可能性を伝えたとしても、ユーザーは混乱する可能性が高く、選択ではなく選択されたアイテムをドラッグすると考えられます。たとえば、彼らはそれがソファーを選択する代わりにプレートをソファーにドラッグすると考えます。
あなたは現在別のタップ機能を持っていることを知っていますが、カスタム機能と比較して項目の選択の優先度が非常に低い場合を除き、タップによる選択に対応することを強くお勧めします。方法で。あなたの関数が何であるかを知るのに役立ちますが、これを行うには3つの潜在的な方法があります：
- タップしてオブジェクトを選択し、アクションを実行します。選択されていないアイテムに対してカスタムタップアクションを実行する必要がない限り、これは機能する可能性がありますが、可能性は低いです。
- 選択とアクションの間でページのタップモードを切り替える方法を追加します。これは、ユーザーが1クリックで繰り返しアクションを実行できるため、選択を変更せずにカスタムアクションを頻繁に実行する場合に意味があります。カスタムアクションが十分に一般的であれば、ユーザーがアイテムを選択した直後にカスタムアクションモードに切り替えることもできます。
- タップでオブジェクトを選択し、アクションを実行するオプションを提供します。これは、カスタムアクションがあまり使用されない場合に意味があります。
最後に、選択プロセスを決定した後、選択範囲を境界線で指定するだけでよいので、視覚的によりクリーンになります。
そこで実装しているのは、不必要に型破りなユーザーインターフェイスパラダイムです。
1984年のMacintosh以降、よく設計されたほぼすべてのGUIアプリケーションと同じように実行します。
ものを選択するには、ユーザーにツールバーから選択ツールを選択してもらいます（必要な場合：おそらくそうではありません：単純なプログラムはツールバーを必要としません。すべてのアクションを選択する必要がある場合は、 select object + dispatchコマンドタイプのパラダイムを用意するだけです。）
マウスカーソルを変更して、その選択ツールを反映させます。すると、カーソルが選択オブジェクトになります。あなたが持っているような追加のオブジェクトの必要はありません。また、cusorにテキストを散らかす必要もありません。ツールの説明テキストは、ツールバーにカーソルを合わせると表示されるツールチップにすることができます。
選択ツールが有効なときに、物をクリックすると選択されます。
Ctrl +クリックで複数のものを選択します。
クリック+ホールド+ドラッグにより、ユーザーは長方形などの形状をジェスチャーすることができ、完了すると、境界内のもの、または交差するものとその境界内のものを選択します。
Ctrl +クリック+ドラッグにより、ユーザーは上記を使用して選択を拡張できます。
見積もり：
オブジェクトをクリックすることには別の機能があるため、ソファをクリックして選択するという明白な方法は、この場合のオプションではありません。
明白な方法が選択肢でない場合は、明らかなユーザビリティの問題があります。
まず、オブジェクトをクリックすると、暗黙的にであっても、常にオブジェクトが選択されます。 GUIでは、オブジェクトをクリックして起動される他の関数は、ほぼ確実にそのオブジェクトに対して何らかの方法で動作します。つまり、オブジェクトはその関数に対して選択です。選択された状態ではありません。
さまざまなアクションモード用のツールバーがないアプリケーションでは、これを従来の方法で処理すると、シングルクリックでステートフル選択が行われ（修飾キーで複数を選択できます）、ダブルクリックで「このオブジェクトを選択するか、すべていくつかのデフォルト操作の引数として選択されたオブジェクトとその操作をディスパッチします。」または、別のマウスボタンを使用することもできます。左クリックするとオブジェクトが選択され、右クリックするとコンテキストメニューが表示され、そこから他のアクションを実行できます。
私の意見では、「選択済み」というテキストのボックスは不要です。そして、その上のドットは装飾のように見えます。でも私は影のアイデアが好きです。エッジの周りにグロー効果があるオブジェクト全体をハイライトすることを検討しましたか？また、ドラッグ可能なオブジェクトにカーソルを合わせて握る手にマウスポインタを合わせて、握る動きをアニメートすることもできます。
マウスオーバー時にオブジェクトに影と輪郭をはっきりさせます。
もう1つのオプションは、実際に「浮かせる」ことです。つまり、上下にゆるやかに揺れるようにします。それは、私には、オブジェクトが固定されていないが移動することができるという非常に明確な手がかりであり、ドラッグはそれを行う明白な方法です。
- ホバーしたときにオブジェクトを強調表示します（これを行う方法はあなたの選択です）
- オブジェクトにカーソルを合わせるときに、単純なアニメーションのハンドカーソルを使用します（例を参照してください。アイテムがドラッグ可能であることを示すのに十分です）
設定cursor:moveホバーの4方向矢印への移動は、何かがドラッグ可能/移動可能であることを最も明確に示しています。ほとんどすべてのOSの標準インジケーター。