Blog

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 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 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.

Last weekend I went to see “Birth of the Cool: California Art, Design, and Culture at Midcentury” at the Oakland Museum of California. The exhibition “captures an era in post-war Southern California when exploration in architecture, art, music and design coalesced to form a modern sensibility based on living well.” Good show. Here’s a few related links:

Architectural photographer Julius Shulman (+)

Designer Alvin Lustig

Jazz photographer William Claxton

Painter Karl Benjamin

Designers Charles and Ray Eames (+)

BOTC on Flickr

BOTC on YouTube

BOTC on Amazon

Take Bart. They even made a playlist for you

Last night, Google posted an announcement on it’s blog that its search bots can now read Flash.  This is a very big deal. Text or links embedded in a flash movie can now be indexed and contribute to the search ranking of the page.

Until today, Google and Yahoo’s web crawling robots couldn’t see or read Flash files so any words written in flash were essentially invisible. If Google’s bots can’t see your page content your chances of being found in a Google search are greatly diminished. One of the most obvious manifestations is that Google has no text to show as a snippet in its search result listings. Given how Google has effectively become the front page of any web experience, not ranking on Google isn’t an option.

So, while the rich user experience afforded by Flash is useful and sometimes necessary to define an brand, designers and product developers have used it very cautiously. “After all, it doesn’t matter how pretty your Website is if nobody can find it,” says Erick Schonfeld of TechCunch.

Google’s announcement last night is the first step towards Flash being a viable technology for serving both user experience and search engine optimization. As explained on Google Webmaster Central:

“[We now index] all of the text that users can see as they interact with your Flash file. If your website contains Flash, the textual content in your Flash files can be used when Google generates a snippet for your website. Also, the words that appear in your Flash files can be used to match query terms in Google searches.

In addition to finding and indexing the textual content in Flash files, we’re also discovering URLs that appear in Flash files, and feeding them into our crawling pipeline—just like we do with URLs that appear in non-Flash webpages. For example, if your Flash application contains links to pages inside your website, Google may now be better able to discover and crawl more of your website.”

Unfortunately, Google still won’t be able to index or extract meaning from images or videos.

The next step for Google and Adobe is to work out how designers and developers should indicate to Google the relative importance of words within the Flash file. With HTML, the method is well understood: the Google bot weighs the content based on how it has been semantically coded for human consumption. For example, words on an HTML page tagged ‘header’ are more significant than body content tagged ‘paragraph’. At the moment, there is no such equivalent in Flash. Ideally, Adobe and Google would further clarify how to optimize semantics of Flash movies.

In the meantime we are running some experiments on Flash indexability and we’ll share with you anything we find. If you have any evidence of how your Flash files are being indexed, we’d love to hear about it.

We find that many of our clients are looking for rich brand and user experiences typcially afforded by Flash - but also absolutely require text-based search engine optimized pages.

Until search engines can reliably read and extract the semantic meaning from images and flash movies this will always be a conflict. But with some skill, we find that you can have both.

We recently worked with SearchMe Co-Founder and Chief Experience Officer  John Holland to quickly design and code their Stacks mini gallery site. (I covered the launch of SearchMe’s Stacks and their other features in a previous post visual browsing with SearchMe and PicLens.)

While most (all) of SearchMe is Flash-based, we produced this site in HTML to allow for better web indexation and SEO. We wanted to make sure that stacks get good visibility in web search results.

At the same time, it was very important to maintain the interaction model established in the flash app, where users are provided engaging, rewarding  feedback for mousing over objects on the page.

Using the mootools javascript framework, we engineered the page so that a mousover on the spotlighted stacks triggered a smooth reveal of additional information that feels rich and rewarding. The information itself is pure HTML text - the kind search engine web crawlers find rich and rewarding.

UPDATE:

A few searches on Google show how our work is paying off: a search for Best of 80s stack returns the stack details page we created as the 1st result! The same goes for:

• world headlines stack
• homework helpers stack
• any of the 15 stacks showcased in the gallery

The startup search engine with the slick coverflow user interface SearchMe yesterday launched a raft of new features. Fly-through web searching and browsing sites like SearchMe and PicLens aren’t going to replace the current click-and-load model of information foraging on the web. Google with it’s text snippets is faster and more efficient for text searches which constitute the bulk of queries.

But SearchMe and PicLens are useful for specific cases where the user is evaluating the look-and-feel and not the textual specifics of pages or images - such as image & video searches. For example. the graphic designers in our studio find these applications useful for browsing  images for inspiration.

They are also useful for the growing home theater PC mode of lean-back couch surfing, which tends to be more social. I have both an HP Windows Vista-based HTPC as well as a Mac Mini that I use as my home music system, HDTV receiver, PVR, home movie and slideshow projector and occasionally to show-and-tell friends and family about viral or interesting websites and videos.

Google and the current set of dominant lean-forward web applications are not particularly pleasant to use in this environment. SearchMe and PicLense are much better suited for browsing and group-evaluating pages from a distance. As social couch surfing becomes more prevalent, these new models will take off.

Stacks

In addition to the requisite image and video search, one feature SearchMe released amounts to essentially a new product -  Stacks. With Stacks, SearchMe applies their UI paradigm to the web bookmarks. They upgrade the bookmark browsing experience from click-on-a-list-of-text-links to a smooth, gesture-based visual experience.

You can use stacks in place of any lists of URLs you might otherwise post to a blog or email - a list of resorts options for a group holiday, a portfolio of client work, you name it. It’s a strong enough offering that it can stand on its own separate from the core search engine.

Here is a portfolio stack I’ve created with a few recent projects we’ve launched.