モバイルデザインの複数選択階層
ユーザーが階層の複数のレベルを選択し、いくつかのフィルタリングを実行するネイティブアプリケーションに取り組んでいます。
したがって、たとえば、ホームケア>フロアケア>香水>などのように、製品の複数のレベルのカテゴリがあります。製品を検索したい場合、基準の1つがカテゴリであるフィルタリングを使用できます。したがって、要件は、ユーザーがカテゴリ全体で複数のエントリを選択し、アクションを実行できることです。
モバイルデバイスでこの画面をレイアウトする方法を理解できるベストプラクティスガイドが見つかりません。私たちが直面している問題は
- レベルは固定されていません。それは3または10です。モバイルで通常のツリーを表示する場合、3〜4レベルの後、すべてのレベルが右側にインデントを多く取るため、ツリーを適切に表示できません。
- 複数選択オプションがあるため、一度に1レベルのカテゴリを表示することはできません。以前は、カスケードスタイルのツリーを使用する単一選択を使用していました。
直感的なデザインと経験で誰かがそのような問題を解決したかどうか私に知らせてください。
まず、モバイルデバイスではタッチターゲットを大きくする必要があるため、ツリーはモバイルで使用するのに最適なツールではありません。そのため、ツリーを深くネストすると、表示されるコンテンツに比べてナビゲーションスペースが大きくなりすぎます。
ナビゲーションをより段階的なプロセスに分割できるアプローチを選択します。多数の単純なステップは、少数のより複雑な決定よりも管理が容易です。 （ ヒックスの法則 を参照）
-種類のスティッキーフィルターでフィルタリングするために選択されたカテゴリである選択のリストを作成することを検討してください。
例：製品階層の特定の部分で、選択したカテゴリフィルタのリストにサブカテゴリを1つずつ追加できるようにします。また、この選択したリストのアイテムの削除を許可して、カテゴリフィルターリストもインタラクティブなオブジェクトにするようにします。このようにして、ネストされたツリーで複数の選択を強制するというより複雑で面倒なプロセスではなく、ユーザーにステップを案内します。
以下は、そのようなメカニズムを示す優れたモバイルWebサイトm.rei.comであると私が考えるものの例です。
このサンプルWebサイトでは、この親カテゴリから移動すると選択が削除されることに注意してください。カテゴリの選択を保持したいようです。選択をより粘り強くする場合は、この例からのインスピレーションを使用して動作メカニズムを抽出できますか？
また、スナップショットを簡単に取得できるように、デスクトップブラウザでm.rei.comを開きました。モバイルデバイスで開いたときの外観は少し異なり、あまり使用されないカテゴリフィルターの選択が[詳細]ボタンに折りたたまれているため、ナビゲーションとフィルターのオプションは、表示されるコンテンツを犠牲にして画面の領域を占有しません。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
@Roger Attrillが例を挙げたことに基づいています。これが私が思いついたものであり、おそらくこれが実装するものです。