In our book and often in ourtalks we discuss a technique for thinking through and documenting detailed interactions in a user experience. Just arrange the interesting moments in a grid. List the "actors" (user interface elements) vertically and the events horizontally. The cells in the grid become the interesting moments.
With the classic example from the of drag and drop there are at least 96 interesting moments (6 actors X 16 events = 96 interesting moments).
About a month back I gave a talk at Zurb, a northern California design firm, in which I discussed this technique. On Friday I was pleasantly surprised to see they had already taken the idea and used it in a new product they announced last week -- BounceApp -- which was featured on TechCrunch.
At the last Web App Masters TourLuke Wroblewski gave a great talk on Forms in Action (quick plug -- you can hear him again in Minneapolis, Philadelphia or Seattle as the tour continues in those cities as well as myself and others!) Luke brought out that on the good side more forms have added interactivity to form field validation. Error prevention is an important design principle. An ounce of error prevention is worth a pound of error handling design and code.
But on the bad side some forms are actually hurting the experience by either being too aggressive or trying to be too clever in input assistance.
I stumbled across two examples to add to Luke's collection. Both come from a very useful tool Its Deductible. I highly recommend the tool for what it does as it encourages me to donate more items and allows me to accurately take them off my taxes each year. Big fan. But two not so good experiences in their forms.
Not Clearing Error Message
Its Deductible Error Message on Login Screen
I entered the wrong account name and got a message bubble warning me about it. Good things about it:
The bubble is clearly worded.
Red color got my attention.
Is nicely placed
However, the screenshot above is after I started typing a new login name. Even after I tabbed into the password field the error message stayed up. What's bad about this? I got immediate feedback that something went wrong. But got no credit for trying to fix it. Once I started typing the new login name the bubble should have disappeared.
Draconian Date Input Handling
How many times have I entered a date in a web form? So I just need to know are you expecting month/day/year format and whether I should type the slashes or not. However watch the video and see how poorly I entered the date!
Its Deductible Date Input Handling Don't even think about entering slashes or not giving 2 digits for the month, 2 digits for the day and 4 for the year. Anything except typing 02092009 will fail.
Here is what went wrong.
You have to enter 2 digits for the month, 2 digits for the day and four digits for the year. Why? Next bullet point...
You can't enter 'slashes'. If you do you get two slashes! And when you submit it won't like that.
It is obvious there was some effort put into assisting me in entering a date correctly. But unfortunately it took me about 45 seconds to figure out their algorithm and enter the date in exactly the way they wanted me too.
BTW, You can use SCOTT for a 10% discount on the talks in Minneapolis.
A design lens allows you to view your user experience design from the perspective of a single design principle. Lenses were originally created for game design but are just as powerful for user experience design.
I recently started documenting lenses that I find useful on a new site Designing with Lenses. Though it only has 3 lenses to start with, more lenses are coming in the months ahead.
To get the whole scoop, go read the introductory article Designing with Lenses over on UX Booth.
This article is part of a series of posts written by the speakers of UX Lx, The premier UX conference in Lisbon, Portugal; happening on May 12th–14th. There's a great lineup of speakers and Portugal is absolutely beautiful, so head over to the conference site. You can enter UXBOOTH2010 for a 10% discount.
To get updates on new lenses follow my uxlenses twitter feed here.
I will also be talking on this subject at CHIFOO in Portland tomorrow night (April 7 at 7pm). Join me if you can!
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.
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.
