As I wrote in my personal blog Loud Murmurs, I’ve been really busy lately. This is because I’ve recently started working full-time on a contract at IBM’s Pacific Development Centre in Burnaby, BC on a project that I’m unfortunately not able to blog about (but it’s really interesting; take my word for it).
Nevertheless, next weekend, I am making a presentation at BarCampVancouver entitled Effective Animation in User Interfaces, which is my attempt to present my thoughts on what makes animated elements of a good user interface that really help users, versus eye candy that can actually detract from the user experience (no matter how ‘pretty’ it is). I’ll put up a copy of my slides and examples (examples of screen recordings from Windows XP, Vista and Mac OS X) here.
In the meantime, I’d be interested in any thoughts from others about this subject, both before and after my talk.
Have you included “fading notifications” (don’t know what they’re “officially” called), like the ones that Google Reader gives you when you “mark all read”? I’ve seen one or two different (web) implementations, but haven’t thought much about which one I like the best.
Some parameters:
placement (a dedicated space used only for the notifications or displayed on top of other content)
size
border?
length of text
color (color difference compared to surroundings)
…
The ‘Fade’ effect came up at work the other day, and I remember a discussion (and some URLs flying) about it.
For this talk, I decided to stick to OS-centric examples rather than web ones, partly because I wanted to get away from discussions of implementation, AJAX, CSS etc. and to talk about some of these abstractly, divorced from products or services (aside from the product of the OS itself). If I start comparing GMail’s sliding panels to Backpack’s, well you can see it quickly becomes more about taste than utility.
The talk is also about the different roles that animation play in a UI, and there (at least, today) are more options in the desktop UI than the web UI, although that’s steadily getting ‘richer’ as some people call it.
Since Vista has been around for a while now, I thought it would be particularly interesting to look at the ‘eye candy’ aspects of what MS did in the product, as well as what some of the animations we’ve become used to seeing (and maybe even take for granted) do.
I take some comfort in how hard it is to do this stuff really well. The parameters you list like placement, size, and general look all contribute to a successful couple of seconds (and a better informed/oriented user). But that’s all it is, one effect in a couple of seconds (and it doesn’t even move, per se!)
Your suggestion has me thinking about a second talk, which applies some of the examples from the first talk to the web world (where we can, at least).