Everything Good You Needed to Know About Javascript*

(*and even the bad parts)

At Yahoo! I had the privilege of working directly with Doug Crockford and got to review a book he was writing at the time, Javascript The Good Parts.

This book is different than most other Javascript books. It just focuses on the language itself and not the browser DOM. It reveals both gems and warts. And it does it in a simple straightforward manner. It reminds me of the classic The C Programming Language book that I cut my teeth on.

This is a must for your bookshelf.


You can get JavaScript: The Good Parts at Amazon.

Everything You Ever Wanted to Know About Forms*

(*but were afraid to ask)
My good friend and former Yahoo! colleague, Luke Wroblewski, has just published a most excellent book called Web Form Design.

Forms are everywhere. And when something is so ubiquitous, it tends to get absorbed into the back of our consciousness. Luke takes the lowly form and shines a spotlight on form usability. This book is full of best practices, tons of examples and lots of great insight from a dozen or so other leading web practitioners.

And hey. I can get you a 10% discount. Just go to Rosenfield Media and apply the code BSCOTT. Just enter it on the last page of checkout. You will save 10% and get a great book.

Omnigraffle Wireframe Stencil for the iPhone

Theresa Neil has recently been designing an iPhone application. In the process she created a wireframe stencil for OmniGraffle to make her life easier. Thought I would pass along.



You can find the stencil at Graffletopia

Update: Now on her blog.

Netflix Jobs - Two Positions Open (4/29/08)

Sr. Web UI Engineer

At Netflix I have an immediate opening on my team. This is an exciting opportunity to ply your amazing web development/engineering talents to one of the most recognized brands on the Web! In this position you would join an absolutely amazing team of Web UI engineers at an exciting time in Netflix history.

We are currently refactoring the entire Web UI layer. As a team member you would be responsible for specific areas of the site and participate in moving our site to latest Web standards (think unobtrusive javascript, layered semantic markup, hijax, etc.), working to improve client performance (think yslow and beyond) and working to realize lots of new approaches to our interface.

Over the last few months we also have been growing the design team and our team works very closely with both product management & design to create cutting edge solutions.

Here is the job. Don't hesitate to contact me if you are interested. Email me at: b DOT scott _AT_ yahoo dot COM.

Sr. Software Engineer -- Open APIs
Michael Hart, our Director of Open APIs and Community is looking for an Open APIs Sr. Software Engineer. This is an incredible role. Netflix is in the midst of opening up a suite of developer APIs and you can help make this happen. Get in now and shape the way developers all over hack and mashup Netflix!

If you are interested drop me a note at the email I referenced above.

--
Bill

Anti-Pattern: Idiot Boxes - Yahoo! Photos

In Alan Cooper's About Face 3 book he states a simple principle:

Don't stop the proceedings with idiocy.

In the context of flow he describes the scenario:

One form of excise is so prevalent that it deserves special attention. In the previous chapter, we introduced the concept of flow, whereby a person enters a highly productive mental state by working in harmony with her tools. ... Interrupting a user's flow for no good reason is stopping the proceedings with idiocy and is one of the most disruptive forms of excise.

I call this the Idiot Box Anti-Pattern.

One of the clearest examples of this was with the Yahoo! Photos 3.0 product (which has been replaced by flickr).



What follows are two idiot boxes. The first asks the user if they really meant to carefully select three photos, drag them carefully over the album and drop them there? :-D



The second one tells them that the system really put the photos where you dragged them to.



Now feedback is good. But only in carefully measured doses. This is overkill. But simply removing the idiot boxes leaves you with an interface that has no feedback. What we need is more nuanced feedback during a few of the drag and drop interesting moments.

The first moment is when dragging over a valid target (the photo album). A simple highlighting of the album (there are many options, this is just the simplest) on drag over would let you know you are successfully targeting the album and that it is receptive to photos being dropped there.

The second is immediately after the photos are dropped into the album. A simple feedback would be to always show the number of photos in the album. Once the drop occurs update the tally beside the album and perhaps temporarily spotlight the change area.


On the drop there is no feedback in context. Instead two back-to-back idiot boxes are displayed


A revised design uses highlighting, running tally and spotlighting (fade technique) to give appropriate feedback

Using an interesting moments grid is a nice way to think about every possible place you can engage the user. Just in time feedback, in context is a powerful way to engage a user and eliminate heavy-handed approaches -- like idiot boxes.

