How many times have you needed to present visual concepts behind your application to a client?
Over the years, I’ve had several times where I had to build a quick mock-up in Visual FoxPro to show how an application or function might run. Designing the screens themselves weren’t the challenge – the challenge was showing the user how the application would flow between different areas. Short of putting fake code into buttons or saying “and now we go here”, there really hasn’t been an easy way to do this.
Now, sometimes, a client has gone so far as to hire someone to build “wireframes” to depict this. I found this process an entire waste of time. People building wireframes tend to be “business analysts”, in short; people who have stopped learning how to develop code but still want to show their value by being the translator between the client and the developer. As far as I’m concerned, if you want to be a senior developer, you need to be able to translate as well. Sure, you may leave the task to other developers, but you should always be able to demonstrate or show your ideas to others.
I recently had the experience where I had to show some user interface concepts on a new application. I was interested in trying out Expression Blend, one of Microsoft’s tools found in the Expression Studio but also one of the integration tools noted in Visual Studio 2010. While it specifically targets WPF or Silverlight application development, I found the SketchFlow tool invaluable.
Expression Blend uses XAML to build the user interface. So, if you’re not building a XAML application, you’ll need to convert this over. However, the key benefit is the little “map” section at the bottom of the screen in the designer.
With the map section, you can build the entire work-flow for the interface. By right-clicking on the main page, you can create a connected page.
Since the tools available in Expression Blend are based on regular developer tools, it’s easy to build a sample representation of your application in minutes. If you are using WPF as your development platform, you can also convert it into a production environment or share your existing components (with code behind it) in your prototype. This is similar to building a true development prototype using existing code or components.
When you “run” the prototype, all of your connections appear in a menu on the left side. To move to another page, you click the related page OR you can use the map below to show the navigation.
The best part, however, of SketchFlow is the SketchFlow player. Expression lets you “package” the entire solution into a single executable that runs with the navigation menu. Now the user can run this prototype on their own. There are also tools to let them add their own feedback and then send it to you via e-mail. This can make remote prototyping much easier than it already is.
Added bonus features:
1. You can take a larger part of the screen that you are working on and instantly create a “user component” for it, so it can be re-used with other pages. Drag and drop the user component in the map onto another page and it will put an instance of that object on that page.
2. You can add annotations to individual pages and components on the screen. These annotations can pop-up for your users so they can see your comments.
3. Sketchflow has a “style” from which you can create the look and feel of “wireframes”, instead of the real look of controls. This makes the entire application have that real “prototype” look to it, so your clients don’t think it’s easy to move from prototype to production.
4. You can also add real “animations” within the application so when users click a button, a dialog can appear or an object can “move” on the page.
Many developers push off Expression as being the “designer” tool or look at Expression Web simply being the “new” FrontPage – but it’s definitely more than that.
If you’re a “coding” developer, it may not be for you – but the next time you have to show interface concepts to a user, you definitely want to be looking at Expression Blend and SketchFlow.
Expression with Sketchflow has been around since Expression 3.0 so if you have MSDN from the past year (2009), you already have access to it.
Other useful links: