A busy week, entirely spent working on Dundry.

Dundry is an interaction prototype for BBC Knowledge & Learning. The goal is to bring something to life in just enough fidelity to get a feel for how it works – to feel the material of the product in our hands, to see what works and what doesn’t, and to leave it in a state that product owners and stakeholders can play with for a while once I’m done.

To that end, I worked on some wireframes and interaction design to understand the scope of the project – and now I’m both bringing those to life, and tweaking the design as I go, based on the understanding I get from using it.

I’ve made good progress, I think, though it’s a very intense process. I go on deep dives into tangled knots of D3, emerging a few hours later with marked progress, and a sore head from callbacks and closures. Needless to say, it’s really satisfying: full of the best kind of fiero. It’s also been heartening to already see some of the interactions I hoped would be satisfying turn out to be exactly that.

There’s also a degree of material understanding going on. There’s a lightweight Rails back-end, but most of these interactions are within the browser, and written in Javascript. To that end, I’ve been wrestling with the DOM event model.

For instance: one interaction involves highlighting an element when the mouse moves over it. This was working reasonably well, but would occasionally flicker as the mouse moved vertically. It turned out that whenever the mouse crossed a “cursor” line I was drawing (representing the X-position of the mouse), it would fire mouseout on the hovered element – because in the browser’s model, it had moved out of the hovered element and over the cursor. I could have left the flicker in, but this is a really central piece of the work, that someone’s going to interact with a lot. So I rewrote the code, checking to see which element the mouse’s co-ordinates resided within… rather than which element was firing mousemove events. Was that more work? Absolutely. Was it the right thing to do here? I think so. Even in a prototype, certain elements need more polish than others, to show that they’re what we’re looking at – and in this case, the hover interaction needed to be solid.

And then, having done some work like that, I zoom back out to the high level to see how the whole thing is fitting together, before diving back down to some fine-grained Javascript.

Like I said, most of the time, hugely satisfying.

In other project news, given that Steve Bowbrick has announced my involvement, it’s probably worth decloaking Firle as Radio 3’s Musical Map of Britain. A nice tight project, and I’m really glad the Breakfast Show team are so happy with it.

Next week: more deep hacking on Dundry, with a short detour to Cambridge to speak at Culture Hack East 2013 about Spirits Melted Into Air.