タッチフレンドリーなネストされたチェックボックス/ドリルダウン
1つまたは複数の領域を選択するウィジェットを設計しています。リージョンは、次のように国や「メイン」リージョン内にネストできます。
France
- Central France
- Paris
- Bourgogne
- Southern France
- Dordogne
- Aquitaine
The Netherlands
- Zeeland
...など.
国または上位レベルのリージョンを選択すると、すべての下位リージョンがチェックされます。一方、上位リージョンは、（すべての）下位リージョンがチェックされるときに（準）チェックされます。このような動作は、これまでに確認したチェックボックスツリーではかなり標準的なようです。
これらのオプションの提示方法には、いくつかの問題があります。国内には多くのサブリージョンが含まれているため、デフォルトでこれらのリストを省略しました。ただし、国名をクリックすることはあいまいになりました。地域を選択するか、リストを開くか？
これまでのところ、私はこれらのバリエーションで遊んだ：
- 名前またはチェックボックスをクリックして選択をトリガーしながら、折りたたまれたリストを開くドロップダウン矢印。
- 大きなチェックボックス。名前をクリックすると、基になるリストが開いたり折りたたまれたりします。
- オプションがホバーされたときにリストを開く-タッチスクリーンでは機能しません。
後者のデザインはモバイルユーザーにうまく適合しないため、「飛び出す」の代わりに「ドロップダウン」するリストとして提示しています。
これらのオプションはどちらも、A）選択を行うことができる、またはB）より細かいレベルの制御が利用できることを十分に明らかにしていませんでした。
要約する：
複数の選択を可能にする複数のレベルを持つタッチフレンドリーな領域セレクターを設計するにはどうすればよいですか？
ツリーの各行に2つのシンボルを配置するとどうでしょう。 1つは選択用で、もう1つは展開して子供を表示します。行を表示または非表示にするために、おそらく各画像/ボタンにJavascriptメソッドを含むテーブルとしてそれを手動でレンダリングする必要がありますが、基本的な機能を確認したら、バックエンドから動的にレンダリングするのはかなり簡単です。
国名の隣にある+をクリックして開くとどうなりますか？これはかなり標準的なパラダイムです。
別のオプションは、国をクリックすることです両方国の結果を表示し、その国の地域を開きます。これは、ナビゲーションが通常コンテンツの横に表示されるデスクトップサイトで最も明確なオプションです。ただし、モバイルには対応していません。