すべて。私はオンラインフォームビルダーを設計しています(Googleドキュメント/スプレッドシートのフォームを考えてください)。機能は完全ですが、並べ替え機能に満足できません。ユーザビリティテストを行ったすべての人(私も含めて5人程度)は、アイテムを並べ替えることができることに気づきませんでした。
これは私に質問を残します:手動でソートされるリストを提示するためのベストプラクティス/最も直感的な方法はありますか?
いくつかの例として:
Googleの方法では、フォーム内のアイテムを並べ替えることができることをほとんど示していません。彼らはcursor: move;
はCSSで移動可能であることを示していますが、それ以上のものはありません。
jQueryUIのSortable
はかなり似ています。インターフェイスはほとんどありません。左側の二重矢印を除いてください。これは私が現在使用しているもので、ユーザーには認識されていません。
例は考えられませんが、[+]ボタンと[-]ボタンを使用した並べ替えを見てきました。これはユーザーが簡単に理解できるように見えましたが、下から上に移動するためにn-1回のクリックが必要になる可能性を意味していました。
アイテムの片側に「グリップ」パターンを表示し、「移動」カーソルと組み合わせて表示することは、ある程度の知識のあるユーザーにはかなり明白です。
上/下矢印もオプションですが、一度に1つの位置しか移動できない場合は、明らかに強力ではありません。
会話リストの左側でGmailが使用する各行の8つのドットが好きで、メッセージを移動できる(ハンドカーソルと組み合わせてもよい)ことを示しています。
リスト要素がドラッグ可能であることを示すために使用される最も一般的なインジケーターは同じものだと思いますApple iOSで使用(電話>お気に入り>編集):
それでも、これは多くのユーザーに理解されていないと思います。だから私はおそらくこのようなものに行くでしょう:
(マウスオーバーでカーソルを移動またはハンドに切り替える)。
Philがお役に立てば幸い
列見出しは、リンクのように見えるようにしたり(下線、色)、ボタンのように見せたり(グラデーションや影を付けて少し目立たせる)クリック可能に見えるようにする必要があります。
カーソルを合わせたときにも、カーソルを確実にポインターに変えます。
現在並べ替えを行っている列は、並べ替えの方向(昇順または降順)を示す矢印と共に、別の色で強調表示されるか、太字になっている必要があります。
Windows XPおよびMac OS Xも同様にこれを行います:
私の人生の中で、その良い例を見つけることはできませんが、ドラッグして並べ替えるのに優れたUIの手がかりがよく訪れるウェブサイトがあることは知っています。それは基本的に2つのことの組み合わせです。 1つ目は、各行のホバー状態です。 Twitterのように、各行は通常明るい色ですが、マウスが直接上にある行は暗くなります。
2つ目はハンドル、つまり「ドラッグ可能」であることを示すインジケーター(左側の場合)です。これは、左側にある半センチ幅のハッチング線です(ここでも、マウスを重ねると暗くなります)。それ)。質問に答えると、UXの編集ボックスに同様にドラッグ可能なハンドルが実際に表示されます。
それはグリップのようなもので、ユーザーが「つかむ」ことができることを示すテクスチャーのあるものです。それは比喩にうまく適合します。上部および/または下部にある上下の矢印も、メタファーを押し進めます。