Rich Web Experience coming in December

Excited to be speaking at the Rich Web Experience Dec 1-4 in Orlando, Florida.

If you sign up before Nov. 2nd you can save $200. Hope to see you there!

Silicon Valley Code Camp Talk - DHTML Prototyping

For those at the Silicon Valley Code Camp (and anyone else :-) here is the talk from today. I added references that I mentioned to the end of the slides. Also I mentioned CSS Specificity via Star Wars. This is a great way to learn the rules for CSS Specificity.

DHTML Prototyping: Silicon Valley Code Camp

View more documents from Bill Scott.

You can also download the PDF for a larger version here.

Designing for Interesting Moments Talk

I gave a talk on Designing for Interesting Moments for the IxDA at the Google campus also at Microsoft for the UX team as well as at the Ruby Meetup Group at CMU and finally this week at The Ajax Experience in Boston.

If you want to hear it in person I will be giving it at the Rich Web Experience in Florida the first week of December.

Here is the longer version of the talk.

Designing for Interesting Moments

View more documents from Bill Scott.

WebVisions 2009 - Workshop & Talk

Excited to be heading to Portland for the upcoming WebVisions 2009 conference. I was fortunate to attend & participate on a panel at WebVisions in 2006. I found it to be a no-hype, practical conference with good speakers and excellent attendees. And of course Portland is a wonderful city.

Designing with Patterns Workshop
I will be giving a 3 hour workshop on Wednesday afternoon (May 20) starting at 2pm. Here is the planned agenda:

• Pattern Overview
• Survey of Pattern Libraries
• Design Principles
• Principle One: Make it Direct
• Exercise: It's a Drag
• Present Solutions
• Principle Two: Keep it Lightweight
• Principle Three: Stay on the Page
• Principle Four: Provide an Invitation
• Principle Five: Use Transitions
• Principle Six: React Immediately
• Exercise 2: Button Mayhem
• Present Solutions
• Q & A

Here is a description of the workshop.

In every field of design one of the first things students must do is learn from the work of others. They study and break down real-world examples in order to understand the underlying principles and patterns that make for successful design. Then they are able to apply these learnings to their own set of problems. Designing for web interfaces is no different. We are constantly searching for inspiration and practical guidance in solving the problems we face as designers each day. One approach to curating and applying solutions is through the idea of design patterns. Design patterns define a solution in the context of a real world problem.

In this workshop, Bill Scott will discuss the rationale behind patterns, present a number of excellent pattern libraries for your consideration (20+), and then dive deep into 100+ examples from around the web that illustrate good interaction techniques (design patterns) as well as the not so good (anti-patterns) all organized as a set of six design principles. The main idea of the workshop is to expose you to lots and lots of real world examples and discuss the nuances and best practices that can be distilled from the them. In addition there will be time for two group exercises -- both actual problems that are currently being worked on at Netflix.

Many patterns are discussed. Here are the main ones:



You can learn from the bad examples as well. Along the way, anti-patterns are pointed out. The anti-patterns discussed are:



I will also be presenting Bringing Design to Life which explores what designers should know about interface engineering and ways for engineering & design to work in synch to bring design to production.

Velocity Conference: Improving Netflix Performance Presentation

My quick talk on Improving Netflix Performance Experience from June 23 at the Velocity Conference is available here:

| View | Upload your own

My MIMA Talk

For the folks at MIMA (or others interested), the latest version of my talk Designing for the Rich Web Experience is available for download.

Thanks for all the wonderful comments and discussion afterwards.

I also gave this talk at Yahoo last week. Look for it on the YUI Theatre in a few weeks.

Anti-Patterns: Talk

Recently, I have been giving a new talk on Anti-Patterns.



Sometimes it is most instructive to look at design patterns in reverse-- as a set of anti-patterns. In this talk, I am exploring the common mistakes that designers & developers make when attempting to craft a rich web experience. There are a bunch of counter-examples from consumer facing web sites (both inside & outside of Yahoo!) as well as from enterprise web applications.

The anti-patterns explored are:

• meandering way
• borg idiom
• tiny targets
• hover and cover
• pogo stick navigation
• novel notions
• metaphor mismatch
• double duty
• linkitus
• windows aplenty
• animation gone wild
• misguided misdirections
• missed moments
• one at a time
• non-symmetrical actions

Venues for the talk so far have been at:

• Ajax Experience, San Francisco, CA
• Yahoo! Design Expo, Sunnyvale, CA
• Rich Web Experience, San Jose CA
• Ajax World, Santa Clara, CA

Enjoy.

Simple Debugger - Based on YUI Logger

I decided to wrap the YUI Logger, add a JavaScript command line that outputs the results in a hyperlink format to facilitate simple drill down.



Works on IE6, IE7, FF. Haven't tested the other browsers.

Just a quick hack to make some stuff I was doing go simpler. Use it if it helps.

You can get it at my debugger page.

Pattern: Teaser Pattern - Carousel

Cue'ing the User


One of the challenges with the carousel is clearly delineating that there is more content hidden behind those back and forth arrows. There are a number of ways to cue the user that there is more content. You could:

• Show a series of dots that reveal where you are (like in ifilm.com below).
  
• Works best for a small set of data.
  
• Good for doubling as navigation.
• Only good for showing "1 of n" items, not "n of many"

• Provide paging text. Something like "Showing 4 of 8"
• Have to read to determine where you are
• So 90's ;-)

• Enable/Disable arrows when you reach beginning or end
• Can be subtle depending on how it is done
• Not always obvious to the user
• Does not help when you are wrapping the content (since you need to keep the arrows enabled for wrapping)

• Use a small preview of thumbnails (like the dots approach above) and show where you are in the set. Same issues as with dots.

Teaser Approach
Another approach that seems to bear out well in testing is to expose a little of the content before and after the visible items.

• Works well for image content (since you will only get an edge it needs to be easily recognized as part of content from another page).
• At a glance you know there is more to come
• Makes you want to click on the next to get the full view of what is hinted at

Here is an example from my carousel.



This kind of teaser pattern can be found in lots of places.

One place that came to mind was in children's books. You know the technique. You are on a page spread and just to the edge of the page is a teaser. In What Do You Do with a Tail Like This? (Caldecott Honor Book), each page has the end of the tail just appearing on the right edge of the right page. Kids want to turn the page to see what the tail belongs to.

Another example is from the excellent book by Jan Brett, The Hat. As various articles of clothing blow off the clothesline, the animals discover them and begin to wear them. Of course the porcupine ends up with a woolen hat.

Each page has some very clever visual clues as to what is going on elsewhere in parallel with the story; as well as what comes next. Here are two page spreads. Notice the rightmost image (I have highlighted in yellow) that clues you to who comes next in the story. In this case you know the dog comes into play. You can see in the second spread this is in fact the case. (Other things are going on too. On the left the oval picture is telling what is happening with the little girl at the same time; the topmost illustration of the clothesline tells what is happening to all the clothes as they are blown off the line).





While not as entertaining as the book, this new feature is part of the 0.5.5 release of the carousel.

Enjoy.

New Carousel (0.5.0) & ycarousel Group for Discussion

Update: Version 0.5.1 added. It adds a spotlight & preview demo.

Just posted a new version of the carousel at:
http://billwscott.com/carousel/

Lots of fixes around vertical carousels along with better calculation of size. Additionally, lots of clean up of the documentation, HTML example code (for validation) and so on.

Seems pretty solid on IE6, IE7, Firefox, Safari and Opera.

You can read the release notes at:
http://billwscott.com/carousel/updates.html/


The other thing I set up is a forum for discussing the carousel. I went through my old emails and posted a number of threads from there, so the forum already has a lot of questions & answers available.

Check out/Sign up for the ycarousel group at:

http://tech.groups.yahoo.com/group/ycarousel/

Feedback on the forum is welcome!

Upcoming Talks - Mid Year 2007

Mix'07 in Vegas
Looking forward to Vegas! I was fortunate to be invited by the friendly folks from Microsoft to give a talk about rich web design at Mix' 07. Should be a great event. My good friend Luke Wroblewski will be there speaking as well. Hope to see some of you there on April 30. Looks like it is already a sold out event :-)

The Ajax Experience & The Rich Web Experience
Last year I thoroughly enjoyed my "experience" at the Ajax Experience. Both the San Francisco & Boston events were put on by the folks at ajaxian as well as the folks from nofluffjuststuff. It made for some great speakers and attendees.

It appears that the nofluffjuststuff folks are putting on a new event, The Rich Web Experience which will be from July 30 - August 1 in San Jose, CA. Just the week before The Ajax Experience will debut at the Grand Hyatt in San Francisco, CA and is sponsored by the ajaxian dudes. Since I have great respect for both groups I will be speaking at both events.

Look for two new talks that I am in the midst of developing.

Anti-Patterns - Designing for a Poor Web Experience.
Sometimes it is most instructive to look at design patterns in reverse-- as a set of anti-patterns. In this new talk, I will explore the common mistakes that designers & developers make when attempting to craft a rich web experience. I'll also be using counter-examples from consumer facing web sites (both inside & outside of Yahoo!) as well as from enterprise web applications to illustrate the right way to design.

Prototyping the Rich Web Experience - Experiments in creating an Ajax framework for prototyping
How do you communicate the design for a rich web experience? Since there is no one tool, designers have used the tools at hand: Photoshop, PowerPoint, Illustrator, Fireworks, ImageReady, Visio, OmniGraffle, and so on. However, prototyping provides the best way to fully understand & test the nuance of detailed interactions. The problem is that it is difficult to find someone who is both good at design & prototyping. In this talk, I will first survey the tools & techniques for communicating rich design and then propose a simplified Ajax library that makes most behaviors and interactions declarative via CSS styles or by simple declarative style programming. I will then walk through how to quickly prototype the most common patterns with the library. The prototyping library will be available for download at the time of the conference session.

Hope to see you at one of these events.

Yahoo! Teachers and the Yahoo! Gobbler

In my last post I said that I was putting my head down to work on something at Yahoo! that I believe strongly in. Strongly enough to set aside my evangelism role and focus on a single product within Yahoo!

I am glad to say that I can now freely, publicly talk about what I am now doing at Yahoo!

On Thursday, at the National Science Teachers Association in St. Louis, we announced that a new site, Yahoo! Teachers will go live at the start of the summer.

Before I explain what it is and why I think it's cool, let me go back a little in time and talk about this scrappy team within Yahoo! that wanted to "hack the educational system."

Last summer we held a Yahoo! Teachers of Merit camp on our campus in Sunnyvale. We invited about 60-70 teachers to come spend 7 or 8 days with us. The first couple of days was about how teachers could take advantage of the web and of course we talked about things like delicious and flickr as well as Yahoo! Groups. But beyond that we gave them some new tools to gather, organize and share information with teachers around the world.

One of the key tools was the Gobbler, an idea conceived by Karon Weber (formerly of Pixar) and others. Just two weeks before the camp and one week after I created the carousel the team did not have the gobbler built or even started. I was simply an occasional consultant on the team (in my role as evangelist). Prodded by Samantha Tripodi (lead designer), I took the next 3 days to try to bring the Gobbler to life. Fortunately I was able to do so. And by the time of camp I had a good enough version of the gobbler to unleash on the teachers.



I recall the first time the teachers saw the gobbler in action. I was sitting in front of the room and I heard a room full of teachers gasp (literally). They were surprised you could do something like this. They immediately got it. And saw how it would help them gather knowledge from the web and share with other teachers around the world.

Ok, so what is it?

The gobbler is simply a widget that you can popup on any web page and just grab text, images and links from the page and drag and drop them into your Y!Teachers projects. (You can also bookmark the site as well).

Its a little like Google Notebook, bluemark, clipmarks and other clipping services but it is a little unique. First, you can simply tear things off the page with drag and drop. Second, when you drop things from the page into the gobbler you are dropping them directly into your projects within Yahoo! Teachers. They get immediately saved there. Third, the assets you drop are thus brushed with meta data from the project itself (like grade level, subject, state standards). Fourth, the projects (and the assets) are then shared with any teacher anywhere in the world that is part of Yahoo! Teachers.

The combination of gather (gobbler), organize (projects) and share (teacher network) creates a powerful combination.

As always seeing it is the best way to understand it (sorry the sound is a little quiet... will repost later with better sound).



This week at the NSTA, we showed Yahoo! Teachers and the gobbler to hundreds and hundreds of teachers. The response was overwhelmingly enthusiastic about both Y! Teachers and especially the gobbler.

