Patterns Behind the Yahoo! Home Page Beta

By YUI TeamMay 15th, 2006

The yahoo.com home page team has been very busy over the last few months testing the new home page to create a richer experience for our users. There are many challenges to changing any home page. Just imagine the challenges with changing the most trafficked home page on the entire web!

One of the design principles I regularly discuss is to

Cross Page Boundaries Reluctantly

This principle captures the idea that every piece of logical content does not have to be on a different page. Instead when we design a content page, especially a home page, we should consider how we can expand the user’s virtual space. In many ways this is similar to creating a play. At any given time the view on the stage is only a small part of the action. The backstage, props, and other actors are all being prepared for the next scene. A home page can provide ways to allow a user to take a “sneak peek” at additional content and essentially “open up” the page space.

This is just what the new Yahoo! home page has done.

Personal Assistant

One of the really nice additions is the Personal Assistant. It gives a quick glance at what is happening in your personal space. All of the content that appears when you rollover the different areas is pulled in via an Ajax lookup. It also does a nice job of exposing and hiding content during exploration.

So here are some of the benefits of Ajax-ifying the home page.

Live Information

Since each rollover is actually an Ajax lookup, you get the latest content. Rolling over Mail, will give you your last 5 messages.

Personal assistant mail panel

Dynamic Paging

When looking at your Messenger contacts notice the Next/Previous links. You can sub-page through the content in this exploded tab view. The paging is very fast since it uses Ajax to pull in content.

Personal assistant messenger paging

Another variation on paging is found in the Movies and Radio Panels. Content can be scrolled in by using the Left/Right arrows.

Personal assistant movie paging

In Context Configuration

On the Weather (or Local) panel, you can change the location by clicking the “Change Location” link. This overlays a configuration panel over the weather info. Change the location to see weather for a different area.

Personal assistant weather panel

Dynamic Local Content

In the Local panel, you can toggle between a view of traffic conditions or local events on a map. Ajax makes it easy to toggle and get the latest information since it is fetched just-in-time and live. And the map is live and draggable.

Personal assistant local map

Tabbed Content Areas

While tabbed areas are not new, coupled with Ajax they make it fast to load the page and then get the additional content on demand. You can see Featured content as well as Entertainment, Sports, Money, News, World and Video in the tabbed content areas.

Notice the creative way the sub-content is handled in each of the tabbed areas. A hyper-linked area in the content shows more information when clicked on.

Tabs with sub-content

Tour

To aid in discoverability, the Yahoo! home page introduces a nice tour technology. Clicking the Tour button takes you through a Tour Wizard. The Dim and Brighten patterns are used to call attention to the area being shown.

Yahoo! home tour

Slide Outs

Both the “All Yahoo! Services” and the “Page Options” provide slide outs and drop downs that expose more navigation choices and configuration options.

Yahoo! home configuration

Taken together, the changes make it possible to have a cleaner, more streamlined home page while at the same time allowing a lot more content to be easily accessible.

