Anti-Pattern: Missed Moments - Roger's Chocolates

Anti-Pattern: Missed Moments

Recently Tim O'Reilly pointed out the nice Ajax interface that Roger's Chocolate employs. While I think it is pretty cool it does exhibit a common anti-pattern.

As Tim points out "to build a custom assortment of your favorite flavors, you first place an order for the standard assortment, then click on items to take them out of the box, and choose from a list to put others in."



Once you know that process it is indeed fairly easy to customize a box. The problem, however, is that it is not immediately obvious that is the process. Here is how you remove candy from the box (clicking on the 4th candy on the top row will delete it).

And now to add a new candy in it's place you need to click on one of the candy links on the left

The anti-pattern in operation is Missed Moments.

Missed Moments -- Not providing feedback throughout an interaction. Missed moments will confuse the user about what to do during an interaction.

In this example we have two actions we would like to cue the user to do. First, how to remove a piece of candy and second, how to add a new piece of candy in it's place. The current interface tries to do it through help text (a sign that there are no other cues to how to customize your box):

We know that users rarely read instructional text, so a better way to handle this is to provide some timely cues. We can do this through the use of invitational patterns -- inviting the user to perform an action at the moment the action is available.

For delete we can provide a type of invitational pattern, the In-context Tool. In-context tools provide actions near the object being hovered over (the focus of the current action). In this example, when the user hovers over a piece of candy we can show a Delete action represented by a delete icon in context. Here is one way this might be represented:

Compared to just the cursor changing:

Another obvious improvement is to place an invitational message in the empty area once the candy has been removed.

Here are some things I don't like about this. And some alternate suggestions.

• When you hover over the links they show up in the candy slot but don't stick till you click. Hover actions on links are usually confusing (another anti-pattern, Linkitus)
• Referencing another interface element way to the left in the nav list is problematic due to related elements being so far apart. The rules of proximity argue for it to be close by for the action.
• You could just use drag and drop of the flavors. Ideally it would be the candy items you would drag over into the box. But drag/drop is not highly discoverable.

Pulling it Together
Another approach that pulls proximity, invitations and in-context tools together would be to provide the choice for a new flavor like this:

Other ideas for improvement?

Events This Week - Dec. 2nd

Events This Week - Dec. 2nd

Attending & Speaking at Web Builder 2.0 this week in Las Vegas, NV (Dec. 3-4).

Later in the week I will be one of the judges for the PhizzPop Design Challenge (sponsored by Microsoft) down in Los Angeles, CA. That will be Thurs night, Dec. 6.

I also did a podcast with Jared Spool (UIE.com) on Friday. It was about the upcoming Web App Summit 2008 in Coronada Island, CA where I will be giving a talk on "When Designers Get Too Clever: Avoiding the Traps of Bad Design". We chatted about Yahoo!, Netflix, Patterns, Anti-Patterns, Yahoo! Teachers and so on. Always a blast to chat with Jared. Should show up here when the podcast is live.

Look me up if our plans intersect.

Anti-Pattern: Misguided Misdirection - DirecTV

Ok, so I moved to the bay area a couple of years back. I am from Dallas. So with the cowboys doing such an incredible job and the local teams being so horrible I decided to watch some "good football". So I added the NFL Ticket to my DirecTV. As a "bonus" they give you NFL SuperCast. Its a way to watch football online when you are traveling, etc.

So after logging in to the DirecTV site and digging around in the left nav I found the SuperFan (also called SuperCast :-) Login link. Here is the page presented to me:

Apart for the confusing use of "SuperFan" and "SuperCast" here was my thought process:

• I am logged in (A)
  
• It recognizes me as a Registered DTV customer (B)
• But wait, it is asking me if I am registered (C)
  
• Does that mean I am not registered with the SuperFan service? Because it surely knows I am registered (since I am logged in)
  
• Am I a Sunday Ticket SuperFan subscriber? Heck, I am logged in-- you don't know? Yes of course I am.
  
• Hmmm... maybe I need to "Register" my DTV account with the SuperFan service? (D)
• Its also asking me if I am even a DirectTV customer. Huh?
  