I am glad that almost 10 months after creating the gobbler I can finally talk about it :-)http://www2.blogger.com/img/gl.link.gif

And in a just a short amount of time teachers will be able to use these tools to make their job a little easier.

If you or someone you know is a teacher, head over to Y! Teachers and sign up for the teacher network... we'll notify you when the full site goes live.

Catch photos on flickr:

http://flickr.com/photos/thescottclan/sets/72157600043667255/

Ajax 101 Presentation

Just posted my Ajax 101 talk on slideshare.

I have given this talk in a number of venues starting in January 2006 with Adaptive Path in the Designing & Building Ajax Workshops we hosted in LA, Austin and Amsterdam. I also have given this within Yahoo! for internal training as well as for VeriSign, Federal Reserve, Ultimate Software, United Online and others.

To me understanding web development starts with understanding event handling, model & data services and how to manipulate the DOM. This mental framework is used in this talk (it follows the Model-View-Controller pattern from SmallTalk-80 days).

Enjoy!

Carousel - 0.4.0

New release of carousel. More documentation, better runtime configuration support, methods that let you show, hide and recalculate size.

Check it out at the carousel site.

Slideshare

My friends Rashmi Sihni & Jonathan Boutelle recently released a really cool product, slideshare.

Simple idea. Think youtube for presentations. Upload a PPT or PDF, it converts it to individual slides that can be bookmarked, linked to from a blog, tagged, commented on, etc. Cracks open presentations so they can be searched and really makes it easy to find.

You can see one of my talks here:



Hopefully they will support keynote in the future as well as some ways to handle animations/transitions. But even without this it's a great place to find recent talks.

Easy 7 Conference - Bangalore

Having a wonderful time in Bangalore. Due to the excellent Yahoo! Bangalore staff, my friend Sameera Gopalakrishna Rao who is here on holiday and the excellent Easy 7 Conference I had the opportunity to speak at yesterday.

Easy7 is a SIGCHI-SI conference held annually in Bangalore, India.

Being somewhat ignorant of the design community in India, I was not sure what the makeup or size of the audience would be. I was pleased to find out we had a sell-out crowd (I think it was around 150 attendees) and they turned away 50+ others due to venue size. And talk about an incredible venue! The Leela Palace Hotel looks literally like a palace with 9 acres of lush gardens. And beautiful weather to match.

What I really enjoyed was the audience participation. After each talk we gave space for Q&A and the questions were passionate and insightful. The in-between hallway conversations were interesting too as India rapidly moves into not just being a place for offshoring but a place for innovation (this has been going on for a while; It is just more real to me now).

Jeremy Ashley, VP of Application User Experience, spoke on Debunking the ‘Ultimate Design Myth’. It was a really great talk that removed the idea that the best design comes from a design diva locked in a room for 24 hours. The truth is good design is hard work that takes moments of inspiration followed by lots of hard work. Surya Vanka, Manager User Experience Excellence at Microsoft showed his iterative product lifecycle chart as a the ooh-aah-wow! model. After research with users there comes that moment of ooh! of understanding the user's plight. Followed by moments of deeper understanding as the product is refined & tested. If done right it ends up as a 'wow!' for the user.

Sarah Bloomer gave two talks. The first was a really great look at the process of designing interfaces. I really enjoyed the talk as I have the tendency to be more ad-hoc and found it to be a good refresher as well as a challenge not to forget some fundamental techniques. Her last talk was on a survey of what tools & methods were commonly used by designers. A few surprises card sorts & patterns ranked lowest. Wireframes of course topped the list. The most valuable tool? Talking to & observing live customers. No surprise, but quite often skipped. Sarah is a gifted communicator. I don't believe she has written any books, but certainly if she chose to it would be a great asset to the design community.

Back to Surya. Surya is an incredible speaker. He gave two short talks. The first talk was on Design Led Product Innovation. Examples he cited in Microsoft Vista were the Ribbon Bar (which does a great job of employing Focus + Context), the magic corner for 2007 provides all file related commands as well as recent files (the difference is in the display treatment of the rounded corner button and the actual menu window that is not bound by traditional menu sizing), and the send a smiley which allows real time digg-like voting for whether you are having a good user experience at the moment or not.

