How to Fix the Microsoft.com Home Page

When Microsoft redesigned their home page, I was wondering if they simply threw it out there for critique. The page was violating at least a couple of basic design tenets, and I simply didn’t think Microsoft would leave it as-is. However, either nobody behind Microsoft.com sees anything wrong, or they left the job half done (again).

Alignment

What jumped out at me first was misalignment of page elements. To quote Robin Williams (the designer, not the actor):

“Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page. […]

Be conscious of where you place elements. Always find something else on the page to align with, even if the two objects are physically far away from each other.”

(From The Non-Designer’s Design Book)

How many misaligned elements can you count here?

To stress my point, I drew a schematic diagram of the page:

Let’s rearrange elements just a little, so they become visually tied together:

This layout would bring at least some order to the otherwise disorganized page.

Proximity

Another important design principle is that of proximity:

“Group related items together, move them physically close to each other, so the related items are seen as one cohesive group rather than a bunch of unrelated bits. Items or groups of information that are not related to each other should not be in close proximity (nearness) to the other elements, which gives the reader an instant visual cue as to the organization and content of the page.”

Let’s go back to the original home page. At least two groups of elements are out of whack: the logo + slogan at the top; and the search/navigation box + promo on the right. I colored them together on the following diagram to show how I’d arrange them:

There are plenty of other ways to group related elements close to each other (proximity). This is only one of them.

Usability

From the usability standpoint, I still don’t understand why the “vertical tabs” of the content are so slow. This must be the slowest and most awkward tab implementation I’ve ever seen.

Conclusion

Even after several months of its existence, the new Microsoft.com home page still looks half-baked. Doesn’t one of the busiest pages on “the Internets” deserve at least very basic design considerations?

If you are a regular reader of my blog, you may remember my previous “redesign” exercise:

1. A Web Standards Showcase
2. Genesis
3. Rolling Up the Sleeves
4. Pardon Our Dust
5. The Final Frontier

Odlično zapažanje neujednačensoti i nekozistentnosti.

Good points, but...
- I think the tab delays are fine. Stops instant tab flicker as you move across tabs slowly. You have to settle on one to display it. What's the delay? Maybe half a second?
- Most used page? First time I've visited it for years. Almost every reference I see to Micosoft is to some specific page.

It cant be any worse than the pathetic redesign of www.asp.net!!

Josh, are you talking about ASP.NET Forums? The ASP.NET site hasn't been touched in ages.

Agree -- the misalignment of boxes makes the redesigned Microsoft.com an eyesore.

Khoi Vinh (design director for the New York Times) has done a nice article and a presentation on the importance of alignment in web design: Grids are good. Let's just hope someone at Microsoft will come to realize the power of the grid soon...

Yeah, Khoi's slide deck is awesome! I wish I attended his presentation at SxSW.

I thought this was just in line with Microsoft's attempts to make all of their products counter-intuitive and impossible to power through.

I mean, Office was awesome, until they decided to remove those irritating 'menus' where a skilled office worker might be able to do everything in-program through keyboard commands, instead of klutzing around with a mouse for simple formatting tasks.

Internet Explorer and Media Player are the same way. Simple, utilitarian apps that worked great, until someone got the bright idea to be "clever" with design, and make them clumsier, heavier, slower, and less useful -- all in the name of improving the "user experience."

My question is... Who are these users? Who are the people who were so stupid they couldn't work their way around a menu bar, yet absolutely needed a spreadsheet app, "so let's make them a spreadsheet app that's powered entirely by wizard buttons?"

We are (at heart) a people who love order, and normalcy, and for things to have a meaning and purpose. You've shown how functional design is always better than non-functional design. How is it that a company as big and powerful as Microsoft could have hired so many incompetent designers, as to spread bad design across a generation of their software?