Blogged with the Flock Browser

Anti-Pattern: Pogo Stick - Google Blogger vs. Backpackit

In my previous article I ranted about Google Blogger. Let me rant some more :-)

Besides being a good example of the One at a Time Anti-Pattern it is also a good example of the Pogo Stick Anti-Pattern (I first heard this term from Jared Spool). I define it as:

Requiring the user to go down a level or two, perform an operation, come back to the top and then have to go back down again. The name comes from hopping up and down through the site.

In the Google Blogger example I described the process of deleting comments requiring a multi-step process:


Pogo Sticking in Google Blogger

It takes three page refreshes to complete the operation and return to where you started.

Compare this to the way you can delete in Backpackit.


Backpackit provides an in page one step delete

What to do about delete confirmation?

1. Don't provide one. If the item is trivial (like an item in a list) you can just let the user delete it without bothering them with an idiot box (pointless confirmation).
2. Provide one. In Google Reader they use the standard Alert mechanism. This is less than desirable since depending on the operating system the confirmation can appear far away from the deleted item. On the Mac, the alert slides out under the title bar which forces the user to move the mouse far away from the delete operation. Another approach is to provide a lightweight overlay (with a DIV or iFrame) to confirm the delete. They can appear quickly and in context with the operation.
3. Provide an Undo. Google does this in several of its products. In Google Mail if you delete a mail message you get a chance to undo the delete.

Deleting mail messages can be undone in Google Mail

This is a clever way to present a one-time undo by tying it to status messaging (along with contextual help).

By using a direct In Page Action pattern, the Pogo Stick Anti-Pattern can often be eliminated.

Blogged with the Flock Browser

Anti-Pattern: One at a Time - Google Blogger, Reader and Backpackit

Ok, I really shouldn't use blogger. I mean I get a disdainful look from most other bloggers. How can I have a serious blog on blogger? And at times some of its deficiencies drive me completely nuts. I keep planning to move to WordPress but inertia keeps me using blogger.

But one thing that drives me completely bonkers is the administration of commenting. I recently was spammed like crazy across all my articles. For some reason I stopped getting notification after the new Blogger was released (even though I had the "send me email when I get a comment" option turned on.) Needless to say I have it set so that I have to moderate all comments (unfortunately).

So when I did find out about the spam, I had to go to every article (still not done) and delete the spam one comment at a time.

Here is the process:

1. Go to blog article and find spam comment
2. Click on trash can icon to delete
3. Get taken to another page
4. Click the "Remove Forever" checkbox
   
5. Click the "Delete Comment" button
6. Click the link to go back to my blog article
7. Scroll back down and find the next article, repeat steps 2-7 as needed.

This is a classic Anti-Pattern that I call "One at a Time". It's when you force the user to only be able to act on a single object at a time.

Steps 1 & 2:


Steps 3-5:


Step 6:


Now imagine having to do this for 50 spammed comments. Now you can get a feel of how painful the One at a Time Anti-Pattern can be. This also illustrates the Pogo Stick Anti Pattern -- forcing the user to go back and forth through several page levels to accomplish a single task.

This makes my original example in my Anti-Pattern talk look very paltry. I used a very simple example from an early version of backpackit.



Clicking on Lettuce requires the user to wait a second before hitting Tomatoes to avoid a race condition. Now this is a minor nit and only comes into play when you are clicking several to do items in succession. Note in the latest version of backpackit this is not an issue since the time it takes for an item to respond that is is checked is almost zero seconds.

But this does show up in other places with varying degrees of annoyance. Often there is no way to do a bulk operation like delete all items. Here is an example from Google Reader.

In this example from Google Reader, they do provide a way to remove multiple feeds. In my original comments on this interface I missed the bulk remove since the use of the trash can and the unsubscribe button don't match each other well -- leading me to originally miss the bulk remove. Thanks to Dan (comment below) for catching my mistake.



To delete you have to click the trash can icon. For each click you must confirm the delete.



Hopefully you will not have to do this for a bunch of feeds. Your best bet is to export the OPML file and edit the XML directly :-)

There is also a mixture of interaction idioms employed on the same page:

