web-dev-qa-db-ja.com

タイトルがボタンであることをユーザーが理解できるか

特定のWebサイトにフィルターと並べ替え機能があり、現在のレイアウトは次のとおりです。

Current style

もちろん、できるだけ要素をfewに減らしたいので、このようなレイアウトで「フィルター」と「ソート」を置き換える必要がありますタイトルに「フィルター」と「ソート」のボタンを使用して、スタイルを設定しますように​​ボタン?私の懸念は、ユーザーがクリック可能であることを知らないことです。このアプリケーションのユーザーは、高度に技術的で非常に精通したユーザーから、非常に技術の低いユーザーまで、多岐にわたります。

このページは、提供されたさまざまなフィールドで数百のアイテム(現在は497)をフィルタリングおよびソートし、値を入力/変更すると、変更liveを表示します。ボタンをクリックする必要があるほとんど必要ありません

私が検討している代替レイアウトは次のとおりです。

Proposed layout

「ライブ」の変更が機能せず、ユーザーが「フィルター」または「ソート」アクションをクリックすることを余儀なくされているとすると、これはそれらを混乱させるでしょうか?現在のレイアウトを使用した方がよいでしょうか。

フィルターと並べ替えバーが利用可能なスペースを埋めるために単純に縮小するため、小さなブラウザーで混乱を減らすという考え方です。ボタン/セクションが少ないほど、利用可能なパーツの視認性が高くなります。

1
Der Kommissar

[Filter by]要素と[Sort by]要素が記述されていない場合、クリック可能であることは理解できません。それは良いアプローチではありません。

しかし、最後でも、彼らは私を少し混乱させます。私が行うことは、上のパターンを使用することですが、少し変更して、ボタンをフィールドの行から分離します。

enter image description here

8
Dominik Oslizlo

2つのオプションのうち、最初のオプションは論理的に意味があります。左から右への明確なフローを形成します(入力->入力->アクション)。

2番目のオプションでは、ユーザーは右に移動し、次に左に戻ってボタンをクリックしてアクションを実行する必要があります。 (入力->入力<-アクション)。これにより必要な要素が少なくなると正しいことは正しいですが、これはより高い相互作用コストになります-ユーザーはより多くのマウスの動きを行い、ステップをたどる必要があります。

両方のオプションの問題は、実際にはそうではないのに、ラベル(「フィルター」など)がインタラクティブに見える(2次アクションのように見える)ことです。これらのフィールドは単純なテキストのみのラベルに固執するので、不要なクリックを防ぐことができます。

最後に、並べ替えオプションを1つのドロップダウン要素に凝縮して、必要な順列をすべて含めることができます。これはスペースを節約するのに役立ちます。例えば:

並べ替え...-名前(A-Z)-名前(Z-A)-その他のフィールド1(低-高)-その他のフィールド1(高-低)

1
Paj