ドラッグ可能なWebサイトのデスクトップユーザーに警告する
メインナビゲーションシステムでjQuery iScrollプラグインを使用するサイトを構築しています。 （ http://lab.cubiq.org/iscroll/examples/simple/ ）。プラグインは正確にドラッグアンドドロップではないことに注意してください。
現在、別のカーソルを使用して、ページがドラッグ可能であることを示しています。
次のようなグラブ/ドラッグハンド：
ドラッグ可能なインターフェイスについて他にどのようにユーザーに警告する必要がありますか？
ページが読み込まれると数秒間表示されるDRAG MEメッセージ（カーソルとして）？
誰かがアイデア/参照を持っていますか？
[〜＃〜] edit [〜＃〜]：回答の中にいくつかのヒントと他の質問への参照があり、中にあるdivの一部がページはドラッグ可能です。しかし、私の場合、全ページナビゲーションはドラッグ可能です。その場合、どのように警告すべきですか？
ここではいくつかの例を示します。
- 最初の小さなアニメーション。（この種類のオプションはあまり好きではありません）
- マウスを押すと円が表示されます
- 4つの矢印カーソル+スクロール記号
- 私が提案していたハンド/グラブカーソル
- ハンド/グラブカーソル
- ハンド/グラブカーソル
- 正確にはドラッグできませんが、異常なナビゲーションを警告する方法に興味を持ちました
- ここの最後のものと同じ 。
だから私は次のようなさまざまな「小さな」ソリューションを考え出すことができると思います：
-example＃3やexample＃8のような視覚的な指示
-例1のような最初の小さなアニメーション
-最初の完全なプレーン画面を作成します。これにより、ユーザーは、そのページをドラッグして、入力するか、例1のようにページから離れることができます。
-example＃2のような小さなヒント、またはユーザーがドラッグしていない場合はページを少し自動ドラッグする（以下の解決策の1つで提案）
-ユーザーがexample＃7のようにドラッグしようとしたときに一種のズームアウトを行う
-例2のように、次に進むためのスクロールバーまたはボタンがない。これについての2つの意見は、ユーザーがページをドラッグするか、ページから離れなければならないことに気付いた場合です。ボタンを配置した場合、ユーザーはボタンを使用して左/右に移動し、おそらくページがexample＃4のようにドラッグ可能であることに気付かないでしょう。
MAPS Webサイトがドラッグできなくなったときのことを考えさせられます。ドラッグされ始めたとき、どうやってユーザーに警告しましたか？
編集2：このテーマに興味があるかもしれないこの記事を見つけました： http://blog.maxrudberg.com/post/38958984259/if-you-see-a-ui-walkthrough-they-blew-it
ここでのほとんどの回答はドラッグ可能な要素にのみ適用されることに同意します。それらの場合、そのような要素にアフォーダンスを与えるための明確な規則があります。キャンバス全体をドラッグして探索できる状況で、私が知っている唯一の本当の慣習はハンドカーソルです。
このデザインを追求する場合、次の点に注意することが重要だと思います。
- あなたはウェブの慣習を破っています。ユーザーエージェントにスクロールメカニズムを決定させる明確な規則があります。タブレットやスマートフォンではドラッグし、通常のPCではスクロールします。これは、特定のタッチジェスチャーとして、またはスクロールホイールなどの特定のデバイスを使用して実装できます。あなたはこのタスクを引き継いでいるので、考えられるすべてのプラットフォームでスクロールが適切に機能するようにするのはあなたの責任です。プラットフォームとWebブラウザに責任を負わせることはできません。これは大きな投資です
- 覚えやすいアクセシビリティ。通常、プラットフォームとブラウザがこれの大部分を処理しますが、引き継ぐ場合は、自分で行います。 グレースフルデグラデーション および プログレッシブエンハンスメント の強力な計画を立てます。
- あなたが何をするにせよ、あなたが考えることができるすべてのプラットフォームでそれから地獄をテストしてください。それが長期的なWebサイトである場合は、次の大きなプラットフォームが登場するときのために、いくらか予算を空けておくことを忘れないでください。
それでも、あなたがこの決定を下すのはあなたが最初ではありませんが、あなたが与えるすべての例で、私はその選択を正当化するとは考えません。このような悪いUXエクスペリエンスを危険にさらすために、目立たせたいというよりも、本当に良い理由が必要です。パラダイムが機能するいくつかのケース：
これらの共通の要素は、非常に大きなキャンバスがあり、ユーザーがビューポートを特定の領域に正確に配置したいということです。 ズームインとズームアウトは、これらの例では常に重要なユースケースです。
これらの例のスクロールモードは比較的よく知られています。キャンバスをドラッグしたり、ダブルクリックしてズームしたりします。ドラッグだけでなく、そのすべての要素を実装してください。
次の要素は、このモードであることをユーザーに理解させるのに役立ちます。
- 左上のナビゲーションメニュー。ユーザーが上下左右に移動し、クリックしてズームレベルを設定できるようにします。これは、ドラッグできることを理解していない場合の目に見える安全オプションでもあります。 これらのコントロールが頻繁に使用されていることが検出された場合は、ドラッグオプションを説明する控えめなメッセージを表示できます。ドラッグを使用していることが検出された場合オプションでは、コントロールを折りたたんだり非表示にしたりできます。
- または、キャンバスの端に矢印キーを配置します。繰り返しになりますが、これにより、ドラッグオプションを見逃したユーザーに警告が表示され、そのユーザーはフェイルセーフでナビゲートできます。
- 現在のビューポートを赤い長方形として表示する、キャンバス全体の概要。 （Photoshopのナビゲータービューのように）。これにより、ユーザーはドラッグするのが遠すぎるポイントにすばやくジャンプすることもできます。
- コンテンツが不自然に途切れてしまうすべての境界で。下部または上部と下部のみが途切れる場合、通常のスクロールWebページのように見えます。スクロールできる方向に余白がないことを確認してください。
- 明示的にアクティブ化および非アクティブ化できる（ほとんどのPDFリーダーのように）セカンダリモードをドラッグすることを検討してください。開いた手のボタンは、ここでは適切な規則です。
ドラッグ可能性を示す一般的なパターン：
ドラッグハンドル
これはアフォーダンスに向かいます。ユーザーは、何かを見るだけでドラッグできることを認識できる必要があります。 「グリッピーな表面」はこれの一般的な比喩です。
Cursorgrab- handは、矢印（move）カーソルと同様に意味があります。現在、grabはWebkit専用です。また、一部のデバイスにはカーソルがまったくありません。
マップ
今では、Googleマップでマップをドラッグするのに慣れています。これは2次元のコンテンツであり、一部がビューポートの外にあることが簡単にわかります。大きな写真もこの認識をトリガーする可能性があります。ただし、人々はテキストのページをスクロールすることに慣れているので、テキストベースのコンテンツに対してドラッグ中心のインターフェースを作成しないでください。
チュートリアル化
初めて使用するときのインターフェイスの使用方法について説明します。さらに多くのコンテンツが見つかる場所とそこに到達する方法を示します。しかし、ウェブ上でこれを我慢することはほとんどありません。
それは言いました...
ドラッグ可能性は常に、相互作用の2次モードとして提供される必要があります。ユーザーがドラッグすることでできることはすべて、クリックすることによっても可能になるはずです。これが、Googleマップの左上にD-padがある理由です。
「ユーザーにXのように振る舞わせたい」、「ユーザーに刺激的な発見をしてもらいたい」など、たくさんのことがわかります。これはユーザー中心ではありません！その上、人々は発見に到達する前にイライラと苛立ちを経験する傾向があり、ウェブ上で彼らは長い間なくなっていることを意味します。
この記事 は自分の経験を反映しています：
彼らは、ドラッグアンドドロップが「楽しく」、「創造的」に感じられることに同意しましたが、それは不必要に複雑であり、クリックするのも同じくらい簡単、または簡単であると圧倒的に述べました。 「ドラッグはドラッグだった」は私のお気に入りの引用の1つでした。 :)
ドラッグアビリティは、それがユーザビリティをサポートする状況で使用されるべきです。主な利点は、相対位置を示すことです。オブジェクトをAからBに移動する必要がある場合は、クリックするだけの方がはるかに高速です。オブジェクトをAからBとCの間のどこかに移動する必要がある場合は、ユーザーが目的の位置にドラッグすることをお勧めします。
最後に、いくつかの落とし穴を手軽にカバーしている例を確認しましょう。
最初の小さなアニメーション。（この種類のオプションはあまり好きではありません）
あなたがそれを探すように言ったので私はそれを見ただけで、それでも私がサイトを訪れたのは2回目だけでした。全体として、このWebサイトは、やり取りする主要な課題です。マウスを押すと円が表示されます
私は本当にこれを探す必要があり、そこにある必要があることを知っていたので、それを見つけました。画面外にコンテンツがあるはずですが、そこに到達する方法は示されていません。スクロールしてみたがうまくいったようだが、何より運が良かった。4つの矢印カーソル+スクロール記号
「私は単なる指標です。ページをドラッグしてください！」...自分をドラッグしてください。作成者の怠惰や無関心以外に、私が知っている方法や好きな方法でWebサイトを使用できない理由はありません。私が提案していたハンド/グラブカーソル
これは実際に良いです。すべてがドラッグ可能なインターフェースを中心に設計されており、コンテンツにとって理にかなっています。そして、それもクリック可能です。ハンド/グラブカーソル
私はまだこれを理解しようとしています。それについて私が理解していることは一つもありません。ハンド/グラブカーソル
Form Follows Functionと呼ばれるWebサイトがフォームに非常に関心を持つのを見るのは面白いです。彼らはチュートリアル化のいくつかの素晴らしい試みを持っていますが、それでもなぜこれが使いにくいのかを理解することができません。マウスでのスワイプは、ボタンをクリックするよりもはるかに困難です。- ここの最後のものと同じ 。
最後の2つについて、誰かが「技術実証」と「ウェブサイト」を混同しています...
握りこぶしのカーソルを使用する代わりに、これを使用することをお勧めします 
代わりに。
または、読み続けます。
ドラッグ可能であることをユーザーに示します。実際の製品と同じように、物理的な製品が行います。
たとえば、このテーブルランプのスイッチはここにあります。グリップは、それがドラッグ可能であることをユーザーに伝えるのに十分であり、スイッチにバンプを配置する理由が他にないため、スライドすることができます。
同様に、iOSではドラッグ可能なテーブル行の右端に「グリップ」があります。
Windows 7以下を使用している場合は、スクロールバーにも注意してください。グリップも付いているのでドラッグできます
したがって、ユーザーがドラッグしたいものに「グリップ」を置くことができます。
私はこれについて考えてきましたが、私の理解と発見により、インタラクティブな性質についてそれ自体が教えるフォーム要素が最も成功したものです。たとえば、スクロールバー、ボタン、ドロップダウンメニューなどです。ただし、ここでは、静的な画像では説明できないDRAGABLE PROPERTYという追加の操作について説明します。ここから先導して、そのようなことを提案します。
- スクロールせずに見える範囲にドラッグ可能なdivを保持して、ページが読み込まれた瞬間に見えるようにします。
- 遅延を使用してこのようなdivを表示し、目に見えるようになったときに目で確認できるようにします。
- Divを自動モーションに設定し、画面上でゆっくりと80〜100ピクセル移動してから、モーションを緩めて停止します。
- weather divがユーザーによって移動されたかどうかを追跡します。ユーザーが操作しなかった場合は、5秒ほど待ってからもう一度80〜100ピクセル移動します。
- インタラクションが2回目も発生しなかった場合は、スクロールバーでさらにスライドをバインドし、ユーザーがページを上または下にスクロールするときにdiv（少し）をスライドさせます。
これで、これらの相互作用は、divをドラッグ可能と見なすために使用するアプローチに追加されます。矢印付きのカーソルを使用する必要があります。おそらく、divの近くにスクロールバーがあり、ユーザーがその相互作用と性質を理解するのに役立つ他の説明されている視覚補助があります。
何をしようとする場合でも、 http://blacknegative.com/ などのソリューションの使用は避けてください。それは（私の意見では）kop outです。 Webサイトの使用方法をユーザーに伝える必要がある場合は、問題が複雑すぎます。では、領域全体がドラッグ可能ですか？以下の答えは、いくつかの独創的なアイデアからのもので、それ以上のものはありません。あなたは上記の良いアイデアを受け取ったと思います。
- ユーザーが画面をクリックした場合は、選択されているドラッグ可能なオブジェクトが目立つようにします。これを行う方法は、別の機能にタブで移動するときにApple OSX機能を使用することです（背景を暗くして、プロパティが選択可能であることを確認します）。または、ウィンドウマシンの場合は、勝利キー+タブ。
- これがiPadとiPhoneでどのように機能するか考えましたか？ユーザーはどのようにオブジェクトをドラッグできますか？ユーザーが指を押し続けるのではなく、指を押したままスワイプするように移動するのは不自然です。 （ピンチで選択してからドラッグしますか？ここでの技術的な可能性は不明です）
- http://rvlt.com/ のような手のカーソルは、このような動きを示すのに完全に有効です。
- 概念や設計を知らずに、不明確な方法を使用することを考えましたか。たとえば、ユーザーがスクロールするとどうなりますか？または、キーパッドで「->」を押しますか？ a）スクロールのこれらの方法を受け入れるか、b）ユーザーがページをドラッグして移動する必要があることを説明する警告を配置してください。私の最初の点に反しますが、ユーザーが最初にサイトを操作してから、エラーではなくすぐに指示するため、引き続き有効です。
- @サルマンのアニメーションの表示は良いものです。これらのアイデアをフルスクリーンに組み込むことはできませんか？たとえば、「天気divがユーザーによって移動されたかどうかを追跡します。ユーザーが操作しなかった場合は、約5秒待ってから、さらに80〜100ピクセル移動します。」あなたが議論している文脈に置かれたとき、確かにまだ有効ですか？
外出中です。それは特に役に立たないかもしれないことを理解してください、しかし私は関係なく私の2セントを投げ入れています-さらに考えることは素晴らしい/興味深いことでした。私の一般的なアドバイスは、ページがドラッグ可能であることを示すために単純なGUIを使用することです。そして、それが失敗した場合、それをねじ込んでください、ただ彼らに言ってください！ （eurgh、kop out kop out）質問/考慮事項：
- 概念を説明せずに上記のサイトで簡単なユーザーテストを実施し、ユーザーがナビゲートするサイトのドラッグ可能性（新しいWord！）の側面を理解しているかどうかを確認します。これを行う場合、この結果を知りたいと思います。
- 競争に関して話し合っている例をお持ちですか？
編集：申し訳ありませんがなぜ@Salmanが言ったことができず、 http://www.narrowdesign.com/ に似たプロパティ（div）を持っていることができません-ユーザーがそれをドラッグしたとき、それだけがそれを行います全画面表示？
インタラクティブなデザインの一部は、発見にも関連しています。可能なことすべてについて説明、指摘、または通知する必要はありません。それ自体が直感的である必要さえありません。人生も発見です！作成したインタラクションスタイルに精通しているユーザーがいる場合、ユーザーはそれを自分で見つけます。他のユーザーは誤って見つけます。まるでアートのようなものです。なんてクールなんだ！？
マウスオーバー時にスクロールバーの幅を変更する必要があります。これは、ユーザーに気付かれるのに役立ちます。次に、自分で提案したマウスアイコンを変更する必要があります。それは良い方法です。余分なものはすべてオーバーロードされます。 Facebookチャットがドラッグ可能であることを示す方法を添付し、幅を広げてユーザーの注意を引き付けます
私が考えることができる最良の方法は、「スクロールのために押し続けてください」というメッセージのあるカーソルの近くに小さなポップアップを置くだけです。
だからこのようなもの： http://www.hscripts.com/tutorials/html/tooltip.php
次に、保留中のツールチップを非表示にするように指定できます。これが最も簡単な方法だと思います。難しいことではありません。
ページにドラッグ可能なdivとドラッグできないdivが混在している場合、可能であれば視覚的に区別する必要があります。たとえば、ドラッグ可能なdivには点線の境界があり、ドラッグできないdivには実線の境界があります。または、ドラッグ可能なdivにわずかなドロップシャドウを付けて、フローティングしていてアンカーされていないことを示します。