Google: anatomy of a (half-assed) web redesign

There are many things Google is good at. Internet search and targeted advertising clearly being the top two. I use and appreciate several of Google’s products, especially Gmail, Google Reader and Chrome. But I only use Gmail as a reliable email provider with great spam filtering; I hate the web interface, and check my mail using the native mail clients on my Mac and iPhone. I use Google Reader solely to manage my subscriptions, whereas I actually read my RSS feeds, on all of my devices, with Reeder. And the only times I fire up Chrome are when I need to use Flash, per John Gruber. In general, I like Google’s products for the power of their underlying technologies, just as I hate them for their miserable user interfaces.

I think there are very few people who would consider design to be one of Google’s strong suits, from their traditionally un-designed home page, to their hideous logo (which, nonetheless, went through several apparently well-, or at least extensively-, considered revisions), to the notorious case where, engineers to the core, they logically weighed the relative merits of 41 shades of blue.

If you actually use any of Google’s websites directly, you’ve surely noticed in the last 24 hours that there has been a redesign. The most distinctive feature is the jarring black bar now at the top of all (well, most) pages. Personally I’d prefer something a little more subtle, but it’s tolerable, and presumably achieves its goal of getting your attention by being the only solid black area on your computer screen.

What really bothers me about this redesign is the lack of internal consistency as you dig deeper. To wit, let’s have a look at the landing pages of Google’s three biggest search tools (as determined by their placement in the black bar): Web, Images and Search:

The main things I notice about the main Google (Web) search page compared to the previous version are that the logo is slightly smaller (and appears to have been refined in terms of the extent of 1997-era Photoshop effects applied to it, although I think that change happened a few months ago), and that the “Google Search” and “I’m Feeling Lucky” buttons have been redesigned. They have very slightly rounded corners, an extremely subtle off-white gradient, and are set in dark gray Arial bold 11-point (or so) type.

On Google Images, the logo appears to be basically the same (although perhaps a bit more dithered), but it is much higher on the page. The search box itself is darker and has a drop shadow. The “Search Images” button is larger, has sharp corners and a more intense gradient, and is set in black Arial, larger and normal weight. If I’m not mistaken, this is how the buttons on most Google sites looked prior to yesterday’s redesign, so this appears mainly to be a case of Google Images not keeping up with the changes happening elsewhere.

The page is also cluttered up with instructions and a rather arbitrary set of four sample images. I never bothered to read that text or figure out why the images were there until just now as I was writing this article. Being able to perform a visual search by dragging a sample image into the search box is a really cool idea, but anecdotally I would suggest Google has a daunting challenge in educating users about it, if making it the only thing on the page besides the search box itself still doesn’t get the user’s (i.e. my) attention. Maybe their insistence on using undifferentiated plain text (while it might make Jakob Nielsen proud) for everything is part of the problem.

Google Videos is really the odd man out. A smaller logo, set too far down on the page, and a bright blue search button with no text, just a magnifying glass icon, that would look more at home on a Windows XP start screen than on a Google page. (Astute observers will also note from these screenshots that Google Videos, unlike Google Images and Google Web, displays a glowing focus state on the search box, which is due to the lack of :focus { outline: none; } on the CSS for that element.)

I realize this blue button is more of the direction Google’s heading and I do like it visually, even if I don’t think the search button needs to be so prominent on a page that contains very little else. But the thing that bothers me is the overall inconsistency between these tools.

Consistency is a big buzzword for me. To me it is absolutely the most important thing to consider in good UX and UI design. It doesn’t matter how novel your design elements are; if you present them consistently users will quickly learn how to use them and will gain confidence with your tools. They will also gain expectations that you then have to manage. These do impose limitations on you in the future, sure, but they also relieve you of the burden of having to reinvent every page.

Consistency demands a good style guide, something that is easy to overlook. And just as important as having the style guide is having the commitment to using it. That’s something even a company as big as Google clearly struggles with.

Couch to 5K week 4 playlist

If you follow me on Twitter (and if not, well…) you know that for the past few weeks I’ve been trying to conquer decades of sedentary lifestyle by way of the Couch to 5K iPhone app. It’s been working out very well so far!

One thing I have yet to do is consciously plan out a playlist to correspond to the cycles of walking and running that are a key to the Couch to 5K program. Well, on Thursday I will be running the final day of week 4, nearing the halfway point (what??!!) in the program, so it’s time to remedy that situation.

Here then is my Couch to 5K week 4 playlist, for your consideration:

