モバイルWebアプリの長い選択リスト
モバイルでの長いリストについては、以前にここで説明しました。しかし、私の問題にはいくつかの違いがあります-私は完全に満足できる解決策をまだ見つけていません。
これはレスポンシブWebアプリケーション用です。基本的に、ユーザーは選択可能なアイテムの長いリストを持っています-100以上になる可能性があります。ユーザーはアイテムをクリックして展開できます。ここに、彼らは彼らが欲しいと言ったアイテムの数を入力します。アイテムをクリックすると、リストが縮小し、選択した値が表示されます。ヘッダーには累計も表示されます。
私が抱えている主な問題は、現在、不動産を大幅に削減しているいくつかの制約があることです。
上部でフィルター/並べ替え。現在の合計と固定アクションボタン/免責事項が下部にある固定ヘッダー。
アクションボタンを押し下げることを検討しましたが、免責事項では10〜15行と表示されていましたが、これにより二重スクロール効果が発生し、十分にテストできませんでした。アクションボタンを一番下まで押し下げ、ユーザーが150のアイテムを持っている場合、クリックするために一番下までスクロールする必要があります。また、ページ付けも検討しましたが、ユーザーが選択したアイテムに複数のページにまたがる問題があるため、理想的ではありませんでした。
同様の問題を解決した経験、またはこれがうまく処理されている良い例の例はありますか？
選択したアイテムの数と総コストをグループ化することで、上部のスペースを減らすことができます。 2つの数値は互いに関連付けられているため（コストは選択した項目から計算されます）、ユーザーが接続を明確にするために、それらを互いに近くに配置する必要があります。
長いアイテムリストとの対話を容易にするために、アコーディオンの原理が役立つ場合があります。私の考えは、あなたが2つの選択されたアイテムの間にあるアイテムを折りたたむことです。このように、リストの上部には選択されたアイテムのみがあります。その後に、まだ選択されておらず、ユーザーが表示する必要があるアイテムが続きます。さらに項目を表示または選択する場合は、2つの選択された項目の間で折りたたまれたセクションを展開できます。
アイテムの元の順序は保持されますが、現在ユーザーにとって興味のないアイテムは非表示になっています（ユーザーがアイテムを上から下にスキャンすると仮定します）。
以下のモックアップは、私のアイデアの大まかなスケッチを示しています（私はフィルターやその他の詳細を省略しています）。左側では、最初の4つの項目が選択され（v）、それらの間の項目が折りたたまれていることがわかります。右側では、アイテム4とアイテム8の間のアイテムが展開されています。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ナビゲーション（アイテムの長いリストでの検索/並べ替え）とユーザー選択の表示が混在しているようです。ユーザーの選択を別の領域（ハンバーガーメニューまたはあるタイプの折りたたみパネルにすばやくアクセスできる場所）に移動することを検討してください。
ユーザー選択を同じスペースに表示する必要をなくすと、改ページ調整が再びオプションになります。