長いリストを含むフォームにフィールドを表示するためのポップアップ（モーダル）とドロップダウン

Question

私が直面している問題は、顧客が運送業者を選択し、次にドロップダウンからピックアップ場所の場所を選択する必要があることです。ドロップダウンはモバイルユーザーに最適なソリューションですか？ロケーションリストには、約100以上のアイテム（オプション）が含まれています。

私は、ドロップダウンメニューがモバイルユーザーフレンドリーなソリューションではないことを読みました。 これによれば：

長いリスト（フォームに入力するとき）をポップアップ（ modal /ポップアップ）検索フィールドとラジオボタンがあるかどうか？ ドロップダウンと比較する主な短所は何ですか（広告ブロッカーがポップアップを表示しない可能性があるか...）？

誰かがユーザーに、フォームを入力するときにモバイルデバイスでドロップダウンを使用することがいかに難しいかを調査させましたか？代替はありますか？

ユーザーがポップアップボックスから値を選択した場合選択した値が表示される場所（チェックアウトページ）のベストプラクティスは何ですか？

Kristiyan Lukanov · Accepted Answer

モバイルインターフェイスでドロップダウンの使用を避けるに対するLuke Wroblewskiによる一般的な推奨事項があります。これは、それらに高い相互作用コストがあり、使用可能なオプションが非表示になっているためです 。

ドロップダウンに比べて操作コストがはるかに低いため、ラジオボタン/グループに置き換えるのが最適です。1つのタップで特定のオプションを選択できます。ドロップダウンには次のインタラクションコストがあります：

ただし、100個以下のアイテムがある場合、ドロップダウンコンポーネントを使用した検索は、私の意見では良いオプションです。

解決策1：ドロップダウンで検索する

通常のドロップダウンよりも優れている点は、ユーザーがキーワードで結果をフィルタリングし、目的のオプションを選択できることです。このアプローチの欠点は、キーワードを入力するにはモバイルキーボードをロードする必要があることです。これには時間がかかり、かなりの対話コストがかかります。

オプションをグループ化すると、ドロップダウン内の要素の視覚的な検索が向上します。したがって、このアプローチは、通常のドロップダウンを使用するよりも1つのアイデアが優れています。

もちろん、問題に対する最善の解決策は、それらのアプローチをテストすることです。私たちはあなたの特定のケースにとってどちらの方法がより良いかを予測することはできません。それが、行うことが最善のことはテストである理由です。

Macrina Damian · Answer

はい、ルークブロブレスキーは正しいです（plsは http://www.lukew.com/ff/entry.asp?195 を読んでいます）。特に100以上のアイテムリストの場合、モバイルではドロップダウンはありません。これはうんざりするリストなので、必ず検索を添付する必要があります。

ここにはいくつかのオプションがあります（モバイルでのドロップダウンを回避するため）。

したがって、「ピックアップ場所を選択してください」フィールドをクリックすると、フィールド（同じページ/新しいページ/アニメーションなど）にフォーカスし、画面上部の入力で検索できます-予測検索/オートコンプリート-場所と、最初に何を検索するかわからない場合は、下にリストされた近接度でソートされたリストなど。次のようなもの：

たぶん、マップビュー、リストの代替ビューを配置することもできます。