Action Song Artist Time
Warm up One More Robot / Sympathy 3000-21 The Flaming Lips 5:00
Run The Distance Cake 3:01
Walk Little Fishes Brian Eno 1:30
Run Smells Like Teen Spirit Nirvana 5:01
Walk And I Love Her The Beatles
Run Highly Suspicious My Morning Jacket 3:05
Walk Pigs on the Wing (Part One) Pink Floyd 1:25
Run Uprising Muse 5:05
Cool down Computerworld Kraftwerk 5:08

It will be interesting to see how this plays out. Clearly I focused primarily on the timing and general mood of the songs when programming this playlist, giving… well… absolutely no consideration whatsoever to the transitions between the songs. But I think it will still be successful. It helps me a lot when running to focus on the music and to think, “OK… I run until the end of this song.”

And yes, when I get to running for the entire time, I will have a song for that. I have 14 songs in the library on my iPhone that are over 20 minutes long.

Yes, it’s… yet another redesign

I’ve redesigned this blog more times than I can count. Many of those redesigns have been incremental tweaks, to be sure, but still, there’ve been probably dozens of times that I’ve completely torn it down and rebuilt it, more-or-less from scratch. This is one of those times.

I’ve also (finally) wised up a bit. Usually when I post these redesign announcements, I don’t include a screenshot… as if this is the last time I’ll ever redesign the site. I wish I could go back to some of those earlier posts and see what the site actually looked like when I announced the changes. I can remember most of them, even from the pointless ramblings I composed to commemorate their creation. But it would still be nice to see them on the outside of my brain.

There are some big changes in this version. Most significantly, I’m using two (relatively) new technologies as both key components of the underlying structure and also as inspiration for the design itself. They’re created (or at least inspired) by some amazingly talented people in this field, so they deserve recognition.

First, the fonts are being delivered by Typekit. Finally, web designers have more fonts at their disposal than Arial, Georgia and Verdana. (Yes, there are some others, but these three are the most excessively used.) There are some awesome people behind Typekit, but I especially want to call out founder Jeffrey Veen and creative director (and probably the best web designer on the planet) Jason Santa Maria.

Next up, we have a responsive web design using CSS3 media queries. (Yes, that’s probably the most boring possible link about one of the coolest technologies out there right now in web design.) I think we have Ethan Marcotte to thank for devising this brilliant use of CSS3 media queries to dynamically adapt web page layouts to the size of the browser window. At the very least, he named it and helped spread the word with the aforelinked A List Apart article and his new book.

In short, by employing CSS3 media queries to adjust the page layout to an appropriate width and number of columns (and smartly resizing elements within), it’s possible to easily adapt a web page’s presentation to suit the capabilities and dimensions of a number of screens. Just take a look at this site on your 27-inch iMac and then on your iPhone (or your roughly equivalent non-Apple devices) to see what I mean. I’m sure I’m not doing Ethan’s work justice, either in my description or in my application of it here, but I’m excited about the potential regardless.

It’s a great time to be a web designer!

Update: I went for less than 48 hours with Futura PT Light as my primary font for body text here, despite knowing it was too light and, perhaps, too geometric for good body type. Finally, at a friend’s prodding, I resorted to the inevitable: Proxima Nova. I love Proxima Nova. It’s the primary font I use in all of my business materials (and in my logo itself). I had envisioned a kind of ’50s retro school textbook concept with this site redesign, and Proxima Nova, a 21st century font, doesn’t fit that description, but… man, it just looks so good. So, now it’s here.

CakePHP at the command line: it’s cron-tastic!

I’m kind of surprised it’s taken this long. cms34 has been around for almost three years now, and this is the first time I’ve had a client need a cron job that relied on CakePHP functionality. (The system has a couple of backup and general-purpose cleanup tools that can be configured as cron jobs, but they’re just simple shell scripts.)

And so it was today that I found myself retrofitting my CakePHP-based web application to support running scripts from the command line. I found a great post in the Bakery that got me about 85% of the way there, but there were some issues, mostly due to the fact that the post was written in late 2006, and a lot has happened in CakePHP land over the last 4 1/2 years.

There are two big differences in app/webroot/index.php in CakePHP 1.3 compared to the version that existed at the time of that original post: first, the calls to the Dispatcher object are now wrapped in a conditional, so the instruction to replace everything below the require line should now be something closer to “replace everything within the else statement at the bottom of the file.”

The other big change is that this file defines some constants for directories within the application, and those paths are all wrong if you move the file into the app directory as instructed.