• Direct In Page Action. 
• Delete. Action happens immediately when you click on trash can tool. Follows the One at a Time anti-pattern.
• Rename. Action happens immediately when you click on 'Rename'. Follows the One at a Time anti-pattern.
• Change Tag (Folder). 'Folder' equals 'Tag'. Unlike the select then tag, this allows you to add or remove a tag by selecting/deselecting the tag/folder from an individual drop down list for each item.
• Action on Selection. 
• Tag. Select items with check box then click the function to start the action on the selection with the Drop down (More Actions...). This is is especially confusing since you are led to think the drop down would be a filter since it lists all your tags (and is sandwiched between two filtering mechanisms).
• Unsubscribe. The Unsubscribe operates on selected items (not to be confused with the visible filtered items).

It's not all bad to mix these idiom styles. I think the use of a trashcan for unsubscribe is what is most confusing.

Even with the bad labeling this is better than Google Blogger which provides me no way to delete except one-at-a-time.

Ok, so I feel a little better after all this ranting. Now I can get back to deleting the spam comments -- One at a Time.

Blogged with Flock

Pattern: Refining Search

Theresa Neil has another great post this time on The Ultra Rich Search Experience.

She finishes up the article with a stab at redesigning the carmax.com search example more as a true car finder using a pattern I tend to call Refining Search. Others have called it a Faceted Search. Theresa describes it as an Ultra Rich Search. The best example of this is in kayak.com and roost.com (which has an absolutely superb house finding tool).

  
Theresa applied a real-time, iterative filter refinement ala roost.com

Where this type of patterns is really useful is when there is a large body of items that have clear facets (like size, color, brand, flight time, price, #bedrooms, texture, etc.). The mistake that most people make when implementing a refining search is not following some simple rules:

Refine in real-time
Clicking a bunch of check boxes or changing text parameters and then having to scroll down and find the Submit button is a ridiculous exercise to put the user through. The user is in an exploration flow. Don't break their flow with needless hunting for the submit button. What is the purpose? Hunting for product or hunting for your interface elements?

This is the ebay model. While it does a good utilitarian job of refinement... it is painful to experience.


eBay requires you to hit the submit and get a refresh to see next iteration

Avoid one-at-a-time experience
Some choose to avoid real-time filtering since it can be noisy to continue to refresh the display on each click (I talk about this as an Anti-Pattern, called One-At-A-Time-- forcing users to wait for updates on each click.) This is easily resolved by waiting to trigger the search until the user has not clicked for some small amount of time. With this mechanism you can click, click, click, pause... then search instead of click...search..click...search...click...search. We employed this technique on Yahoo! for Teachers.


In Y! Teachers you can click multiple filters without a reload. Waits for activity to stop.

Keep it smooth
Use Ajax or other in-page remote scripting to smooth out the load. Don't refresh the page! You will break the user's flow. The page will probably bounce back to the top. It will suck. Don't do it! Use a simple progress animation overlayed lightly on the content area to direct their attention to where the results will be.

Make the filters easy to Tweak
Try to avoid making the user type in values. Use sliders where it makes sense. The problem with sliders is the granularity of control and dexterity it requires to manipulate them. But if the values are large (like house prices) or there may be confusion about how to input the data (like using comma or not or whether to include the last 3 zeroes on house prices) a slider can avoid the ambiguity.

Make the filter controls easy to manipulate
Using simple check box on/off is the simplest approach to binary filters. You can visually treat them to make them not so busy... but keeping it looking like a checkbox is good since it is easy to understand.


Roost provides nice filters that are easy to work with

Keep the Context
Watch out for too many collapsible areas. Don't use accordions. Nobody wants to have to open an close each area one at a time to do filtering. And you need to see the full context to know how you have it filtered.


Y! Autos Car Finders uses large, klunky collapsible areas partly to hide a very large set of filters

Make it easy undo filtering
Just an undo all filters is a nice way to start a search over.


Roost has a simple reset

Provide a way to save & compare items for later
Being able to select items that get found, save them for comparison later is powerful for product choices. Roost lets you "highlight" properties. It remembers all hightlighted properties and at any time you can choose to view only those you have saved in this manner.

Blogged with Flock

Anti-Patterns: Talk at eBig 2008

Had a great time last night giving a talk at eBig, forum for Web Devs & Designers in Emeryville. Nice attendance. Lively discussion and great Q&A afterwards. You can find a PDF version of the talk online.




I continue to refine this talk on anti-patterns. The next time I present this is at Jared Spool's Web App Summit 2008 in Coronado Island, CA.

Blogged with Flock