Yahoo! User Interface Blog

Developing a JavaScript Library for Yahoo!

When we set out about a year ago to build the Yahoo! User Interface Library, we had a specific set of challenges to address. First and foremost, we wanted to enable our front-end engineers to spend more time working on advanced, product-specific features and less time doing cross-browser tuning of generic interactions like drag and drop. We have a deep, talented, and creative pool of developers across the company, but we hadn’t done enough to develop shared libraries that normalize differences across relevant browsers. As a community, we agreed that we needed better toolkits for those rich interactions that can enhance users’ experiences of Yahoo! products.

Creating the library represented a significant undertaking, and we spent a lot of time talking among the larger front-end engineering community here about how to go about doing this. Having now made the library publicly available as an open-source, open-use resource, we wanted to share with you some of the thought processes driving our engineering agenda.

Heterogeneity

We talk a lot at Yahoo! about heterogeneity, a word that describes an essential part of our company’s challenge across numerous disciplines. With respect to improving our shared JavaScript libraries at Yahoo!, heterogeneity defines the problem in two important ways:

1. Heterogeneity of the Yahoo! Product Family: Yahoo! products are diverse in terms of their size, the technologies we use, our development methodologies, and our locations geographically. More importantly, perhaps, our users and their needs vary significantly from product to product. As a result, some properties have been able to implement very rich feature sets, whereas others have proceeded more conservatively in defying the page-granular interaction paradigm that came to define the first decade of the mainstream web. Given this context, the library needed to facilitate application enhancement without dictating too much about how architecture, methodology, or coding style.
2. Heterogeneity of client configurations: Yahoo! has, by some internal estimates, more than 10,000 different client configurations accessing its products on a regular basis. While we can distill that into more manageable groupings (like “IE 5,” “Safari 1.3,” “Netscape 8+,” “Mac FireFox 1.5+,” and so on), there remain dozens of viable browser/platform combinations in use by millions of people each. Writing JavaScript for dozens of run-time engines and accessing dozens of implementations of DOM methods can be a recipe for paralysis — it naturally leads to conservatism with respect to making commitments for advanced features. A library that serves the needs of developers facing this degree of client-side heterogeneity must first and foremost build upon a coherent philosophy of browser support. Nate Koechley has been working on this effort for several years at Yahoo!, and he shared our philosophy publicly for the first time in conjunction with the release of the library earlier this week. Growing out of that important work, our library had to provide normalized access to advanced functionality while supporting all of what we’re calling the “A-grade” browsers.

In these two important ways, the creation of a JavaScript library with maximum usefulness for Yahoo! developers involved being sensitive to the heterogeneity that’s at the core of the front-end engineering discipline. This led us in the direction of modular components and an à la carte implementation style, one that could be used in a lightweight, unobtrusive way as properties began to add specific rich interactions to existing pages. By the same token, the library in the aggregate should provide broad support for properties whose design ambitions were more transformative, who wanted to create extremely rich and fundamentally event-granular applications. And that support had to be relatively unconstrained in terms of development methodology and programming style. While we love Rails creator David Heinemeier Hansson’s description of how “constraints will set you free,” we couldn’t serve well our developer population if we didn’t acknowledge in the library’s design that their environments were already large, complex, and not susceptible to radical change. The library had to impose few constraints and live happily in a lot of different ecosystems.

The Browser as a GUI Platform

If heterogeneity drove our decisions about how to architect the library, it was an old picture of an upside-down triangle that influenced us most in creating a roadmap and an organizational structure for our work.

The browser environment today shares significant common ground with where the desktop GUI industry was ten or fifteen years ago: Toolkits are comparatively new, platforms are awkward, and it’s too hard to bridge the gap between a great interactive design and real-world, cross-platform engineering implementation. While part of the problem lies in the fundamental protocols of the web, which was never meant to be a platform for deploying desktop-like applications (at least, not without the help of a Java plugin), a significant part of it lies in the browser itself. Modern browsers are tantalizingly close to making rich application development realizable and robust, but the work is still too hard and the foundation too wobbly. Early Macintosh and Windows developers often felt just this way in the early days of the desktop.

