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.

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.

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?

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.

Upcoming Talk: Bringing Design to Life (Rosenfeld Future Practices Webinar) - Feb 26th

I am excited about a new online seminar that I will be giving Bringing Design to Life: What Every Designer Should Know about Interface Engineering. This is part of the Rosenfeld Future Practice Webinars series (a joint venture of Smart Experience and Rosenfeld Media).

For the last 25 years I have been solidly focused in the world of user interface creation. At times I have been solely focused on design and at other times on interface engineering. At other times I have held both responsibilities at once (e.g., leading a UX team while leading two interface engineering teams). Having spanned both design & engineering, I deeply understand the challenges is translating ideas into products. For this talk I decided to focus specifically on how web designers can work in the most efficient manner with their engineering counterparts. It is the "stuff" that most engineers wish their design colleagues knew.

This 60-minute webinar is initially available as a live class, and then is made available in a DRM-free recorded, edited format. By avoiding the travel required in attending a physical seminar or conference, you save money and reduce your impact on the environment. You are free to watch the webinar with colleagues in a conference room, making for an even better value. The cost is only $129.

Join me on Feb. 26th (18:00 GMT / 1pm EST / 10am PST) for Bringing Design to Life: What Every Designer Should Know about Interface Engineering.

(Previous webinars include Luke Wroblewski on Modern Web Form Design and Indi Young on Using Mental Models for Tactics and Strategy. Also check their schedule for a complete lineup of monthly webinars.)

Also, if your are interested in purchasing materials from Rosenfeld Media, please use my discount code when you visit the site (good for a 15% discount): SCOTTWBNR.

Photo credit: Auroville: Under Construction from premasagar's flickr stream, 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