web-dev-qa-db-ja.com

モバイルでの「選択」入力の代替

最近のUXコミュニティでは、フォームが非常に注目されています。自動検出、事前定義されたユーザーデータ、aiに合わせて、データ収集の新しい手法が提案されています。これらはすべて、特にモバイルで非常に役立つオプションです。ただし、(Q1)より長いリストが唯一のオプションである場合、モーダルアプローチが「選択」入力の適切なオプションであるかどうかを知りたいですか? (Q2)他の選択肢は何ですか?

ユーザーが表示できるアイテムの数が非常に制限されるため、iPhoneのデフォルトの選択オプションのファンではありません。アップルから正式に「ピッカー」と呼ばれています。

iPhone picker

私は、モーダルで選択可能なオプションをリストするモーダルに対する親和性を持ち始めています。

彼らが提供する以下の利点について:-

  • これはスケーラブルです
  • 明快さ
  • ページごとに1つのアクションを満たす(モバイル)
  • このオプションとともに予測検索を使用できます
  • 必要に応じて、ラジオの代わりにチェックボックスを使用できます。

イラスト用画像の添付

Selection with modal

1
Arshdeep Singh

Appleのピッカーの制限

  1. 利用可能なオプションは、クリックまたはタップして開くまで表示されません。
  2. リストの長さが非表示になっているため、ユーザーはドロップダウンメニューに2要素または50要素が含まれるかどうかを予測できません。
  3. リストの表示およびスクロール可能な領域が小さいため、オプションをスクロールするのは面倒です
  4. ピッカーの長いオプションは、ユーザーには完全には見えません。

モーダルアプローチは、特に選択入力内に多数のオプションがある場合に、「選択」入力に適したオプションですが、必ず、オプションの数と、入力を完了する前に予期される入力を考慮するようにしてくださいラジオ、チェックボックス、セグメントコントロールなどの他の利用可能なオプションの代わりにドロップリストに.

代替ソリューション

既存のユーザーデータを使用してオプションを優先するようにしてください最初のいくつかだけをリストにしてくださいユーザーに最も人気のある選択肢と「その他」オプション。 「その他」をクリックすると、残りのリストがモーダルまたはピッカーに表示されます。 「その他」は最もエレガントなソリューションではありませんが、優先順位を付けると、大多数のユーザーのユーザーエクスペリエンスが向上します。

enter image description here

参照: より優れた(モバイル)フォームのドロップダウン代替案

1
Akhil Ashok

ここであなた自身の質問に答えたところだと思います:)

私の意見では、モーダルはより大きなデータ/オプションのセットに適しています。モーダルをネストしないように注意してください。これは、モーダルウィンドウのグループを介してユーザーをナビゲートしようとしないことを意味します。モーダルは単一のタスク/アクション画面である必要があります。

0
Phil Mobile