Some of the points he made:

• Virtuous Feedback Loops. Example: Send a Smiley.
• Deep Evidence. Using innovative technical solutions to gathering meaningful metrics.
• Simplicity is Hard But Worth Striving For
• Instead of FindAndUse it's now UseAndFind. This is the basis for the Office Ribbon Bar. With the incredible growth of features (which contrary to popular belief are needed to satisfy the wide audience) the Ribbon Bar took the approach to let the user USE the product and FIND out along the journey the commands as they need them. The old way focuses on the tools. The other on the flow.
• Constraints are Opportunities
• Details Matter
• Lead with Design/Validate with Data. I like this one in particular. This combines the interaction design approach of Alan Cooper with the detailed testing rigor of Jared Spool.
• Keep the Engine Under the Hood
• Don't Sacrifice Clarity for Depth

His second talk was on being a Change Agent (his unofficial title). This was
If you get a chance to hear Surya in the future I would highly recommend making the effort. I really liked the emphasis on understanding the culture and working within it, finding its values and using it to make the right changes.

My talk was on Designing for Ajax. I continue to give this talk in its various forms (I think I have given that talk 30 times since last January.) I am happy to report that it was very well received. I think most people appreciate the plethora of examples that illustrate the design principles. Sort of like a visual encyclopedia of current interaction patterns.

You can find my talks at billwscott.com

You can also see flickr photos of the easy7 conference.

In the Flow: Scrybe

Someone pointed me to a new product that is in limited beta release. It's called Scrybe. And all I really have right now is the YouTube video demo of the product (on their main page).

But what little I have seen, I really like.

Fluid Context
This is the terminology they use to describe the principle Xerox PARC described as focus + context, or information in context. At Xerox, they produced the hyperbolic tree, the fisheye and the lens approach as ways to dynamically show the current focus within the larger context of data.

In Scrybe, they use this approach in their calendar application.



This is the same approach Laszlo took in their calendar demo application



But there are a lot of nice touches they make to the calendar:

• Simple add button within the expanded context
• Busy/Free timeline legend for each expanded context
• Very simple drag drop for moving events around

GlobalTimez
I like the fact that time zone visualization is integrated into the product. Almost all calendar pickers, date pickers, etc. seemed to assume that user never goes anywhere else or doesn't work with folks in other time zones around the world. Though it is simple, it really helps in scheduling meetings around the globe. They integrate it with the date picker, a timezone map and within the timeline in the calendar.







Why is this important? Again you have the information within the context you need it. Minimize flow interruptions is a key principle.

The TODO list looks simple, you can drag tasks to calendar days to assign it a date... I like the touch of you drag it to the day, the tooltip tells you what date it registered and when you drop it it flies back to the todo list with the date associate. Nice touch.



Thought Pad
This seems like a nice tool for gathering your thoughts as you surf the web. The idea is to make it easy to collect while you are in the flow of surfing. This is the theme of their products... How do people work, what is their flow, how do we keep them in the flow.



Paper Integration
Yep, you heard it right. They make it easy to print out your calendar, appointments, tasks and take it with you on paper. This is so often overlooked. When I worked at Sabre I recall a conversation with Quantas Airlines. One of their big gripes with our incredibly detailed scheduling application was with what it printed out. It turns out that a lot of the users of the schedule got a printout and it went with them all over the airport. We had never considered how to format (nor had the gantt component vendor) the schedule for convenient paper transport!



So, I haven't used it yet. Might be different mileage once I get into the beta.

But the bottom line principles I see at play are:

• Keep the user in the flow.
• Bring tools into the user's context
• Keep information in context
• Tie information to interactivity
• Make all objects on the screen intuitively interactive
• Be nuanced in your simplicity (some animations, but extremely well done)

You can see more photos on flickr.

Lisbon, Paris, AjaxWorld, Code Camp, UI11, WebGuild & Ajax Experience

The last few months have been pretty crazy. In one 8 day stretch I put in 17,000 miles in the air!

I had a wonderful time in Paris presenting a couple of sessions on design & developing for Ajax to the People in Action folks. It is interesting to see the excitement about "what is possible" being a world-wide phenomonon.

