エクスペリエンスデザインの基礎知識:優れたユーザー体験の一部としてのアイコン

by akihiro kamijo

Posted on 10-12-2016

連載

エクスペリエンスデザインの基礎知識

アイコンは、オブジェクト、アクション、そしてアイデアを視覚的に表現した、多くのUIにとって本質的な部品です。正しく使われれば、製品の核となるアイデアや意図を伝えてくれるでしょう。しかし、不適切に使われたなら、ユーザーを混乱させ誤った方向へと導き、そして製品の体験を台無しにするかもしれません。

アイコンの第一の役割は、ユーザーに進むべき方向を示すことです。この記事ではそれを可能にするために必要となる要素を確認します。

UIでアイコンを使用する利点

アイコンは、様々な観点からUIの役に立ちます。例を挙げてみましょう。

付け加えるなら、アイコンは、ほとんどのアプリやサイトで使用されている、ユーザーには馴染みのデザインパターンです。

しかし、こうした利点にもかかわらず、アプリの設計者が、アイコンの背後に認識の難しい機能を隠した場合には、アイコンによるユーザビリティの問題が引き起こされる可能性があります。

アイコンの種類

前述のように、アイコンは、オブジェクト、アクション、そしてアイデアの視覚的な表現です。もし、アイコンが表しているものがユーザーに明確でなければ、アイコンはユーザーのタスク完了を妨げる視覚的なノイズになってしまうでしょう。

アイコンは3つの種類(普遍的・相反的・固有)に分類できます。それぞれのタイプのユーザー体験への影響を見てみましょう。

普遍的なアイコン

ユーザーからほとんど普遍的に認識されるアイコンがいくつかあります。ホーム、印刷、ショッピングカートなどはその代表的な例です。

image01-1

YouTubeアプリには2つの普遍的なアイコンがある。ホーム画面を指す家のアイコンと、検索のための虫眼鏡。 画像著作権: Google

このタイプの唯一の問題は、普遍的なアイコンは稀だという点です。上で上げたような例を除けば、ほとんどのアイコンは、インターフェースごとに異なる意味付けをされた、ユーザーにとっては曖昧なものとなります。

相反的なアイコン

一般的に使われている図形で、しかもアプリごとに相反する意味を持たされるものをアイコンとして使うと問題が起こりがちです。ハートとスターはこの種の良い例でしょう。この2つのアイコンは意味付けがアプリごとに異なるだけでなく、アイコン同士が互いに競合します。

image05

画像著作権: usertesting

その結果として、これらのアイコンの正確な意味を厳密に解釈することは困難です。アプリの操作中に、こうしたシンボルが期待と異なる結果をもたらしたならば、ユーザーを相当に混乱させることでしょう。そして、それは、将来の体験において、ユーザーがこれらのアイコンを理解して依存する能力の妨げにもなるでしょう。

ユニークなアイコン

アイコンを、はっきりとした視覚的表現を持たない抽象的な対象に使うのは困難です。「ダイレクトメッセージを送る」というアクションをひとつの図形で表現するなら、どうしますか?例えば、Instagramの下図のアイコンを使ってダイレクトメッセージを遅れると思いますか?

image06

Instagramユーザーなら見たことがあるアイコン。でも使ったことは? 画像著作権: Instagram

一旦アイコンの意味を理解してしまえば、その形状に合点がいくかもしれません。しかし、使い始めのユーザーがそれを理解するには、いくばくかの時間が必要です。その際、この種のアイコンにおける新たな問題は、ユーザーには理解できないUI要素を避ける傾向があることです。よくわからないものを信用しないのは人間の本能です。

ラベルとユーザビリティ

アイコンはテキストよりもスペースを節約できますが、その代償は認識のしやすさです。ユーザーが抽象的な図形に既に馴染んでいる、または、ユーザーは図形の意味を見つけるために喜んで余分な時間を費やす、と仮定するのはどちらも深刻な誤りです。

image07

画面下部タブバーのアイコンはAndroid初心者を混乱させるかもしれない 画像著作権: Google

実際のところ、ユーザーは不慣れなインターフェースを前に、しばしば怯えています。ユーザーに本当に必要なのは、不慣れなアプリを操作する前に何が起きるかを明確に理解することです。だからこそ、アイコンはクリックもしくはタップする前に、はっきりとユーザーの期待を設定できることが求められます。

多くのアイコンが直面する曖昧さの問題を解決するためには、テキストをアイコンの横に配置し、特定のコンテキストに於ける意味を明確にすべきです。たとえ普遍的なアイコンを使っている時でも、適切なラベルを含める方が安全な場合は多々あります。

image02

右側画面下のラベル付きアイコンはずっと使われる可能性が高い 画像著作権: Google

結論

優れたユーザー インターフェイスの最も重要な特徴は「明確さ」です。わかりやすいインターフェースは、単純に「良い」インターフェースです。UIデザインのコンテキストにおいては、アイコンは何よりもまず意味を伝えなければなりません。それは、ユーザーが余計な手間に煩わされずに、必要な作業を行うのに役立つでしょう。

インターフェースにアイコンを含めることを決めたなら、まずリサーチを行い、理解しやすく記憶しやすいアイコンを選びましょう。決断する際は、いくつかのことを念頭に置きましょう。

最後に、アイコンを使う時は、常にユーザビリティテストをしましょう。インターフェースを初めて操作するユーザーを実際に見るのは、アイコンが十分にわかりやすいかを確認するのに役立つでしょう。

ユーザーを考えこませないように。明確さを優先してアプリをつくりましょう。

この記事はXD Essentials: Icons as Part of a Great User Experience(著者:Nick Babich)の抄訳です。

Topics: クリエイティブ, UI/UX & Web, UI / Web デザイン

Products: