web-dev-qa-db-ja.com

ドラッグアンドドロップの視覚的な手掛かりとは何ですか? (アイテムのリストを並べ替えるため)

ドラッグアンドドロップでリストアイテムを並べ替えることができることをユーザーに示すための最良の視覚的な手掛かりは何かについて誰かが意見を持っているのでしょうか。

ここで私がいじっていたいくつかのオプションがあります: drag-and-drop visual cues, some options

多くのiOSモバイルユーザーがオプションBにさらされていたと思います。iPhoneやiPadの急速に拡大しているユーザーベースを考慮すると、このオプションを使いたくなります。ただし、オプションAとFはもう少し明確です。オプションEは、「つかむ」視覚的な手がかりを取り除きますが、上下の動きに重点を置いているため、興味深いものです。もちろん、これらのオプションはいずれもアイテムの左側または右側に配置でき、アイコンには「ドラッグして並べ替える」などのツールチップがあります。

皆さんはどう思いますか?ドラッグアンドドロップの手がかりに関する実際のユーザビリティテストデータがあるかどうかを知りたいと思います。

34
M.A.X

個人的に私はiOSでオプションBを使用し、Androidが何を表示するかを調べます。

デスクトップでは、ある種の「バンプ」を使用しますが、重要です。この回答で理由を確認できます: https://ux.stackexchange.com/a/25032/16685

7
Aadaam

今日この投稿に出くわし、過去数年間のいくつかの進展(2012年以降)に基づいて応答を提供したいと考えていました。

Googleは、ホバー(デスクトップ)に2行の積み重ねられたドットを使用して、Gmailユーザーにソート可能な要素を通知する優れたソリューションを提供しています

Gmail's sort iconic cue

11
JWMC

私はオプションEで行きます-ほとんどの人は左から右に読みます。彼らは物事を左から見て、ゆっくりと右に移動します。8ビットの全盛期にゲームをプレイした場合、ほとんどのゲームは左から右に向かって移動します。

そのため、アイコンが左側にある場合は、アイテムをドラッグできることに気づきやすいでしょう。ただし、アイコンをより強調するため、濃い灰色の色調をお勧めします。ワイドスクリーン上では、それが上下を指す矢印であることは私にとってもわかりにくいです。それは、(だらしない)タッチスクリーンを備えたスマートフォンを使用している人にとっては、1またはIのように見えます。

これを見てみることをお勧めします: http://jqueryui.com/demos/sortable/

この例は本当に明確で直感的です。

5
AturSams

おそらく、アフォーダンスを示すためのアイコンは必要ありません。リストの形や色などを変えてみてください。指で触れたときに視覚的な反応を見せます。 Trello を使用したアプリの例を参照してください。

2
gracekan

オプション「D」は、他のすべてのオプションとは異なり、必ずしも方向を強制することなく意味を提供します。

たとえば、多くのモバイルUIでは、ユーザーがデバイスを回転させることができます。したがって、2つの向き、横向きと縦向きがあります。アイテムが縦向きにドラッグできる場合、上下に移動します。風景では、それは左と右かもしれません(私は実際にこれに対処しなければなりませんでした)。デザイナーがすべての方向に4つの矢印を使用する例をいくつか見ましたが、一度に2つの方向しかないため、実際には機能しません。

「グリップ可能」を意味し、あらゆる方向を伝えることができるシンボルは、最も用途の広いオプションのようです。これを行うのはオプション「B」と「D」だけです。オプション「B」は、Googleによって「設定」を意味するように世界中で非難されています。好むと好まざるとにかかわらず、(引越し可能なアイテムのために)引退に向かっていると思います。

2
Alan Luckow

最も重要な基準はアフォーダンスです。ユーザーはどれをすぐに認識しますか?そのことを念頭に置いて、私はオプションBを使用します。

オプションEはアフォーダンスが最小であることがわかりますが、オプションAとCは、初めてのユーザーにとっては不必要であり、ユーザーがオプションBが提供する視覚的な手がかりを見つけたら間違いなく不必要な矢印を使用して混乱を追加します。

オプションDの背後にあるポイントがわかりません。ドット(対線)は、垂直方向だけでなく水平方向にも再配置できることを意味しますか?それとも単なるスタイルですか? Dは避けます。

1
Hisham

ここに記載されている「グリッピードット」(オプションD)にも同意します。

何かをドラッグして並べ替えできることを示すのに最適なアイコンは何ですか?

ハンバーガーは簡単に誤解される可能性があり、他のオプションはそうであるほど明確ではないと考えてください。

1
endymion1818