At this point I clicked "REGISTER" (thinking I need to register with the SuperFan service).

Did you catch the error message?

You are currently logged in or we are recognizing someone else that has been using this computer. At the top of the page you can either log out or let us know if we are recognizing you or not.

Huh?

Ok, so my problem is I was reading too much in the first page.

Notice the message "Not a DirecTV customer" (E) and the "Order Now" (F).

Even though I am logged in (and thus registered) and have SuperCast/SuperFan the rest of the page does not know if I am registered, if I have SuperCast or even if I have DirectTV!

This is an example of the Anti-Pattern: Misguided Misdirection. It happens when a page has misleading cues, calls to actions, etc. leading the user to do the wrong thing. Notice the large call to actions on the page are "REGISTER" and "ORDER NOW". In reality since I am logged in and a SuperCast member and a DirecTV customer, I don't need all the advertising pleas to get me registered and to buy DirectTV.

What is even more frustrating is after calling the customer support line I suggested they put a note in for the web team to fix this incorrect messaging. I got a "cold shoulder" response and it was obvious that DirecTV did not have a process for this to happen nor did the customer support person care in the least that this page creates a lot of unnecessary calls to their call center.

At Netflix we try to listen carefully to our call center. One recent example was our reps telling us (in a focus group) that they were getting frequent calls with users not being able to find the Member Login link when they come to the Netflix site logged out. The fix? Real simple. Enlarge the "Member Login" link and change the background making this easier to find. The good news-- It worked!

Anti-Patterns: Talk at Web Builders 2007

Earlier this year I started giving talks on Anti-Patterns for Interaction Design.

What are anti-patterns?

Anti-patterns, also called pitfalls, are classes of commonly-reinvented bad solutions to problems. They are studied as a category so they can be avoided in the future, and so instances of them may be recognized when investigating non-working systems. The term originates in computer science, apparently inspired by the Gang of Four's book Design Patterns, which displayed examples of high-quality programming methods. - Wikipedia, Anti-Pattern.

I think of Anti-Patterns as pitfalls with a pithy name.

Like the software anti-pattern counterparts, the following anti-patterns are common pitfalls to avoid when designing interactions.

In the weeks months years :-) to come I will discuss a number of these anti-patterns with real-world examples.

If you are at Web Builder 2.0 in Las Vegas, NV next week I will be giving the Anti-Patterns talk there as well as my Designing the Rich Web Experience Talk (Principles & Patterns).

We are Hiring

Ok, so I am still new at Netflix. But thought it might be interesting to write up my first impressions.

Sean Kane, my predecessor did a really great job of helping me understand the culture so there have been no surprises. No surprises, but a good bit of delight.

Here are some of the ways I would sum up what I have seen so far.

Treated Like Adults
This is a really important cultural trait. It starts with salary. You choose the mix of $ to equity and have the flexibility to switch it around from year to year. We pay extremely well (hey we even brag about it on the site). But it goes beyond that. It works it's way into HR, recruiting and all the other parts of the company that in other places tend to be out of sync. We don't make a bunch of rules. The HR policy manual is extremely small.

Transparency
There is an amazing amount of transparency of how the business is run as well as successes and failures. This makes it a great place to learn and thrive.

Blend of Science & Art
Truly it is consumer science here. A lot of experimenting and analysis. It is very intriguing to work at a place that really gets the importance of a great interface as well as balances it with the realities of business.

And did I mention that we have some of the most incredible work policies and pay anywhere in the country? And we are doing very well?

Ok, so we are hiring!

I am looking to fill two positions immediately on my team.

Sr. Staff UI Engineer
This is a senior position in which you will work closely with me and my team of engineers to improve, architect and code integral solutions that impact the whole site. This is a really key role that will take our site to the next level from a web development best practices, performance and infrastructure perspective.


Senior User Interface Engineer – Customer Service
This is a new position that we are opening up this week. In this role you will help re-design and engineer a new web based customer support center. We will put the same care in this site that we do with the main Netflix site. Many of the ideas, solutions may find there way into the general Netflix site as well. If you love building great web applications then please give me a ping.

