I started out using Balsamiq to mock up some screens. This tool is FANTASTIC for quickly pounding out an idea. It gets the point across very nicely and for a VERY reasonable price. After working on screen design and such for a couple weeks, though, I was wanting to satisfy a couple of different issues:
- Though it has a large canvas size, there is a limit to how much space you have within Balsamiq. This leads you to create a new diagram that houses your other screens. This leads to the second problem.
- When you have multiple diagrams, you lose the ability to easily visualize the navigation from one piece of functionality to another. This could be resolved by putting the images into a really nifty presentation tool like Prezi. This would work quite well… but now I’d have invested $150 CAD ($62 CAD for one year of use of Prezi + $85 CAD for the Balsamiq license). It’s starting to get pricey, but still do-able.
Since the target platform for the application was to be .NET, a mechanism for better porting the time investment into the mock ups into our target platform (WPF) would be advantageous. Also, demonstrating navigation within the application in a fluent manner was increasing in priority. WPF also offers the ability to think of user interfaces in a completely different way than was previously limiting with WinForms, SmartClient, or Web applications. I have been longing to be free from the limitation of building applications that are still constrained by the Windows 3.1-esque user interface for some time.
Balsamiq fell a little short in this area as you are somewhat constrained to using the controls of their library and mashing them up together if you want to demonstrate some out-of-the-box UX thinking. You currently aren’t able to import your own images to be able to put something together in a paint program and include it. These reasons left me searching for more out of my mock-up tool.
I started looking into the tooling within Expression Studio and found SketchFlow. This little gem has the same sketch-like look and feel of Balsamiq that enables users to not get too hung up on the implementation details and opens them up (more than a live mock-up but less than a cocktail napkin) to discussion how THEY want to use the system but with the portability to be able to move things into a more production screen (eliminating some waste), and the ability to live demo navigation. Some additional items that come with the tool are the ability to export the mock-ups into a word document (I don’t find this feature very useful, but more interesting) as well as the ability to have the user interact with the mock-up on their own and have them annotate your mock-ups and send the feedback to you. The comments can then be easily imported back into your project. Now THIS is a fantastic feature that captures communication, eliminates waste and potential loss of communicated intent. The cost is significantly more ($998.95 USD for Expression Studio 3 + Visual Studio Standard or $599.95 USD stand-alone. I already own Visual Studio Professional) but the savings and features made it worthwhile IMO.
To get started with the tool (and WPF), I started going through the Introduction to Prototyping with SketchFlow Starter Kit. It contains some good samples and videos to help get you started quickly. I also ordered the following books that have yet to be delivered:
- Programming WPF: Building Windows UI with Windows Presentation Foundation
- Foundation Expression Blend 2: Building Applications in WPF and Silverlight
- Microsoft Expression Blend Unleashed
I am quite excited to receive those resources and am really looking forward to starting a deep-dive into this technology.