デザイン

デザイン

【デザイナ必見】高速ビジュアル検索のためのモバイルアイコンデザイン

UX movement

UX Movement is a user experience blog that publishes articles showing how good and bad design practices affect user behavior.

本記事は、Mobile Icon Design for Faster Visual Search
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

212 views

読了時間 : 約2分53秒

アイコンはモバイルインターフェースで使い道がたくさんあります。アイコン使って情報への注意を促したり、状態を示したり、タスクアクションを表したりできます。タスクアクションを表しているとき、アイコンはボタンになります。アイコンボタンのスタイルは、ユーザーの仕事の成果を左右する可能性があります。

 

アイコンボタンの並びを見たとき、ユーザーは欲しいものを素早く見つけられなければなりません。そうすれば、より短い時間で仕事に取り掛かることができます。しかし目で見て探すのに時間がかかる要因があります。デザイナーはアイコンを使うとき、このような要因を考慮し、ユーザーの検索時間を短くしなければなりません。

 

視覚ノイズ

アイコンが細かければ細かいほど、視覚的なノイズが多くなります。ユーザーが細かいアイコンの並びをまとめて見ると、視覚的なノイズが増えます。各アイコンの線、形、色合いなどの細部に強い刺激を受けるため、ユーザーがアイコンを探して見つけるのに時間がかかってしまうのです。

 

これとは対照的に、シンプルなアイコンの並びは視覚的なノイズが少なく、ユーザーはアイコンをすばやく探して見つけることができます。各アイコンの細部は最小限であるため、アイコンの形状がはっきりし、認識しやすくなります。

 

調査の結果、シンプルなアイコンは細かいアイコンよりも速く認識できることがわかりました。とは言え、アイコンをシンプルにしすぎると、認識できなくなってしまいます。アイコンが認識されるのに必要な特徴がいくつかあります。

 

別の調査でもシンプルなアイコンは細かいアイコンよりも速く検索できることが確認されているのですが、特に大きいサイズでその傾向にあります。この調査では細かいアイコンは、無地のアイコンよりも探すのが遅くなりました。インターフェースに視覚的なノイズが加わったためです。

 

図と背景の比率

背景図形に並べたとき、図に対する背景の比率もアイコンの検索速度にも影響します。図の背景に対する比率が低いと、アイコンが小さくなり、マクロ表示で見分けがつかなくなります。このためユーザーはマイクロビューでアイコンを拡大表示して見分けなければならず、時間と手間がかかってしまいます。

 

図に対する背景の比率が高いとマクロ表示でアイコンが大きくなり、見分けやすくなります。一目で区別できるため、ユーザーはアイコンを拡大する必要はありません。視点の移動が短くなり認識努力も少なくて済むため、素早く検索できるようになります。

 

ある調査によると、図と背景の比率が少なくとも50%であるアイコンだと検索時間が短くなり、多くのユーザーに気に入られました。また円形のパッド(円形または角が丸い四角形の背景図形)にアイコンを配置すると検索時間が短縮されることもわかりました。

 

表示極性

表示極性がポジティブなアイコンは、明るい背景に濃い色をしています。表示極性がネガティブ(暗い背景に明るい)のアイコンよりも視覚的な検索が遅くなります。

 

この画像では、両方のダッシュボードの対応するアイコンは同じものです。しかしネガティブな極性のアイコンは、ポジティブな極性のアイコンよりもわずかに大きくはっきりと表示されています。見た目がくっきりするほど、ユーザーはアイコンをより早く探して見つけることができるのです。

調査によって、ポジティブな極性のアイコンよりもネガティブな極性のアイコンを好むユーザー多いことがわかりました。これは、アイコンの外側と内側のコントラストが高いためです。

 

色彩

アイコンの色も、注意を引いて対象を目立たせることで視覚的な検索のスピードアップに効果があります。ユーザーは白や黒よりもなじみのある色のアイコンを早く認識できます。

 

同じ研究で、青、緑、赤がアイコンに最も適している色であるのに対し、紫、オレンジ、黄色はまったく適さない色であることがわかりました。アイコンが意味する内容は、アイコンの色の設定には影響しませんでした。

面白いことに、青、緑、赤はコンピューターの画面やその他の光源装置の原色です。その3色はより純粋に見え、紫、オレンジ、黄色は薄いあるいは色褪せて見えます。青、緑、赤は純粋でなじみがあるので、アイコンの色に最適なのです。

 

見た目以上のもの

アイコンデザインには、目に見える以上のものがあります。非常にたくさんのスタイルから選べるので、最良のユーザーエクスペリエンスのためにどのスタイルを選ぶか決めるのは簡単ではないでしょう。

 

ここで述べているガイドラインは、ユーザーエクスペリエンスの優先順位がアイコンを早く探したい場合にのみ当てはまります。アイコンの優先順位が見た目の良さや強いブランドアイデンティティであるなら、これらのガイドラインはあまり役に立たないかもしれません。

 

いずれにせよ、アイコン検索のスピードは、モバイルデバイスのユーザーエクスペリエンスで保証されるべきものです。ユーザーが早く情報を見つけたり、タスクを完了したりできるようにすることは、ニーズを満たすのに非常に役に立つでしょう。

 

おすすめ新着記事

おすすめタグ