アイコンの上または下にテキストを配置する方が良いですか？
このUX.SEの質問 は、上のテキストと下のテキスト画像とビデオの使用について説明しており、一般的に答えは画像の下にテキストを置きます。
アイコンとは目的が画像や動画とは大きく異なるため、アイコンとは異なる必要があると思います。アイコンの下のテキストの方が見栄えがよく、サイトでよく目にするものです。しかし、ユーザーが情報を上から下にスキャンすると仮定すると、テキストを読む前にアイコンのアクションがわからない場合があります。
そもそもなぜアイコンが使用されるのかというロジックを見てみましょう。アイコンは、「読み取り」よりも速い「スキャン」機能を利用しています。
あなたが最初にテキストを置くなら、あなたは最初に学ぶためのより効率の悪い方法と、後でより効率的な方法を入れています。意味がありません。
Steve Krugの著書「Do n't make me think」では、必要のない場所ではテキストを使わないようにと主張してほとんど自殺しました。アイコンが十分に明確であると思われる場合は、それらを明確にするためのテキストラベルは必要ありません。
bootstrapから学ぶことができますが、可能であれば、アイコンの後にテキストラベルが付けられた小さな（16x16）アイコンを使用しています。そのため、そのアプローチでは、スキャン要素（アイコン）は小さく、読み取り要素です（テキスト）の視認性が向上しました。これは、アイコンが最初にありテキストが後であるにもかかわらず「読み取り」が必要な場合にアイコンを「スキャン」およびテキストに使用できる、両方のアプローチの50/50ブレンドの一種です。しかし、この私はほとんどの場合、サイズが小さいために見つけたりスキャンしたりするのがわずかに難しいアイコンを見る代わりに、「テキストを読んでいる」ことに気づきました。
受け入れられる「標準」は以下のようになります：キャプションは下、見出し/タイトルは上-印刷物と同じ。それが「より良い」かどうかは議論の余地がありますが、多くの状況でそうなっています。
- 新聞の数字-以下のキャプション、上のタイトル。
- ソフトウェアアプリケーション-通常、メニューアイコンはテキストバージョンの上にあります。 Macのほとんどのアプリケーションでは、メニューに両方のアイコンand textを表示することを選択した場合、テキストはアイコンの下に表示されます。
- ロゴタイプのロゴ-ロゴのテキスト上はめったにありません。
- 他の例は、確かに存在します。
したがって、一般的なアイコンの目的は異なる場合がありますが、一見受け入れられている表現はそうではありません。基本的に、アイコンは通常、言語に依存しない大きなコミュニケーション方法であり、テキストは種類の確認として機能します。 MS Wordのリボンに貼り付け-「貼り付け」または「pegar」と表示されているかどうかにかかわらず、アイコン（アイコンで表示）はユーザーに通知されます。
アイコンにラベルを組み込むもう1つの一般的な方法は、テキストをアイコンの横（右側）に置くことです。アイコンが左側に最初に表示されるため、アイコンが依然として主役であるため、私はそれが便利だとわかりました。画面スペースの高さを予約する必要があるアプリケーションにも役立ちます。通常、追加、削除、表示、編集などのアクションボタンに共通です。
私たちのアプリケーションでは、ほとんどの場合、合理的で快適なサイズのラベルのないアイコンを使用しました。ただし、アプリケーションの初心者であるユーザーのためのオプションを提供しています。つまり、プリファレンスの単一のチェックボックスで、アイコンの下にラベルを表示するか、アイコンにカーソルを合わせたときにツールチップ（ポップアップ）を表示します。この設定は、ユーザーがアイコンに慣れるまで非常に効果的です。