I met Chet at the 360|Flex conference. We were on a panel together and talked about the UX of animation. Chet works on the Flex SDK especially focused on the animation/transition parts of the toolkit. Romain works on the UI toolkit for Android (including animation)
He & Romain spent some time last year studying the excellent book The Illusion of Life about Disney Animation by a couple of the masters of animation. The book discusses 12 rules of animation. They extracted a few principles from the book that apply directly to animating user experiences and shared them in the talk Animation Rules! they gave last year at Devoxx in Belgium.
Some of the takeaways from the rules of animation:
Squash & Stretch. Lifelike objects deform in reaction to gravity & collision
Anticipation. Short actions just before the main one. Give hints to the user about what will or may happen.
Staging. Clearly communicate to the audience what is happening (poses, camera views, lighting, focus). Emphasize the important elements. Avoid too much noise.
Follow through, overlapping action. Realistic body physics. We are not rigid bodies.
Using Slow in & out.
Using Arcs in motion.
Secondary actions. Actions which emphasize or complement the main.
Timing. Careful timing of actions for realism, impact & effect.
Exaggeration. Making actions more lively, more obvious, more entertaining.
Solid drawing. Drawing has to be solid before you can animate well.
Appeal. Believable, appealing characters that the audience can enjoy.
Chet & Romain's Proposed Rules for GUI Animation:
Timed: Fast, realistic & appropriate
Designed: Use animations for good, not evil
Smooth: Don't make your users hate animations
Transitioning: Bring the users along
Realistic: Motion, timing, interactions.
Anticipatory: Hint what may happen
Simple: Help the user, don't confuse them.
This is just a summary. So make sure you watch the talk at Chet's blog.
Pull down Tool Area as Shade. Nice effect of the tool surface area pulled out further in the center. Looks like a fabric curtain shade being pulled down.
Drag to Pocket. In the middle between the two panes you can drag items to the "pocket", flip pages, etc. and then drag them out. Reminiscent of trays in picasso, yahoo photos or just the clipboard.. Nice simple implementation.
What Stands Out to Me
2 individual panes. Perfect for book reading. Perfect for master/detail pattern (which is being exploited in the ipad as well).
Pen, finger & hand gestures. Little wider input vocabulary as you advance in skills.
Even more physicality than iPad (or at least it appears so if the video is really a true representation). When objects are selected, they move upward to a higher plane and float above the other elements. Using the z-index is a clever way to represent selection. When the elements break free of "flatland" they wiggle/wave like a flag as they move into position. The page that gets mailed, transforms itself into a postcard through a series of origami style folding.
The pocket is really clever. Store stuff in the binder/gutter and move around then pull it out.
The language of object on object meaning is also richer than the iPad (will the normal consumer understand this?)
The use of the pie menu with the pen is a good idea. Pie menus have been shown to be efficient and seem natural in this interface.
Returning to the pen. Being able to use the pen for finer pixel level manipulation is good (again, this is not as simple as just the finger, but provides more capabilities). Also being able to input with the pen (hopefully they nail this) should be faster than the keyboard for short spurts (don't have to leave the surface to begin writing).
Gobbling while surfing. I am not sure if my former colleague Karon Weber has been involved in this project (she works on touch based interfaces at Microsoft with Bill Buxton). We did the Yahoo! Teachers project together and she & Samantha Tripodi designed the gobbler which I built. The premise was easily grabbing content from around the web and dropping it into "wells/objects". In the Courier this is made simpler by tossing into the right pane (the receptacle for the drop). The tossing seems pretty effortless and the landing target is huge (can you say Fitts law?)
Of course, all of this may just be vaporware, but regardless I found it useful to analyze the interactions as they illustrate where interfaces will be heading as we break away from the world of pure WIMP (Windows, Icons, Menus, Pointers).
I find it helpful to take these interactions and "slow them down" as a series of keyframe screenshots. Doing so gives you a chance to appreciate the care that went into designing each of these interactions.
A quick observation. There is a longer delay than I expected when initiating a swipe (like a page flip) or activating an edit (like editing in email). In the case of the swipe there does have to be some movement first to discern the swipe event. In the case of the edit activation it seems the delay makes the interaction feel right (a tap is the tap down and pull up just like the mouse click is a mouse down + mouse up... the up part is sloppier with the finger). Also see the delay of items being selected for delete.
Another observation that I am unsure about may just be an artifact of capturing snapshots from the video. There appears to be blurring of images at various stages in the swiping transitions which would indicate faster motion. You can see this effect in flipping photos and zooming the map. Again without having access to an iPad this may just be some artifacts of the capture process... but this would be a good way to make a transition feel faster (speeding up gets blurred as well as moving fast; slowing down gets clearer as well as actually slowing down). [Update: Martin Polley pointed me to an article by Keith Lang on Blur the New Black that could be helpful in understanding this. [Update to the update: I am fairly convinced this is an artifact of the video capture process. However, blurring is a good way to smooth animation.]
Here is the quote from Apple's iPad Human Interface Guidelines:
Whenever possible, add a realistic, physical dimension to your application. The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.
As you work on adding realistic touches to your application, don’t feel you must strive for scrupulous accuracy. Often, an amplified or enhanced portrayal of something can seem more real, and convey more meaning, than a faithful likeness. As you design objects and scenes, think of them as opportunities to communicate with your users and to express the essence of your application.
Use animation to further enhance realism in your application. In general, it’s more important to strive for accuracy in movement than in appearance. People sometimes feel disoriented when they see movement that appears to defy physical laws. As much as possible, make sure your virtual views and controls mimic the behavior of the physical objects and controls they resemble. Convincing animation heightens people’s impression of your application as a tangible, physical realm in which they want to spend time.
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.
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.
I am busy this weekend restructuring a talk I have given in the past that parallels my book. I will be restructuring the way I present the information as well as bring in new material. When I was at the Big D Design conference in Dallas in May I was really impressed by Stephen P. Anderson's presentation on the Art and Science of Seductive Interactions. Not only was the material helpful, but Stephen's take-aways and presentation organization were excellent as well.
Anyway I am looking forward to a fresh take on this topic. The talk will be titled Designing for Interesting Moments. I will be giving this same talk on 8/24 at the Microsoft campus in Redmond as well as at a Ruby Meetup group (event details in a followup blog posting).
If you can make it meet me at the Google Campus on Wednesday night, 7/22 at 7:30pm. Note: It will be in Seville which is in building 40, not building 43 as advertised!
By the way, I have embedded Stephen's talk (again not mine!) here for your enjoyment:
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.
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.
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.
(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.
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.
(*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.
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.
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?
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).
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.
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.
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:
Go to blog article and find spam comment
Click on trash can icon to delete
Get taken to another page
Click the "Remove Forever" checkbox
Click the "Delete Comment" button
Click the link to go back to my blog article
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.
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.
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.
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.
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.
book he states a simple principle:
