Monday, April 9, 2012

UI Prototyping with Visual Studio 11 and PowerPoint

If you have ever had to do User Interface prototyping, prior to a few years ago, you were probably limited to using Microsoft Visio.  Unfortunately, Microsoft Visio does not ship with a very rich set of User Interface shapes/templates, so most User Interface prototyping done with Visio was primitive at best.

More recently, Microsoft released Sketchflow which shipped with the Expression Studio Ultimate suite.  This tool is much more sophisticated and has a far richer set of user controls for designing User Interfaces.  The prototypes can also be designed using Silverlight or WPF, so that the final designs can then be used directly in actual Silverlight or WPF projects.  Sketchflow even allows customers to comment on User Interface changes and allows those changes to be incorporated back into the original prototype.  Of course, the limiting factors with using this tool are that it ONLY ships with the Ultimate version of Expression Studio and it also requires a learning curve for adopting this new tool. 

Now enter Visual Studio 11 with PowerPoint Storyboarding.  PowerPoint is familiar to nearly every user who regularly uses Microsoft Office.  Unlike working with Sketchflow, which requires a separate reader application, every user's workstation will have a copy of Microsoft Office on their system thus making sharing these UI prototypes a no-brainer.  In addition, the user interface closely resembles the drag and drop interface found in Microsoft Visio, so the learning curve is negligible.

As you can see from the screenshot above, PowerPoint Storyboarding has simply added a new tab called Storyboarding to my installation of PowerPoint 2010.  In addition, the list of shapes for composing a User Interface are quite vast.  The controls vary from including a number of backgrounds ranging from Visual Studio to SharePoint to even Metro applications.  The controls for prototyping actual interfaces includes a large number of common UI Controls which can be used in Web or client-server applications as well as Windows-specific controls.  There are also controls for Windows Phone and Metro applications.

Overall, this new feature is a welcome addition to the Visual Studio suite.  For many years, developers have been frustrated with the poor tooling for prototyping User Interfaces.  The introduction of Sketchflow and its limited licensing model continued to make this option unavailable to many development teams and organizations.  However, the introduction of PowerPoint Storyboarding should make the adoption of fast and easy UI prototyping widespread across .Net development teams.

You can read more about PowerPoint Storyboarding here:

In addition, if you search Visual Studio Gallery ( for "storyboard", you can find numerous Visual Studio extensions released by Microsoft and other vendors to support Visual Studio 11/2012 Storyboarding.


1 comment: