web-dev-qa-db-ja.com

リストフィルターコントロールを配置する場所

ユーザー(CMSバックエンドのWYSIWYGエディターから)が[リンクの挿入]ダイアログを開いたとします。可能なリンク先ページのリストがある場合、

  • Iが経験の浅いユーザーと経験豊富なユーザーの両方に対応する必要がある場合、フィルターコントロールを配置する適切な場所はどこですか

コントロールが(1)のようにリストの上にあるとします。 enter image description here

経験豊富なユーザーは、フィルタリングツールにすばやくアクセスできるため、これは利点になるかもしれません。ただし、より多くの初心者ユーザーにとって、(暗黙のフローのために)オプションの支援ツール(設計の観点から意図されている)ではなく、フィルタリングツールが必要であるように見える場合があります。

別のアプローチは、-(2)のように、リストの横にフィルタリングツールを配置することです。enter image description here

このようにして、フィルタリングツールの使用感が少なくなります。

3番目のアプローチは、最初に(3A&3B)のように、フィルタリングコントロールを非表示にすることです。enter image description hereenter image description here

ここでの利点は、最初の遭遇時にUI要素の数が減ることです。欠点は、フィルターオプションを開くための余分なクリックです。ただし、フィルターコントロールの非表示/表示状態を保存するためにCookieが使用される場合があります。

おそらく、よりツールバーのようなフィルターオプションのスタイル設定が適していますが、これもまた、UI要素の1つです。

これについて何か考えはありますか?

8
agib

私見、フィルターボタンの表示を切り替えないでください。シンプルにして、UIがサポートする操作をユーザーに示します。

トップ/右ポジションの選択に関しては、テスト中におそらく答えは明白になります。すでにいくつかのモックアップがあるので、数人に「いくつかのタスクを完了する」ように依頼するのは大した仕事ではありません。

ボタンが上にあるか右にあるかは問題ではないと思いますが、位置は上部で「より固定」されます。ボタンを右側に配置すると、リストとボタンの間に少し距離ができますできます。例えば。ユーザーが画面またはリストの幅をサイズ変更した場合。

上部のボタンはグリッドに関連していると考えますが、右側のボタンはより一般的なボタンです( action panel など)。

更新

ウィンドウのサイズを変更するときのボタンの配置:
enter image description here
enter image description here

視覚的なワークフロー:
enter image description here
enter image description here

1

最初にモバイルに焦点を当てるというルークブロブレスキーのアイデアに触発されて自分の質問に答えるために(例 http://www.lukew.com /ff/entry.asp?9 )と情報階層を平坦化するAppleの熱意、UIは次のようになります。

enter image description here

ここで、検索フィールドは、ページ名、祖先名(ページ名の下に灰色で書かれている)、およびページIDの両方に応答します。

残念ながら、このようなUIは私たちの再設計プロジェクトの範囲を超えています。

2
agib

私は3a/3bが好きです。ほとんどのユーザーはフィルターを必要とせず、ユーザーはそれを使用せずに簡単にページを選択できます(ユーザーが気付かない場合や、その意味がわからない場合)。

これは、リンクを挿入するためだけのかなり複雑なUIのようです。ユーザーはハイパーリンクテキストをどのように操作しますか?お持ちの内部サイトブラウザは、Webに精通していないユーザーには役立つかもしれませんが、そうしたユーザーにとっては面倒かもしれません。ターゲットオーディエンスは誰ですか?これは汎用CMSですか、それとも特定の業界向けですか?

[URL]と[リンクテキスト]の2つのフィールドを持つ、より伝統的なダイアログを検討してください。

1
Baa

「フィルター」は、初めてのユーザーにとって、階層的なフォルダーリストよりも強力で直感的であると言えます。

強力な検索としてフィルターを使用する場合、および階層フォルダーリストをオプションにする場合

search or filter as main

検索結果は右側に表示され、検索/フィルターが変更されると変更されます。 「すべてのページを表示」を選択すると、右側にも階層フォルダリストが表示されます(以降も同じ方法でフィルタできます)。

(私はかなり多くのページがあると仮定しています。それ以外の場合は、フォルダリストを表示するだけの方が速く、フィルタはまったく必要ありません。)

たぶん、これはアプリケーションについて変更できる以上のものです。その場合は、フィルターをフォルダーリストよりも明確にし、(視覚的および/または言い回しで)注目を集めさせます。

将来的には、internalおよびexternalタブを1つの入力/検索にマージすることを考えることもできます。ほとんどのユーザーは2つの違いを知らないため、これは非常に役立ちます。入力したものが外部URL(http、wwwなどで始まる)である場合や、テキストが内部ページとして検出された場合、インターフェースの反応は異なります。

更新

モックアップを少し変更しました。最初の検索フィールドをさらに強調し、ドロップダウンを検索フィールドに変更します。必要に応じて 前のモックアップ を表示することもできます。

あなたが最初に与えたモックアップの中で、私は特に3A/Bモックアップを好みません。クリックが1つ追加され、初めてのユーザーの質問と注意散漫が増えるだけです。表示するフィルターを少なくしたい場合は、フェード/グレー表示のフィールド、アイコン、ボタンを使用するのが最適だと思います。

1
Lode

経験の浅いユーザーと経験豊富なユーザーの両方に対応したいと考える場合、私の最初の推測はオプション3に行くことです:これらのフィルターコントロールを非表示にします。おそらく、可視性の状態を永続化することもできます-ユーザーがコントロールを展開した状態でページを離れた場合でも、次回のアクセス時に展開されます。

適切なフォーカス動作を組み込んでいる場合、1回のクリックまたはキーを押すだけでフィルターコントロールが開き、使用されている可能性が最も高いフィールドにキーボードフォーカスが即座に与えられるため、ユーザーは入力を始めることができます。

0
Jan