Other Positions in Other Teams
Adrian Cockcroft, former Sun Distinguished Engineer and eBay research labs member is just one of the luminaries here at Netflix. Adrian has two immediate openings on his team.

Creative Director.
Yes, we are looking for a talented creative director to work directly with with our VP of Product Management, Gibson Biddle, on taking design for Netflix to a whole new level. Up for the challenge? Let me know.

Sr. Marketing Graphic Designer
Barry Enderwick is looking for a talented graphic designer to work in his team. Barry's team creates the brand, the advertising, the badges, the printed material, etc. If you are a graphic designer this is an awesome opportunity to work on one of the most recognized brands in America.

For all of these positions, feel free to email me. You can reach me at b dot scott at yahoo dot com.

Netflix Here I Come!

Over the last 2+ years I have had the honor and pleasure of working for one of the greatest companies on the planet and with some of the greatest designers & engineers on the planet.

Yahoo! has been a great place for me. I learned a lot. Feel like I contributed a lot. I have had an honored position as a mouthpiece (a genuine one) for Yahoo!

Now its time to move on to the next challenge.

I am excited to announce that I will be joining Netflix as the Director of UI Engineering. Netflix is one of the most amazing companies to work for. And I think the most exciting days are ahead for Netflix. The challenge of digital delivery is something that I think they (we) are ready for.

I am succeeding the excellent Sean Kane who is in stealth mode, co-founding a new startup. I wish Sean amazing success and am looking forward to applying my talents and energies to the world of movies!

MIMA - Jason Freid

Finally got to hear Jason Fried (37 Signals) in person.

I know that Jason is controversial and his stance on team size, ways of working are controversial and cannot (I believe) be applied in every situation.

Its a lot like Extreme Programming. Back at Sabre I lead two engineering teams and we were doing full on XP, agile methodology. As long as it was not treated like a religion but was a set of principles to inform your work I found it to be really useful.

Onto the talk. Jason had some great points. Lots of things that I agree with.

Keep your team small

• Forces you to focus on what's important
• Clearer communication comes for free
• "Communication usually fails except by accident"

Collaboration is about communication, not control

• Keep your team apart. Interruption is not collaboration. Interruption is the enemy of productivity.
• Encourage alone time
• Stay away from each other as much as possible
• Communicate more passively, less actively.

Meetings are toxic

• Usually a symptom of a problem, not a solution. Mentioned a business leader in Brazil who advocates that all meetings are optional.
• Meetings convey an abysmally small amount of information per minute
• Require thorough preparation that people rarely do
• Tend to procreate
  

Instead make tiny decisions

• Decisions are progress
• Progress is great for morale

So I am a realist. Organizations do grow in size. So you have to work hard at keeping teams small. And we should avoid meetings wherever possible. However (and Jason talks about this) you need to communicate with each other in ways that are least disruptive. Meetings do have to happen (Jason is not saying never have a meeting... just they are very infrequent and really are more working sessions).

In different teams I have led I have instituted things like "No Meeting Days". No one is allowed to call a meeting on those days. Or "Work from Home Days". They were all designed to give designers & engineers "flow time". Time to get into the flow of what they are doing and stay there.

If you can have a few hours of non-interrupted productivity it is amazing what you can accomplish. I have had people remark at my crazy "weekend projects". What happens is I get off by myself, no interruptions, no IM, no email and just get into the flow of what I am working on. That zone is the same thing a runner feels with they get that "glow", the groove of running.

Jason talked about the power of REM sleep and compared it to REM Work. Uninterrupted flow. What is interesting is I have over the last few years biased toward open office arrangements. I am beginning to rethink this. Why? Its too easy to interrupt your co-workers with trivial stuff that doesn't demand immediate attention. And verbal communication can be very redundant and time consuming.

A couple of months back I was trying to get a lot of stuff done. So instead of checking email every 15 minutes (!) I decided to check once in the morning and once in the afternoon. Man, I cannot tell you how it changed my day. The ability to get into some work without interruption was exhilarating.

