インターフェースは、あらゆるコミュニケーションやタスクに関係してきます。WebサイトのUIは目標を達成するための手段であり、デザイナーの仕事はユーザーが素早く目標を達成するためのインターフェースを作成することです。
アイコンは言葉を使わずに意味を伝えるので、インターフェースに最適です。ユーザーは、視覚的な学習と要素間におけるインタラクションだけで、インターフェースの機能を学ぶことができます。
この記事では、Webサイト上にあるUXの品質を向上させるためのアイコンの使用方法をいくつか紹介します。アイコン完璧な使用法はありませんが、優れたアイコンと改善されたユーザー体験の間には共通点があります。
ナビゲーションの改善
アイコンは、当然のことながら視覚のみに基づいてWebサイト内を案内するのに役立ちます。最良のアイコンとは誰にでも認識できるアイコンなので、常にこれを最優先するようにしましょう。
しかし、ユーザビリティを向上させるために、テキストラベルを使用してリンクのアイコンをデザインすることができます。
垂直ナビゲーションメニューを使用したTim Roussilheのポートフォリオサイトを見てみましょう。
Timは目的と行動を区別するために、各リンクラベルの上にアイコンを設置しています。見やすい上にわかりやすいため、アイコンの使用方法のもっともわかりやすい手法の１つです。
リンクにもテキストラベルを含めることを忘れないようにしましょう。ナビゲーション用の単なるアイコンではあまり効果的ではありませんし、少なくともユーザビリティにおいて良い方法ではありません。
しかし、My Own Bikeのようなサイトでも、少なくともリンクがどこに飛ぶかは推測できます。サイトは完全にドイツ語ですが、アイコンがヒントを与えているのです。
もう一つの重要なアイコンは、３つのバーメニューのアイコンです。これはハンバーガーメニューとも呼ばれ、多くのデザイナーが嫌がる一方で、このシンボルの意味を理解する人が増えてきています。
Incのメニューは、アイコンとナビゲーションの関係を示す素晴らしい例の１つです。
ここでのメニューリンクはハンバーガーアイコンを使用していますが、「メニュー」というラベルテキストが下にあります。これにより、アイコンの意図が明確になり、モバイルユーザーがナビゲーションを簡単に見つけることができます。
さらに、ナビが表示されている場合、ユーザーはナビリンクの横に小さなプラス記号が表示されます。これらのアイコンは、サブリンクのスライド式の引き出しを示します。ドロップダウンリンクのようにみえますが、モバイル用にデザインされています。
ほかにも、人気のトレンドにメガナビゲーションのドロップダウンメニューというものがあります。これはMashableのようなサイトで見ることができ、各リンクには下向きの小さな矢印があり、ドロップダウンメニューを示しています。
これらのアイコンは欠かせないものではありませんが、ユーザー体験を必ず改善してくれるでしょう。ほとんどのユーザーが矢印のシンボルを認識し、意味を理解しています。
もちろん、このナビゲーションは矢印なしでも機能します。しかし、アイコンが目的を明確にしやすくして、サイトの閲覧をより簡単にすることは明らかです。
行動を促進するビジュアル
ナビゲーションは、上部のナビメニューバーをはるかに超えることができます。ページ内またはサイドバーで、ユーザーがWebサイト内を移動するのに役立つリンクを含めることもできます。
アイコンが目立てば、サイト内のリンクにとっても最適です。たとえばMedia Templeのホームページでは、さまざまな色で「もっと読む」というリンク先が設置されています。
これらのリンクはすべて、右向きの矢印アイコンを使用しています。右向きの矢印アイコンは、Webにおいては一般的に次のページに移動するという意味で知られています。
ほとんどのWebブラウザには、戻るボタンと進むボタンがあります。戻るボタンは左を指し、進むボタンは右を指していて、これらのボタンはブラウザー履歴間を移動します。このような機能があるため、右向きの矢印は通常、次のページに進むということを意味しているのです。
Media Templeは、右向きの矢印の機能をそれとなく目立たせる方法を強みとして利用しています。
ページ内の目立つナビゲーションの１つに、CTAと略されるコールトゥアクションボタンがあります。アイコンは、特定の目的を果たすCTAでうまく機能します。
たとえば、jQueryのWebサイトには、ホームページの右上隅に目立つダウンロードボタンがあります。このCTAボタンは、テキストのすぐ横にダウンロードアイコンが表示されています。
これにより、CTAボタンが何らかの方法でファイルをダウンロードすることに関連しているとわかります。
しかし、ボタンがいつもブラウザでアクションを引き起こす必要はありません。 CTAは、製品やサービスに関連する別のページに導くだけでもいいのです。
アイコンは、訪問者にクリックを促すため、売上に役立ちます。 ResumeBakingは、CTAが曲線の矢印付きのアイコンで囲まれた素晴らしい例です。
これらのカスタムアイコンは、ユーザーにクリックを求めることによって製品を販売し、売上に貢献します。しかし、無料の履歴書の作成、オンライン共有、求人情報の入手などの機能に基づいて販売しているのです。
少し曖昧なように聞こえますが、しっかりと機能しています。多くのユーザーは、アイコンと矢印を見てボタンに気づき、クリックします。
フォームの説明
すべてのWebサイトには、メールのサインアップフォーム、アカウントログインフォームや基本的な連絡フォームなど、さまざまな種類のフォームがあります。
アイコンはフォームと組み合わせて、信頼を築き、ユーザー行動を促すことができます。
Life Could Be Betterのサイトを覗いてみてください。ページの一番下に固定のメール登録フォームがあります。このフォームの横には小さな封筒のアイコンが表示されており、フォームの目的を示してユーザーの注意を引きます。
このようなアイコンの効果は、会社の電話連絡先とソーシャルメディアのリンクにも当てはまります。
アイコンは、周囲のコンテンツを説明するために使用されています。また、ビジュアルは文字よりも理解しやすいので、アイコンをわかりやすくし、一目見ただけで簡単に見つけることができます。
私が好きな別のテクニックは、デザイナーがサインアップフィールドにアイコンを追加するというものです。フォームに３～４つ以上の入力項目があり、ユーザーがすべてのフィールドに記入する必要があるフォームの場合、このテクニックは非常にうまく機能します。
各フィールドにカスタムアイコンを使用するWebDAMのトライアルページは素晴らしい例です。
これらのアイコンは見た目が素晴らしいだけでなく、インターフェイスにもよく馴染んでいます。
さらに、各フォームフィールドで何を入力すればいいのかを素早く認識することができます。フィールドラベルはフォーム内に位置しているので、情報を入力するとラベルは消えます。これは、いくつかデータを入力したあと、フィールドで何を入力しなければいけなかったかを忘れてしまうため、混乱を招いてしまうかもしれません。
サイトに３〜４つ以上の異なるフィールドがある場合は、このようなアイコンを追加することをおすすめします。そうでなければ、少しくどく見えてしまうかもしれません。
機能とポインタ
新しいスタートアップや小規模なビジネス、Webアプリケーションには、ユーザーをサイトに引き込む一連の機能と理由があります。これらの機能をリストにすることはできますが、ただ視聴者を飽き飽きとさせるだけでしょう。
代わりにアイコンを追加して、機能や一般的な動作を説明してみてください。ビジュアルはわかりやすいので、人々はページをさらに読み進めてくれるでしょう。
LightCMSのアイコンを例に挙げてみましょう。このサイトのアイコンは半透明で明るい色をしているため、ページに馴染みやすいです。
それだけでなく、これらのアイコンは機能を明確にして、読者がホームページを素早く流し読みしやすくもします。これらのアイコンだけでは何かを販売することはできません。しかし、プラットフォームが何か、そしてなぜ役立つのかを明確にすることができます。
Disqusの機能ページにも、さまざまな機能の横にカスタムアイコンが表示されている、非常によく似たデザインがあります。
アイコンがDisqusのブランドとうまく融合しているため、私はこのデザインが本当に好きです。
Disqusはこれらのアイコンをゼロから作ったかもしれません。しかしあなたにはその必要はありません。たくさんあるフリーアイコンセットをダウンロードすれば、必要なものはなんでも手に入ります。
まとめ
アイコンは、デスクトップソフトウェアからWebサイトやモバイルアプリまで、すべてのインターフェースの基本的な部分です。しかし、アイコンのデザインやスタイルは変化し続けています。そのため、最新のトレンドに送れないようにすることが重要です。
このガイドが、どんな場面でもアイコンを使った素晴らしいユーザー体験が作り出せる手助けとなることを願っています。そして、アイコンフォントの使用を検討中なら、このトピックに関する私たちのガイドを読むことをおすすめします。
