Blog: Archive for May, 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.

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.

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

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.

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.

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.

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.

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.

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.

To celebrate the launch of the public beta of the new Yahoo! home page, I want to peel back the interface and point out a few things of interest to developers.

First of all, I’m very proud that the new Yahoo! home page uses the open-source Yahoo! User Interface Library extensively. To be clear, the exact lines of code available to the world for free are used by Yahoo!’s new flagship page. The Library’s a la carte design lets them use just the components they need: Connection, DOM, Animation, and Event, as well as CSS Fonts and CSS Reset. This illustrates several things, including the industrial-grade functionality of the YUI Library, the validity of an a la carte approach, and our commitment to continued development and support of this library.

Now, notice how the page is optimized with “download-on-demand.” If a JavaScript, CSS, HTML or JSON file isn’t absolutely and immediately necessary, it is not loaded until after the onLoad event fires. Many of the features that Bill Scott discusses in his design patterns coverage of this launch, such as In Context Configuration and Dynamic Local Content, aren’t used by each user on each visit. By downloading the code for these pieces of functionality either automatically post-load or strictly on-demand, unnecessary overhead is reduced and the page is much faster.

Download-on-demand takes at least two forms. Script nodes are used to get JavaScript Libraries after page load. The JS for the Traffic and Local sections are an example of this technique. In other cases, for example the Personal Assistant module’s inbox preview, HTML is retrieved directly via YUI’s Connection utility (which wraps the XMLHttpRequest object).

JSON, (the light-weight data interchange format well suited to Ajax applications and championed by our own Douglas Crockford), is used extensively on the new home page. JSON has many advantages, as Douglas most-recently spoke about at The Ajax Experience conference last week. Of the many advantages of JSON, three were quoted repeatedly in my talks with the home page team. First, it’s a native JS data structure so no extensive parsing is required (like there is when using XML). Second, there is less data to transport compared to XML. And finally, since it is so readable, development and debugging are more pleasant and efficient.

On the CSS side, notice the extensive use of CSS Sprites. Though not new, this technique is one of the best ways to optimize a site. By using sprites instead of individual images, 15 separate home page image calls are combined into a single HTTP request. Every HTTP request has a significant negative effect on performance — therefore reducing requests should always be a priority.

As you can imagine, the home page team has been hard at work. The hard work continues as they continue improving the beta, rolling out enhancements, and expanding to more countries. If you have technical questions, please feel free to leave a comment and I’ll do my best to get answers from the team for a followup in-depth article here.

Thanks,
Nate

I’m very happy to announce today a whole bunch of new stuff in both the Yahoo! Design Patterns Library and the Yahoo! User Interface Library. On the design side, there are more than a dozen new patterns (as well as oft-requested examples for some existing patterns like Tabs and AutoComplete). On the development side, we’ve updated all the existing components and broadened the platform’s reach with several important UI controls. With this release, we’re offering CSS packages for the first time. And, as part of the evolution of our open-source processes, we’ve migrated YUI Library distribution to SourceForge.

Development

Let me call your attention to several things on the development side: We’re proud to offer three new JavaScript packages. The first is a suite of DHTML windowing controls, each of which implements a distinct contextual-window interaction with just a few lines of JavaScript. These components — we call them the Container family of controls — build upon a standard unit for modular content (the Module control) and a common foundation in which a module floats over its page context (the Overlay control). Four Container-family UI controls build upon the Module/Overlay system: Tooltip, Panel, Dialog, and SimpleDialog.

A fifth control, Menu, shares the same Module/Overlay foundation and allows you to create mouse-and-keyboard-accessible, application-style fly-out menus in just a few lines of code. Extending Progressive Enhancement into the world of UI controls, Menu can be dynamically generated or layered on top of simple, semantic unordered lists.

Our third new YUI Library component for this release is the highly-anticipated AutoComplete control which allows you to streamline a variety of user interactions involving text-entry. It’s robust, configurable, and easy to implement; I hope you’ll agree it was worth the wait.

In addition to these new additions to the Library, we’ve updated and improved all existing packages with numerous optimizations, bug fixes, increased functionality, and improved consistency. Each component includes reworked and expanded examples and more detailed documentation on our Yahoo! Developer Network website. In the distribution, you’ll find a README file with a detailed change log accompanying each component.

This time around, we’re going beyond new and updated JavaScript components and including what we think is some important, useful work around the intrinsic challenges of CSS. Three CSS packages are included in this initial release. CSS Reset is a simple foundational file that normalizes browser-supplied CSS defaults. CSS Fonts provides cross-browser font families, and, importantly, recommends what we think is the optimal font-sizing strategy. CSS Fonts also works to normalize the width of an em across browsers and platforms. The normalizing strategies applied in CSS Reset and CSS Fonts provide a stable foundation for my favorite CSS package, the CSS Page Grids. Its single file, weighing less than 2KB (minified), provides seven basic wireframes and numerous subsection grid components which together offer more than 100 page layouts — all of which scale up in size when the user applies browser-level font zooming.

Design

On the Design side, our User Experience and Design team has published over a dozen new patterns codifying our language of Invitations and Transitions, and they’ve added a companion pattern for Page Grids. These topics are critical as richer interfaces proliferate. Discoverability of new functionality remains a challenge, and as content change continues to be divorced from page-load events we need new types of transitions to help sustain the user’s intuition about what’s happening on the screen. We hope you’ll find information in these new patterns that helps you boost the intuitiveness of your applications even as you increase their richness.

Many of you have asked since our debut in February for implementation code to support both Tabs and AutoComplete. With this release, code for both of these patterns is now available. Moreover, all of the new patterns link to code samples.

Infrastructure

The YUI Library’s emergence as an open-source project important to the work of developers throughout the world during the past four months has been exciting and gratifying. Much work remains to be done with respect to managing community-contributed bug reports, feature requests, implementation samples, and code patches. However, we’re taking an important step in that process with this release, moving our code distribution and public bug reporting to SourceForge. This move will give us better and more flexible control over distribution of the code — and it will improve our ability to release critical patches between releases in a timely, convenient manner. Formalizing our public bug reporting on SourceForge will make it easier for the YUI community to report, research and track issues related to library components.

Note that we will continue to rely on the YDN-JavaScript group for community communications and we will not, as yet, be using SourceForge for community-contributed code submission.

We hope you find a lot to smile about in this major step in the YUI Library’s beta cycle. I know I speak on behalf of the entire team when I say that I can’t wait for you to get your hands on these new components. Go check it out. Don’t forget to stop back here, or over at YDN-JavaScript or YDN-patterns, to let us know what you think.

Thanks,
Nate Koechley
Yahoo! Presentation Platform Engineering