Mental Note Cards - Stephen Anderson

I mentioned a great talk a while back by Stephen P. Anderson. In that talk Stephen teased us with a project he had started for capturing design principles/patterns in a deck of cards. The good news is you can actually pre-order a set now at a discounted rate! Already ordered mine.

Check it out at getmentalnotes.com. He also is offering a preview set of 7 cards in PDF format.

Renting an Idiomatic Experience

When my wife & I arrived in Seattle recently, we rented a car from Avis. After an exhausting re-route to a different counter than the one conveniently located beside the baggage claim area and a long, long wait to get a car (geez, what do most people do at the rental counter? I just say "rent me what I ordered, I don't want an upgrade and no I don't want insurance") we got to our 2009 Altima.

Now I am not into cars. Except for a brief stint as a teenager tricking out my Camaro with Keystone Classic chrome wheels and hosing down the glass-pack mufflers to make it sound really loud I have mostly settled for "cheap & paid for". So when I was confronted with "keyless ignition" I was frankly baffled.

Here is what would have been the key.



Now I get FOBs and I know that keyless ignition exists. So I thought, ok this is cool. I looked where the keyhole should have been and saw this:



So I pushed the Start/Stop button.



Hmmm. ACC. Ok, accessories are now on. Radio, etc. So I need to push it one more time.



It says "On". Right. But the engine is not on. Just the stupid "On" light is on. Ah. Maybe I need to hold it down at this point to get the engine to start.



Back to square one! Defeat. Deflated. Ok, so now I do what every user does when faced with something that didn't work. I do all of the steps again. And again. Now I know better. But still I keep cycling through Off-Acc-On-Off again and again. I look around the car. Checking out the dash.



I look to the left side of the dash.



Ah. Maybe I need to buckle my seat belt... Nope that did not do it. I see the Brake indicator. Take off the emergency brake? Nope that did not do it either. By this time I get out of the car and look for an Avis representative. I feel really, really stupid by this time. I am a geek. I am a designer & an engineer. I decide there is no way I am asking someone how this thing works. I will figure it out if it kills me. So back in the car.

Finally I notice (by peering over the steering wheel slightly) some items lit up in the center of the dash!



First icon. Foot on a brake. Second icon. What is that? Hmmm... the gas pedal is next to the brake. So that must mean madly press the gas as I press the brake while pushing the Start/Stop button.

Success! Although I almost flooded the engine.

It turns out the second icon means "push the button". Maybe if it had been a finger on the "button" I would have gotten the sequence: foot on brake, finger on button.

Ok, so now that I know the magic sequence, keyless ignition is cool. In my everyday experience it is much better than keyed ignition. Just hop in the car with "key" in my pocket, put my foot on the brake and push the button -- awesome! Normally a car salesman would have happily explained it to me. But in the Avis parking garage I had no car manual nor anyone explaining the process.

My experience figuring it out was very frustrating. Yet the everyday experience was not. Why was this?

Since I was left to figure out this sequence on my own I had to rely on what I already knew about about starting cars. And it had nothing to do with putting your foot on the brake. This you see is not an intuitive interface. It is what Alan Cooper calls an idiomatic interface.

In Cooper's book, About Face 3 he describes three types of interfaces: instinctive, intuitive and idiomatic (pp 273-275).

An example of an instinctive interface is when you can't keep your eyes off of the dancing cowboys in the ubiquitous mortgage ads. Your brain is hard-wired for attention processing.

An intuitive interface is one that utilizes the brains ability to do a mental comparison between familiar experiences and a new one. An example might be guessing what the trash can icon on a desktop does since you already understand a real world trash can. Putting items in it would throw them away.

But getting items into the trash can may not be something you could intuit without being shown drag and drop. This is the last type -- idiomatic. Idiomatic interfaces are what make up most user interfaces. Scroll bars, nested folders, radio buttons, drag and drop are not instinctive or immediately intuitive. Instead you have to learn how to use them (yes there is a gray line between intuitive & idiomatic). In the original Mac the shortcut for ejecting a disk was to drag it to the trashcan. Not intuitive and not instinctive, but idiomatic. Like learning the idiom "beat around the bush" once it is learned it is easy to use in common speech. Ejecting a disk by dragging to the trash can was a nice shortcut (before the mac had right click menus).

