web-dev-qa-db-ja.com

クリックしやすいように、ロゴはどのくらいの大きさにすべきですか?

私は古い質問のいくつか、つまり 「ホーム」ボタンはまだ必要ですか?ホームボタンvsロゴリンク? をざっと目を通していましたが、ホームロゴは、ホームページに移動するための一般的なリンクとして機能し、人々はそれを認識しています。

:私はこれを読みました 2012年のUXトレンドについての記事 へのロゴリンクを使用している人々についてこれを述べていますホームページに行く

観察したユーザビリティテストでは、サイトのロゴをクリックするとホームページに移動することを知っているユーザーはほとんどいません。多くのユーザーは、ブラウザの戻るボタンを使用して自宅に戻ります。ただし、ロゴをクリックすることは一般的に認められている基準であり、ほとんどのWebサイトはこの規則を使用しています

とは言っても、ホームリンクとしてのロゴの使用は珍しいことではなく、正確なマウスの配置を必要とせずに簡単にクリックできるようにするには、ロゴの最小サイズが必要だと思いました。

新しいfacebookレイアウトで使用されている小さなfacebookアイコンがマウスを使用していない限りクリックするのが非常に困難であることを発見した後も、私の質問は刺激を受けました

enter image description here

:ロゴのサイズはデザインに依存し、明確な答えはありませんしかし、ホームページへのナビゲーションを促進するこのような重要なリンクでクリック可能性が簡単であることを保証するための推奨基準はありますか?とサイズを結び付ける別の質問は、ロゴの通知性です

7
Mervin

誰かがあなたのウェブサイト/サービスにPCまたはタッチデバイスからアクセスするかどうかわからなくなったので、問題はもはやクリック可能性ではありません。したがって、タッチデバイスの使いやすさに基づいてサイズを選択するする必要があります。そうすると、両方でうまく機能します。

私は通常、Android HIGに従います。これは、クリック可能なオブジェクトの最小サイズ(アクティブなクリック可能な領域であり、視覚的な領域ではない)を目指す必要があると述べています両方の次元で48 cssピクセル 。一般的に、48x48は最小サイズであると考えてください。iOSHIGは代わりに44ピクセルを提供します。これは古いですが、まだ使用可能です。

2
JohnGB

ここにもう一度行きます... :)しかし、本当に-「ロゴを大きくする」という要素はまだ存在しますが、ロゴの拡大/縮小にはいくつかの合理的な議論がありますね。

私の意見では、いくつかのことに集中することは良いことです:

  1. ヘッダー:「かなり大きなロゴ」を配置する場所だと思います。この場合のようにかなり大きく、それは主にシステムの設計に依存します。

  2. 粘着性のあるトップメニュー:サイズが小さいため、ロゴを大きくすることはできませんが、これは正常です。スティッキートップメニューは、とにかくデスクトップデザインで主に使用されます。

  3. システムは何のためですか?ツールですか?マイクロサイト?コーポサイト?ウェブサイトが異なると、ロゴのサイズに異なるストレスがかかります。例:

    • マイクロサイトの場合、大きなビジュアルがより重要であり、ロゴがそれに付随しているだけです。左上隅だけでなく、ビジュアルの下にステッカーとして配置するための非常に多くのオプションがあります。ロゴをクリックしても、必ずしもどこにも誘導されないため、問題はそれほど大きくありません。

    • ロゴがプロパティの署名のようなコーポサイトの場合、ロゴは大きくする必要がありますが、同時に、より分離することで同じ効果を得ることができます。ブランドが強い場合は、それよりも小さくなる可能性があります。とにかく、どちらの場合でも、クリックするのに十分な大きさになると思います。

    • ツールの場合、トリッキーになります。一部のツールは同時にブランドであり、ロゴは1つしかありません。 http://www.creativesandbox.com/work のように、会社のロゴに基づいてロゴが作成されていて、ほとんどの場合ブランドが含まれているため、会社のロゴを付ける必要はありません。また、場合によっては、2つのロゴがあります。1つはツール自体用で、もう1つはブランド用です。しかし、私の目にあるツールは、ロゴを何にも使用せず、明確な内部ナビゲーションを備えている必要があります。ナビゲーションは非常に機能指向である必要があります。ロゴは小さいままにすることができ、データやその他のツールメカニズムのために残された領域のほとんどを提供する必要があります。

  4. ロゴはスケーラブルですか?それはどのように構成されていますか、それは水平または正方形、あるいはおそらく垂直ですか?残念ながら、それはクリック可能性に影響を及ぼします。1つの次元で小さくしたい場合や必要な場合は、他の次元で小さくなる場合があるためです。

  5. どのデバイスに表示されますか?ユーザーがタップできるようにするには、タッチデバイスに大きいロゴが必要です。 http://developer.Apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines.html #// Apple_ref/doc/uid/TP40006556-CH13-SW41 。これはある観点からの制限かもしれませんが、少なくともそれは定義されています。この場合、ロゴの場合と同様に、クリック可能な要素の分離についても検討することをお勧めします。

0
Dominik Oslizlo