ユーザーがレスポンシブWebアプリで非常に長いリストからアイテムを選択できるようにする最良の方法は何ですか？
シナリオ
ユーザーが事前定義された項目をリストAからカスタムリストBに追加するWebアプリを設計しています。
リストAは100を超える項目がアルファベット順にソートされています。
リストBは、ユーザーのニーズに応じてカスタマイズできます。
Webアプリ用のドラッグアンドドロップソリューションを設計しました。ユーザーは文字をクリックすることにより、アルファベット順にリストAの項目にジャンプできます。
問題
このドラッグアンドドロップ機能はタブレットではうまく機能せず、スマートフォンでは不可能です。そこで、モバイルデバイス用の選択フォームを設計しました。ユーザーがリストBのリストアイテムをタップすると、リストAアイテムが入力されたピッカー/フリッパーがトリガーされます。
質問
Webアプリのモバイルインターフェイスにアルファベット順のフィルタリングを実装する方法はありますか？
この機能のモバイルインターフェイスは、次の要件をどのように解決できますか？
- ユーザーフィルターリストAを許可する
- リストAからリストBにアイテムを追加する
非常に長いリストの場合、モバイルには別のUXを使用することをお勧めします
複数選択は複雑な操作であるため、Webとモバイルの両方で同じインターフェイスを使用することは困難です。 2つの異なるレイアウトの概要を説明したので、すでにこれを認識しています。
次の理由により、モバイルデザインに問題があります。
- ユーザーが1回タップして項目を追加し、非常に長いドロップダウンボックスから項目を選択する必要があります。
配置とスクロールが非常に厄介であるため、モバイルアプリでドロップダウンを使用することは困難です。 - アイテムを追加するには、タップして新しい行を作成し、タップしてドロップダウンし、スクロールしてアイテムを見つけ、タップして選択します。これは、アイテムを追加するだけのUXの摩擦になるため、リストの作成は非常に手間がかかります。
- ユーザーが1回タップして項目を追加し、非常に長いドロップダウンボックスから項目を選択する必要があります。
以下は、さまざまなレベルの特異性、組織、およびユーザー知識により、複数選択の摩擦を減らすいくつかの代替策です。
（画像をクリックして拡大）
ご覧のとおり、ウィジェットのデザインは、アイテムの形状と構成、およびユーザーがアイテムに慣れているかどうかによって異なります。
まず第一に-ABCDではなく...検索でオートコンプリート（キリル文字、ギリシャ語、またはその他のアルファベットを検討）。
ドラッグアンドドロップは美しい機能ですが、約をドラッグすることを検討してください。 50要素。私は非常に時間がかかります。左側の項目をクリックしてグループに割り当てると、はるかに簡単になります。
モバイルの場合、私の提案は、利用可能な<->シングルタップまたは暗い灰色のバーを上下にドラッグして割り当てを切り替えることです。
確かに、割り当てられた要素のリストが長くなる場合は、オートコンプリートを追加するのもよいでしょう。オートコンプリートとは、使用可能な要素のリストを、入力された文字列を含む要素のみに制限することを意味します。
私はドロップダウンを使用してソリューションをテストしました-新しいドロップダウンはすべて、既に割り当てられている要素を除外する必要があるため、実装するのは困難です。それでも-ドロップダウンで100行以上をナビゲートするのは困難です。
モバイルの場合は、デフォルトのWebスクロール要素をオーバーライドして、ネイティブのような動作でスクロールを実装し、その上にタグリストを表示します。リストAからリストBに何かを追加するには、リストAの行をクリックします。リストBから削除するには、リストBのタグをクリックするか、リストAの行をもう一度クリックします。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
カメラロールのiOSの「選択」機能に似たものを使用することをお勧めします。
ユーザーはボタンをタップして「選択」状態をアクティブにします。ユーザーは、リストAに移動するすべてのアイテムを選択します。リストBに移動するには、ボタンをタップします。
また、これを検索ボックスと組み合わせて、ユーザーが必要な名前を簡単に除外できるようにします。これは、特定の検索と非特定の検出という2つの使用例をサポートしています。