Once I was shown this idiom I did not forget it.

Another example of an idiomatic interface is the iPhone's ability to move items around. You hold your finger down for a second or so on the icons on the home screen. They get jiggly. Then you can drag them around. Totally not intuitive. But idiomatic. Once learned it is easy to do.



So back to the keyless ignition. This is an example of an idiomatic interface. Not intuitive. Why the brake + the button? Why not just the button? I am guessing this keeps the kiddos from starting the car up. Also guessing the seat requires someone sitting in it before the brake + button would even work -- all safety features. But even though it was not intuitive it was learn-able. And as with all good idiomatic interfaces once I learned it the interface was simple.

Alan Cooper states it this way:
All idioms must be learned; Good idioms need to be learned only once.

Anti-Pattern: Needless Fanfare (Turbo Tax)

I mostly love Turbo Tax (except when it tells me I owe a tax payment :-). But here is one that I found to be very annoying and a good example of an anti-pattern Theresa & I write about in our book... Needless Fanfare.

While doing my taxes back in April I was constantly going back and re-entering information that would hopefully bring my tax payment down (numbers below are not my actual tax payment :-)

Here is the real time version.



When turbo tax recalculates your tax burden it plays the Biggest Loser TV show's game of running the values up & down in a random fashion. The change in the videos below is from $10,533 down to $9,177. However at one point it goes all the way up to $98,000! Now we all know that "inside the computer" calculations are not done this way. Someone thought this would be cool way to call attention to the change happening.

But let me tell you this is a horrible experience. It gave me a heart attack as it ran up & down playing with "my money" till it finally said "ok, ok it went down". But because it does this nonsense it makes it hard to see what change actually happened (a variation on change blindness).

Now watch it in slow motion to see what it is doing.



There are other ways to signal a change. The most common is to spotlight the change for a brief moment usually using a fade anything technique (see these examples.)

Torturing me is not a good user experience. This is as fake as the Biggest Loser scale.

Anti-Pattern: Geek Speak (Facebook)

Need I say more?

WebVisions 2009 - Bringing Design to Life

What are the disconnects between web design & web development? How can the two work together more efficiently? What do developers wish designers knew?

I gave this talk today (May 21, 2009) at WebVisions 2009. Enjoy!

Bringing Design to Life

View more presentations from Bill Scott.

Update: Designing Web Interfaces Book Available for Pre-Order

In an earlier post I mentioned our upcoming O'Reilly book, Designing Web Interfaces that I coauthored with Theresa Neil. The good news is we are getting very close to publish date -- December 2008 or January 2009. It is now live on Amazon and available for pre-order.

You can read about the contents of the book here and here.

The book is a partial outgrowth of various talks I have given over the last few years: Designing for Ajax, Designing Web Interfaces: Principles and Patterns for Rich Interaction and When Designers Get Too Clever: Anti-Patterns.