The same week Luke Wroblewski, Kevin Cheng, Peter Merholz and myself (we have dubbed ourselves the "Bay4") had a great time in Portugal in the wonderful city of Lisboa (Lisbon as we say) giving 4 back to back talks to the first annual SHIFT conference. Our wonderful hosts Bruno Figueiredo and Pedro Custódio gave us tours of the city. Most interesting (besides being in Portugal) was having discussions with people from all over Europe about what all these changes in the web world means to them.

In Portugal there are wonderfully bright folks who are starting to really get the whole concept of innovation. For so long (at least this is what I heard from multiple Portugese sources) there is a strong cultural influence that shuns failure. Of course the freedom to fail is a key ingredient to innovation and something that we generally cherish in the U.S. (probably to a fault).

I had a wonderful chat with an engineering manager, Bruno Pedro at Sapo (sapo.pt, largest site in Portugal) who echoed these sentiments. He shared his enthusiasm about the Yahoo! Design Pattern Library as well as the Yahoo! UI library. Very encouraging to hear of the nice impact these tools are having around the world. He promises to share some of the exciting developments they will be making on this site.

You can check out photos from the various folks that attended as well as blog posts at Luke's blog, Luke's photos, Kevin's photos, Peter's photos and mine.

Closer to home I will be at the Silicon Valley Code Camp tomorrow (10/7/2006). There are 700 attendees and a bunch of us speaking. Its going to be at Foot Hills College this weekend in Los Altos, CA. Doug Crockford, Kent Brewster and myself will be giving talks from Yahoo!

This past week I spoke at the Ajax World Conference here in Santa Clara. Enjoyed giving my talk and had some great conversations afterward. But the highlight was getting to hear my fellow cube-mate, Doug Crockford, give his abbreviated Advanced JavaScript talk. Its definitely great material.

Next week I will be presenting an all day workshop with David (Heller) Malouf on Designing Rich Internet Applications at the UI11 Conference. Looking forward to the session (well over 100 signed up!) as well as the rest of Jared's exciting conference.

Then the next week I will be on a panel at the First Annual Web Guild Conference on "The New Web". I am an advisor for the Web Guild which usually meets over at the Googleplex. This looks to be a really great conference. Its very affordable and has an incredible lineup of great speakers like: Jared Spool (ui engineering), Ram Shiram (Founding Member Google), Marissa Mayer (Google VP), Kelly Goto (gotomedia) just to name a few. Still time to sign up!!

The next week Nate Koechley, Doug Crockford and I will be at the Ajax Experience. This was the best Ajax event I have attended (last event was in May) and I really look forward to hearing what the top quality speakers there have to say as well as connect with others in the field. That will be in Boston, hope you can join us there.

Designing a Component

I’ve designed a number of software widgets, components and gadgets throughout my career. In the early days of Mac programming I created small desktop accessories and my own set of components to enhance my application development (e.g., geographical map component, 3D graphics library).

Later in the days of Motif I wrote numerous components (spreadsheets, charts, directed graphs, server-side grids). I also made a trek through the TCL community creating components for the incr Widgets set.

I spent several years working in the world of Java Swing building components (in fact I built at least three completely different component sets for three different companies—thank God that we now see more things getting open sourced!)

I finally ended up in the land of web development taking trysts through HTC components, JSP/Struts components (tag libraries) and finally pure JavaScript components. There are a lot of lessons I have learned over the years in how to create useful components. There are three that stand out in my thinking:

• Make the component specific in purpose, yet flexible in use.

Avoid the do-everything component. Instead make it do the main thing well. But make it pragmatic by keeping it flexible.


• Separate the concerns of interface, interaction, and content.

Avoid hard-coding visual style, give flexibility in the interaction model and provide flexible ways to manage data content. Keep these three areas independent to allow them to be customized separately.


• Document the interface and use the component before releasing it.

You know the experience. You think you have a great idea. Then when you go to explain it to another person you immediately see the holes in your logic. Documentation provides a way to explain your interface; writing demos allow you to exercise the component to test its ease of use and flexibility.

Make it Specific yet Flexible
Make the component specific in purpose, yet flexible in use.


