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.

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.

Big D Talk - 5/30/2009

Thanks to all that attended my talk in Dallas. What struck me the most is the vibrant community of designers, innovators and startup incubation that is growing locally in Big D. From my visit to CoHabitat in uptown Dallas to the Big D Conference itself I found the same conversation threads that I hear every day in Silicon Valley. Maybe it's the immediacy of information available now that brings us all closer. Or maybe the economy is driving lots of people into consulting and scrappy self-funded or low-funded startups. But it is refreshing to see it in action.

For those wanting the Big D version of the talk (slight variation on previous versions) you can get it from billwscott.com/share/presentations/2009/bigd/DWI.pdf


An earlier version is available on Slideshare.

Designing Web Interfaces Book - O'Reilly Webcast

View more Microsoft Word documents from Bill Scott.

Speaking at Big D Design Conference this Weekend

Happy to be traveling to Dallas to speak at the Big D Design Conference. Lots of interesting speakers. In particular looking forward to hearing Norm Cox's keynote as well as hear from several former colleagues: Micah Laaker, Jim Carlsen-Landy, Stephen P. Anderson and Adam Polansky.

I will be speaking on Designing with Patterns at the 1pm slot on May 30th -- a shorter version of my 3 hour workshop I gave at WebVisions 2009.

On the personal side I get to visit 2 of my sons, daughter-in-law, grandkids as well as mom and brother.

WebVisions 2009 - Workshop & Talk

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

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

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

Here is a description of the workshop.

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

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

Many patterns are discussed. Here are the main ones:



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



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

Designing Web Interfaces Book Site and Flickr Companion Site Live

I am happy to announce that the two companion sites to my book are now live.

designingwebinterfaces.com is the companion book site as well as the book's blog site. Look for some exciting articles on the blog in the next few weeks.

The companion Flickr site should also be helpful as it provides all of the book's figures under a generous Creative Commons license.

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: 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

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!