web-dev-qa-db-ja.com

昇順-降順のアイコン

ユーザーがチャート/ビジュアライゼーションのメンバー(「バー」)をソートできるようにする昇順/降順のソート順を表す2つのアイコンを考え出そうとしています。

コントロールは、ユーザーがいずれかのオプションを選択できるようにするトグルです。私はいくつかのバリエーションを含めましたが、あなたが最も直感的で明確だと思うものは何ですか?

Sort icon options

1つのメモ、これが関連するかどうかは定かではありませんが、アイコンのユーザビリティに影響を与える可能性があります。多くの場合、データには、グラフが表示できるよりも多くのメンバーがあります。たとえば、棒グラフは、データに200の都市がある場合、20のバーにしか適合しません。 。この場合、20の最大/最小バーが表示され(ソート順に基づいて)、残りは平均化されて「その他」のバーにグループ化されます。

2
M.A.X

常に一番下の最後のアイテムとして配置し、明確にラベルを付ければ、「その他」バーがユーザーエクスペリエンスに悪影響を与えることはないと思います。 (ラベルに括弧またはイタリックフォントを使用すると、ラベルを目立たせることができ、ほとんどのユーザーは通常のラベルと混同しません。)

アイコンの場合:色はどういう意味ですか、なぜ緑と灰色が違うのですか?それが現在の順序を示している場合、選択されたものがより明るくなり、おそらくわずかな輝きを持つ可能性があると思います(そして、これは現在の状態を示す良い方法だと思います)。

並べ替えられていないデータについては、ニュートラルにします(両方のオプションが同じです)。緑と背景の間の現在のコントラストは少し低すぎ、目には少し難しいです。

(他のアプリケーションを比較するには:メール、Windowsエクスプローラーなどは、並べ替えられた列を示すために単一の三角形を使用し、ヘッダーをクリックすると並べ替えられることをユーザーが知っていると想定します。一部のWebアプリケーションは、ホバーに上下矢印を使用します(該当する場合-モバイル)可能性を示すために使用されます。Wordはazと下向き矢印を使用します。視覚化ツールは、ほとんど同じアイコンを使用しますが、2つの別々のボタンに分割されます。新しいアプリケーションでは、最初のオプションはおそらく発見不可能です。)

2
Inca

矢印の意味がはっきりしないので、矢印を避けようと思います。代わりに、バーの幅の増加/減少のみを使用します:オプションaまたはb矢印なし。

5
Mike L.

あなたが提供した例では、「B」はバーの上下の違いを示しているので最も直観的ですが、それは私を考えすぎさせます。アイコンを(ヘッダーなどで)配置する場所に応じて、バーを取り除き、アイコンを上下に配置できます。または、上向きまたは下向きの単純な三角形。

他の懸念事項については、「その他」バーに他の都市があり、上位の都市のみを表示していることを自明にしてください。ユーザーが何をしようとしているのかをユーザーが理解しているかどうかをテストし、そこから行きます。

3
mustefa

私は AristsValley.com からのこの例が好きですが、アイコン自体は大きすぎて、おそらくユースケースに必要な詳細が多すぎます。

enter image description here

重要な機能は、行の幅(実際のchardが表示されるときに表示されます)と矢印の幅です。矢印の幅は、ボタンをクリックするとグラフに表示される「トップヘビー」の外観も反映します。あなたの例が示すように、通常の、上/下以外の太い矢印はあいまいです。

高忠実度MSペイントモックアップ:

enter image description here

1
Ben Brocka