UIデザインの悩みどころ「アイコンどうする問題」

こんにちは。
デザイナーの渡辺です。テックブログと銘打たれておりますが、デザインの話を書きたい!とごねたところ許可いただけたので、UIデザインについて書きたいと思います。
(この記事はUI Design Advent Calendar 2015にも掲載しております)
 

アイコンどうする問題

UIデザインのなかでも、今回は「アイコン」についてです。

アイコンはなぜ大切なのか?

アイコンを用いることで、わたしたちは
ユーザーに直感的、そして素早く機能や意味を伝える ことができます。
そのため、UIデザインにおいてアイコンは欠かせません。

文字に比べ、スペースをとらず、ビジュアル的にも親しみやすく、UIデザインの幅をぐんと広げてくれるアイコン。
しかし、私はデザインをする度にこのアイコンに悩まされてしまいます。
 
UI内でのアイコンの役割は1つの言語とも言えるもので、だからこそ普遍的で意味が伝わりやすいものでなければいけません。
ここで重要なのが、そのアイコンで
「ユーザーの経験に基づいて自然に意味が伝わるかどうか」という点です。
例えば、

  • 虫眼鏡のアイコンが表すのは「検索」
  • 封筒のアイコンなら「メール」

といったようなアイコンは、ためらいなく意味を取ることができるアイコンだと思います。これは、日常的にそのアイコンに触れて、機能を理解し、使っているというユーザーの経験がもとになっています。
新しいアプリや機能などでアイコンを考えるときにはこの経験を裏切っていないかをまず確認するために、想定するユーザーがよく使うアプリやサービスで使われているアイコンを元に考えていきます。
 
ただ、これらの洗い出しを行っていくうち、

  • 同じ意味を表すアイコンが複数ある
  • 該当する意味のアイコンが見当たらない

という2つの問題が、 ほぼ100%発生します。
 

「お知らせ」を表すアイコンって?

例えば「お知らせ」のメニューアイコンについて考えてみます。
あるアプリのお知らせメニューのアイコンを考えるとして、まずは他のアプリで使われているアイコンを集めてみます。ざっと自分がよく使っているアプリから集めてみると、
img_bell
img_bubble
img_phone
などがありました。

次に、集めた中から、他の箇所で似たアイコンを使っている場合はそれを除外、そしてデザインしているプロダクトの雰囲気に合わないものを除外、最後に残ったものがユーザーの経験上理解しやすいアイコン、ということになります。
 
今回の場合は、3種類のアイコンから考えていきます。集めた中で、タブメニューにはベルか吹き出しのアイコン、グリッドメニューには拡声器のアイコンが使われているのが一般的だったため、使用場所でも案を絞り、決めていくのがいつものプロセスです。

ただ、たとえこうした経験に基づく案があったとしても、それだけで決めてしまうのは早計な場合もあります。

例えば、Facebookのお知らせ(アクティビティ)に使われているアイコンです。
Facebookではこのメニューに地球のアイコンを使っているのです。
はじめに触れたユーザーの経験という意味から考えると、地球アイコンから「お知らせ」という機能は想起できません。
img_facebook

Facebookはユーザーのソーシャルや興味のある分野、仕事など、ありとあらゆるものの新着情報をこのメニューで表示します。それはユーザーの生活している世界そのもの、とも言えるかもしれません。ただの機能説明を超えて、本当の意味を表すアイコンをと考えたときに「地球」に行き着いたのだろうな、と思います。
このように、サービスの意思を直感的に、そして刷り込み式に伝えることができるのもアイコンの力のひとつと言えるので、デザインする際に、特に強い意味をもたせたい場所に限り、意図的にユーザー経験を裏切る選択肢も考えると、デザインの幅が広がります。
 

新機能のアイコンを考える