If nothing else, Jason's talk was a wonderful reset for me to think how I manage and remember my number one priority is to make those that work for me successful, productive, motivated and appreciated.

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.

MIMA - Lee Rainie - Internet Usage

I attended and spoke at the MIMA (Minnesota Interactive Marketing Association) Conference yesterday.

The conference had around 700 attendees with backgrounds in design, marketing and advertising. I was really impressed with the conference and came away with some nice nuggets.

First up was Lee Rainie. Lee is the founding Director of the Pew Internet & American Life Project. They study in detail the impact of the internet on American families. Lee's talk was jam-packed with stats. The podcast will be available next week as well as the slides which I will post then.

First, some basic stats.

Internet Usage:

• 72% adults
• 93% high schoolers
• 98% college students (with margin of error could be 100%)

Broadband has reached almost 50% homes in U.S.

• 55% of online teens have created their own profile
• 51% of young adult internet users have uploaded photos to the internet

• 26% teens remix stuff they find on the web as posts, blogs, etc.
• 9% of adults

From their research they break down internet users into 10 types (unfortunately I am missing some of the percentage breakdowns). The big surprise is that the low tech crowd is 49% of the population! And only 8% are technophiles!

High End Group

Omnivores - 8%
Late 20's. The gadget lover crowd. Own an iphone (probably live in the bay area :-). Photo & video freaks. Wireless. Lots of students & racially diverse. Broadband 90%.

Connectors - 7%
Late 30's. Email & IM primarily. Really into technology but messaging is critical. Skewed toward women & upscale African American.

Lackluster Veterans
40'ish. Broadband 77%. Tech is necessary for them, but not exciting. The like the experience of being off the grid. Often rather watch TV than youtube.

Productivity Enhancers - 8%
40'ish. Broadband 71%. Flipside of lackluster. Use for productivity. Skewed toward english speaking latinos.

Middle Group

Mobile Centric - 10%
Skewed toward African Americans & Latinos. Not early adopters. Phone texters. Photo takers.

Connected but Hassled
Mid 40s. Female dominant. Worries about information overload. Tech is not fun!

Low End Group

Inexperienced Experimenters - 8%
Enthusiastic, but very inexperienced. Not tech savvy at all. Easily confused by the technology & blames themselves.

Light But Satisfied - 15%
Prefer Traditional Media. Mid 50s.

Indifferent - 11%
Broadband - 12%. Lifetyle choice is to NOT be online and be proud about it.

Off the Network.
Mid 60s. Female dominant. Diverse Race. Poorest Group. Broadband - 0%

To find out what type you are, take the quiz at the their site.

The last nuggets was Lee's take on 10 ways the internet changes the life of people it touches.

• Volume of Information. Long tail expands
• Velocity of Information. Smart mobs, wisdom of crowds, bottom up intelligence (think google search, social networks)
• Venues of Intersecting. Place shifting, time shifting, having "absence presence" (e.g., physically there but chatting with someone else over the internet)
• Venturing for Information. Search strategies change, expectations of what you can find out changes.
• Vigilance for Information. Attention is truncated. Continuous Partial Attention and elongated attention (deep dives for information). Result is "expert amateurs". Someone goes home from Dr. and researches medical condition and sometimes can know more than the Dr. did about the specific condition and latest treatments.
• Valence (relevance) of Information. Being Digital. The Daily Me. The Daily Us. People become alienated in social & information bubbles of their choosing.
• Vetting of Information. Becomes more social. Credibility tests change as people ping their networks.
• Viewing of Information. Information is disaggregated. Becomes more horizontal. New reading strategies to digest information. Coping mechanisms.
• Voting & Ventilating. Tagging, rating, commenting. Collective intelligence emerges.
• inVention of information & Visibility of new creators. The read/write web. Everyone can publish. More people become "famous".
  

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.

Why Protoscript?

Ok, the last thing in my mind when I created Protoscript was for it to be YAT (yet another toolkit).

