I’ve had a bit of a conundrum lately about the best way to capture and catalog simple on-screen interactions, such as bookmarking, tagging, adding to basket, in-context editing, etc. Examining such user interactions up close is an excellent way to pinpoint best practices but there is seemingly no perfect tool out there for capturing this information.
See, screencasting utilities were designed for tutorials, for capturing complex user journeys, for full window displays. And indeed this works well enough for web apps like Screencast-o-Matic but doesn’t really fly for showing short interactions. Meanwhile most desktop utils out there (for example Wink) will capture a series of screenshots and output them as SWFs, executables or videos - hardly ideal formats. One last alternative is simply doing a series of screenshots - a huge annotating and cataloging nightmare. And then there’s the problem of sharing. To collect a reference library of a particular interaction, such as tagging, you’d want to slap it on a community site for the world to learn from. This has been done beautifully with static screenshots, but doesn’t reveal much about the user interaction with these UI elements.
So what WOULD be the ideal solution? For me, it would be the humble animated GIF. It’s perfect for storing just a few frames of an interaction within a small area of the browser window. Take, for example, Flickr’s in-context editing:
These little picture bundles have the additional advantage of being easy to decompress. Pop them into ImageReady or some other program and voila, you can examine each step of the interaction frame by frame. Or have each frame play back as slow or fast as needed. But animated GIFs are uncool and unloved. No decent utility I could find outputs screencasts as animated GIFs and no one wants them on their picture sharing site. Boo.
In the end I might settle for video capturing using something like CamStudio and uploading the mini-screencasts to Flickr. Flickr Video has the nice advantage of being able to play thumbnailed versions of the videos on the listing page, which makes the UI reference library model work quite nicely:
In this example we have WeHeartIt.com’s bookmarking interaction:
Click, right-click, double click. Once in a while, type a bit. The web may not be a dull place but the act of surfing it sure is. It’s repetitive and soul-sucking.
The Wii and a slew of Apple products have sought to change all that, turning us all into orchestra conductors or weavers of invisible thread while reducing repetitive button pressing to an afterthought (chalk it up to Steve Jobs’ koumpounophobia). Even Opera has chipped in with the mouse gestures in its recent releases, making the boring old mouse a bit more exciting.
But why? Why involve gestures - these manual metaphors - in web browsing when they’re not adding any value? Most things they accomplish can just as well be done with a button or a context menu or a keyboard shortcut. What’s more, they must be learned.
Here I could yammer for a bit about the richness of the user experience, blah blah blah, about perceived control. But instead, somehow, I tie it all back to an empty yoghurt pot.
The topic of this post occurred to me as I was polishing off a pot of Yeo Valley non-fat plain yoghurt, upon which I noticed a graphic of a zipper imposed over the line along which one was to peel off the cardboard pot wrapper and recycle it.
Why imply a gesture of unzipping something, why not just leave the tidy tear lines with a phrase “cut along this line” or somesuch? Because a zipper is fun and simple and familiar. As are the shakes, pinches and waves of Safari and Wii. Because, via metaphor, they all harken back to fundamental concepts of interacting with our world that we’re surprised and delighted to find in an unsual place.
It was only this Valentine’s Day that I finally tried one of Dorie Greenspan’s recipes - her beautiful chocolate-dipped linzer hearts. They were fantastic, so I was chuffed that the Daring Bakers were taking on another one of Dorie’s recipes: the Perfect Party Cake, a multi-layered lemony affair slathered top to bottom with meringue buttercream.
I made the challenge last weekend, during one of the lousiest holiday weekends I’d had in a long time. We had both gotten sick, the weather was miserable and instead of enjoying the four days off, I spent them cooped up inside dousing myself with herbal teas and lemsips. Feeling sorry for myself, I was almost resigned to another challenge failure, especially as the cake recipe reminded me of another one I’d made recently that turned out waxy and thick and wretched.
But it all went beautifully smooth. The buttercream was silky and tart and the cake was nice and moist. I must say, the sponge and buttercream aren’t destined to exist separately - they are perfect when paired together. I only chickened out on slicing one of the layers. It had cracked during transfer and I didn’t want to deal further harm! The cake does also work best the day its made. After spending a night in the fridge it seemed a bit on the dry side.
I stuck to the instructions on this one, topping my cake with shredded coconut whizzed in the food processor with some lemon zest and vanilla. You can just about to see the pale yellow hue the coconut took on. Nice effect, I thought…. although one of my lovely coworkers thought it was covered in grated cheese, haha. A few more photos on Flickr.
