Yes, yes I'm not the customer I'm the product
July 7, 2011 1:54 PM Subscribe
Google, Gmail and Facebook rolled out some major redesigns recently. In fact they look quite similar to me; a bunch of random floating lists and boxes, with a dark bar at the top. What's the philosophy beside the aesthetic choices? I realize that there are technical improvements going on behind the scenes and that taste is subjective. Still, there must be some reason Google and Facebook would make major cosmetic changes. Hey designers, what's the logic?
I don't work for Google or Facebook, but the company I do work for makes changes like these to our products all the time. For one - there are graphic design trends just like there are clothing trends. For another - there's always testing going on to gauge user response to certain elements. If a big flat button gets more clicks than the tiny one with the gradient, then the big flat button wins. It's all geared around what will keep the user around longer (or what will lead them to the thing that Google or Facebook or whomever wants them to click).
posted by katillathehun at 2:02 PM on July 7, 2011
posted by katillathehun at 2:02 PM on July 7, 2011
I'll throw out a technical possibility: the ongoing rise of AJAX. Expecting your web visitors to have Javascript has gone from a "fancy, don't depend on it" thing in the mid-nineties to a "yes, they just about all have it" mentality.
Rather than reloading a whole web page, AJAX allows web programmers to have just a portion of the page change up by quietly talking to the server, in the background. Everything else stays up while this is going on (if properly done). And, of course, HTML and CSS are still focused on rectangular bounding shapes, so ... boxes.
Little boxes updating stuff when you click on them.
posted by adipocere at 2:02 PM on July 7, 2011 [2 favorites]
Rather than reloading a whole web page, AJAX allows web programmers to have just a portion of the page change up by quietly talking to the server, in the background. Everything else stays up while this is going on (if properly done). And, of course, HTML and CSS are still focused on rectangular bounding shapes, so ... boxes.
Little boxes updating stuff when you click on them.
posted by adipocere at 2:02 PM on July 7, 2011 [2 favorites]
It's a method of separating content. You use different colors (or saturation of the same color) to distinguish one section of the site from another. Often in those header areas you have account settings or navigation.
It's all about consistency and predictability for the user. Like, the average user knows if they click a logo image, it will often take them to the home or main page of a site. Different colored text are most likely links, etc.
Twitter, Metafilter, Weather.com and LiveJournal are just some examples of other websites that use a darker header to distinguish navigation verses the unique content on the page.
You see the same thing in side bar menus.
in general it's been like this ever since web 2.0 hit it off.
posted by royalsong at 2:03 PM on July 7, 2011
It's all about consistency and predictability for the user. Like, the average user knows if they click a logo image, it will often take them to the home or main page of a site. Different colored text are most likely links, etc.
Twitter, Metafilter, Weather.com and LiveJournal are just some examples of other websites that use a darker header to distinguish navigation verses the unique content on the page.
You see the same thing in side bar menus.
in general it's been like this ever since web 2.0 hit it off.
posted by royalsong at 2:03 PM on July 7, 2011
Web design is becoming less experimental and more functional. Turns out that a dark-colored navigation bar at the top of the page is a good idea because it centralizes interface elements and builds on the semantics of the desktop OS user interface, and, more importantly, not copyrightable.
posted by Electrius at 2:19 PM on July 7, 2011 [1 favorite]
posted by Electrius at 2:19 PM on July 7, 2011 [1 favorite]
Response by poster: adipocere:Rather than reloading a whole web page, AJAX allows web programmers to have just a portion of the page change up by quietly talking to the server, in the background. Everything else stays up while this is going on (if properly done). And, of course, HTML and CSS are still focused on rectangular bounding shapes, so ... boxes.
Thanks adipocere, that's interesting and is kind of a technical answer to my aesthetic question. From royalsong and Electrius I gather that the dark navigation bar is quickly becoming standardized. I guess that leaves two points to clarify:
1. Why then are boxes so minimal as to appear to be lists of floating text? To me, they appear to float non-contextually in space, and that there is too much spacing and whitespace throughout.
2. Why would Google (especially) move to a darker color palette? Not only in the navigation bar, but on all the buttons? Google had a recognizable color scheme for years.
posted by 2bucksplus at 2:28 PM on July 7, 2011
Thanks adipocere, that's interesting and is kind of a technical answer to my aesthetic question. From royalsong and Electrius I gather that the dark navigation bar is quickly becoming standardized. I guess that leaves two points to clarify:
1. Why then are boxes so minimal as to appear to be lists of floating text? To me, they appear to float non-contextually in space, and that there is too much spacing and whitespace throughout.
2. Why would Google (especially) move to a darker color palette? Not only in the navigation bar, but on all the buttons? Google had a recognizable color scheme for years.
posted by 2bucksplus at 2:28 PM on July 7, 2011
Yeah, sometimes the technical impacts the aesthetic when it comes to the web. I might argue that many aesthetic choices are subtly manipulated by the technical. For example, I have watched graphic designers bump up across the "what do you mean I cannot make text smoothly fill circles? I have to use boxes?" issues since the mid-nineties.
Take your whitespace issue: we have standard 4:3 screens, widescreens, and mobile phones. How do design for all of them? The answer is liquid displays where the boxes space themselves out proportionally according to the horizontal real estate available.
Or the darkness: Google may be upping the contrast because more users are looking at the site on mobile phones, with the sun bouncing off of the display.
Sometimes, waves of "style" will sweep through. Oh, let's make our buttons all rounded. Rounded everything! No more left navigation, let's do top navigation! Fashion can be a large part of those changes.
posted by adipocere at 2:54 PM on July 7, 2011
Take your whitespace issue: we have standard 4:3 screens, widescreens, and mobile phones. How do design for all of them? The answer is liquid displays where the boxes space themselves out proportionally according to the horizontal real estate available.
Or the darkness: Google may be upping the contrast because more users are looking at the site on mobile phones, with the sun bouncing off of the display.
Sometimes, waves of "style" will sweep through. Oh, let's make our buttons all rounded. Rounded everything! No more left navigation, let's do top navigation! Fashion can be a large part of those changes.
posted by adipocere at 2:54 PM on July 7, 2011
When I saw the Google changes, I thought: it looks like a Mac. And so it implies "application" not "web page" and the accompanying sense of solidity and possibilities -- go on, click on that, it might pop up a menu!
posted by galaksit at 3:23 PM on July 7, 2011
posted by galaksit at 3:23 PM on July 7, 2011
Why would Google (especially) move to a darker color palette? Not only in the navigation bar, but on all the buttons? Google had a recognizable color scheme for years.
Browser interface elements like the location bar and buttons are called "chrome", also the namesake of Google's browser. With their new color scheme, Google is trying to trick your brain into thinking that their "menu bar" is not a part of the web page, but part of the chrome. It's consistent across different Google properties, so it really does feel more like a normal OS menu bar.
In other words, Google made a browser called Google Chrome which ironically minimizes traditional chrome and then they added some new chrome to Google.
posted by qxntpqbbbqxl at 11:30 PM on July 7, 2011
Browser interface elements like the location bar and buttons are called "chrome", also the namesake of Google's browser. With their new color scheme, Google is trying to trick your brain into thinking that their "menu bar" is not a part of the web page, but part of the chrome. It's consistent across different Google properties, so it really does feel more like a normal OS menu bar.
In other words, Google made a browser called Google Chrome which ironically minimizes traditional chrome and then they added some new chrome to Google.
posted by qxntpqbbbqxl at 11:30 PM on July 7, 2011
The design and layout of Facebook never made any sense to me, a user who only ever viewed the site on a PC. Then I got an android phone. Now it makes sense. Now sites that don't cater for fat phone fingers make me stabby.
posted by Ness at 2:54 AM on July 8, 2011
posted by Ness at 2:54 AM on July 8, 2011
This thread is closed to new comments.
posted by nomisxid at 2:00 PM on July 7, 2011