Thursday, December 17, 2009

Google gripe:

Anybody noticed that in the last week or so, if you go to Google's home page, you don't see the top-line menu items until you bring the mouse into the canvas
- at which point the text fades in. Why is Google presenting the user with less information until a mouse action is performed?

FUN FACT Here is the page source for this monstrosity: (left angle replaced by [[, right angle replaced by ]])

[[!doctype html]][[html onmousemove="google&&google.fade&&google.fade()"]][[head]][[meta http-equiv="
content-type" content="text/html; charset=UTF-8"]][[title]]Google[[/title]][[script]]{k
qS5yoII6KtAPezZTWAw"},pageState:"#",kHL:"en",time:function(){return(new Date).getTime()},log:function
(b,d,c){var a=new Image,e=google,,;a.onerror=(a.onload=(a.onabort=function(){delete g[f]}
(){for(var d=0,c;c=["ad","bc","p","pa","zd","ac","pc","pah","ph","sa","xx","zc","zz"][d++];)(function
(a){google.j[a]=function(){[a,arguments])}})(c)})();"webhp";{load:{t:{start:(new Date).getTime()}}};try{
[[/script]][[style]]td{line-height:.8em;}.gac_m td{line-height:17px;}form{margin-bottom:20px;}body,td,
a,p,.h{font-family:arial,sans-serif}.h{color:#36c;font-size:20px}.q{color:#00c}.ts td{padding:0}.ts
{border-collapse:collapse}em{font-weight:bold;font-style:normal}.lst{font:17px arial,sans-serif;margin-
,#tba,#tbe,.fade{background:#fff;}#gbar{float:left;height:22px}.gbh,.gbd{border-top:1px solid #c9d7f1;
position:absolute;text-align:left;visibility:hidden;z-index:1000}.gbm{border:1px solid;border-color:
#c9d7f1 #36c #36c #a2bae7;z-index:1001}#guser{padding-bottom:7px !important;text-align:right}#gbar,
#guser{font-size:13px;padding-top:1px !important}.gb1,.gb3,.gb3i,.gb3f{zoom:1;margin-right:.5em}.gb2,
.gb2i,.gb2f{display:block;padding:.2em .5em}a.gb1,a.gb2,a.gb3,a.gb4{color:#00c !important}.gb2,.gb2i,
.gb2f,.gb3,.gb3i,.gb3f{text-decoration:none}a.gb2:hover{background:#36c;color:#fff !important}[[/style]]
var _gjwl=location;function _gjuc(){var b=_gjwl.href.indexOf("#");if(b]]=0){var a=_gjwl.href.substring(b+1);
a.replace(/(^|&)fp=[^&]*/g,"")+"&cad=h");return 1}}return 0}function _gjp(){!(window._gjwl.hash&&
google.y={};google.x=function(e,g){google.y[]=[e,g];return false};if(!
a=encodeURIComponent||escape,b=new Image,;[g]=b;b.onerror=(b.
"&ei=","nIgqS5yoII6KtAPezZTWAw",l].join("")} return true};
window.gbar={qs:function(){},tg:function(e){var o={id:'gbar'};for(i in e)o[i]=e[i];google.x(o,function()
{})}};[[/script]][[/head]][[body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=
#ff0000 onload="try{!google.j.b&&document.f.q.focus()}catch(e){};if(document.images)new Image().src=
'/images/nav_logo7.png'" topmargin=3 marginheight=3]][[textarea id=csi style=display:none]][[/textarea]]
[[script]]if(google.j.b)'hidden';[[/script]][[iframe name=wgjf style=
display:none src="" onload="google.j.l()" onerror="google.j.e()"]][[/iframe]][[textarea id=wgjc style=
display:none]][[/textarea]][[textarea id=csi style=display:none]][[/textarea]][[textarea id=hcache style
=display:none]][[/textarea]][[span id=main]][[div id=ghead]][[div id=gbar]][[nobr]][[b class=gb1]]Web[[/b]]
[[a href="" onclick=gbar.qs(this) class=gb1]]Images[[/a]]
[[a href="" onclick=gbar.qs(this) class=gb1]]Videos[[/a]] [[a href=
"" onclick=gbar.qs(this) class=gb1]]Maps[[/a]] [[a href="http:
//" onclick=gbar.qs(this) class=gb1]]News[[/a]] [[a href="http:
//" onclick=gbar.qs(this) class=gb1]]Shopping[[/a]] [[a href=
"" class=gb1]]Gmail[[/a]] [[a href="
intl/en/options/" onclick="this.blur();;return !1" aria-haspopup=true class=gb3]][[u]]
more[[/u]] [[small]]▼[[/small]][[/a]][[div class=gbm id=gbi]][[a href="
bkshp?hl=en&tab=wp" onclick=gbar.qs(this) class=gb2]]Books[[/a]] [[a href="
hl=en&tab=we" onclick=gbar.qs(this) class=gb2]]Finance[[/a]] [[a href="
en&tab=wT" onclick=gbar.qs(this) class=gb2]]Translate[[/a]] [[a href="
en&tab=ws" onclick=gbar.qs(this) class=gb2]]Scholar[[/a]] [[a href="
en&tab=wb" onclick=gbar.qs(this) class=gb2]]Blogs[[/a]] [[div class=gb2]][[div class=gbd]][[/div]][[/div]]
[[a href="" onclick=gbar.qs(this) class=gb2]]YouTube[[/a]] [[a href=
"" class=gb2]]Calendar[[/a]] [[a href="http://picasaweb." onclick=gbar.qs(this) class=gb2]]Photos[[/a]] [[a href="
?hl=en&tab=wo" class=gb2]]Documents[[/a]] [[a href=""
class=gb2]]Reader[[/a]] [[a href="" class=gb2]]Sites[[/a]] [[a href=
"" onclick=gbar.qs(this) class=gb2]]Groups[[/a]] [[div
class=gb2]][[div class=gbd]][[/div]][[/div]][[a href="" class=gb2]]
even more »[[/a]] [[/div]][[/nobr]][[/div]][[div id=guser width=100%]][[nobr]][[b]]
[[/b]] | [[a href="/url?sa=p&pref=ig&pval=3&q=
CNFA18XPfgb7dKnXfKz7x7g1GDH1tg" class=gb4]]iGoogle[[/a]] | [[a href="/preferences?hl=en" onclick=
"this.blur();;return !1" aria-haspopup=true aria-owns=gbg class=gb3]][[u]]Settings[[/u]]
[[small]]▼[[/small]][[/a]]| [[a href="
//" class=gb4]]Sign out[[/a]][[div class=gbm id=gbg]][[a href="/preferences?hl=en"
class=gb2]]Search settings[[/a]] [[a href="" class=
gb2]]Google account settings[[/a]] [[/div]][[/nobr]][[/div]][[div class=gbh style=left:0]][[/div]][[div
class=gbh style=right:0]][[/div]][[/div]] [[center]][[span id=body]][[center]][[br clear=all id=lgpd]]
[[img alt="Google" height=110 src="/intl/en_ALL/images/logo.gif" width=276 id=logo onload="
lol()"]][[br]][[br]][[form action="/search" name=f onsubmit="google.fade=null"]][[table cellpadding=0
cellspacing=0]][[tr valign=top]][[td width=25%]] [[/td]][[td align=center nowrap]][[input name=hl
type=hidden value=en]][[input name=source type=hidden value=hp]][[input autocomplete="off" onblur=
"google&&google.fade&&google.fade()" maxlength=2048 name=q size=55 class=lst title="Google Search"
value=""]][[br]][[input name=btnG type=submit value="Google Search" class=lsb onclick="this.checked=1"]]
[[input name=btnI type=submit value="I'm Feeling Lucky" class=lsb onclick="this.checked=1"]][[/td]]
[[td nowrap width=25% align=left id=sbl]][[font size=-2]]  [[a href=/advanced_search?hl=en]]
Advanced Search[[/a]][[br]]  [[a href=/language_tools?hl=en]]Language Tools[[/a]][[/font]]
[[/td]][[/tr]][[/table]][[/form]][[br]][[/center]][[/span]] [[span id=footer]][[center id=fctr]][[br]]
[[font size=-1]][[a href="/intl/en/ads/"]]Advertising Programs[[/a]] - [[a href="/services/"]]
Business Solutions[[/a]] - [[a href="/intl/en/about.html"]]About Google[[/a]][[/font]][[p]][[font size=-2]]&
copy;2009 - [[a href="/intl/en/privacy.html"]]Privacy[[/a]][[/font]][[/p]][[/center]][[/span]] [[/span]]
[[script]]function _gjp() {!(location.hash && _gjuc()) && setTimeout(_gjp, 500);}google.j[1]={cc:[],co:
'[[div id=ghead]][[/div]][[span id=body]][[/span]][[span id=footer]][[/span]][[span id=xjsi]][[/span]]'};
[[/script]][[script]]function wgjp(){var xjs=document.createElement('script');xjs.src=
'/extern_chrome/cbc2f75bf9d43a8f.js';(document.getElementById('xjsd') || document.body).appendChild(xjs)};
[[/script]][[div id=xjsd]][[/div]][[div id=xjsi]][[script]]if(google.y)google.y.first=[];if(google.y)
google.timers.load.t)google.timers.load.t.xjsls=(new Date).getTime();},0);
document.f.q,'','','9zJRXSxvzLa2DsKG_Xtq_Q');(function(){ var{};a.f=1;a.s=1;a.a=(new Date).
getTime();google.rein.push(function(){a.f=1;a.s=1; a.a=(new Date).getTime()});google.dstr.push(function()
{google.fade=null});function m(b,g,e,f){var d,c=[],i=[];for(var h=0,k;k=b[h++];){var l=document.
getElementById(k);if(l)c.push(l)}for(var h=0,j;j=g[h++]; ){var o=n(j[0],j[1]);while(d=o.pop())c.push(d)}
while(d=c.pop())i.push([d,"opacity",e,f,0,""]);return i} function n(b,g){var e=[];for(var f=document.
getElementsByTagName(b),d=0,c=f[d];c=f[d++];)if(c.className==g)e.push(c); return e}google.fade=function(b)
{b=b||window.event;var g=1;if(b&&b.type=="mousemove"){var e=b.clientX,f=b.clientY;g=a.x||a.y?Math.abs
(a.x-e)+Math.abs(a.y-f):0;a.x=e;a.y=f}var d=(new Date).getTime(),c=d-a.a; if(google.fx&&g&&c]]602)if(a.f)
{a.f=0;var i=["fctr","ghead","pmocntr","sbl","tba","tbe"],h=[["span","fade"],["div","gbh"]];google.fx.
animate(602,m(i,h,0,1))}}; })();});if(google.j&&google.j.en&&google.j.xi){window.setTimeout(google.j.xi,0);
google.fade=null;}[[/script]][[/div]][[script]](function(){function a(){google.timers.load.t.ol=(new Date).
if(window.addEventListener)window.addEventListener("load",a,false);else if(window.attachEvent)window.
attachEvent("onload",a);google.timers.load.t.prt=(new Date). getTime(); })();[[/script]]

UPDATE: In comments, "Anonymous" provides a link to a Google page justifying the change:
"For the vast majority of people who come to the Google homepage,
they are coming in order to search, and this clean, minimalist approach gives them
just what they are looking for first and foremost. [...] Since most users who are
interested in clicking over to a different application generally do move the mouse
when they arrive, the "fade in" is an elegant solution that provides options to
hose who want them, but removes distractions for the user intent on searching.
Here's my response:
Thanks for the link.

I do not think that the "minimalist approach" has any value whatsoever because the
Google search box is very clearly identifiable even after the text fades in. It's
not as if the page is full of junk (e.g. Yahoo home pages) that requires scanning all
over the place to find the search box.

Also, the fade-in is too slow.

Here is what Google has to say: (my bold)
in the end, the variant of the homepage we are launching today was positive or
neutral on all key metrics, except one: time to first action
. At first, this worried
s a bit: Google is all about getting you where you are going faster — how could we
launch something that potentially slowed users down? Then, we realized: we want
users to notice this change... and it does take time to notice something (though in
this case, only milliseconds!). Our goal then became to understand whether or not
over time the users began to use the homepage even more efficiently than the control
group and, sure enough, that was the trend we observed.

They admit that it's slower, but want the user to notice the change - presumably to
make them aware of the other search options (e.g. images).

You could do that by putting the links up immediately and then flashing the
background briefly for each category (or underline or whatever).

Also, the claim that it takes only milliseconds is misleading. I time it at about 50
ms, but if you have a PC under heavy load (or swapping), the process may not come
back to execute the fade-in in the time requested - resulting in a slower-to-see-
links-experience. In that scenario, I am forced to wait until I see the link and then
I move to it (in "human time") But if I see it immediately, I can move the mouse
to the link (in the slower "human time"), by then the PC may be finished
handling the other process requests, which means I don't notice any delay.

The Google change is not optimal and their reasoning for it is flawed.

Others are not impressed with it. Here are some blog entries w/comments on it: 1, 2, 3

UPDATE: There is a petition to get Google to give users the option to turn off the fade-in here.

UPDATE2: On the other hand, you have fans of the fade-in (when the mouse enters any part of the canvas) writing this:
Great idea. I would say it would even be nicer if the fade in only
comes when the mouse is hovered over the area where the extra information is shown.
Which would mean moving the mouse over the entire canvas to discover whatever links were there to fade-in.
Some people are impressed with visual dazzle and don't care about efficiency.


Google explains their decision here.

"For the vast majority of people who come to the Google homepage, they are coming in order to search, and this clean, minimalist approach gives them just what they are looking for first and foremost. [...] Since most users who are interested in clicking over to a different application generally do move the mouse when they arrive, the "fade in" is an elegant solution that provides options to those who want them, but removes distractions for the user intent on searching."

By Anonymous Anonymous, at 12/17/2009 12:41 PM  

I'm with you on this one, Q. It seems like a big gimmick, with little benefit.

By Anonymous Daniel, at 12/18/2009 3:21 PM  

A big gimmick? Are you kidding? It's small enough to go unnoticed by most users. Besides, most people I know who use the features in those links tend to have them bookmarked or go to them through faster means than through

I often like the political commentary on this blog, but some of these tech posts read like an updated shout of "Get of my lawn!".

By Blogger Ben F, at 12/19/2009 11:33 AM  

Less clutter by using more code, how logical.

Here's some more 'cool' stuff you'll get with this 'improvement':
1) More HTML, CSS & JavaScript. Means:
- More jobs for your CPU (yeah!) (performance);
- More bytes to push through your internet connection (load time);
2) People now actually have a reason to revert to IE6 (not compatible);
3) Adds additional fun to an already 'challenging' Google interface design (Google Groups);
4) Seems a logical step after moving the Web Image Videos Maps News links from the middle to the top-left corner.
And the list goes on!

Way to go Google. It just gets better every time.

By Anonymous Coen Naninck, at 12/24/2009 2:22 AM  

The fade us worthless and totally irrelevant. If I'm coming to Google to click on the news link at the top of the page my mouse is there waiting on the link which is downright annoying. Do all of us simpletons a favor and can the fade.

By Anonymous Anonymous, at 12/24/2009 4:08 PM  

Having to wait on the news link before it appears is both annoying and worthless. Please remove the fade garbage and give me back a page where I don't have to wait on links to appear before I can click them.

By Anonymous Anonymous, at 12/24/2009 4:10 PM  

Hate the GOOGLE fade in. Nothing "elegant" about it. It is simply ANNOYING!

How "distracting" is the simple Google page with a one line menu?

Stop the fading! Where do we picket?

By Anonymous Anonymous, at 12/24/2009 9:47 PM  

If waiting 1 second for it to fade in takes too long for you and your rushed lifestyle, why don't you just bookmark or make the news page your home page. Or if in fact your system cant handle the simple task of fading text, i think its time to upgrade your system.

By Anonymous Anonymous, at 1/04/2010 11:50 AM  

Post a Comment