Thursday, April 15, 2010

wireframe storyboards

someone told me the other day, well, it was Chris actually, that they liked the wirefames I was working on because they told a good story. they're not the actual words he used, it was much more thoughful and pondering on the back foot than that, but that was the gist of it. either way, that comment resonated with me, if I allowed to use a word like resonate, or resonated, because it captured the essence of what the wireframes were about. I've produced wireframes many times in the past that do just describe the physical location of application elements and the specific interactions that are required to be supported. you know, like, 'this button can only have 2 words in it, it is next to the other button, and when a user presses it, the four horsemen of the apocalypse gallop over he horizon, which we will probably implement using AJAX'. that kind of thing. my preference, however, is to develop wireframes that do that, to a lesser extent, but are much more like storyboards that describe a sequence of events in a way that can be easily visualised. now, I'm not talking about a set of images that describes Avatar 2 - All Your Trees Are Belong To Us, but the storyboard metaphor works at a much simpler level where I can walk stakeholders through a visualisation of the key interactions, including detailed UI elements, that, I think, makes understanding the interactions and changes in state much easier to grok, if I'm allowed to say grok, which I just did, kind of out loud. they're closer to design comics than wireframes, except they have wireframes in them. but with speech bubbles.

it doesn't work for everyone. I'll work on these with interface designers and application developers who will undoubtedly need to understand exactly how I anticipated that left-hand tab device working when it appears, in my wireframes, to overlap the chrome, or something, and 'wanted a wireframe, not a bloody AHA video', but hopefully, providing the context within which the interface elements sit and the describing their interaction through the storyboards, it all makes more sense than just presenting a page with a static diagram on it and saying 'build that please'. I'll soon see.