「意味のあるアイコン」

アイコンは直感的でわかりやすく

サイトをナビゲートする手助けを行ってくれます。

しかし、誰もが知っていると思われるアイコンでも人それぞれ捉え方が違うということを考え、アイコンの横にテキストで意味をそえるということを行う対処が必要です。

絵、記号のみや文字のみのアイコンとなる場合は、欄外にアイコンの意味をわかるように記載します。

たとえば、旅行会社のHISでは、サービスが広く、アイコン一つ一つに意味をそえるスペースがないため、記号や文字のみのアイコンでうまく表現しています。

■HIS

http://e.his-j.com/shop/air/voyage_list.aspx?portal=02A&jarea=10&city=SHA&leave_dt=20090614&jairport=&seat_class=

記号のみのため、欄外にサービスのアイコンの説明があります。

http://e.his-j.com/static/customer/icon.html

また、アイコンは、サービスの有無を視覚的にわかるようにしてくれる機能もあります。

■ドコモの製品情報

http://www.nttdocomo.co.jp/product/foma/style/n03a/index.html

主なサービス・機能の対応・非対応を色の違いでうまく表現しています。

■JTB

http://dom.jtb.co.jp/yado/List.aspx?mesh=270301

施設の有無を色の差で表現しています。

上記の例のように、対応しているサービスだけを並べるより、非対応のアイコンも表示したほうが、ユーザーとしては、比較検討しやすくなります。

このように、アイコンはユーザーの理解を助けるのに、効果的ですので、うまくサイトで使用し、わかりやすいサイトにしたいものです。

  • このページを共有する