web-dev-qa-db-ja.com

アイコンのみvsアイコン付きリスト

アイコンのみ、またはテキスト+アイコンのリストを使用するというUXの視点は何ですか。

アイコンのみ

enter image description here

アイコン付きリスト

enter image description here

メニューを開くために矢印をクリックする必要がないので、唯一のアイコンオプションは、アクションにアクセスするためのより速い方法を提供します。

一方、すべてのテキストを確認できるので、リストを見ると、さまざまなアクションをより明確に把握できると思います。アイコンのみのビューでは、ホバーされたアイコンのテキストのみが表示されます。

4
Steve

ラベル付きのオプションを使用することをお勧めします。アイコンだけでは、ほとんどの状況でアイコンが何をするのかがはっきりしないからです。

http://uxmyths.com/post/715009009/myth-icons-enhance-usability

あなたの例では、4つの異なることを行う2つのアイコンもあります。他のアイコンを使用してコメントを表示し、トラックを割り当てると、より明確になります。

私は間違っているかもしれませんが、Twitterブートストラップを使用しているようです。そのため、コメントに「glyphicon glyphicon-comment」アイコンをすでに使用している可能性があります。

Font-awesomeにもトラックのアイコンがあります。このWebフォントは、Twitterブートストラップと互換性があります。 2つ以上のリンクを投稿することはできないため、これをグーグルする必要があります。

ユーザーとしては、クリックする場所が明確であれば、もう1回クリックしても問題はありません。

http://uxmyths.com/post/654026581/myth-all-pages-should-be-accessible-in-3-clicks

アクションリストの矢印を使用すると、同じ問題が発生します。ボタンの後ろに何が隠れているかが明確になるように、「アクション」というテキストのラベルを追加する必要があるかもしれません。

9
Fred

アイコンについて覚えておくべき最も重要なことは、アイコンは説明が必要ない場合にのみ機能するということです

最初の例では、アイコンの背後にある意味はすぐにはわかりません。ユーザーがアイコンの意味を理解することはほとんどありません(特に、同じアイコンが異なるアクションに使用されるため)。 2番目の例では、アクションが何であるかがすぐにわかります。

また、誤って間違ったアイコンをクリックすることの煩わしさ(ユーザーがその意味を知らなかったため)は、ドロップダウンをクリックしなければならないよりもずっと面倒です。

お役に立てれば!

5
Thomas Adcock

アイコンが利用可能なスペースに収まる場合、アイコンを使用し、利用可能なスペースに収まらないアクションがさらにある場合にのみリストを使用する場合、アイコンはユーザーが意図していることを理解するのに十分な親しみがある必要があります。ユーザーが自分のアイコンが何であるかを知るためのラベルが必要な場合は、別の問題があります。

0
ThaSaleni

誰がどのように使用するかによって異なります

複製されたアイコンは、意図されたデザインではなく、これが簡単なノックアップであると想定します。本当に同じアイコンを複製するつもりであるか、2つの非常に類似したアイコンがある場合は、ドロップダウンを使用します。

アイコンを使用した最初のデザインは、ドロップダウンリストを使用した2番目のデザインよりもナビゲートが高速です(1回のクリックではなく2回クリックする必要があるため)。したがって、これが、UIに慣れるユーザーのグループに一般的に使用されるタスクであるか、または一般的ではないか、慣れていないユーザーによって実行されるタスクであるかどうかを判断または理解するのは、あなた次第です。

また、アイコンを選択すると、吹き出しテキストが表示されるので、慣れていないユーザーでもクリックせずに操作を確認できます。

0
Jack Aidley

通常、これらのコマンドを使用する頻度によって異なります。それらをあまり使用しない場合は、最初にトリガーする必要があるメニューにそれらを配置することは理にかなっています。彼らはビューを乱雑にすることはありません、そしてあなたがそれらを必要とするならば、あなたは彼らが何をするかを明確に読むことができます。

頻繁に使用する場合は、すぐに利用できるようにするのが理にかなっています。人々は、それらを頻繁に使用する場合、彼らが何を意味するかもすぐに学びます。これがHTMLベースの場合は、title属性も使用して、ツールチップを簡単な説明とともに表示します。ホバーでのみ機能しますが、何もしないよりはましです(スクリーンリーダーもそれを利用する可能性があります)。

0
DanMan