web-dev-qa-db-ja.com

ユニークなアイコンの輪郭は人々のスキャンに役立ちますか?

何年も前、私は優れたアイコンデザインチュートリアルを見つけました。アイコンに独自の輪郭があると、ユーザーが探しているアイテムをスキャンするのに役立ちます。これに該当する場合、iPhoneとAndroidアプリのアイコンが独自の輪郭を使用しないのはなぜですか?

iPhone

iPhoneのアイコンはすべて丸みを帯びた正方形です。アプリを調整するための唯一の視覚的な手がかりは、内部のデザインです。あなたのことは知りませんが、マップアプリが見つかるまで5秒かかることがあります。

iphone

Android

Androidアイコンには、いくつかのコンターバリアントしかありません:正方形、円、吹き出しなど...私の意見では、Androidの限られたコンターのセットは、iPhoneの均一なコンターよりも劣っています。輪郭を利用して解析を助けるようにだましますが、効果はありません。たとえば、音楽スピーカーのアイコンは、カメラや設定のアイコンと同じ同心円になっているので、見つけようとすると混乱することがよくあります。

Android app icons

ウィンドウズ

昔ながらの昔ながらのWindowsスタイルのアイコンはどうなりましたか? Windowのアイコンは、一貫性/スタイルよりもスキャン性を向上させると思います。ほぼすべての輪郭が一意であるため、Windowsアイコンをぼんやりと見回すことはありません。

Windows start menu

112
JoJo

何年も前に

それがおそらく重要な要素です。現在使用しているレンダリング技術は、1985年や1995年とはかなり異なります。

さて、それは本当に良いアイコンデザインの原則を変えるべきではありませんが、それは長年の傾向を変えてきました。 OS XとWindowsは、ほぼ完全なイラストと3Dレンダリングをアイコンとして実装することで、長年にわたって徐々に「輝き」を増しています。そして、人々はピカピカになりがちです…アイコンをデザインする私たちを含めて。 ; o)

幸いなことに、それはほとんどシステムの外に出てきたようで、今はより健全なビジュアルアイコン言語に戻っています。 Windows Phone 7は、アイコンデザインの従来の概念に戻る興味深い動きです。

さて、それがすべて言ったように、問題はアプリのアイコンに関するものでした。アプリアイコンは、マーケティング部門が望んでいる/必要としているものと同じくらい、UXと同じくらい重要です。私は、アプリの内部UIアイコンよりもアプリアイコンを少し寛容にすることができます。アプリのアイコンは本当にミニ広告です。しかし、私は同意します。一部のアイコン(マップを含む)は、本当のアイコンではなく、小さな写真であるため、失われます。

25
DA01

少し関連する注意点について。丸みを帯びたコーナーと鋭いコーナー、および丸みを帯びたコーナーが認識を助けるかどうかについていくつかの研究が行われています。

「鋭いエッジのある長方形は、実際には、たとえば同じサイズの楕円よりも少し認知的な目に見える労力を要します。私たちの「中心窩」は、円を記録する際にさらに高速です。エッジは追加の神経画像ツールを含みます。したがって、プロセスは減速した」と語った。

ソース: http://www.uiandus.com/blog/2009/7/26/realizations-of-rounded-rectangles.html

26
JonW

オブジェクトの認識に役立つ主要な視覚経路は2つあります。背側経路は、ワークアウトに関するすべての要素と、それとの相互作用の方法です。 ;腹側経路は、whatが実際にどのように見えるかについてです。 ( ngerleider&Mishkin、198 ; Goodale&Milner、1992 )。ニューロイメージング研究の証拠は、物体を拾うつもりもない、または運動と何らかの相互作用がある場合でも、脳はある程度、おそらくどのように働いているかを示しています(例 Faillenot et al、1997 )。

ご指摘のとおり、配列内の個々のアイテムを区別する方法はいくつかあります(形状、色、輪郭など)。輪郭は識別可能性を向上させる優れた方法になると思います。すべてのアイコンがiPhoneのように同じ輪郭を持っている場合、「準備から把握」の観点から、それらはすべて同じモーターの準備を招きます。ただし、アイコンの輪郭が変化する場合は、準備を把握する必要があります。つまり、アイコンを区別するための(モーターの)方法を脳に与えており、達成するために意識する必要はあまりありません。

背側の「場所」経路は、アイテムの空間的な配置にも関与しています。上記で説明した位置情報については同意します。位置情報は、どこを探すかを覚えておく方法として優れていますが、ユーザーが場所を記憶するための、ほぼ同一の画面に相当するアプリをユーザーがいくつか持っていると考えると、その空間情報は希釈されます(ただし、これは推測にすぎません。一意性が記憶に残るという一般的なコンセンサスを超えるデータを指すことはできません)。また、誰か他の人が指摘したように、多くの人がアプリアイコンを移動して取得したり、その有用性を再評価したりしているため、空間ナビゲーションキューは必ずしも長期にわたって安定しているとは限りません。

