Slot Machine Tabs (Needless Fanfare)

Ok, one more in this vein. Please indulge me as I find it humorous what abuses can be foisted on the user.

Jumping Tabs (Needless Fanfare)

Another example of the Needless Fanfare anti-pattern. Do we really need tabs leaping up to meet your mouse?

Designing for Interesting Moments Talk

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

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

Here is the longer version of the talk.

Designing for Interesting Moments

View more documents from Bill Scott.

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?

Anti-Pattern: Animation Gone Wild - Borders.com

Borders.com just announced the new Borders.com

I ambled over curious if there were any new Ajax style interactions. And what did I find? A classic example of the anti-pattern Animation Gone Wild. This is when you employ gratuitous animation that adds no value either in communication or engagement.

Here is a screencast of it in action.



Instead of popping up the book, music, dvd information quickly we are required to watch the talent of the developer to sloooowly animate the box into place. Come on folks, we can do better than this!

There is no need to see utility objects like this animate into place.

Here is the general rule. Try your feature without animation. Is the meaning clear? If so then don't add ANY animation. If it is not, try adding a quick animation. Did that get it? Then stop there.

Save animation for when you need it. Animation is good for at least seven reasons:

• Maintain context while changing views. Carousels are a good example of this. The scroll animation helps the user maintain context as they move through information.
  
• Explain what just happened. The Apple store Customize your Mac uses this to highlight price changes while configuring a Mac for purchase.
  
• Show relationships between objects. The Mac Genie effect when closing or opening windows. It is fast enough and it ties the iconified window to the dock.
  
• Focus attention. Backpackit's Spotlight technique focuses attention on the change that happened.
  
• Improve perceived performance. Progress Bars.
  
• Create an illusion of virtual space. Yahoo! Home page's personal assistant (Tabs animate open).
  
• Engagement. Mini-Cooper site, configure your car. The animation is fun.

BTW, I go into detail on animation in my upcoming O'Reilly Book, Designing Web Interfaces.

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

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

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

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.

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.