さて、次の悩みドコロは、新機能のアイコンです。
新機能の場合も、似た機能を持ったサービスではどう表現しているのか、という経験の調査がもとになります。
新機能のアイコンを考える際には、前提として世の中で使われているアイコンを知っている必要があるというデザイナーとしての知識が必要になります。ただ、それでも経験に基づいた機能でも「伝える」のは難しいのに、全く新しい機能を伝えなければいけない、というのは答えが見つけづらく、時間がかかってしまうポイントになります。
 

Couplesのイベントチャンネルアイコン

新機能のアイコンには、このように明確な答えがない場合もあり、考えるのに時間がかかりやすくなります。
ちょうど先日、Couplesというプロダクトで「イベントチャンネル」という新機能のアイコンが必要になったのですが、その際は週に1回実施しているデザイナーミーティングの議題として、みんなで意見を出し合いました。

この「イベントチャンネル」は、カップルで興味のあるチャンネル(地域情報やグルメ情報、セール情報など)をフォローして2人のカレンダーに追加できる機能です。この機能を表すアイコンを…という課題なのですが、Couplesはかなり多機能なアプリのため、すでに多くのアイコンが使われており、これだ!といえるアイディアがなかなか見つけられなかったのです。
そこで、デザイナー全員で意見を出して、いくつかブレストを行いました。
15分ほどでざっと出し合ったのですが、

  • LINEバイトのように文字を入れたもの
  • イベントという機能のわくわく感を表すテント
  • 新しさを伝えるために季節のモチーフを季節ごとのアップデートで変更する

など、様々なアイディアが出ました。

最終的にはイベントチャンネルに掲載されるコンテンツのジャンルが幅広いため、普遍的なモチーフがよいということでアンテナのアイコンが実装されました。
img_Couples
このように1人だけの知識ではどうしても一面的になりがちなものも、複数で出し合うことで幅が広がり、またユーザーの経験上分かりにくくないか、という外からの目を持つことができます。
 

アイコンが持つ「イメージ」のちから

このように、UIデザインでは何気ないアイコン一つを決めるのも、毎回毎回非常に悩んで作っているのです。また、そこが楽しみの一つでもあります。
Facebookのお知らせアイコンでも触れましたが、アイコンによって言葉だけでは伝えきれない「イメージ」を伝えることができます。そしてそれが最大の強みです。
先日、Twitterの「お気に入り」アイコンが星からハートに変更になったのは記憶に新しいかと思います。
星アイコンは、お気に入り・いいね・あとで読む・重要・既読……など、様々な意味を取ることができました。これをハートのアイコンにすることで「いいね!」「素敵!」というような、感情的でポジティブなリアクションにイメージが絞られました。

このアイコンの変更で、いいな!と感じる→ハートを押す、とアクションが明確になり、実際に送信量が増加したそうです。
特に新規のユーザーのアクション数が上がっており、慣れていなくても迷わず使うことができる、という意味で、このアイコン変更は大きな意味があったのではないでしょうか。
しかし、反対にユーザーの中にはアイコンがハートに変更されたことで、「変更以前のfav自体はいいね!という意味ではなかった」という不満の声が出ていることも事実です。

どちらにせよ、星・ハートそれぞれのアイコンが持つイメージの力を感じる意見だな、と興味深い話題でした。

デザインには様々な側面があり、アイコンはそのごく一部にすぎませんが、悩みながらもその一部にもこだわり、これからもデザインをしていきたい、と思います。
 
 
参考:
https://blog.twitter.com/2015/hearts-on-twitter
http://www.huffingtonpost.jp/techcrunch-japan/twitter-iine_b_8475836.html
UIデザインの心理学「わかりやすさ・使いやすさの法則」 Jeff Jhonson

  • このエントリーをはてなブックマークに追加

エウレカでは、一緒に働いていただける方を絶賛募集中です。募集中の職種はこちらからご確認ください!皆様のエントリーをお待ちしております!

Recommend

Pairs開発責任者が考える「プロダクト・マネジメント」に必要な5つの資質

shader入門 -CIKernelでカスタムフィルター作成-