ドラッグ アンド ドロップ UX: シグニファイア、フィードバック、アクセス可能な代替案

あらゆる段階でのフィードバック

Nielsen Norman Group のガイダンスは、あらゆる段階での明確なシグニファイアと明確なフィードバックにより、ドラッグ アンド ドロップが見つけやすく、使いやすくなるというものです。アイテムが掴まれたら、人々はそれが掴まれたことを知り、落とす前に何が起こるかを知る必要があります。

• シグニファイア: グラブハンドルアイコン、ホバー時のグラブカーソル、またはその両方。
• 掴む: アイテムを影とわずかなスケールで持ち上げて、掴まれているように見せます。
• プレビュー: 有効なドロップ ゾーンを強調表示し、アイテムが着地する場所を表示します。
• ドロップ: アイテムを所定の位置にアニメーション化し、元に戻すことを提案します。

アクセシビリティ: 常に別の方法を提供する

WCAG 2.2 達成基準 2.5.7、ドラッグ動作 (レベル AA) では、ドラッグが必須でない限り、ドラッグによって行われる操作はすべて、ドラッグせずに単一のポインタでも実行できることが求められています。一般的な代替手段は、上に移動および下に移動ボタン、「移動」メニュー、または矢印キーを使用したキーボード サポートです。 NN/g はまた、正確な代替手段が多くの場合誰にとっても役立つことにも言及しています。たとえば、大まかにドラッグして所定の位置に移動したり、矢印キーで微調整したりするなどです。

物理学によりドラッグがダイレクトに感じられます

ドラッグされたアイテムは遅延なくポインターに追従する必要があります。リリースされると、リリース速度を定着に伝えるスプリングがドロップを物理的に感じさせ、他のアイテムがスムーズに脇に移動することで、ギャップがどこにあるかが表示されます。これらのモーションは短く保ち、モーションの軽減がオンになっている場合はモーションを減らします。

タッチの詳細

タッチ スクリーンでは、ドラッグとスクロールを区別し、多くの場合長押しして選択します。ハンドルをヒットするのに十分な大きさにし、端近くをドラッグするときにリストを自動スクロールし、プラットフォームがサポートする場所でのピックアップとドロップの触覚フィードバックを提供します。