web-dev-qa-db-ja.com

より深い項目にリンクしているメニュー項目を「選択」する方法は?

現在、画面の不動産をあまり取り扱わないナビゲーションに取り組んでいます。スタックされたメニューを備えた疑似キャンバス外ナビゲーションを思いつきました。

ユーザーはノードを製品に割り当てることができます。これは、ワイヤーフレームの現在の状態です。ユーザーはノードの追加を選択しました。次に、特定のノードを手動で検索したいと思います1(1. ノードの参照ワイヤーフレームで)。ユーザーはノードを選択して製品に追加することができます2またはナビゲーション。および4。に1レベル深く入ります。ノードリンクをクリックすると、そのノードの子がスライドインし、現在のメニューの上にスタックされます。親への戻るオプションもあります(2番目のワイヤーフレーム)。

チェックボックス、リンク、ボタンを要素として意図的に選択しました。それが目的だからです。デザインソリューションではなく、機能をそこにワイヤーフレーム化しました。通常、テキスト/ラベルを選択することもチェックボックスをオンにするのが好きですが、ラベルもリンクになりました。ユーザーは、a)そのノードを選択して製品に追加するか、b)ノードを選択してそのノードの子に移動できます。

enter image description here

enter image description here

ノードが機能することが葉と枝であることが理にかなっていると私は主張することができます。顧客がノードを割り当てる方法に関する実際のデータはありません。この入力を待つことができません。現在、システムの機能は、ノードがリーフとブランチになることです。したがって、実際のユーザーに質問することはできません。たぶん将来(今から数ヶ月)。

これを直感的なナビゲーションに変換する方法は?

2
myradon

ここにいくつかの提案があります:

最初のメニューレイヤーのタイトル/見出しである「ノードの検索」は混乱しています。ユーザーがメニューをスライドアウトするためにクリックしたリンク、つまり「ノードの追加」をエコーするだけの方がよい場合があります。

チェックボックスを使いすぎているようです。この最初の例は、「以前にブックマークしたノードを選択する」の横にあります。オプションが1つしかない場合、チェックボックスは必要ありません。それでも、ここでの操作は複雑になります。チェックボックスを選択するには1回のクリックが必要で、選択を確認するには別のクリックが必要ですが、ボタンや単純なリンクなどのより適切な要素には1つだけ必要です。

重要な質問については、繰り返しますが、チェックボックスとボタンの繰り返しを選択すると、複雑な操作が発生し、UIが乱雑になります。

検討のための代替ソリューションを次に示します。

Disclosure triangle menu option

(1)アコーディオンスタイルのメニュー。詳細なオプションを表示するための三角形の三角形が表示されます。

(2)相互作用する可能性のある要素にカーソルを合わせると、テキストリンクとアクションが表示されます。この場合、ブランチノードが既に追加されているため(緑色とチェックマーク)、[削除]オプションが選択されています。

(3)このノードはすでに追加されています。

(4)このリーフノードにカーソルを合わせると、[追加]オプションが表示されます。

もちろん、これには多くのスタイルのバリエーションがありますが、複数のスライドアウトメニュートレイは必要ありません。リーフノードとブランチノードの両方を追加/削除でき、チェックボックスとボタンを繰り返す必要がありません。

1
dennislees

このようなもの;

enter image description here

ノードの上にカーソルを合わせると、追加ボタンが表示されます。追加ボタンをクリックすると、ノードが「チェック済み」に設定されます。 node-textをクリックするか、矢印をクリックすると、ナビゲーションの1レベル深くスライドします。編集:「ノードの追加」タスクを完了するための「完了ボタン」機能またはメニューの外側(メインセクションなど)をクリックすると、メニューが非表示になります。いい計画?

0
myradon

ノードの選択とその親ノードの選択の間に関係はありますか?

たとえば、Node Aに子ノードB、C、およびDがある場合、B、C、およびDのすべてを選択すると暗黙的にAが選択され、その逆の場合も同様です。リーフノードとブランチノードでは必ずしも異なるクリック動作が必要なわけではありません。「ノードA」を最初にクリックするとノードが展開し、その後のクリックでノード(およびそのすべての子)を選択/選択解除します。B、C、Dがそれぞれ個別にチェックされている場合次に、Aが自動的にチェックされます。リストを折りたたむには、別のボタン/三角形が必要ですが、特にリストが一時的に画面上にある場合は、その機能はそれほど重要ではありません。

古いWindowsインストーラーアプリケーションで時々見られる階層的なチェックボックスリストについてここで考えています。機能のリストが表示され、それぞれの横にチェックボックスが表示されます。機能にサブ機能があり、その一部のみが選択されている場合、そのチェックボックスには特別な中間状態が表示されます。どのインストーラータイプがこれを行うのか覚えていません。それはとにかく見事に実装されていませんが、基本的な考え方はうまく機能すると思います。

0
bobtato