Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge

Google Redux

February 28, 2006

It seems that now and perhaps into the future, all your base are belong to Google. The company has done a good job becoming the search tool of choice for the vast majority of internet users and it’s quickly becoming the name behind many useful and popular online applications and marketing tools.

What Google does not do well is apply design appropriately to its search engine interface. Other online application interfaces from Google are often done rather well, or at least not too badly. The search engine page, however, leaves a lot to be desired. Mind you, we’re talking about the most successful search tool on the Web. But it is no stretch to observe that the design of this page is pretty bad.

Their brand commands respect, so a small and simple page that otherwise works can be forgiven for what it lacks in usability and aesthetics. Up to a point.

So I’d like to do here pretty much what I did in pointing out and addressing eBay’s design failings. I hope to illustrate how Google could improve their search interface with just a few tweaks and have a page design worthy of their brand and its gravity. As with the eBay exercise this is a quick and dirty take on things, taking into account mostly visual and a modicum of usability issues. In any event, I suggest that these changes would result in an improved interface. As for those of you reading this, please, do try this at home. It is a fun and useful exercise.

Background

So how did Google get to the top with such a bad page interface? Well, Google succeed for a few reasons. First and foremost, the search page is very simple. As I observed in another recent article, simple things done poorly are much easier to swallow than complex things done poorly. For instance, eBay’s design sin is far more substantial and consequential than Google’s. Also, Google did it right; they have built a strong reputation on delivering an excellent product. Their brand commands respect, so a small and simple page that otherwise works can be forgiven for what it lacks in usability and aesthetics. Up to a point.

Time marches on and the competitive marketplace swallows up complacency every day for snacks. Doing 80% of things right is good, but competitors will work to do 85% or 95% of things right in an effort to crush your business by comparison. Because of this ever-present fact it makes no sense to leave even a small opportunity for competitors to exploit. But this is exactly what Google is doing.

Mistakes
Google

Here is Google’s current search interface. It works fairly well because it is quite simple and to-the-point. But there are a few ill-conceived ideas in the layout and poorly placed elements on the page.

Why is this here?

The placement of these elements makes for diminished usability and a fairly unintuitive experience. They appear to be placed as afterthoughts, with no reference to how this page should be used, who might be using it and how elements should be grouped.

In design, if you don't know why you're putting something somewhere you're likely making a mistake.

Everything on the page is grouped together, right in the center …all except for the links at the top right (item A). Why should they go there? What sense does it make and why are those links special so as to deserve such different treatment? The links at the bottom of the interface (item C) are also not concerned with the search function, but they’re right in the middle with everything else. True, item A is about users and item C is about Google, but it makes little sense to divorce the user-centric links off to one side with such a simple layout (and they’re really way out of things at high screen resolutions).

This page is primarily a search interface, but nearly all of the elements on the page have equal visual weight. The one group of elements that they’ve sought to make less conspicuous is the search modification links (item B). As there is no color or structure on the page, reducing the size was the only way they could de-emphasize these links. Bad call. They’re too small for some users with poor eyesight. They’re also poorly place, almost haphazardly.

In design, if you don't know why you're putting something somewhere you're likely making a mistake. If an element of the layout serves no specific purpose or if the visual or spacial properties of any element are chosen for no particular reason the result will be bad design. Don't do that. Now, let's try and improve Google's design.

Google Redux

Here’s my take on a redesign. I wanted to address both basic aesthetics issues and usability issues. Click the image for a full-size mockup of the layout, reinstated now (NOTE: the element/div heights could be elastic or fixed - again, not my concern here as I'm dealing only with look/feel and info architecture).

Google Redux image

First of all, everything is centered; that’s where the action is. Furthermore, all of the search elements are grouped together and made very conspicuous by occupying the attention-grabbing white area of the page. This way, search gets prime billing.

The search categories and form interface are wrapped in a friendly looking light colored container and the categories utilize an attractive, subtle yet conspicuous “selected” indication. The search modification links are in close proximity, but outside of the interface box. This properly associates them with the search mechanism without allowing them to interfere visually to any great degree.

Design is an exercise in the exploitation of human behavior and perception. Our job is to exploit as far as is appropriate.

Color is used to provide context in this design. The search mechanism is in the most prominent and attention-commanding area of the page. Other elements are placed outside of this space. The subtle use of color allows for relevant structure and interactive feedback when hovering on links. I chose blue for the primary color, but others might be as or more effective.

I did work to make the page more visually inviting for its own sake (and hope I’ve succeeded in some measure). That is cosmetics, certainly, but it is a fundamental fact and that attractive things are perceived as being easier to use. Design is an exercise in the exploitation of human behavior and perception. Our job is to exploit as far as is appropriate.

You may also notice that I added a tagline to the logo. Just some fun on my part, as they could likely do with one. Taglines, used appropriately, allow for expanded marketing opportunities and brand dimension.

Anyway, I hope that if you’re a student of design you learned something from this little exercise. I don’t for a minute believe that I’ve addressed all that could be addressed with the Google search interface or that I’ve hit the bull’s-eye with each change I made here. But I hope that the fundamental principles discussed here will prove useful and provoke questions in your own mind. If so, go and search for the answers. I’ll bet you’ll learn far more than you expected along the way.

Archives

Archive

Practice