I have been asked several times what really makes this different than toolkits like jQuery. And what is the compelling reason that someone would use Protoscript.

The motivation is straightforward:

• Prototyping is too hard for non-techies

The reasons Protoscript can help solve some of the difficulties with prototyping are as follows:

• Simplifying how we express interactions is a good thing
• Behavior injection is a powerful iterative design tool
• Plug-in Behaviors guarantee a growing set of prototyping solutions
• By focusing on prototyping, things get simpler
  

Prototyping is Too Hard for Non-Techies
The end goal of Protoscript is a simple GUI that will allow non-techies to:

• Go to any web page
• Sprinkle simple to complex interactions onto that page
• Do all this without writing code, but simply through an intuitive interface

I am a huge proponent of breaking down the barriers for the non-techies among us to be able to do what us techie geeks can do.

I have been fortunate to work with some awesome talent, many of which do not have the skills, the time or patience to prototype in Javascript.

Do I want to exclude them from the party? No.

If I can let more team members literally play with a working site and tease out better interactions then I have raised the state of the art (even if ever so slightly).

Simplifying how we express interactions is a good thing
By allowing an interaction to be expressed in a consistent, stylized declarative fashion (JSON) a whole set of goodness becomes available:

• Widely variant interactions captured with same simple syntax
• Nested syntax communicates the relationship between behaviors, events, callbacks & attributes
  
• Non-programmers can read Protoscript better than JavaScript code. jQuery comes the closest to making Javascript readable by non-programmers (see discussion below on Protoscript and jQuery).
• It is a lot easier to write a GUI tool that reads and writes JSON than it is to read/write Javascript. (This is why so many tools use XML or JSON since they are declarative formats)
• JSON can be sent over the wire. This means a simple REST service could serve up and/or save JSON to remote services.
• JSON is easier to parse
• JSON is easy to write out to a database or as a flat file

Behavior Injection is a Powerful Iterative Design Tool
The Protoscripter bookmarklet is the first step in providing behavior injection. It allows you to popup the bookmarklet on any web page and type or paste in Protoscript code to inject interactions. (You can get it from the Protoscript Home page.)

Here is a fun example of this... Watch as I experiment with burritophile.org (mind you this is a contrived example)



Beyond the bookmarklet, it should be straightforward to create a Greasemonkey script that loads Protoscript (Alex Russell's suggestion) or a Firebug extension that adds prototyping to Firebug (Steve Souders led the way with YSlow) or a full on Firefox extension that brings palettes of behaviors to a page and adds smart element selection to make behavior injection simple.

And of course the extensions also open the door for being able to save the configuration to your desktop and recall/edit as needed.

Plug-in Behaviors guarantee a growing set of prototyping solutions.
Non-partisan, extensible plug in architecture allow an ever-growing set of interactions. Out of the box I support YUI as the behavior set (behaviors, events, callbacks and attributes) and jQuery as the selector mechanism (supports CSS selector syntax and XPath). But Protoscript allows you to add any number of new behaviors, write your own behavior set on other Javascript toolkits and plug in a different selector query mechanism.

This means that Protoscript is really not in opposition to tools like jQuery. I really like jQuery. I have always been a fan of syntactical sugar. It lessons the cognitive load when writing code.

jQuery has a powerful chaining and filtering mechanism that allows you to control the scope of elements you are applying behavior to.

Some of the advantages of Protoscript over jQuery for prototyping are:

• In jQuery, behaviors are passed parameters and since they can vary in the number of parameters that get passed to them it is not easy to parse, stylize of guess at what must be passed. Protoscript promotes the parameters to be attributes in the JSON thus making the syntax the same across all behavior plugins. Since they are attributes they can also be read by external gui tools to automatically create a GUI interface
• Protoscript uses a nested syntax instead of a single line of chained code. This allows protoscript to express chained behavior, changing scope and attaching behaviors & events (both can be done easily in jQuery). Where the JSON syntax gives a novel twist is now you can express in one interaction set a number of serial as well as chained actions.
  
• Event expression is richer in JSON since you can express multiple events in serial fashion along with multiple callbacks thus capturing the forking nature of interaction as a tree instead of a single list.

Now I hasten to add that I do not believe Protoscript in anyway replaces jQuery. That in my mind is wrong and missing the point. Heck, I wrap jQuery and use it for my query selection (but not for behaviors, callbacks, etc. in the YUI reference implementation). jQuery does more in raw power than Protoscript ever aims to do.

Quite simply I am focused on prototyping. jQuery certainly can be used for prototyping. I just think that for all the reasons above it made sense for me to take a different approach.

By focusing on prototyping things got simpler
Protoscript just says, hey what if we did not try to everything that you need to do write a full-blown application... but instead focused on what you need to do to prototype.

When I looked at it that way it simplified the building blocks and the way you might hook them together.

The design of the JSON syntax was actually driven by the way I imagined the prototyping GUI tool would look like. That is certainly a different approach than most toolkits take. And the only reason I could take that approach was because of the laser focus on prototyping.



Doesn't this make sense?
Look, I have created this and plan on continuing to grow and expand its capabilities. I have no aspirations to replace what anyone else is doing. I have struggled with this problem for over 25 years and especially the few years trying to bring richness to the web.

I have tried to make this as non-partisan as possible.

Hopefully others will create behaviors around their favorite toolkits (or adapters to their behavior sets) so that the GUI tools built for this will be able to seamlessly use them as well.

Announcing Protoscript

Wow. It has actually been 2 months since my last post. Nope. I have not fallen off the planet. This has been one of the craziest times I have experienced in a long time so while I have had a lot to chat about I have not had the time to blog coherently.

One of the projects I have been working on is a way to make it easier for all of the non-techies (as well as techies) to be able to experiment with various interactions on a web page in lightweight manner.

By lightweight, I mean to say a way to take an existing web page or a prototype of a web page and "sprinkle" rich behaviors to play with concepts. Ideally you should be able to express an interaction in a declarative manner without having to write JavaScript directly (but not kept from it if you need to). And even more ideally you should be able to build up the "legos" of interaction in simple GUI tool embedded in the browser so that you are not encumbered with even a simple syntax to type in.

So back in July, I was slated to give a talk at the Ajax Experience. I promised a few months before that I would have 2 new talks. One on Anti-Patterns (yes I owe several blog posts on that one) and the other on prototyping.

The problem was exactly one week before both talks I had literally had not time to put those talks together. So I dropped out for a few days to create a very early version of what is now protoscript. The good news was that it was actually fully functioning and I gave a peek of it at the conference.

I got a lot of good feedback from the talk and went back and rewrote it a couple of times, changed up some of my approach, moved to a plug-in style architecture, etc.

So, ok, what is protoscript?



Protoscript is a simplified scripting language for creating Ajax style prototypes for the Web. With Protoscript it's easy to bring interface elements to life. Simply connect them to behaviors and events to create complex interactions.

The key abstraction that came out of my thinking was to express everything as objects (think HTML elements), behaviors (think patterns) and events (both events and callbacks).

In some ways it is similar to jQuery. And in fact I use jQuery for the selecting of elements. Protoscript, however, is a very stylized way to describe interactions. This makes it ideal as a building block.

For example, since the language is so simple (It is actually in JSON format) it makes it easier to extend to multiple toolkits (currently I use YUI, but I have built a simple example with Mootools), add new behaviors and events and even more importantly be able to build GUI tools on top of it.

As a first hack I created Protoscripter a bookmarklet that brings a GUI interface to any web page allowing you to play with protoscript (without any installation, other than the bookmarklet) and experiment with interactions.

I have been careful about pushing protoscript out because of this layering approach. Ideally I would have the whole stack. I would have a complete GUI as a FF extension allowing designers, product marketing or web devs to quickly sprinkle interactions onto their prototypes and quickly iterate to the best design. Well that is not reality. I have invested about 2-3 weeks of time so far and feel I have gotten it to the right level to release to the public.

There are 31 behaviors, 40+ live demos, a simple GUI tool (protoscripter). The scripting engine seems to be pretty solid (knock on wood). I have a full wiki with full documentation on all those behaviors. The code is over in Google Code in a repository ready for open source contribution.

So to kick it off I am giving a talk this morning at the Rich Web Experience here in San Jose. You can get a PDF version of my talk here: Prototype Presentation.

And most importantly start checking out prototoscript.com (right now the best experience is in Firefox).

Come Work With Me!

I am having the hardest time filling two positions on my team. And I am working on what I think is one of the coolest products in Yahoo! (Yahoo! Teachers). I don't feel like I am asking for too much.

Here is what I am looking for.

Two passionate, talented software engineers with experience in developing web 2.0 social applications. While they must be proficient in PHP/mysql, I am looking for engineers that understand good software architecture, scalability concerns, performance engineering, and skills at assessing and implementing integration points with other Yahoo! platforms and properties. Experience with developing web services and/or search technologies is a plus. No need for front-end web development experience as the two positions focus on backend services and technologies. But of course any front-end experience is a plus.

To apply you should have at least 3-5+ years of experience. The key is web application development. Not interested in software engineers that have built microcontrollers or mobile apps or embedded devices or written some html. Seriously. This is an incredible opportunity, loads of fun, very rewarding... So how about it?

Both jobs are similar. Here are the postings:

Tech Yahoo, Software Apps Dev Eng, Sr

Tech Yahoo, Software Apps Dev Eng


Apply at the site. Also if you want drop me a line at: yteachersjobs [at] yahoo [dot] com.

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.

Express Yourself! UX Event

Our local Microsoft UX Evangelist, Will Tschumy (formerly of Flock) is putting on a UX Design/Bar Camp-like event.

They have asked 5 leading design firms in the bay area (AARF, Organic, AKQA, Frog, IndustryNext) to compete head-to-head to solve real world problems. Focus will be on using Microsoft Expression & Silverlight technology.

I will be one of the judges for the event... Sounds like it will be fun, with drinks & mixer afterwards.

Join us on June 22 in San Francisco at 111 Mina!

Should be a blast :-)

