デザイナーの部屋に「テキストラベルなしで使っても大丈夫だと思うアイコンを挙げてください」と聞けば、20通りもの異なるリストが返ってくるでしょう。同じアイコンが何を意味するのかをユーザーに聞けば、200通りもの異なる答えが返ってくるはずです。デザイナーが普遍的だと想定していることと、ユーザーが実際に理解していることのギャップは、eコマースナビゲーションにおいて最も高くつく過ちの1つです。
Nielsen Norman Group、Apple、Google、そして大規模なA/Bテスト企業による長年の調査に裏付けられた真実は、ほとんどの人が考えるより遥かに限定的です。テキストラベルなしで混乱を生じさせずに使えるアイコンは、ほんのわずかなものしかありません。その他すべてはラベルが必要です。
- 認識がほぼユニバーサルなアイコンは5つだけ：ホーム、検索、カート、メニュー（ハンバーガー）、閉じる。
- Nielsen Norman Groupの調査では、ユーザーの60％がデザイナーが自明だと思っているアイコンを誤解する。
- プラットフォームの一貫性の欠如が主な原因—同じアイコンが異なるアプリで異なる意味を持つ。
- 「ユニバーサル」なアイコンであっても、スペースがあればラベルを付けることで、エンゲージメントが10～20％向上する。
ユニバーサルな5つのアイコン
テキストなしで実際に機能するアイコンとは、数十年にわたってプラットフォーム全体で標準化されており、ユーザーが遭遇する主要なアプリケーションのほぼすべてで同一の実装を持つものです。リストは短いです。
1. ホーム（ハウスアイコン）
ハウスアイコンが「ホームページに移動する」を意味するようになってから、その意味はユーザーの期待に組み込まれています。すべてのブラウザ、すべてのモバイルOS、そしてほぼすべてのアプリが同じビジュアルメタファーを使用しています。ほとんどのユーザーテストではホームアイコンの認識率は95％を超えています。
ただし、eコマースではホームアイコンは幾分か冗長です。ほとんどのShopifyテーマは既にストアロゴをホームページリンクとして使用しており、これは同じ機能を果たしつつブランドアイデンティティを強化します。ロゴとホームアイコンの両方がある場合、ナビゲーションの実面積の2つ分を同じアクションに費やしていることになります。
2. 検索（虫眼鏡）
虫眼鏡は、ウェブ上で最もテストされたアイコンの1つです。その認識率は一貫して90％を超えており、ユーザーは躊躇なくそれをタップします。このアイコンには視覚的に説明的—虫眼鏡は物を見つけるためのツールに見える—という利点があり、1980年代からデスクトップOSで使用されてきました。
eコマースでは、検索は重要です。虫眼鏡アイコンはモバイルヘッダーやタブバーで安全に単独で使用できます。ただし、その下に「検索」という単語を追加すると、まだ小さいながら測定可能なエンゲージメントの向上が見られます。ユニバーサルなアイコンであっても、ラベルが付いているとより多くのクリックを得られます。
3. ショッピングカートまたはバッグ
数十年のオンラインショッピングにより、カートアイコンは疑う余地がありません。食料品店からのショッピングカートであろうと、小売店からのショッピングバッグであろうと、ユーザーはそれが「購入しようとしているアイテムを見る」を意味することを知っています。アイコンは通常、アイテム数を表すバッジを含み、これは機能的な明確性を加えます。
Baymard Instituteのテストでは、eコマースコンテキストにおけるカートアイコンの認識は95％を超えています。他のいくつかのアイコンとは異なり、カートアイコンは代替の意味で過負荷になっていません—それは1つのことを意味し、その意味はプラットフォーム全体で安定しています。
4. メニュー（ハンバーガーアイコン）
3本線のハンバーガーアイコンは、モバイルデバイスで「メニューを開く」のデフォルトシンボルになっています。過去10年間、モバイルファーストデザインが標準になるにつれて、その認識は大幅に増加しました。ハンバーガーアイコンへの初期の批判—特に2014年の「MENU」という単語がアイコンより優れていることを示す有名なテスト—は、ユーザーがこのパターンに適応するにつれてほぼ解決されました。
とはいえ、ハンバーガーアイコンを「Menu」という単語と組み合わせると、アイコン単独より優れた成果があります。Nielsen Norman Groupの数十万のセッションにおけるテストでは、アイコンがテキストと組み合わされた場合、メニューエンゲージメントが20％増加することが判明しました。アイコンは理解されていますが、ラベルが最後の躊躇を取り除きます。
5. 閉じる（Xアイコン）
ウィンドウ、ダイアログ、オーバーレイを閉じるためのXアイコンはユニバーサルに理解されています。これは最初のデスクトップOSから、グラフィカルユーザーインターフェースの標準的な部分となっています。認識はほぼ100％であり、ユーザーはそれを見たときに躊躇しません。
Xアイコンは、ラベルが実際にユーザビリティを損なう数少ないケースの1つです。Xの隣に「Close」という単語を追加すると、明確性を加えることなく冗長性が生じ、モーダルヘッダーで非常に限定的なスペースを占有します。
その他すべてがラベルなしで失敗する理由
これら5つのアイコンを外れると、認識率は急激に低下します。理由はプラットフォーム間の一貫性の欠如です。同じビジュアルシンボルが異なるコンテキストで異なる意味を持つため、ユーザーはあなたのストアに適用される意味が何かを知る方法がありません。
ハートアイコンは完全な例です。Instagramではそれは「いいね」を意味します。Pinterestでは「保存」を意味します。多くのeコマースサイトでは、それは「ウィッシュリストに追加」を意味します。健康アプリではヘルスデータまたはお気に入りを表します。ユーザーが初めてあなたのストアでハートアイコンに遭遇したとき、彼らは推測しています。Nielsen Norman Groupの調査では、eコマースコンテキストにおけるラベルなしのハートアイコンは、ユーザーの40％以上に誤解されていることが判明しました。
スターアイコンも同じ問題があります。アプリに応じて、評価、お気に入り、プレミアム機能、または注目アイテムを意味することができます。ラベルなしでは、ユーザーはそれをコンテキストからデコードする必要があり、これは摩擦を導入します。
人物またはユーザーアイコンは明らかに見えるかもしれません—それは「アカウント」または「プロフィール」を表していますよね？例外として、一部のサイトではそれは「ログイン」を意味し、他のサイトではそれは「カスタマーサービス」を意味し、さらに他のサイトではそれは複数のアカウント関連アクションのドロップダウンを開きます。認識研究では、ユーザーの約60％だけが最初の遭遇で人物アイコンを「アカウント」として正しく識別することが示されています。
グリッド、タグ、フィルター、ブックマークアイコンは皆、深刻な曖昧さから影響を受けています。グリッドは「グリッドとして表示」、「カテゴリ」、「コレクション」、または「すべての製品」を意味する可能性があります。タグは「セール品」、「ラベル」、または「整理」を意味する可能性があります。フィルターアイコンはやや優れていますが、それでもラベルなしではユーザーの約70％によってのみ認識されます。
パターンは明確です：すべての主要なプラットフォーム全体で1つの安定した意味を持つアイコンは単独で機能できます。異なるアプリで異なる意味を持つアイコンはできません。
認識データ
Nielsen Norman Groupは過去10年間に複数回のアイコンユーザビリティテストを実施しています。彼らの発見は一貫しています。広く引用されている1つの研究では、eコマースとコンテンツサイト全体で使用される75個の異なるアイコンをテストしました。認識率が80％を超えたアイコンは6つだけでした。残りは40％から70％の範囲に落ちました。その中では、ユーザーはアイコンを誤認識するか、確信がないために完全にスキップするかのどちらかです。
Apple内部の調査は、Human Interface Guidelinesを知らせ、すべてのタブバーアイテムにテキストラベルを明示的に推奨するように導きました。ガイドラインは次のように述べています：「タブバーからラベルを削除する場合、アイコンが明確で理解しやすいことを確認してください。」しかしそれはさらに進みます：「一般的には、ユーザーが一目で各タブの目的を理解するのに役立つため、ラベルを含める方が最善です。」
Googleのマテリアルデザインガイドラインはさらに直接的です。ボトムナビゲーションのガイドラインは次のように指定しています：「テキストラベルはすべての宛先に使用する必要があります。テキストラベルのない宛先は十分に明確に伝わりません。」彼らはアイコンのみのボトムバーをテストし、テキストラベルを追加するとナビゲーション成功率が18％向上することを発見しました。
これは理論的ではありません。数十億のユーザーと、テストのためのほぼ無限のリソースを持つ主要なプラットフォームがあなたにテキストラベルが必須だと言うとき、それは彼らのデータがラベルなしのアイコンがユーザビリティを損なうことを示したからです。
ユニバーサルなアイコンでもラベルから利益を得られるとき
5つのユニバーサルなアイコンであっても、多くのコンテキストではラベル付きでより良いパフォーマンスを発揮します。違いはあいまいなアイコンの場合より小さいですが、測定可能です。
Blend CommerceがShopifyストアで実施したテストでは、アイコンとテキストラベルを備えたモバイルタブバーが、同じタブバーでアイコンのみの場合よりも10％高いコンバージョン率を生成しました—使用されるアイコンがユニバーサルセット（ホーム、検索、グリッドで表されるコレクション、カート、アカウント）からのものであっても。
虫眼鏡アイコンにラベルを追加するとなぜエンゲージメントが増加するのでしょうか？2つの理由があります。まず、ラベルは確認を提供します。ユーザーはアイコンを見て、それを認識し、ラベルはタップする前に彼らが正しいことを確認します。その信頼の一瞬が微摩擦を取り除きます。次に、ラベルはより大きく、より許容的なタップターゲットを作成し、これは小さい画面でのユーザビリティを改善します。
実践的なポイント：ユニバーサルなアイコンはスペースが本当に限定されている場合は単独で使用できますが、短いラベルを追加することが良い既定値です。
これがあなたのナビゲーションを意味するところ
Shopifyストアのナビゲーションを構築または監査している場合、意思決定フレームワークは次のとおりです：
単独で使用しても安全なアイコン：
- 検索（虫眼鏡）
- カートまたはバッグ
- 閉じる（X）
- ホーム（ロゴと冗長でない場合）
- メニュー（ハンバーガー）
ラベルが必要なアイコン：
- その他すべて。コレクション、アカウント、ウィッシュリスト、お気に入り、フィルター、ソート、シェア、設定、通知、チャット、および検討しているカテゴリー固有のアイコン。
ベストプラクティス： ユニバーサルなアイコンであっても、モバイルタブバーのような永続的なナビゲーションにはラベルが付いている必要があります。スペースコストは最小限—各アイコンの下に1～2語—で、ユーザビリティの利得は実際的です。
あなたのナビゲーションが現在、検索、カート、または閉じる以外の何かについてアイコンのみのボタンを使用している場合、簡単なテストを実行してください。テキストラベルを追加し、エンゲージメントを測定してください。Navi+のようなツールを使うと、テーマを再構築することなく、ラベルのオン/オフを切り替えて両方のバージョンをテストするのが簡単です。データはほぼ常にラベル付きバージョンを支持するでしょう。
この記事は、ナビゲーション内のアイコンとテキスト：どちらを使うべきか（そして両方を使うべき場面）に関する大規模ガイドの一部です。