The agile community expresses the idea of simplicity over over-generalizing. One of the traps that people fall into is trying to build a component that does everything. Not unlike feature creep in application development, a component can collapse under the weight of too many features. One of the sure signs of this is when certain parts of the API start competing with other parts of the API.

As an example, let's look at the carousel. It is just a simple list view manager. You can actually make the carousel look like a tabset or a slideshow. However, I chose not to provide additional tabset or slideshow functionality. Why? I knew from experience that the interface would become unwieldy. Lots of new configuration parameters and methods would get added that only made sense if you were using the carousel strictly in slideshow mode. You can imagine that with enough features, some of the API would only apply to these tangential behaviors. The result would be a carousel component that ends up with portions of API that don’t even apply when the carousel is behaving “just” as a carousel.

A nice way to keep a component flexible is by providing a simple configuration mechanism. The Yahoo! UI library provides a Configuration object for just this purpose. (The first time I saw this mechanism in popular use was with the Prototype library.) Instead of having to pass lots of parameters to the carousel’s constructor (new Carousel()), you pass in a configuration object. The configuration object is really just an object that contains parameters and values encoded in JavaScript object notation. Here is an example from the wrap example:

   var carousel = new YAHOO.extension.Carousel("dhtml-carousel",
       {
           numVisible:        4,
           animationSpeed:    .8,
           animationMethod:   YAHOO.util.Easing.easeBoth,
           scrollInc:         3,
           navMargin:         40,
           size:              17,
           loadInitHandler:   loadInitialItems,
           prevElementID:     "prev-arrow",
           nextElementID:     "next-arrow",
           loadNextHandler:   loadNextItems,
           loadPrevHandler:   loadPrevItems,
           prevButtonStateHandler:   handlePrevButtonState,
           nextButtonStateHandler:   handleNextButtonState,
           wrap: true
       }
   );

Each configuration parameter has a default value. If the user provides a configuration parameter it is treated as an override and is applied to the internal set of configuration values. The carousel then uses these values in its operation.

Keep Concerns Separate
Separate the concerns of interface, interaction, and content.



If you have read other articles on my blog or heard me speak you will notice that I often fall back on this idea of separation of concerns along the lines of interface, interaction and content (or data). Sometimes I express it as feedback, interaction and information. And often I just state in the way I first learned it from the boys at Xerox as simply Model-View-Controller.

When I wrote the carousel I started with the basic understanding that I was creating a list view manager. The underlying HTML structure I chose to control was an “unordered list” (UL & LI HTML tags). Keeping my thinking general in this matter allowed me to separate several areas of concern. Here is how this concept of separation played out in the carousel.

1. Flexibility of Visual Style
First I wanted to provide flexibility in the component’s presentation. One of the ways I did this was by putting all style choices into a stylesheet (CSS). It’s really easy to hard-code style choices into the component logic. By placing style considerations externally you can help fulfill the first point above – keep it flexible. The other way the presentation was made flexible was by providing configuration parameters that select the way items are displayed. Control over the number of visible items, the animation speed and method, the size of a page of information, and the orientation are all ways that the carousel is flexible enough to adapt to most environments.

2. Flexibility of Interaction
Second, I decided that the interaction should be completely flexible. I did not want to constrain it to my choice of navigation controls or method of user interaction. In most of the current examples, previous and next arrow buttons control the carousel. While this is the normal case, it is easy enough to allow mouse over events drive the interface. The carousel exposes the same interfaces it uses internally. You can simply wire your events to the same internal mechanisms used by the carousel internally.

Microsoft Altas (now called Microsoft Ajax Framework) does a nice job of separating behavior from its components. For example, they isolated the behavior of auto complete from the components. This means that if you add this behavior to say a text field you would have an auto complete text field. It also means that you can write your own components and by obeying an interface contract, have your component support this behavior. In essense the interaction is packaged as a separate entity and just attached to the component needing the behavior.

3. Flexibility in Content
And third, I felt that there had to be flexibility in the way content gets displayed in the carousel. The simplest mechanism for this was to allow developers a way to shove their own HTML into any item in the list. The innerHTML technique is very useful in this regard. It is very friendly to PHP, JSP, ASP and other page generation techniques. It’s also the native way to express an interface on the web. What this means is that each “item” in the list could be a complete page of content, a single photo from a photo stream, a set of form elements—in short anything you want a “list item” to be it can be.