Below is my revised version of the code. Note that I also reworked it slightly so the command can accept more than two arguments as well. There’s a space before Dispatcher is called where you can insert any necessary logic for handling those arguments. (I also removed all of the comments that appear in the original version of the file.)

<?php
if (!defined('DS')) {
    define('DS', DIRECTORY_SEPARATOR);
}
if (!defined('ROOT')) {
    define('ROOT', dirname(dirname(__FILE__)));
}
if (!defined('APP_DIR')) {
    define('APP_DIR', basename(dirname(__FILE__)));
}
if (!defined('CAKE_CORE_INCLUDE_PATH')) {
    define('CAKE_CORE_INCLUDE_PATH', ROOT);
}
if (!defined('WEBROOT_DIR')) {
    define('WEBROOT_DIR', APP_DIR . DS . 'webroot');
}
if (!defined('WWW_ROOT')) {
    define('WWW_ROOT', WEBROOT_DIR . DS);
}
if (!defined('CORE_PATH')) {
    if (function_exists('ini_set') && ini_set('include_path', CAKE_CORE_INCLUDE_PATH . PATH_SEPARATOR . ROOT . DS . APP_DIR . DS . PATH_SEPARATOR . ini_get('include_path'))) {
        define('APP_PATH', null);
        define('CORE_PATH', null);
    } else {
        define('APP_PATH', ROOT . DS . APP_DIR . DS);
        define('CORE_PATH', CAKE_CORE_INCLUDE_PATH . DS);
    }
}
if (!include(CORE_PATH . 'cake' . DS . 'bootstrap.php')) {
    trigger_error("CakePHP core could not be found. Check the value of CAKE_CORE_INCLUDE_PATH in APP/webroot/index.php. It should point to the directory containing your " . DS . "cake core directory and your " . DS . "vendors root directory.", E_USER_ERROR);
}
if (isset($_GET['url']) && $_GET['url'] === 'favicon.ico') {
    return;
} else {
    // Dispatch the controller action given to it
    // eg php cron_dispatcher.php /controller/action
    define('CRON_DISPATCHER',true);
    if($argc >= 2) {

        // INSERT ANY LOGIC FOR ADDITIONAL ARGUMENT VALUES HERE

        $Dispatcher= new Dispatcher();
        $Dispatcher->dispatch($argv[1]);
    }
}

After implementing this version of cron_dispatcher.php, I was able to get CakePHP scripts to run at the command line without being fundamentally broken, but there were still a few further adjustments I needed to make (mostly in app_controller.php). Those were specific to my application. You’ll probably find yourself in the same boat.

A couple of other things worth noting: if your server is anything like mine, you’ll need to specify the full path of the PHP command line executable when running your scripts. In my case it was /usr/local/bin/php. And, the one sheepish confession I have to make: I know the goal with the way the file path constants are defined is to avoid any literal naming, but I couldn’t find a good way to get around that for WEBROOT_DIR, with the file no longer residing in webroot itself. I’ll leave fixing that as an exercise for the reader.

Good luck!

Download the Script

Download zip file... cron_dispatcher.php
cron_dispatcher.php.zip • 1.2 KB

Takin’ it to 3-2-1 Contact

I’ve been thinking this for years, but I finally decided to put it to the test. I tweeted the results, but it felt like something worth commemorating here as well.

First, a confession: I am a Michael McDonald fan. Not the latter-years, “songbook”-type crap Paul Rudd’s character made fun of in The 40-Year-Old Virgin. But the classic, late ’70s/early ’80s stuff with the Doobie Brothers, Steely Dan, and countless other backup vocals and solo tracks that inspired Yacht Rock.

As a Michael McDonald fan, I’ve listened to his work with the Doobie Brothers probably more than anyone should. Tracks like “Takin’ It to the Streets.” And another thing I’ve done a lot of in my lifetime — again, probably more than anyone should — is watch shows produced by Children’s Television Workshop for PBS in the late ’70s and early ’80s, right around the time of Michael McDonald’s peak.

So, no, I don’t think it’s an accident that what I’ve anecdotally observed is now, here, for you, concretely proven: the 3-2-1 Contact theme song is almost a direct ripoff of the transitional bridge of the Doobs’ 1976 hit “Takin’ It to the Streets.” But don’t take my word for it… your ears will tell you.

Listen to “Takin’ It to the Streets,” particularly, the section beginning at 0:47 in the clip below.

And now, the legendary title sequence of 3-2-1 Contact, whose music and imagery is indelibly etched in my brain.