web-dev-qa-db-ja.com

複数レベルの複数選択場所のドロップダウンを表す最良の方法

私はこの大きなUXの問題を抱えています。階層を持つ場所のセットがあります

Country>
  State> (Optional, to be placed if it makes the UX better)
    City>
       Neighbourhood>

これを設計するための最良の方法がわからない、私が持っているいくつかのオプションは次のとおりです。

  1. 1つの場所をクリックすると、同じドロップダウン内でクリックした場所の下にネストされているすべての場所が開き、小さなパディングが導入されたマルチレベルのドロップダウンがあります。 (4レベルのネストがこれほど素晴らしいアイデアになるとは思いません)
  2. 特定の場所にカーソルを合わせると、ネストされた場所のすぐ隣にドロップダウンが開きます。 (開いているドロップダウンの4つのレベルがこのような素晴らしいUXになるかどうかはわかりません。)
  3. ユーザーが入力した内容に基づいて、関連する場所をドロップダウンに表示する機能を備えた空白の入力フィールドがあります。 (すべての場所を視聴者の目から隠すという考えがUXフレンドリーかどうかはわかりません。)

AJAXを呼び出す必要がありますか、それともDOMにロードする必要がありますか?AJAXがほぼ瞬時に応答することを確認できます。

上記の質問は主にWebベースのアプリケーションのコンテキストで行われることを明確にしましょう。

2
void

解散する

時には、1つのコントロールですべてを実行しようとするのは、やりすぎです。オンラインショッピングで車を選択する方法を考えてください。次の選択肢を除外する最高レベル(年またはメーカー)で選択します。

あなたの場合、
州を選択する国を選択してください
都道府県選択をフィルタリングする州を選択...

選択肢の細かさによっては、都市と周辺地域を組み合わせることができる場合がありますが、入れ子にはしません。 City, Neighborhood簡単に選択できます。

メニューで検索して選択できるようにすると、長いリストで大きな助けになります。

Standard combo box

1
plainclothes

国を選択すると、Zipに入ることができるようになります。バックエンドは、都市/州などの情報を入力する際に​​、利用可能な近隣オプションを絞り込むのに優れています。

Zipは、数字のみのキーボードで入力するのがはるかに簡単になり(qwertyよりも大きくて少ないボタン)、検索をかなり絞り込みます。

1
Theodore Riley

人物が何を選択しているかはわかりませんが、選択にマップを使用するのはどうですか?必要に応じて、近くにあるものに焦点を合わせたり、最初に都市を選択してズームインできるようにしたりできます。

Googleマップはこれを オフラインターンバイターンナビゲーション に対して実行します。

enter image description here

0
Chris Butler