アイコンの輪郭を標準のApple角の丸い四角形)に制限する場合、それは他のモーターベースではないもの、つまり腹側経路の「機能」にまで及ばなければなりません。私は驚いていますここでは誰も「色」のドラムを強く叩いているわけではありません。色は、携帯電話のアイコンを検索する際にアイコンを区別する主要な方法の1つです(そのため、多くのアプリ開発者が青の色合いを選択していることに気を取られます)。 iPhoneのマップアプリを見つけるのは本当に難しいことです。それは、視覚的に目立つものではないためだと思いますが、それは、カラースキームが軍の砂漠の迷彩に近いものです(宝石色のアプリの見つけやすさと比較してください)。 。ここで進化的なことが起こっているのではないかと思います。私たちは非常に細かく識別できる高度に洗練されたビジュアルシステムを進化させましたが(少なくとも十分な専門知識と処理時間を前提として)、実際に何かを動かさなくても注目を集めることははるかに簡単です。私たちに何か変わったものを与えることによって達成されました鮮やかな色で見てください。

最後に、余談ですが、目的の経路が見つかるまでに数秒かかると言うのは興味深いことです。腹側経路は一般的に背側よりも遅いです。

13
finiteattention

私は100%同意します。andriodアイコンの端はそれぞれそれ自体がNiceですが、目をスキャンすると非常に混乱します。

ただし、そのチュートリアルからのアドバイスはまだしっかりしています。彼らはアイコンの中でについて話している。大胆な形状と独特の輪郭が人々の目を引きます。

Bess Hoからのプレゼンテーションから私が収集したもう少しのアドバイス:(あなたはそれをチェックアウトできます [〜#〜]ここ[〜#〜]

  • リアルな
  • テクスチャの使用
  • アプリの小さなプレビュー
  • uIのミニバージョン
  • レイヤーを使用した奥行きの表示
  • 小さなバナーを使用して無料またはバージョンを表示する#

そしてそこにもいくつかのポインタがあります。

12
jonshariat

この質問に対する回答はすべて知っていますが、これを見ただけで、関連性があると思いました。

Xの動き|異なるアイコンのアウトラインがユーザーのスキャンを高速化する理由

均一なアウトラインにより、アイコンの形は同じに見えます。それらはすべて同じように見えるため、ユーザーがアイコンをスキャンしたときに特定のアイコンが目立つことは困難です。代わりに、アイコンの周りに視覚的なノイズがあるため、アイコンの写真に集中する必要があります。ユーザーの視覚的パスは、アイコンに固執する前に、まず背景の境界にぶつかります。

enter image description here

9
Sam K

Androidの等高線を使用すると、等高線を変更しない場合と比較して、検索スペースが確実に制限されます(スキャンの目的は、簡単な事前チェックを行うことで検索スペースを制限することです)。スピーカーとカメラのアイコンが非常に似ているために混乱している理由は完全にわかりますが、スキャン時に大きなセットで簡単に見つけられる2つのアイコンのみを区別する必要があります。それは完全に小さくなります。

私は現時点では視覚的な識別タスクに関する研究論文を見つけるのに運がありませんが、研究は行われています(通常はアイコンではなく単語と色で行われていますが、原則は同じですWordが完全に読まれる前に、長さや簡単に見つけられるプロパティなどの形状チェックを行います。

7
Inca

最初の使用を除いて、アイコンの形状が本当にそれほど重要かどうかはわかりません。人々はしばしばwhereアイコンがあるべきことを覚えています。これはスキャンよりもはるかに高速です。したがって、スマートフォンユーザーにとって、形状の均一性は使いやすさの問題ではないかもしれませんが、美的魅力を与えます。

4
ftt

アイコンをどのように表示するかによって異なります。間隔が狭いアイコンの形状が少ないと、アイコンの形状がわかりやすくなります。それらを互いに近づけると、さまざまなものの圧倒的なコレクションがありますが、どれも目立ちません。

Androidアイコンの問題は、形状が重複することではなく、不規則な形状がグリッドを偽装してスキャンを容易にすることです。

3
Tom Clarkson

あなたが提示したAndroidアイコンのセットよりも、iPhone Springboardのスキャンの方が効率的だとすぐに感じました。

IOSで一貫して形作られたアイコンは、アイコンの形を考える必要がなく、「正方形」の色とパターンに焦点を合わせる必要がありません。 Androidアイコンを見ると、最初の焦点がわかりますisアイコンの形状です。これにより、使用されている内部の色やパターンを見るのが難しくなります。アイコン内で、特定のアプリケーションのスキャンが煩雑になります。

2
Nick Bedford

これは、本の内容James Kalbach "Designing Web Navigation" は、情報の形状として参照されます(初版では40ページ以降)。

ここで彼は、研究者Andrew DillonMisha VaughanおよびElaine Tomsがこれらの問題について調査を行いました。

0
agib