(By the way, the bird on the cover is the Guianan Cock-of-the-Rock and the image is from Johnson's Natural History. Yeah, I feel like strutting ;-)

The work on the Yahoo! Design Pattern Library also helped frame of lot of the ideas presented in the book (there are 75+ patterns discussed).

Additionally the work that Theresa & I did at Sabre Airline Solutions in documenting design patterns, performing heuristic evaluations on two dozen complex airline products as well as actively designing new solutions for the suite of products brought a lot of the principles to light while writing this book.

Two other items I am very excited about.

Companion Flickr Site
First, following the example of Luke Wroblewski (who also wrote the Forward to the book) we will be making all of the figures and illustrations (over 500 images) available on the companion Flickr site. In addition since many of the images are keyframes that illustrate steps in an interaction, I will be making the original screencast movie available on the flickr site as well. You can see an example of this for All the Web's Live Search (Yahoo! experiment that is no longer available). Like Luke, we will make all this material available via Creative Commons. You will be free to use it in your presentations, etc. We only require attribution back to our book.

Companion Book Site
Additionally, Theresa & I will be posting and keeping up to date a companion book site, DesigningWebInterfaces. We will be posting new examples, new patterns, new anti-patterns as well as links to other great pattern sites or books. Note, that it is just a "parked" page at the moment. Look for the site to be live around the book publish date. Stay tuned here for the go-live announcement.

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.

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

Roundup: Feb 8, 2008

Javascript and CSS

• John Resig - The Performance Paradox
• Ajaxian » jQuery UI and jQuery Enchant Alpha Versions Released Today
• danwebb.net - Event Delegation Made Easy In jQuery
• Surfin’ Safari - Blog Archive » querySelector and querySelectorAll
• John Resig - Tracing JavaScript
• John Resig - JavaScript Library Loading Speed
• Ajaxian » Firebug 1.1 and getfirebug.com
• John Resig - Sub-Pixel Problems in CSS
• SitePoint Blogs » CSS Reset Reloaded. Again.

Design

• SitePoint Blogs » Oprah’s Book Club? I don’t think so…

Cool Stuff

• Farecast Now Offers International Flight Price Predictions
• PMOG as a kind of Augmented Reality
• FriendFeed: Ex-Googlers Create Social Network Experience Using Feeds - ReadWriteWeb
• Google Android - a sneak preview | Reg Developer

Funny

• map of springfield
  
• 5min - How to Negotiate - Tips for Yahoo! - Video
• Flickr: The MICROSOFT: KEEP YOUR EVlL GRUBBY HANDS OFF OF OUR FLICKR Pool

Interesting News

• Television New Zealand Gives Up on DRM
• Rural Texas Gets Superfast Wireless Broadband - GigaOM

Roundup: Feb 1, 2008

Some interesting announcements around jQuery

• Ajaxian » jQuery Validation Plugin v1.2 Updated
• Ajaxian » jQuery UI Lead is hired by Liferay
• Ajaxian » Dreamweaver Users Rejoice! Support for JS Libs Now Available.

General interest

• Ajaxian » YUI Grid CSS and Grid Builder
• Julien Lecomte’s Blog » YUI Compressor Version 2.3 Now Available
• molly.com » W3C HTML5 Working Draft Published
• The New Browser War: Mobile Firefox vs. Opera Mini - ReadWriteWeb
• Ajaxian » Rhino on Rails: JavaScript MVC on the server
• Have Facebook Apps Peaked in Popularity? - ReadWriteWeb
• SitePoint CSS Reference

Design

• Ajaxian » Seek or Show: Two Design Paradigms for Lots of Data
• Ajaxian » Dominos: Changing the feedback model
• Tufte iPhone video

And on the funny side

• Dateline Hollywood » Blog Archive » CONGRESS AND PRESIDENT BUSH AGREE ON NETFLIX REBATES FOR AMERICANS DURING WRITERS STRIKE

Design Paradigms for Lots of Data

Theresa Neil (longtime friend, co-conspirator on Open Rico, Sabre UX team and various other projects) has posted her first blog :-) Yes folks there are still a number of really smart people who don't take the time to blog.

Anyway she has a very nice post about two design paradigms for navigating through lots of data.

• The Seek Paradigm: Have the user ask for what they want.
• The Show Paradigm: Display everything up front, and let the user explore and organize it.

The first is usually more prevalent on the web. The latter usually more prevalent on desktop or deeper web applications. Theresa lists 10 different patterns illustrating Seek and Show.

Anti-Pattern: Chart Junk - Virtual Pizza Pie Chart - High Tech Chartjunk

Another anti-pattern we should consider relates to how we use visualizations or present charts.

Edward Tufte calls the clutter that often obscures charts or visualizations chartjunk.

Usually it's meaningless colors or styles that hinder rather than help clarify the actual meaning of the chart. But what happens when chartjunk meets high-tech? It gets even more useless. During the CNN coverage for the Iowa Caucus, Anderson Cooper introduced "The Magic Pie Chart". This has got to be one of the silliest abuses of technology I have seen in a long, long time. I can't wait to see what the networks come up with for the 2008 General Election.



What I love is how the technology completely takes over. It pops out and looks like it could hurt someone. Then it obscures the rest of the panelists. And finally Anderson is so enamored with trying to keep it from bursting again that he is using all his brain cycles to keep the 3D virtual pie chart on that silly piece of cardboard.

Here is a more traditional example of chartjunk from Tufte's site.

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?

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).

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.

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.