How large should the logo be for easy clickability?

Question

I was skimming through some of the older questions namely Is 'Home' button still a must? and Home button vs Logo link? and there seems to be a general impression that the home logo serves as a general link to go to the home page and people are aware of it.

Note : I did read this article which about UX trends in 2012 which has this to say about people using the logo link to go to the home page

In the usability tests we observed, few users know that clicking on a site logo will take them to the homepage. Many users navigate back to home using the browser back button – even though clicking on the logo is a commonly accepted norm, and the vast majority of websites use this convention

That said, the use of the logo as a home link is not uncommon and I was wondering there was a minimum size which the logo must be to ensure that it can be easily clickable without requiring a precise mouse positioning.

My question was also fueled after finding the small facebook icon used in the the new facebook layout super hard to click unless I was using a mouse

Note : I know the size of logos will depend on the design and there is not going to be no definite answer but is there any recommended standard to ensure that clickablity is easy for such a critical link which drives navigation to the home page.Another question which ties in the with the size is the noticablity of the logo

Answer 1

The issue is no longer clickability, as you no longer know whether someone will be accessing your website / service from a pc or a touch device. So you need to choose the size based on touch device usability, and then it will work well for both.

I generally follow the Android HIG which states that you should aim for a smallest clickable object size (active clickable area, not visual area) of 48 css pixels in both dimensions. In general think of 48x48 as the smallest you should work with. The iOS HIG gives 44 pixels instead, which although old, is still usable.

Answer 2

Here we go again... :) But really - while the "make my logo bigger" factor still exists, there are some rational arguments for bigger/smaller logo, aren't there?

My opinion is that it is good to focus on several things:

1. Header: I think it is the place to put a "quite big logo". Quite big, as in this case it mostly depends on the design of the system.

2. Sticky top menu: Due to its tiny size, the logo cannot be very big and this is normal. Sticky top menu is mostly used in desktop design anyway.

3. What is the system for? Is it a tool? A microsite? A corpo site? Different websites put different stress on the logo size, e.g.:

   • for a microsite, a big visual is more important and logo is just accompanying it. There are quite a lot of options to place it, not only top-left corner, but also as a sticker, below the visual etc. Clicking a logo does not neccessarily lead anywhere, so the problem is not that big.

   • for a corpo site, where the logo is like a signature of property, the logo should be bigger, but in the same time, you can achieve the same effect by making it more isolated. If the brand is strong, it may be smaller. Anyway, in both cases I think it will be big enough to click.

   • for a tool it gets tricky. Some tools are brands in the same time, so they have just one logo. Some have logos built upon the company logo, like http://www.creativesandbox.com/work and mostly contain the brand somehow, and don't need to be accompanied by the company logo. And in some cases there are two logos: one for the tool itself, and one for the brand. But tools in my eyes need to have a clear internal navigation NOT using the logo for anything. The navigation needs to be very much functionality-oriented. Logo, can be left small, and even should to provide most of the area left for the data and other tool mechanisms.

4. Is the logo scalable at all? How is it constructed, is it horizontal or square, or maybe vertical? It does influence clickability, unfortunately, because if you want/need to go small in one dimension sometimes it makes you go tiny in the other one.

5. What device is it to be displayed on? Touch devices need the logos bigger for the users to be sure they can tap on it: http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW41. While this may be a limitation from some point of view, at least it is defined. In this case it is good to think about isolation of the clickable elements as well, the same for the logo.