See the details at:

http://upcoming.yahoo.com/event/198868/

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!

New Role: In the Trenches

So as the new year came round I start re-evaluating what it was I wanted to do at Yahoo! I have had an amazing 1.5 years here getting a chance to launch the public design pattern library, doing evangelism for Yahoo!, creating some components and working on some cool projects inside Yahoo!

As I looked at 2007 I could see that a number of opportunities still existed for me to go out and speak. In fact I had about a dozen events already in play through the middle of June.

Sometime last year I began helping (part-time) with technology and design consultation for a new Yahoo! site. I am not at liberty to announce the product at this time but at the first of the year I was offered the chance to become the engineering manager for this team. The product is an awesome idea and it promises to "do good" for our society. So with a passion for the goal, the product, the team and the challenges, it was a no-brainer for me to decide to step out of the evangelism role and take on the challege of putting into practice all the things I have been talking so much about. It's time to get in the trenches!

I am leaving a very talented evangelism team to join another extremely talented team that I feel honored to work with here in Sunnyvale. The current engineering team (in Bangalore) is doing an incredibly awesome job getting the first version of the product ready.

My management graciously offered (even encouraged) me to continue my speaking adventures. But I decided that in order to have sanity in my life and in order to do the best job for the product I would pull back from speaking and put my head down into this project. I subsequently canceled most of the events lined up and at this point I think I only have one event left to speak at this year.

I am considering taking the material from my talks and putting it into a book or ebook. But in the meanwhile I think the best thing is to start writing a series of blog posts that capture the current thinking I have on the topic of design patterns, principles and practices. Also I will be posting my RIA Best Practices talk from the Web Apps Conference in Monterey, CA on slideshare.

The other big news is Yahoo! was fortunate to have recruited Christian Crumlish as the new Yahoo! Design Pattern Curator. Watch the yuiblog and the ypatterns site for cool stuff coming out from Erin Malone & Christian!

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.