September 28th, 2009
Boxes and Arrows: Sketchflow Time
Over the years, I’ve worked with some fabulous IA and UX folks. An old friend of mine, Chinmoy, in particular would do elaborate large format renderings in fine ink– they were practically works of art. Jack has sworn by Fireworks for clickable pixel perfect demos in the past, and other use special single purpose software to make complex working demos of software concepts. Which is all awesome, but frequently overkill for planning a simple microsite or getting client approvals on a content plan.
I usually go super rough on a whiteboard, particularly in the first stages of figuring out a game plan. Then this will get translated into a flat, low-fi illustrator document and emailed over to a client for discussion. These crude, but effective enough documents resemble something like this:
When we first heard about Silverlight 3, it was Sketchflow that got the oohs and ahhs around the office. If you haven’t seen it yet, Brad gives a pretty good overview of it at Brad’s Ramblings. It’s packed with features for developing fully animated prototypes, and should keep the UX community chattering awhile. Since it lives inside of Blend, all of the development power is there if you’re so inclined to get fancy, but I’m going to keep it fairly simple for now and simply try to replace my no-fi marker sketches with something slightly more polished.
The interface can be overwhelming, but it’s simple enough to create a custom workspace that only puts the tools you need onscreen. Here’s the basic setup:
The “boxes and arrows” live in the asset pile on the left. The Map at the bottom let’s you easily create new pages, and the main workspace lets you layout the page you’ve selected. (Tip: you can define the default SketchFlow page document size in the settings). You can safely ignore most of the rest of the app and use these core panels to get your simple IA projects underway.
A nice touch is the Sketchflow specific squiggly asset collection. While my chicken scratch is horrible (see figure a), spending too much time polishing results in infuriating conversations with all of the client stakeholders explaining that it’s not going to look like this, and no, the copy is not going to be in latin when the site goes live.
From this point on, it’s pretty intuitive to drag and drop your boxes around on the page. An advantage over Illustrator is that said boxes can have unique properties. If you grab the password box, it will give you a rectangular input box filled with obscured characters, the progress bar box lets you define the visible percentage (I assume if you are doing an animated walkthrough, it can be fully functional, but again, not necessary for my semi-flat low fi wires). And of course, the button boxes predictably enough act as buttons- click on them to rename them, and right/ctrl click them to tell them which page in the SketchFlow map they should carry the user to on a click. Easy enough to figure out without having to resort to documentation!
Finally, when you’ve got your pages comped up, a menu command will package it up into the Sketchflow Player, a silverlight-based webpage that lets users click through a functional demo, as well as leave their comments and feedback.
Pretty cool. Again, there are resources out there for the hardcore nerds that want to build detailed UX prototypes. But it’s simple enough to pickup the basics that even casual IA dabblers should think about giving it a spin instead of spitting PDFs out of Illustrator.