23 Comments

  1. Neue Yahoo! Homepage als public beta…

    Yahoo! letzte Nacht ihre neue Homepage als Beta veröffentlicht. Dass interessante dabei ist, dass diese neue Homepage unter Verwendung der Yahoo User Interface Library und der Yahoo! User Interface Design Pattern entstanden ist, die erst kürz…

  2. [...] New Yahoo! homepage is finally available for public view, which was previously in private testing. Many visual changes are done supported by smart Ajax support. They also added a personal assistant, which groups recent emails, instant messenger and other information together. Also check Yahoo User Interface Blog for further details and patterns behind new home page. Now I hope to see their email interface change with Ajax support soon, which would compete with gmail's. I believe they are far too late to act on that. [...]

  3. [...] Patterns Behind the Yahoo! Home Page Beta » Yahoo! User Interface Blog Analysis of design principles used on the new Yahoo homepage (tags: ajax design interface patterns yahoo) [...]

  4. [...] Ya se puede probar la nueva página principal de Yahoo!, explican las novedades en su User Interface blog. También nos desvelan algunos de los patrones que han utilizado en el nuevo diseño. [...]

  5. [...] Yahoo apparently has a new homepage up today. I wish I could see it. Although it says it works with IE 6 and Firefox 1.5, when I go there with Firefox 1.5 (Mac), it gives me an error. Oh well. Rich Ziade has a review, and the Yahoo UI team does an interesting breakdown of the UI patterns used. [...]

  6. [...] Following the launch of Yahoo’s new homepage design, the Yahoo UI team discusses the patterns behind the homepage and the technology that powers the new interface. [...]

  7. [...] Update: Bill Scott and Nate Koechley have both given their take on the patterns and ideas that went behind the redesign including: [...]

  8. [...] This morning Yahoo! unveiled its new homepage design.  There’s a great post from Yahoo!’s UI team on the rationale behind the finer aspects of the redesign.  [...]

  9. [...] Maailmalla myös Yahoo ja Flickr ovat uudistumassa. Flickrin navigaatio muuttui kesken kaiken, kun olin aiemmin illalla lisäämässä kuvia viime viikonlopun koiraleiriltä. Yahoon ulkoasu-uudistus on kertakaikkisen komea. Yahoo User Interface Blog kertoo kahdessa artikkelissaan taustoja uudistukselle: Peeling Back the Interface of the Yahoo! Home Page Beta ja Patterns Behind the Yahoo! Home Page Beta. Aihe: Internet, Habbo Hotel, Duuni [...]

  10. The New Yahoo!…

    Lots of buzz around the new Yahoo homepage which was made available as a preview today. Most appreciated the interactive elements that let you check your email and local traffic conditions without leaving the page. The team packed in a……

  11. Home Sweet Home…

    This week Yahoo! is unveiling a public preview of the new home page design. The whole look and feel is new, which you’d expect with the periodic redesigns of this page, but what’s really cool is all the interactivity. If……

  12. Hi Bill, well done on the homepage. It looks good, works well :-).

    Can you say how the team used the patterns, how muc you worked with them etc. It seems like a great case study for one of the highest profile pages around.

  13. [...] • Patterns behind the Yahoo! home page beta • Peeling back the interface of the Yahoo! home page beta [...]

  14. Yet Another Yahoo! Home Page Redesign…

    Hold on to your chairs, kids! It’s about to happen again. The venerable Yahoo! is about to change its home page — yet one more time!

    ……

  15. Hopefully the new Yahoo! homepage will support Safari soon.

  16. [...] Desde la web de qweos.net me entero de que a través de un blog la gente de Yahoo explica cómo han abordado el rediseño de su home. el blog tiene información muy interesante sobre las novedades que han desarrollado para su nueva portada (patrones de diseño, ajax, un tour guiado y otras cosas bastante interesantes). [...]

  17. [...] Some interesting stuff here about it. [...]

  18. [...] Some interesting stuff here about it. [...]

  19. Yahoo is very very big today, congrats for all your ui patterns and your homepage redesign which are simply wonderful, a must.

    You are far ahead anything i have seen and thought you. Yahoo is creating the future.

    I have only one regret: great movie, great photo, great book let an intact footprint to the future, does your site will? not so sure with current web technology. you should think about how some(annualy) archive can be preserved, i’m sure one day they will enter in museum, academia, history

    kudos guys (:
    very great
    soni

  20. Great new look and feel. I do wonder though if all your users will have the mouse dexterity to use the rollover panels.

  21. [...] Yahoo! User Interface Blog – Patterns Behind the Yahoo! Home Page Beta [...]

  22. [...] Richard MacManus has the podcast exclusive. For those that want to get in under the hood, check out Bill Scott posting on design considerations and Nate Koechley with the nitty on the technical details covering things such as the use of CSS [...]

  23. Yahoo has simplified its interface and is adopting well with the varying changes to the UI trends.

    I do think that yahoo has moved fast towards the Ajax services and ‘what you can get is far more than what you can see’ apprach.

    i hope that internet speed in growing countries does not ditter the fantastic approach.