アイコン対テキスト付きアイコン対テキストリンクのみを使用する場合
Webアプリケーションでアイコン対テキストリンク付きアイコン対テキストリンクのみを使用する場合のルールはありますか？
例えば：
vs.
保存
vs.
保存
追加の質問：です 保存-または-保存 好ましい？
アイコンはラベルとしては効果がなく、トレーニングや経験なしに正しく解釈することは非常に困難です。ほとんどの状況で、ユーザーはアイコンのみの場合よりもテキストのみの場合の方が正しい解釈を学びます。 参照：Wiedenbeck、S（1999）。エンドユーザーアプリケーションプログラムでのアイコンとラベルの使用：学習と保持に関する実証的研究。 Behavior＆Information Technology、18（2）、p68-82。
アイコンは特に、InvoiceやBidなどの抽象的なものには特に適していません。抽象的なものには一般に強い視覚的イメージがないためです（InvoiceとBidはどちらも紙のドキュメントとして表すことができますが、どのように区別しますか？）。同様に、アイコンは特にアクション（保存、公開など）には適していません。プロセスでプロセスを明確に示すことは困難です。はい、アイコンは常にアクションのツールバーで使用されますが、ツールバーは専門家向けであり、それでもユーザーは頻繁に混乱します（平均して、ユーザーはWordを定期的に使用した後、= ユーザーは6つのWordツールバー項目しか知っていません2年間）.
アイコンを使用すると、テキストよりもスペースを節約できますが、認識が犠牲になります。 16x16ピクセルなどの小さなアイコンの場合、ユーザーが画像の本来の目的はもちろんのこと、画像の本来の目的を認識することさえ非常に困難です。私が知っているあるユーザーは、保存用の「ディスク」アイコンはテレビの写真だと思っていました。 （彼女はフロッピーディスクが何であるかを知るのに十分な年齢でした。）私は長年Wordを個人的に使用しており、[変更の追跡]アイコンはある種の様式化されたRosetta Stoneだと思っていました。エキスパートユーザーは、コントロールを選択するためのアイコンラベルではなく、ツールバーコントロールの 記憶されている物理的な位置に依存 の方が簡単であると感じています。大きいアイコン（少なくとも32 x 32ピクセルなど）は認識に役立ちますが、スペースを多く取るため、スペースを明確なテキストラベルに使用する方がよいでしょう。スペースが限られている場合は、多くの場合、アイコンよりも省略されたテキストを使用した方がよいでしょう。
アイコンを正しく表示するのは非常に困難です。ユーザーテストを何度も繰り返すことなく、新しいアイコンを開発しないでください。それでも失敗するかもしれません。 Microsoftのデザイナーは、Outlookのツールバーの解釈可能なアイコンを作成するためにあらゆるものを試しました あきらめて、テキストラベルを使用して キーコントロール。
アイコンラベルも技術サポートを難しくします（たとえば、「青いチェックマークの付いた黄色のシートをクリックする」と「「同意する」をクリックしてください」）。
目安として、次の3つの条件のうち少なくとも2つが当てはまる場合にのみ、アイコンのみを許可する必要があります。
スペースは非常に限られています（つまり、テキストだけでは小さすぎます）。
アイコンは標準化されています（たとえば、保存用のフロッピーディスクイメージ）
アイコンは、強い物理的なアナログまたは視覚的属性を持つオブジェクトを表します（たとえば、プリンター属性にアクセスするためのプリンターアイコン、またはページの背景を赤に設定するための赤い四角形）。
ツールチップは、アイコンを単独で使用する場合に必要ですが、テキストラベルの代わりにはなりません。ユーザーは物を探し回ってアプリを使用する必要はありません。テキストラベルがグラフィックツールチップを必要としないという事実は、テキストがアイコンより優れているというかなり良い手がかりです。
スペースに余裕がある場合は、テキストと組み合わせたアイコンが最適です。 （1980年代後半からこのことを示す研究があったと思いますが、見つかりません。）テキスト付きのアイコンを選択的に使用すると、特定のアイテムが目立つようになり、視覚的な興味が追加されます。また、アイテムのスキャン可能性も向上しますが、適切なテキストラベルでもこれが可能です。ユーザーは、実際にはパフォーマンスを改善しなくても（アイコンは上記のWiedenbeck、1999を参照）、アイコンがあればアプリの方が簡単だと主観的に考えることが知られているため、アイコンとテキストを組み合わせる理由の1つです。
通常、テキストラベルの上または左にアイコンが表示されます。本質的に他の選択肢よりも優れているとは思いませんが、ユーザーがエクスペリエンスに依存して、どのテキストラベルがどのアイコンに関連付けられているかを判断できるようにするために、コントロールが隣接している場合にも従う必要がある規則です。
アイコンの Neilson/Normanグループから ：
概要：アイコンのユーザーの理解は、以前の経験に基づいています。ほとんどのアイコンには標準的な使用法がないため、テキストラベルは意味を伝え、あいまいさを減らすために必要です。
アイコンにはテキストラベルが必要
ほとんどすべてのアイコンが直面しているあいまいさを克服するには、テキストラベルをアイコンの横に配置して、その特定のコンテキストでの意味を明確にする必要があります。 （また、標準のアイコンを使用している場合でも、特にアイコンをわずかに変更して美的な好みや制約に合わせる場合は、ラベルを含める方が安全です。）
アイコンラベルは、ユーザーが操作することなく、常に表示されている必要があります。ナビゲーションアイコンの場合、ラベルは特に重要です。ホバーに依存してテキストラベルを表示しないでください。 インタラクションコスト が増えるだけでなく、タッチデバイスでもうまく翻訳できません。
ウェブサイト Usability.gov は、メソッド、テンプレート、ドキュメント、およびサイト内のすべてのページのガイドラインにナビゲーションアイコンを使用しています[ 例w/text ＆ w/o text ]。この記事を読んでいるすべての人にメソッドを表すアイコンを送ってくれるように頼んだら、きっとさまざまなデザインを受け取ることでしょう。 ホームページの使いやすさに関するデザインガイドラインの一部として述べたように、 数年前に、「ナビゲーション用のアイコンを考え出す必要がある場合は、その可能性は低いでしょう。ユーザーにとって簡単に認識できる、または直感的である。」モバイルバージョンのサイトでは、アイコンにテキストラベルを付けて意味を与える必要があることを認識していますが、デスクトップバージョンでは、好奇心の強いユーザーがラベルの上にカーソルを置くまで、ラベルを非表示にしています。これらのナビゲーション項目をページの左側に修正して、ユーザーがスクロールしたときにユーザーが引き続き使用できるようにすることは、組織がそれらを重要かつ有用であると信じていることを示しています。ただし、これらのアイコンのテキストラベルを取り除くと、アイコンが完全に無意味になり、コンテンツへの簡単なアクセスを提供するという目的に対して逆効果になります。
ドンノーマンが引用した調査によると、アイコンだけでは十分に機能しません。ソロテキストはアイコンよりもうまく機能します。また、テキスト+アイコンが最適です。
上記の回答に加えて、私は指摘する必要があります。
それはどのようなウェブサイトですか？
Webサイトがあまり使用されない場合は、アイコンにラベルを付ける必要があります。それ以外の場合、新しいユーザーはUIが扱いにくい場合があります。
Webサイトを使用する場合頻繁に、Gmailのように、適切に配置されたツールヒントのある良いアイコンは、テキストのみのアイコンまたはアイコンを使用するよりも優れています-のみのアプローチ。以前はテキストのみのボタンを使用していましたが、現在はGmailでアイコンとツールチップを使用しているため、Googleがこの質問を検討したと確信しています。この新しいアプローチは、使いやすさを犠牲にすることなく、すっきりしたインターフェースを提供します。 PhotoshopとNotepad ++でも同様のアプローチを使用しています。
ユーザーが選択できるようにします。デフォルトは両方です。
Text + Iconは、初めてのユーザーがアイコンを学習するのに役立ちます。しかし、彼がアプリケーションをより多く使用するようになると、ユーザーはアイコンに慣れ、テキストは必要なくなります。アイコンの意味を理解したら、冗長なテキストではなく、より広いワークスペースを選びます。
まず、ユーザーインターフェイスを設計するときは、使いやすさの原則（一貫性、アフォーダンスなど）を考慮する必要があります。アフォーダンスは主要な概念の1つであり、インターフェースは直感的でなければならないことを意味します。たとえば、アイコンは、マイケルによる保存アイコンについて上記で引用した例のように、次のアクションの意味と関連付ける必要があります。一部のアイコンも標準化されており、意味を再利用できます。ポイントは、ツールバーなどにアイコンのみを使用する場合、アイコンが意味を表現するのに十分でない場合はツールチップを使用する必要があるが、アイコンに十分な許容性がある場合は、ラベルは不要であり、ツールチップで十分です。
いずれにしても、システムが特定のシステム向けであり、アイコンをデザインする必要がある場合、アイコンを特別にデザインすることは困難です。この場合、いくつかのデザインを提案し、ユーザーと評価することができます。ユーザーがシステム、ビジュアルインターフェース、アイコンについてどう思うかを知っておくと役立ちます。また、実際のテストの1日後に、ユーザーがアイコン、意味、アイコン、またはユーザーが求めているアクションを見つけることができる可能性のある領域を覚えているかどうかを評価するために、記憶可能なテストを行うこともできます。アイコンのデザインが複数ある場合も、アンケートが役立ちます。
一方、ラベルを付ける必要がある場合は、アイコンの下のラベルの方がいいと思います。[icon] [label]
「アフォーダンスは、オブジェクトの使用方法を明確にするオブジェクトの側面です。ユーザーインターフェイスの表示では、アフォーダンスを作成する機能は通常視覚的です。 .. "" Rosson、M. B.＆Carroll、J. M.（2002）Usability Engineering、Morgan Kaufmann。
または、時間があれば...これを読むことができます：www.cs.swan.ac.uk/~csharold/cv/files/Affordance.pdf
設計プロセス中にアフォーダンスを検討した場合、おそらくラベルは不要で、ツールチップを使用するだけです。それ以外の場合は、アイコンの下のラベルを検討し、ユーザーが評価するデザインを評価または提案できます（それほど多くはありません）。最終ユーザーでテストできるバージョンまでは、最初は同僚でした。
現在の傾向では、システムは、システム指向の用語ではなく、ユーザーが使い慣れた単語、フレーズ、および概念でユーザーの言語を話す必要があります。実際の規則に従って、情報が自然で論理的な順序で表示されるようにします。また、英語を使用するときは常に文字を右側にしてください。アイコンが主な魅力になるからです。したがって、ユーザーは前面の文字を無視する可能性があります。
メディアライブラリを含むライブラリとして整理されたiTunesの例：音楽、映画、ショー、オーディブック。ライブラリの下には、ライブラリに追加するメディアを購入できるストアがあります。
Googleパレットのデザイン のような最近の傾向と、Windows 2Dタイルはアイコンを提案します。しかし、 高速マウスホバーツールチップ。幸運を。
すべての質問を読み、すべてに同意した後、別の視点を追加したいと思います。
アイコンを表示するか、アイコンを表示しないか、テキストの周囲にテキストを追加するか、テキストを追加しないかを決定する前に、いくつかの質問に答える必要があります：
- アイコンをどこに追加しますか？
- なぜアイコンが必要なのですか？
- 誰がこれらのアイコンを使用しますか？
- ユーザーによるアイコン/コンテンツ/アクションに関する知識は何ですか？
- アイコンを使用することは一般的ですか？
- ユーザーの操作を簡単にしますか？
そしてこれらの質問に答えるには、いくつかの点を考慮する必要があります：
- 人々は毎日、いつでもスマートフォンを使用しており、Facebook、Youtube、Google、What's App、Instagramなどの最も有名なアイコンは、人々が知っていることを保証するためにラベルを表示する必要があります。
- Word/Googleドキュメントでは、テキストなしのアイコンが正常に使用されています。これは、何年も同じであり、誰もがすでに何であるかを知っているため、マウスを重ねてもアイコンを説明するテキストが表示されるためです。
アイコンは、地域によってアイコンの解釈が異なる場合があります。たとえば、英国ではeコマースでバスケットを使用する方が一般的ですが、そうでなければ米国ではカートです。それは地域の言語の影響のために起こっています。
複雑なアイコンは誤解のために変換を停止する可能性があります。
そして、あなたは私が Smashing Magazine から借りた良い比較を見ることができます。
すべての回答を考慮して、ケースの90％でアイコン付きのテキストを使用します。テキストの位置は、デザインコンセプトと、ユーザーが簡単に接続できるかどうかによって異なります。
そして、私がいつも私のコメントで言うように、ここで絶対に真実であるものは何もありません。あなたはテストし、あなたのウェブサイト/アプリケーションであなたのユーザーを比較すべきです。
これはユーザーによって異なります。ユーザビリティの観点からは、アイコンとテキストの両方を使用すると、アイコンが妥当な母集団によって受け入れられた場合に限り、リコールよりも認識が進むため、より良い結果が得られます。アイコンのみを持つことは、シンボリックグリフ（グローバルに理解可能なもの）に適用できます。テキストのみが最も適切なのは、アイテムが任意であり、それらを表す認識可能なグリフがない場合です。そのようなアイテムについては、テキストのみを持つことがおそらく最良です。ただし、使用される用語は、適切に使用できるかどうかテストする必要があります。