web-dev-qa-db-ja.com

見出しと送信ボタンでランク付け可能なリストを表示するのに最適な方法は?

ユーザーを順番にランク付けすることで、ユーザーが選択肢のリストに投票できるアプリを設計しています。投票画面には以下が必要です。

  • 投票のタイトル
  • 選択肢のリスト
  • ユーザーのランキングを送信するボタン。

Chrome Androidスマートフォンの場合)に表示されるように、私が今持っているものは:

よくわからないこと:

  • 上部が最も好ましく、下部が最も好ましくないことを示します。現在使用しているテキストが十分に明確かどうかはわかりません。それを伝えるもっと簡潔な方法があるなら、私は間違いなくそれを使いたいです。
  • 送信ボタンの場所。画面のランキング部分に混入しないようにしたい。現在、3em「最も推奨されないオプション」の分離テキストとボタン。
  • 左側のドラッグハンドルで十分だと思いますが、ドラッグアンドドロップで選択肢を並べ替えることができることを伝えます。

これらの懸念事項(または設計の他の部分)に関するフィードバックは大歓迎です。

4
DylanSp

テーブルヘッダーのラベルを使用してランキングを示し、アイテムを移動できることを明確にします。

概念としてのランキング

ユーザーでテストしますが、ランキング(または同等のWord)は投票においてかなり一般的な概念です(たとえば、ランク付けされた選択投票)。ランキングは、ほとんどの場合、最初が最もよいことを意味するため、追加のラベルは必要ありません。

ユーザーがアイテムを所定の位置にドラッグしたときに更新されるラベルがある場合は、操作とその結果を強化することもできます。

注文の選択肢で目立つ署名者

これは始まりですが、ドラッグハンドルを強調して、ユーザーが操作する要素を、ランク付けするアイテムから分離しました。

この場合、青色の背景を使用しましたが、同様のものを視覚的に示す他の方法があると確信しています。

enter image description here

7
Mike M

ランク記号を使用してみてください。王冠または何かを使用して、最初の選択肢がお気に入りであることを示すか、それらを数え、ドラッグするときに番号順を更新します。

4
Zasul

問題のリストに回答するには:

  • 上部が最も優先され、下部が最も優先されないようにするには、説明「↑」にアイコンを追加するか、ドラッグアイコンを右に移動できます( マテリアルデザイン-リスト/動作)を参照 )、左側にラベルを追加します(1番目/ 2番目...)

  • アプリの他の部分と同じマージンをボタンに使用します

  • アイコンで十分です。指定されたマウスカーソルが使用されることを確認してください。

enter image description here

3
Madalina Taina