web-dev-qa-db-ja.com

通常はドラッグできないものをドラッグできることを明確にする方法は？

私のインターフェイスを使用すると、ユーザーは通常、テキストボックスなど、他のアプリケーションで位置が固定されているものを移動できます。ユーザーが特定のオブジェクトを移動できることをユーザーに明らかにするために何ができますか？

頭に浮かぶアイデアは次のとおりです。

  • 可動オブジェクトの周りに一意の境界線を追加します
  • オブジェクトの境界線にカーソルを合わせると、マウスカーソルが「掴む」アイコンに変わります

私は、ユーザーが物をドラッグできるという考えをユーザーがすでに持っていなくても、それが明白であることを望みます。

affordancedrag-n-drop
34
Austin Henley

最良の結果を得るために複数のソリューションを実装しない理由はありません。

アンナ・ルーベンのアニメーションの紹介は素晴らしいアイデアです。それだけでは使いませんが。

私はそれを、ツールチップを備えた4方向矢印アイコン（オブジェクトの移動に一般的に使用されます）と組み合わせます。

入力フィールドのドラッグなどの一般的ではない方法については、これをできるだけ明確にします。

enter image description here

23
Chris N.

私はted.straussの答えに同意します。既存のグリップ指標があります。より適切なタイプは、フロアマットのような滑りやすい表面に似た四角いパターンです。 「ここをつかむ」メッセージの転送には、3本の棒のアイコンよりも優れていると思います。また、より広い領域に拡大することもできます。また、3つのバーのアイコンが、メニューまたはリストのインジケーターとしてより一般的に使用されるようになりました。

オブジェクトが自由に移動できることを示すには、マウスオーバー時に4方向矢印カーソルを使用する必要があります。

Windows 7でタスクバーのロックを解除すると、例が表示されます。 taskbar unlocked icon

もう1つは、Android向けの最新のGoogleミュージックアプリで確認できます。 shuffle playlist in Google Music

そして、私がこの答えを書いているとき、私はもっと見る;）-> grip patterngrip pattern

22
J_rgen

ドラッグアンドドロップは通信が非常に困難です。

  1. ホバーに「掴む手」または「四方向矢印」カーソルを提供できます（ただし、これは、ユーザーが最初にホバーできるようにする場合にのみ機能します。さらに、ユーザーテストの私の経験では、カーソルはあまり機能しませんとにかく影響）
  2. ドラッグ可能な項目をホバー状態にするか、ドロップシャドウを追加して左と上に数ピクセル移動することにより、ページから「浮かび上がる」ようにします（ここでも、ユーザーがホバーすることに依存しています）。
  3. 要素の「ハンドル」に「隆起エッジ」または「テクスチャ」デカールを使用して、次のようにします enter image description here またはGmailが使用するテクスチャ： enter image description here （これは広く認識されていません）
  4. 説明テキストでそれを言及します（決して読まれないため機能しません）
  5. 他の操作が問題のアイテムをアニメーションで動かして、それらが移動可能であることを示唆していることを確認してください（これが機能することは保証できません）

ドラッグアンドドロップが可能であること、およびアクセシビリティの理由（視力や運動能力が低い場合はドラッグアンドドロップできない）を確実に伝える方法がないため、次のことを行う必要があります常に代替の操作をサポートする。

別の考慮事項：アプリケーションのいずれかの部分でドラッグアンドドロップを使用する場合は、常にドラッグ可能な項目に特定のスタイルを設定し、他の項目にはそのスタイルを使用しないでくださいにする必要があります。そうしないと、ドラッグできるアイテムとドラッグできないアイテムをユーザーに知らせることができません。

17
Jimmy Breck-McKye

ページ/セクションが読み込まれると、UIコントロールに統合された簡単なアニメーションを表示して、オブジェクトをドラッグできることを示すことができます。

enter image description here

9
Anna Rouben

最近のUXの大きなストーリーは、ここにいくつかの例を示しているように、控えめなグリップインジケーターの上昇だと思います。最初の例はFacebookのiphoneアプリから取られたもので、この記号はアプリの2つのメイン領域間をドラッグするために使用されます。このアイコンを選択してその面積を約36ピクセルにすることで、アプリの機能をブランド化したり、トランジションを表現するより派手な方法を選択したりする機会を逃しました。

enter image description here

掴みやすさのこの控えめなシンボルは、最もわかりにくい選択肢でした。

2番目の例は、おそらくスクロールバーでのグラバーの最も一般的な使用法です。 3番目の例は、ブラウザーのUIの細い区切り線です。これは、要素を取得できるかどうかがまったく明らかではないため、質問により近いものです。疑問がある場合は、3行を表すグラブアビリティアイコンを選択してください。

enter image description here

enter image description here

3
ted.strauss

主にモバイルインターフェースのアイデア：要素が他のコンテンツの上に浮かぶ場合：要素を画面に飛ばします。これは、ドラッグすることによって「飛び出す」こともできることを示唆している可能性があります。

1
Lisanne van Hooff

グーグルはそれを他の場所で見た点のグリッドで行います。マウスポインタが変わります。 enter image description here

0
Chris SH