Another dimension of content is in how the data actually gets loaded. By externalizing the loading mechanism through a set of function callbacks (functions that you write that let you decide how to load the initial set of data and fetch the next and previous set of data) the component is able to support static data, client side generated data or server-side fetched data (e.g. via Ajax). Recently someone wanted to wire the carousel up to RSS feeds. Even though I had not considered RSS feeds, since the data loading was externalized, it turned out to be a fairly trivial exercise.

Test by Documentation and Usage
Document the interface and use the component before releasing it.



Alan Cooper advocates that designers design in pairs. One takes the role of Interaction Designer (ID), the other the role of Document Communicator (DC). In design sessions the ID takes the lead role in pitching ideas. The DC tries to capture the ideas and wherever there is difficulty in capturing or explaining the idea it is forced to go through some iterations to make it easier to communicate. The idea is that by having to explain your ideas. This doesn’t just work in designing user interfaces, but it also works in designing programmer interfaces.

As I am writing this blog post I am sitting next to Luke Wroblewski on a flight back from Lisbon. He saw this point in my article and reminded me of a post he wrote a while back on Nine Lessons from Nine Years of Interface Design. One of the lessons he notes is that “writing it down forces you to think it through.” On this point he summarize three good reasons for writing it down:

• Solidifies the approach. Guards against localized decisions.


• Articulates the rationale. Puts the solution in context of its use.


• Ensures clarity. If you can’t explain it, then nobody else will be able to either.

I find the exercise of both documenting and writing demos for components to be refreshing. It gives you a chance to come above the code cloud and both talk to the user and be the user of the component you are writing.

I finished the first version of the carousel in just 2 days. I spent the better part of the next 2 days writing documentation and creating demos for it. All during that phase I was constantly going back and rewriting parts of the code. Documentation can seen as a kind of test-first strategy for writing APIs. Writing demos is a good way to create tutorials as well as experience what it is like to really use your component.

Of course the biggest caution I would have about trusting too much in the demo applications you write is to realize that they are only demo applications. It really takes being exercised in several real world examples to fine tune an interface.

This lesson follows something that we try to employ at Yahoo! We call it “eat your own dog food.”

The phenomona of Yahoo! Hack Day has had a profound impact on the web services and APIs throughout Yahoo! (I would go so far as arguing that this has been the biggest impact of Hack Day—causing our services and APIs to become more robust.) When the Hack Team attempted to put together a combination of our APIs (events, maps, search, etc.) they discovered just how many things were missing. The creation of just that one demo pushed the discussion of what needed to be added or corrected—-and the result is a much richer API available to everyone (public included.)

Latest Talks, Upcoming Events

Had a wonderful opportunity speaking at BayCHI last night. Excellent turnout. The presentation material can be found here.

The highlight for me was hearing Matt Mullenweg, creator of WordPress talk about lessons he has learned in building a startup. Matt is only 22, but has the wisdom of a sage, is bright and incredible funny. Could have listened to him for hours. Also love to hear his "mom" stories :-)

I have a pretty full schedule over the next three months. Here is where I will be speaking:

• 08.15 - MetaDesign. San Francisco (private)
  
• 08.24 - O'Reilly Web 2.0 Summit. Sebastapol, CA (private)
  
• 08.25-08.27 - O'Reilly Foo Camp. Sebastapol, CA (private)
  
• 09.18 - Travelocity. Southlake, TX (private)
  
• 09.19 - Federal Reserve Software Convention. Dallas, TX (private)
  
• 09.25 - Rich Internet Conference. Paris, France
  
• 09.28-29 - SHIFT Conference. Lisbon, Portugal
• 10.02-10.04 - Ajax World Conference. Santa Clara, CA
• 10.09-10.12 - UI11 Conference (Jared Spool). Cambridge, MA
• 10.19 - Web Guild Conference. Mountain View, CA @ Google
• 10.23-10.25 - The Ajax Experience. Boston, MA

Luke Wrobleski, Jenifer Tidwell and others are planning a panel at SXSW 2007 in Austin. Our panel is on Design Patterns: Defining & Sharing Web Interface Design Languages.

Please vote for our panel!! You can select up to 10 panels from the Panel Picker at the SXSW site.