In 1995, Alan Cooper (in About Face: The Essentials of Interaction Design) created a model for how to think about the GUI ecosystem, and that model — he wrote about the desktop, but it’s enormously relevant to today’s browser — provides a wonderful picture of how an in-browser toolkit serves the larger goal of creating exceptional user interfaces:

For Cooper, the basic granules of interaction were called “primitives” — the mouse click is a primitive unit of input; combinations of primitives that took on more coherent units of interaction or intent were considered “compounds”; from compounds, application-specific “idioms” could be authored.

We took Cooper’s model and re-cast it in terms of the browser and specifically in terms of the challenge of creating a toolkit to enable effective GUI development for web applications. Components that dealt with Cooper’s “primitives,” the most granular elements of interaction, we called utilities. Among our utilities, some (like Connection Manager, encapsulating XMLHttpRequest transactions) don’t have any intrinsic visual characteristics and so would be, in Cooper’s model, perhaps something like a “sub-primitive.” But that’s how we thought of that bucket.

Having built five utility components targeting the rich interactions most in demand among Yahoo! user-experience teams, we’ve turned our attention more recently to the level Cooper calls “compounds,” to a class of components we call “controls.” We consider controls to be highly recognizable visual presentations that allow users to interact with information quickly and intuitively. Controls, like Calendar, Slider and TreeView in our initial library release, should be familiar to users from the desktop world, should require virtually no discovery or learning in terms of their basic interaction, and should be easily invoked on the web page with just a few lines of code. The desktop paradigm, of course, has dozens of widgets; we don’t aim to be that comprehensive, and yet it’s clear that a lot of work remains for us to more fully populate our collection.

As this foundation of utilities and widgets grows in depth and breadth, we hope that application designers will be more free to create what Cooper calls the “idiom” of the application — that set of interactions, workflows, shortcuts, and visual treatments that allow a user to get into a highly productive sense of oneness with her underlying data. Great idioms, not great libraries, toolkits or frameworks, are the essence of great applications.

Going Forward

We are early in the process of building the Yahoo! User Interface Library. Fundamentally, we see this as a body of components that maps to Cooper’s inverted pyramid — utilities that normalize and add power to basic interactions in the browser and controls that provide a rich, familiar set of interactions within the interface. There is no magic pixie dust here: Good application idioms emerge only from diligent research, inspired design, and a committed engineering process that draws on all available tools at hand. This library is just one of those tools, and ultimately a small (though, we hope, useful) part of the much larger process.

Going forward, our goal is to improve the existing utilities and add new ones where we see good opportunities. At the same time, we’ll work hard to diversify and improve the family of controls from which designers and developers can draw. We won’t be publishing a detailed roadmap for the library, although we’ll try to provide clear guidance when new work is imminent; we’ll try to strike a rational balance, giving you a sense of what you can expect only when we’re on really solid ground from which to do so. Stay tuned to the blog for ongoing progress updates, and if you’re a developer interested in using the library please consider joining the Yahoo! Group on which we’re discussing the components and their use.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Welcome to the Yahoo! User Interface Blog

Let us be the first to welcome you to the brand new Yahoo! User Interface Blog. We’re excited to be here, and thrilled to have you with us.

This blog is the companion blog for two libraries we’re proudly releasing today. The new Yahoo! Design Pattern Library offers our thinking on common interface design issues for traditional and rich Internet applications. The new Yahoo! User Interface Library is a collection of industrial-grade JavaScript utilities and widgets that enable you to efficiently get the most out of today’s powerful browsers. In both cases, these are the exact same things that power Yahoo! today.

The two libraries each stand alone, but also complement the extensive Web Services offered by Yahoo! properties via the Yahoo! Developer Network (and others around the Web). With today’s release, we’re starting to tell a complete cover-to-cover story. A web service is one thing (and a pretty cool thing at that), but we believe it’s even more potent when combined with proven interfaces and enhanced with JavaScript and Ajax goodness.

The tagline on the Yahoo! Developer Network is “You bring the skills. We bring the ingredients.” That’s never been more true than today. If you’ve already sunk your teeth into some tasty Web Services, maybe interaction design guidelines confirmed by hundreds of millions of users and extensive lab testing will be helpful. If you already live and breathe design, perhaps our powerful a la carte JavaScript libraries can add the special sauce to your dish. Some of the best food in the world is a blend of multiple cuisines; we can’t wait to see what you cook up with all these new ingredients.

We hope our humble libraries get you a step closer to your goal, whether that’s a funky Web 2.0 mashup, a small tool to make your life better, or the Next Big Thing.

The next two posts examine each library in more detail, but let me point out two things now. First, we’re happy to report that both libraries are totally free and wide open. The Yahoo! User Interface Library is released under the friendly BSD open-source license. The Yahoo! Design Pattern Library is released under the Creative Commons Attribution-By license.

Second, and most importantly, we’re looking forward to the conversation. The developers and designers of the libraries will be posting on this blog and reading the comments, and contributing on the respective mailing lists (ydn-javascript | ydn-patterns). It’s an exhilarating time to be creating things online, and we’re eager to go forward with you.

Read more:

• Yahoo! Design Patterns Library
• Yahoo! User Interface Library

Thank You,
Nate Koechley, Bill Scott, and Eric Miraglia

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

The Yahoo! User Interface Library

The Yahoo! User Interface Library is a collection of JavaScript components that help developers enrich web applications with desktop-style, event-driven interactions. We’ve focused on creating a lightweight and modular library with an a la carte deployment style, minimizing the pageweight associated with this move toward greater richness. During the past six months, we’ve seen much enthusiasm for the library and rapid adoption among Yahoo!’s front-end engineers. All of us who do web development at Yahoo! are committed to improving the sharpness and immediacy of our products’ interfaces, and we see this platform as an important element of that effort.

These are industrial-grade components. Their design has benefited from the input of more than 100 web engineers at Yahoo!, and we’re working hard to make usage both clear and flexible. Each utility and widget in the library has been battle-hardened in the browsers of millions of users and in the aggregate this code provides the foundation for some of our most heavily trafficked applications, including the My Yahoo! customizable news portal. Each member of the library supports the full suite of A-grade Browsers within our Graded Browser Support scheme, providing a consistent cross-browser platform for developing richly interactive features. In short, these are the same utilities and widgets that power an increasingly broad spectrum of Yahoo! properties today; they are alive in our flagship products and at massive scale; we’re committed to this library’s growth and refinement because we’re committed to being more ambitious in the interactive idioms we create for Yahoo!’s 400 million users.

Best of all, and in the spirit of other excellent libraries in the JavaScript ecosystem, the Yahoo! User Interface Library is free for all developers to implement and deploy thanks to a wide-open BSD license. This work represents some of the best we have to offer, and we’re really pleased to be able to share this evolving work with you — even as it continues to evolve.

The creation and open-sourcing of the Yahoo! User Interface Library highlights two of our core convictions about the current state of the Web and the nature of front-end engineering:

1. Web users in the mainstream are demanding more from the Web today. For a decade, we’ve operated within a browser canvas characterized by reduced expectations. Users have been taught to expect dramatically less from web applications than from similar applications on the desktop. Innovative companies — including Yahoo!, but also including prominent competitors (like Google) and creative new entrants (like Zimbra) — are helping to break down the dichotomy between browser and desktop interactions. In order to do this effectively, we’re all challenged to improve the tools available for in-browser development so that product designers can demand more and so that we as engineers can deliver.
2. A rising tide lifts all boats. We’ve been inspired and motivated by the work done on other open-source JavaScript libraries — Sam Stephenson at Protoype, Thomas Fuchs at Scriptaculous, and Alex Russell at Dojo, to name just three. While these existing resources weren’t a perfect fit for Yahoo! when we began work on the Yahoo! User Interface Library almost a year ago, their continued growth and excellence exemplify why we love this discipline: Front-end engineers are more committed than anyone in the industry to the idea that a rising tide lifts all boats, to the notion that the more we do to improve users’ experience across the Web the better it is for all of us who create and compete in its economy. From the beginning, we wanted to make sure that the Yahoo! User Interface Library would be a part of this process — an acknowledgement of how much we value our community’s creativity and openness and a small, hopefully meaningful reciprocation for all the learning and inspiration provided by our colleagues across the industry.

The initial collection we’re announcing today includes five core utilities and three widgets; more utilities and numerous additional widgets are in process. We’ve dedicated a wonderful team of engineers to this effort and we’re increasingly drawing from the expertise of engineers throughout the company. In our release today we are providing, along with fully-commented JavaScript code, a body of detailed developer documentation on each component; we’ll continue to make documentation a serious priority as the library continues to grow. In posts later this week, we’ll write more about the utilities, the widgets, and the underlying vision driving the Yahoo! User Interface Library’s development.

We’re excited to share this work with you today as we join more publicly in the vibrant ecosystem of front-end engineering. The web has been reborn with ideation and experimentation during the past several years, and much of its buoyancy has been driven by the creative essence of this discipline’s membership. We hope in this library you find ideas and solutions that, in ways however small or humble, energize your participation in web’s current renaissance.

Thanks,
Thomas Sha, Nate Koechley, and Eric Miraglia
Yahoo! Presentation Platform Engineering

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Yahoo! Design Pattern Library Released

I’m excited to announce that today we are releasing the Yahoo! Design Pattern Library to the public under a friendly Creative Commons License. The goal in releasing this library is for us to share the common patterns that we see emerging at Yahoo! It is hoped that by opening up our design patterns we can share our current thinking as well as solicit your valuable feedback.

We believe design patterns are powerful. First, they offer a solution in context of a problem. Second, they provide a name for the solution. Taken together as a set, pattern libraries form a solution language that can enhance our ability to communicate design ideas. Lastly, they provide us a context in which to discuss a number of associated issues: the thinking behind a solution; issues around accessibility, and de-gradeablity; other related patterns; examples of usage; and code samples to name a few.

In case patterns are a new concept to you, here’s a little history to get you up to speed.

Background on Patterns

Christopher Alexander coined the concept of a pattern language for architecture with his seminal book, A Pattern Language. He defined a pattern as a solution to a problem in context.

Patterns spread much later to the software architecture world with the publication of the book Design Patterns. A couple of years later Jenifer Tidwell published a site called Common Ground, later updating it and finally releasing an O’Reilly book, Designing Interfaces in November 2005.

Besides Tidwell’s pattern library, others have created or are in the process of creating pattern libraries. Welie has a wonderful site as does Laakso. There is also a set of patterns at the Diemen Repository.

More recently, Michael Mahemoff created the Ajax patterns site for capturing both interaction and software design patterns for Ajax applications.

And just a few weeks back, Jared Spool published an excellent article The Elements of a Design Pattern which discusses how to express a pattern. Some of the background research for that article is based on our own pattern library.

Which brings us to our library– the Yahoo! Design Pattern Library. Yahoo! gave a conference presentation on how this library was brought to life at the IA Summit in 2005. It was followed up with a more detailed article on boxesandarrows.com

So, Why Another Pattern Library?

Given all of the resources above, one might wonder, “Why do we need another pattern library?”

It’s About Sharing

Well first, its not so much that we are releasing another pattern library. We are releasing our pattern library. It is really in the interest of sharing what we are learning about designing rich internet applications for Ajax and Flash that has led us to open up our design thinking to the public through our pattern library.

It’s About Change

With the advent of Ajax technologies, there are new idioms appearing in the web space. Some of these idioms are straight (e.g., drag and drop) from the desktop. Others are unique to the web. And still others are a curious blend of the two. By creating a venue to share what we are learning about these new ideas we feel we can participate in elevating the state of the art in web design and development.

It’s About Participation

But probably the most exciting part for us is your participation! We are keenly interested in creating a shared vocabulary for designing for the web. And we feel that by opening up our thinking you can help us improve. In that vein we welcome your feedback.

That’s the purpose of this blog. Here, we will post articles on each of the patterns we release as well as what we may be thinking about upcoming patterns. All patterns will be posted under the Design category, so feel free to subscribe to our design-oriented articles. Development articles are filed under Development, and you can subscribe to those articles here. Or if you want it all, you can get it here.

For fuller discussions on patterns head to over to our forum group, ydn-patterns.

It’s About a Vision

And the larger vision is that our Design Pattern site becomes a place where we can hang all kinds of goodness– code examples, interaction movies illustrating patterns, design discussions, etc. As the pattern library grows we hope that it will contain a rich set of community knowledge to inform all of us on better design solutions.

Humble Beginnings

But, hey all great things must start small, right? The internal Yahoo! Design Pattern Library contains a lot of patterns. But what we released today is a small set of just 13 patterns. What gives? Well, we had to start somewhere. We chose a couple of patterns that represent more recent Ajax-driven patterns (e.g., Drag and Drop Modules) as well as traditional patterns (Breadcrumbs). And while we currently provide only a few links to code examples, our vision is provide them for as many patterns as possible.

But the vision is much larger. Internally, we have been tracking, documenting and cultivating a large set of Ajax patterns. Look for those to roll out in future releases.

So let us know what you think. What ways can we improve the library? What are other items that you would want to see listed in a pattern? What can we do to improve the site?

Ideas welcome!

Thanks,
Bill Scott and Erin Malone,
Yahoo! Platform Design

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Search Pagination Design Pattern

Problem Summary

The user needs to view a set of search results ranked by relevance that is too large to easily display within a single page.

Search pagination focuses on controlling paging through search results that are usually sorted by relevance. With Item Pagination, the user may want to go through any number of pages to find information, Search Pagination results are generally most useful on the first page or so.

Pagination is the standard way of handling larger data sets. An alternate approach is using an endless or on-demand scrolling technique. In a future release of the pattern library we will document the Endless Scrolling pattern (which is currently used in the new Yahoo! Mail Beta.)

The pattern can be found at: Search Pagination Pattern.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Item Pagination Design Pattern

Problem Summary

The user needs to view data items from a potentially large set of sorted data that will not be easy to display within a single page.

There are other patterns in this area that we will be documenting in the future. One of those is the Chronological Pagination pattern (no reference yet). While the Item Pagination is about moving through data that can be arbitrarily sorted, the Chronological Pagination will capture moving through data that has the sense of oldest to newest.

The other pattern we have documented in this set is Search Pagination. Search pagination focuses on controlling paging through search results that are usually sorted by relevance. With Item Pagination, the user may want to go through any number of pages to find information, Search Pagination results are generally most useful on the first page or so.

Pagination is the standard way of handling larger data sets. An alternate approach is using an endless or on-demand scrolling technique. In a future release of the pattern library we will document the Endless Scrolling pattern (which is currently used in the new Yahoo! Mail Beta.)

The pattern can be found at: Item Pagination.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Rating an Object Pattern

Problem Summary

A user wants to quickly leave their opinion on an object, with minimal interruption to any other task flow they are involved in.

One excellent design principle to follow is to allow the user to leave a light footprint. This means encouraging light-weight actions for engagement by providing invitations. Instead of the user having to go through several steps to rate a movie or a news article, invite them to simply click to rate. The Rating an Object pattern is an excellent example of this principle.

The pattern can be found at: Rating an Object.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!