Out with the Old: Redesigning the MySpace Global Navigation

My friends who use MySpace, love MySpace. They love it despite it being difficult to use and confusing to navigate. They love it even though the design aesthetic is sometimes unsightly. As they say, “love is blind.”

It’s been extremely exciting to show these friends the improvements that have been made to the global navigation and home page that launched on June 18th. I’m even more thrilled to tell them that I played a role in designing the refinements on such a well known and much used site.

The Old Global Navigation

The Old Global Navigation

The New Global Navigation

The New Global Navigation

A majority of my focus on this project was spent on redesigning the global header and navigation. While most of the dirty work in deciding how to reorganize the site structure was done by the MySpace and Adaptive Path teams before wireframes even arrived on my desk, many challenges remained in designing the ‘skin’ of the global header. Some included streamlining the look of the global header bar while adding even more functionality, shoe-horning the new header onto “classic” MySpace pages, accommodating multiple states and making sure drop down menus and Flash did not conflict.

These are the type of challenges that designers really get into. We love simplifying the complex and obsessing over the details. At one point we made the navigation so lean and mean that all the elements fit on one efficient line. In the end this solution didn’t accommodate enough negative space. The ultimate solution made the navigation text links rather than buttons, which was the proposed solution in the wireframes. Visually, this bought us a lot of space. Reducing the size of the logo and search bar, while still meeting the requirement to brand the Google search field, bought us even more.

Why did we need all of this extra space? Three reasons. First, many new features were introduced that needed a spot to live such as a user photo, user status, emoticon, and inline status updates for the logged in user.

Second, the navigation had to work at various heights and widths. MySpace is changing its page width to 960 pixels from 800 pixels, however some “classic” MySpace pages like the user profile are unable to make the shift at this time. On these “classic” pages the height of the navigation also needed to remain the same. Having enough negative space allowed us to reconfigure the header to be various heights and widths without changing the arrangement or crowding anything. This space also helps to accommodate different languages that may contain more characters.

Third, an airy navigation is easier to use. The user needs space to navigate especially when there are drop down menus and hover states. It is annoying when things are tight and you can’t manage to click on what you want to click on. It’s the equivalent of having large thumbs and trying to text message with those tiny little cell phone keys. Argh!

The Old Global Navigation with an Ad Banner

The Old Global Navigation with an Ad Banner

The New Global Navigation with an Ad Banner

The New Global Navigation with an Ad Banner

Another challenge designing site navigation is maintaining consistency. The previous version experienced the unthinkable—due to the height restriction and banner ad, the MySpace logo was squeezed out and became a text link. One of our objectives was to get the logo back on all pages. Our solution was to place the banner ad on top of the navigation bar and the logo. This kept the integrity and consistency intact. It also avoided any possibility of drop down menus overlaying these banner ads. Advertisers are free to use Flash, and with ads being produced by outside vendors, there’s little control over the way the Flash is programmed, often causing drop down menus to misbehave when trying to hover over the ad. Medium rectangle ads using Flash are also displayed on the MySpace site in the top right slot directly below the navigation, which influenced our decision to keep all drop down menus far enough to the left so they would not conflict.

The last challenge to address was color. We felt the MySpace blue was in need of an update. It was universally agreed that there was equity in this particular shade of blue so the color could not change. In the end, the solution was to create dimension with a little help from our good friends gradients and hairlines. I must say, the new navigation is looking (and working) much, much better. Thanks to the Adaptive Path and MySpace teams for all of their thoughtful guidance along the way and to Scott Borchardt for his ever-strategic feedback.

Share this Story

Related Posts

One Comment

  1. Andrew Chau

    December 23, 2008 at 3:11 am

    Pretty sweet. We were wondering who worked on the MySpace refresh. Now we know!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *